首页 > 其他分享 >js数组实例方法:forEach,includes,indexOf

js数组实例方法:forEach,includes,indexOf

时间:2025-01-03 19:00:17浏览次数:6  
标签:searchElement indexOf fromIndex len includes length forEach 数组 prototype

Array.prototype.forEach()

  • forEach() 方法对数组的每个元素执行一次给定的函数
  • 语法
    • forEach(callbackFn)
    • forEach(callbackFn, thisArg)
  • 参数
    • callbackFn
      • element:数组中正在处理的当前元素
      • index:数组中正在处理的当前元素的索引
      • array:调用了 forEach() 的数组本身
    • thisArg:执行 callbackFn 时用作 this 的值
  • 返回值:undefined
  • Array.prototype.myForEach
Array.prototype.myForEach = function (callbackFn, thisArg) {
  if (typeof callbackFn !== 'function') {
    throw new TypeError(`${typeof callbackFn} is not a function`)
  }
  const len = this.length
  for (let i = 0; i < len; i++) {
    // 稀疏数组中空槽不进行处理
    if (this.hasOwnProperty(i)) {
      // 不能提前终止函数 不支持异步函数
      callbackFn.call(thisArg, this[i], i, this)
    }
  }
}

Array.prototype.includes()

  • includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回 false
  • 语法
    • includes(searchElement)
    • includes(searchElement, fromIndex)
  • 参数
    • searchElement:需要查找的值
    • fromIndex:开始搜索的索引(从零开始),会转换为整数
      • 负索引从数组末尾开始计数——如果 fromIndex < 0,那么实际使用的是 fromIndex + array.length。然而在这种情况下,数组仍然从前往后进行搜索
      • 如果 fromIndex < -array.length 或者省略 fromIndex,则使用 0,这将导致整个数组被搜索
      • 如果 fromIndex >= array.length,则不会搜索数组并返回 false
  • 返回值:一个布尔值,如果在数组中(或者在 fromIndex 所指示的数组部分中,如果指定 fromIndex 的话)找到 searchElement 值,则该值为 true
  • Array.prototype.myIncludes
Array.prototype.myIncludes = function (searchElement, fromIndex) {
  let len = this.length
  switch (true) {
    case fromIndex > -len && fromIndex < 0:
      fromIndex = fromIndex + len
      break
    case fromIndex < -len || fromIndex === undefined:
      fromIndex = 0
      break
  }
  let i = fromIndex
  while (i < len) {
    if (
      this[i] === searchElement ||
      (Number.isNaN(this[i]) && Number.isNaN(searchElement))
    ) {
      return true
    }
    i++
  }
  return false
}

Array.prototype.indexOf()

  • indexOf() 方法返回数组中第一次出现给定元素的下标,如果不存在则返回 -1
  • 语法
    • indexOf(searchElement)
    • indexOf(searchElement, fromIndex)
  • 参数
    • searchElement:数组中要查找的元素
    • fromIndex:开始搜索的索引(从零开始),会转换为整数
      • 负索引从数组末尾开始计数——如果 fromIndex < 0,那么实际使用的是 fromIndex + array.length。然而在这种情况下,数组仍然从前往后进行搜索。
      • 如果 fromIndex < -array.length 或者省略 fromIndex,则使用 0,这将导致整个数组被搜索。
      • 如果 fromIndex >= array.length,则不会搜索数组并返回 -1
  • 返回值:首个被找到的元素在数组中的索引位置; 若没有找到则返回 -1
  • Array.prototype.myIndexOf
Array.prototype.myIndexOf = function (searchElement, fromIndex) {
  const len = this.length
  // 如果fromIndex在-len到0之间,使用fromIndex+len作为fromIndex
  // 如果fromIndex小于-len或者fromIndex为undefined,则使用0作为fromIndex
  switch (true) {
    case fromIndex < 0 && fromIndex >= -len:
      fromIndex = len + fromIndex
      break
    case fromIndex < -len || fromIndex === undefined:
      fromIndex = 0
      break
  }

  while (fromIndex < len) {
    if (this.hasOwnProperty(fromIndex) && this[fromIndex] === searchElement) {
      return fromIndex
    }
    fromIndex++
  }
  return -1
}

标签:searchElement,indexOf,fromIndex,len,includes,length,forEach,数组,prototype
From: https://www.cnblogs.com/shenhf/p/18650773

