JS中常用的数组迭代方法(filter,forEach,map,every,some,find,findIndex)

简介: 这段代码和说明介绍了JavaScript中数组的一些常用方法。函数接收三个参数:`item`(数组项的值)、`index`(项的位置,可选)和`array`(数组本身,可选)。示例展示了如何使用`filter()`过滤非空项、`forEach()`遍历数组、`map()`处理并返回新数组、`every()`检查所有元素是否满足条件、`some()`检查是否存在满足条件的元素、`find()`获取首个符合条件的元素值以及`findIndex()`获取其索引位置。这些方法都不会修改原数组。

传入这些方法中的函数均会接收3个参数:

Ⅰ.item(必须):数组项的值

Ⅱ.index(可选):该项在数组中的位置

Ⅲ.array(可选):数组对象本身

var typeKey = [0, 1, 2, 3, '']

①**filter()**:返回该函数会返回true的项组成的数组(常用于过滤空数组项

typeKey= typeKey.filter(item => {

return item !== ''

})

console.log('typeKey:', typeKey) // [0, 1, 2, 3]

②**forEach()**:对数组每一项执行一遍回调函数,没有返回值

typeKey**.**forEach(item => {

if (item) {

    console.log(item)

}

})

③**map()**:返回每次函数调用的结果组成的数组(常用于处理数组项

map() 方法:

1.返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

2.按照原始数组元素顺序依次处理元素。

注意: map() 不会对空数组进行检测。

注意: map() 不会改变原始数组。

var result = typeKey**.**map(item => {

if (item) {

    return 1

} else {

    return 0

}

})

console.log('result:', result) // [0, 1, 1, 1, 0]

按条件删除数组某些的对象中的某些字段

this.types.map(item => {

**if (item.value === '2') {**

     **return delete item.value**

**} else {**

    **return item**

**}**

})

console.log('types:', this.types)

④**every()**:用于检测数组所有元素是否都符合指定条件(通过函数提供)。

every() 方法使用指定函数检测数组中的所有元素:

  • 如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。
  • 如果所有元素都满足条件,则返回 true。

注意: every() 不会对空数组进行检测。

注意: every() 不会改变原始数组。

语法:array.every(function(currentValue,index,arr), thisValue)

var result = typeKey.every((item, index, array) => {

return item>2

}) // 数组所有项均大于2,即都返回true,则最后返回true

var result = typeKey.every(item => item > 2)

console.log('result:', result) // false

⑤**some()**:用于检测数组中的元素是否满足指定条件(函数提供)

some() 方法会依次执行数组的每个元素:

  • 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
  • 如果没有满足条件的元素,则返回false。

注意: some() 不会对空数组进行检测。

注意: some() 不会改变原始数组。

语法:array.some(function(currentValue,index,arr),thisValue)

var result = typeKey.some((item, index, array) => {

return item>2

}) // 数组存在大于2的项,则最后返回true

var result = typeKey.some(item => item > 2)

console.log('result:', result) // true

⑥find():返回通过测试(函数内判断)的数组的第一个元素的值

find() 方法为数组中的每个元素都调用一次函数执行:

  • 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。
  • 如果没有符合条件的元素返回 undefined

注意: find() 对于空数组,函数是不会执行的。

注意: find() 并没有改变数组的原始值。

语法:array.find(function(currentValue, index, arr),thisValue)

var types = [

{

    name: '单选题',

    value: 1

},

{

    name: '多选题',

     value: 2

},

{

    name: '判断题',

    value: 3

}

]

var result = types.find(item => item.value === 3)

console.log('result:', result)

⑦**findIndex()**:返回传入一个测试条件(函数)符合条件的数组第一个元素位置。

findIndex() 方法为数组中的每个元素都调用一次函数执行:

  • 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。
  • 如果没有符合条件的元素返回 -1

注意: findIndex() 对于空数组,函数是不会执行的。

注意: findIndex() 并没有改变数组的原始值。

语法:array.findIndex(function(currentValue, index, arr), thisValue)

var types = [

{

    name: '单选题',

    value: 1

},

{

    name: '多选题',

    value: 2

},

{

    name: '判断题',

    value: 3

}

]

var result = types.find**Index**(item => item.value === 3)

console.log('result:', result) // 索引:2

相关文章
|
29天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
27天前
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
122 52
|
29天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
41 5
|
1月前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
26 1
|
1月前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
41 7
|
6月前
|
Dart
Dart之集合详解(List、Set、Map)
Dart之集合详解(List、Set、Map)
|
3月前
|
Go 定位技术 索引
Go 语言Map(集合) | 19
Go 语言Map(集合) | 19
|
3月前
|
存储 前端开发 API
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
该文章详细介绍了ES6中Set和Map数据结构的特性和使用方法,并探讨了它们在前端开发中的具体应用,包括如何利用这些数据结构来解决常见的编程问题。
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
|
4月前
|
存储 安全 Java
java集合框架复习----(4)Map、List、set
这篇文章是Java集合框架的复习总结,重点介绍了Map集合的特点和HashMap的使用,以及Collections工具类的使用示例,同时回顾了List、Set和Map集合的概念和特点,以及Collection工具类的作用。
java集合框架复习----(4)Map、List、set
|
4月前
|
Java
【Java集合类面试二十二】、Map和Set有什么区别?
该CSDN博客文章讨论了Map和Set的区别,但提供的内容摘要并未直接解释这两种集合类型的差异。通常,Map是一种键值对集合,提供通过键快速检索值的能力,而Set是一个不允许重复元素的集合。