相关文章

  • LazyForEach:数据渲染详解
    一、LazyForEach初印象在当今的移动应用与Web开发领域,数据处理效率和性能优化是至关重要的话题。当面对大量数据需要展示时,如何既能保证流畅的用户体验,又能避免资源的过度消耗呢?这时候,LazyForEach就如同一位“智能管家”闪亮登场。LazyForEach是一种用于实现数据懒加......
  • Parallel.ForEach与for与foreach效率问题
    做到物流分拣项目,处理格口数据报警状态问题,使用了并行Parallel.ForEach。后面做了下几个循环的效率,也记录了一下;  循环体内不做任何事情时,发现Parallel.ForEach更耗时。Parallel.ForEach不是并行的吗,怎么会更耗时呢?颠覆了认知。。。。别急:这是因为循环体内执行的任务开销太......
  • js Map结构,forEach可以进行遍历,普通for循环为什么不进入执行?
    在JavaScript中,Map是一个键值对集合,它允许你使用任何类型作为键(不仅仅是字符串或符号)。Map对象提供了多种方法来遍历和操作键值对,包括forEach方法。forEach方法是Map对象内置的,它允许你传入一个回调函数来遍历Map中的每个元素。这个方法会自动遍历Map并调用你提供的函......
  • 使用js实现一个与数组的forEach函数一样功能的函数
    在JavaScript中,forEach函数是Array的内置方法,用于遍历数组的每个元素并执行提供的函数。但是,如果你想自己实现一个与forEach功能相同的函数,可以这样做:functionmyForEach(array,callback,thisArg){//检查数组是否为数组类型,如果不是则抛出错误if(!Array.isArray(a......
  • 请解释下`[1,2,3,4,5].indexOf('3')`的结果
    在JavaScript中,indexOf方法用于查找数组中某个元素的第一个匹配项,并返回其索引。如果没有找到该元素,则返回-1。但是,重要的是要注意indexOf在比较时是基于严格相等性(===)的。这意味着它不仅比较值,还比较值的类型。在你给出的例子中:[1,2,3,4,5].indexOf('3')你正在尝试......
  • HarmonyOs DevEco studio小技巧39--LazyForEach:性能优化与懒加载
    在鸿蒙系统的应用开发中,LazyForEach是一个极为重要的工具,它在处理列表数据展示等场景时展现出独特的性能优化和懒加载特性,为应用开发带来诸多显著优势。一、LazyForEach在鸿蒙中的优势(一)高效的内存管理在处理大量数据时,传统的组件渲染方式可能会一次性创建所有数据对应的......
  • 【openGauss】Java层传参到openGauss使用拼接字符串拆分为数组方案解决in中用foreach
    【openGauss】Java层传参到openGauss使用拼接字符串拆分为数组方案解决in中用foreach拼接的32767限制一、sql格式二、使用说明三、测试四、SQL解析五、其他说明一、sql格式比如delete:DELETEFROM表名WHERE主键ID字段=any(string_to_array(#{fieldList,jdb......
  • HarmonyOS应用开发--LazyForeach懒加载
    引言在鸿蒙应用开发中,ArkTS(ArkTypeScript)作为开发语言,提供了丰富的API来构建高效、流畅的应用程序。其中,LazyForeach作为一种懒加载技术,对于优化性能和提升用户体验具有重要作用。本文将对LazyForeach懒加载进行深入学习总结。ArkTS简介ArkTS是基于TypeScript的开发语言,专......
  • 鸿蒙Next数据懒加载LazyForEach用法总结
    在鸿蒙Next开发中,LazyForEach提供了高效的数据懒加载机制,适用于处理大量数据的列表展示等场景,可有效提升性能和内存管理。以下是其详细用法总结。一、使用限制容器组件要求:必须在特定容器组件(List、Grid、Swiper、WaterFlow)内使用,且这些组件支持配置cachedCount属性实现按需加......
  • 鸿蒙Next循环渲染ForEach用法总结
    在鸿蒙Next开发中,ForEach接口用于循环渲染数组类型数据,与容器组件配合使用,可高效构建动态列表等UI元素。以下是ForEach用法的详细总结。一、键值生成规则系统默认规则:若开发者未定义keyGenerator函数,ArkUI框架使用默认函数(item:Object,index:number)=>{returnindex+'......