js|js 数组常用的遍历方法总结
forEach()
语法:
arr.forEach(callback(currentValue [, index [, array]])[, thisArg])
-
callback
: 为数组中每个元素执行的函数,该函数接收一至三个参数:-
currentValue
数组中正在处理的当前元素。 -
index
数组中正在处理的当前元素的索引。 -
array
forEach() 方法正在操作的数组。
-
-
thisArg
可选参数。当执行回调函数 callback 时,用作 this 的值。 - 返回值:
undefined
(没有返回值)
- forEach() 遍历的范围在第一次调用 callback 前就会确定。调用 forEach 后添加到数组中的项不会被 callback 访问到。如果已经存在的值被改变,则传递给 callback 的值是 forEach() 遍历到他们那一刻的值。已删除的项不会被遍历到。如果已访问的元素在迭代时被删除了(例如使用 shift()),之后的元素将被跳过
- forEach() 为每个数组元素执行一次 callback 函数;
- 总会返回undefined值(不反回新的数组)
- forEach() 被调用时,不会改变原数组,也就是调用它的数组(尽管 callback 函数在被调用时可能会改变原数组)。
- 除了抛出异常以外,没有办法中止或跳出 forEach() 循环。如果你需要中止或跳出循环,forEach() 方法不是应当使用的工具。
let arr = ['one', 'two', 'three'];
arr.forEach((item, index, array) => {
console.log(`数组中正在处理的当前元素: ${item}`)
console.log(`数组中正在处理的当前元素的索引: ${index}`)
console.log(`forEach() 方法正在操作的数组:${array}`)
})
map()
语法:
var new_array = arr.map(callback(currentValue[, index[, array]]) {
Return element for new_array
}[, thisArg])
-
callback
为数组中每个元素执行的函数,该函数接收一至三个参数:-
currentValue
数组中正在处理的当前元素。 -
index
数组中正在处理的当前元素的索引。 -
array
调用了 map() 的数组本身。
-
-
thisArg
可选参数。当执行回调函数 callback 时,用作 this 的值。 - 返回值:一个新的数组
- map 方法处理数组元素的范围是在 callback 方法第一次调用之前就已经确定了。调用map方法之后追加的数组元素不会被callback访问。如果存在的数组元素改变了,那么传给callback的值是map访问该元素时的值。在map函数调用后但在访问该元素前,该元素被删除的话,则无法被访问到。
- map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值(包括 undefined)组合起来形成一个新数组。 callback 函数只会在有值的索引上被调用;那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。
- map 不修改调用它的原数组本身(当然可以在 callback 执行时改变原数组)
- 调用后会返回一个新的数组
let arr = [1, 2, 3, 4, 5];
let newArr = arr.map((item, index, array) => item * 10);
console.log(arr)//[1, 2, 3, 4, 5]
console.log(newArr)//[10, 20, 30, 40, 50]
filter() 过滤器
语法:
var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
-
callback
为数组中每个元素执行的函数,该函数接收一至三个参数:-
element
数组中正在处理的当前元素。 -
index
数组中正在处理的当前元素的索引。 -
array
调用了 filter() 的数组本身。
-
-
thisArg
可选参数。当执行回调函数 callback 时,用作 this 的值。 - 返回值:一个新的数组
- filter 为数组中的每个元素调用一次 callback 函数,并利用所有使得 callback 返回 true 或等价于 true 的值的元素创建一个新数组。callback 只会在已经赋值的索引上被调用,对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过 callback 测试的元素会被跳过,不会被包含在新数组中
- filter 不会改变原数组,它返回过滤后的新数组。
- filter 遍历的元素范围在第一次调用 callback 之前就已经确定了。在调用 filter 之后被添加到数组中的元素不会被 filter 遍历到。如果已经存在的元素被改变了,则他们传入 callback 的值是 filter 遍历到它们那一刻的值。被删除或从来未被赋值的元素不会被遍历到。
let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let newArr = arr.filter((item, index, aray) => item % 2 == 0);
console.log(arr)//[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(newArr)//[0, 2, 4, 6, 8, 10]
every()
语法:
arr.every(callback(element[, index[, array]])[, thisArg])
-
callback
为数组中每个元素执行的函数,该函数接收一至三个参数:-
element
数组中正在处理的当前元素。 -
index
数组中正在处理的当前元素的索引。 -
array
调用 every() 的当前数组。
-
-
thisArg
可选参数。当执行回调函数 callback 时,用作 this 的值。 - 返回值:如果回调函数的每一次返回都为 真值,返回 true ,否则返回 false。
- every 方法为数组中的每个元素执行一次 callback 函数,直到它找到一个会使 callback 返回 falsy 的元素。如果发现了一个这样的元素,every 方法将会立即返回 false。否则,callback 为每一个元素返回 true,every 就会返回 true。callback 只会为那些已经被赋值的索引调用。不会为那些被删除或从未被赋值的索引调用。
- every 不会改变原数组。
- every 遍历的元素范围在第一次调用 callback 之前就已确定了。在调用 every 之后添加到数组中的元素不会被 callback 访问到。如果数组中存在的元素被更改,则他们传入 callback 的值是 every 访问到他们那一刻的值。那些被删除的元素或从来未被赋值的元素将不会被访问到
- every 和数学中的"所有"类似,当所有的元素都符合条件才会返回true。正因如此,若传入一个空数组,无论如何都会返回 true。(这种情况属于无条件正确:正因为一个空集合没有元素,所以它其中的所有元素都符合给定的条件。)
let arr = [0, 1, 2, 3, 4, 5, 6]
console.log(arr.every((item, index, array) => item >= 0))
//如果都大于等于0 返回true 只要有一个小于0就返回false
some()
语法:
arr.some(callback(element[, index[, array]])[, thisArg])
-
callback
为数组中每个元素执行的函数,该函数接收一至三个参数:-
element
数组中正在处理的当前元素。 -
index
数组中正在处理的当前元素的索引。 -
array
some()被调用的数组。
-
-
thisArg
可选参数。当执行回调函数 callback 时,用作 this 的值。 - 返回值:数组中有至少一个元素通过回调函数的测试就会返回true;所有元素都没有通过回调函数的测试返回值才会为false。
- some() 为数组中的每一个元素执行一次 callback 函数,直到找到一个使得 callback 返回一个“真值”(即可转换为布尔值 true 的值)。如果找到了这样一个值,some() 将会立即返回 true。否则,some() 返回 false。callback 只会在那些”有值“的索引上被调用,不会在那些被删除或从来未被赋值的索引上调用。
- some() 被调用时不会改变数组。
- 数组中有至少一个元素通过回调函数的测试就会返回true;所有元素都没有通过回调函数的测试返回值才会为false。
- some() 遍历的元素的范围在第一次调用 callback. 前就已经确定了。在调用 some() 后被添加到数组中的值不会被 callback 访问到。如果数组中存在且还未被访问到的元素被 callback 改变了,则其传递给 callback 的值是 some() 访问到它那一刻的值。已经被删除的元素不会被访问到。
let arr = [0, 1, 2, 3, 4, 5, 6]
console.log(arr.some((item, index, array) => item >= 6))
//只要数组中有一项满足回调函数中设置的条件就返回true;
reduce() 叠加器
语法:
arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
-
callback
为数组中每个元素执行的函数,该函数接收一至三个参数:-
accumulator
累计器累计回调的返回值; 它是上一次调用回调时返回的累积值。 -
currentValue
数组中正在处理的元素。 -
index
数组中正在处理的当前元素的索引。 如果提供了initialValue,则起始 索引号为0,否则从索引1起始。 -
array
some()被调用的数组。
-
-
initialValue
可选参数。作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值,则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。 - 返回值:函数累计处理的结果
- 回调函数第一次执行时,accumulator 和currentValue的取值有两种情况:如果调用reduce()时提供了initialValue,accumulator取值为initialValue,currentValue取数组中的第一个值;如果没有提供 initialValue,那么accumulator取数组中的第一个值,currentValue取数组中的第二个值。
- 如果没有提供initialValue,reduce 会从索引1的地方开始执行 callback 方法,跳过第一个索引。如果提供initialValue,从索引0开始。
- 如果数组为空且没有提供initialValue,会抛出TypeError 。如果数组仅有一个元素(无论位置如何)并且没有提供initialValue, 或者有提供initialValue但是数组为空,那么此唯一值将被返回并且callback不会被执行。
- 提供初始值通常更安全
- reduce() 被调用时不会改变数组。
let goodsList = [
{
id: 0,
goods_name: '商品1', //商品名
goods_num: 1, //商品数量
goods_much: 300 //商品价格
},
{
id: 1,
goods_name: '商品2',
goods_num: 2,
goods_much: 15
},
{
id: 2,
goods_name: '商品3',
goods_num: 3,
goods_much: 10
},
{
id: 3,
goods_name: '商品4',
goods_num: 1,
goods_much: 100
},
{
id: 4,
goods_name: '商品5',
goods_num: 1,
goods_much: 20
},
]
let delivery = 3;
//配送费
let sum = goodsList.reduce((acc, item) => acc + item.goods_num * item.goods_much, delivery);
console.log(`商品总额加配送费一共:${sum}元`)//商品总额加配送费一共:483元
find()
语法:
arr.find(callback(element[, index[, array]]), thisArg)
-
callback
为数组中每个元素执行的函数,该函数接收一至三个参数:-
element
数组中正在处理的当前元素。 -
index
数组中正在处理的当前元素的索引。 -
array
数组本身。
-
-
thisArg
可选参数。当执行回调函数 callback 时,用作 this 的值。 - 返回值:数组中第一个满足所提供测试函数的元素的值,否则返回 undefined。
- find方法对数组中的每一项元素执行一次 callback 函数,直至有一个 callback 返回 true。当找到了这样一个元素后,该方法会立即返回这个元素的值,否则返回 undefined。
- 注意 callback 函数会为数组中的每个索引调用即从 0 到 length - 1,而不仅仅是那些被赋值的索引,这意味着对于稀疏数组来说,该方法的效率要低于那些只遍历有值的索引的方法。
- find方法不会改变数组。
- 在第一次调用 callback函数时会确定元素的索引范围,因此在 find方法开始执行之后添加到数组的新元素将不会被 callback函数访问到。如果数组中一个尚未被callback函数访问到的元素的值被callback函数所改变,那么当callback函数访问到它时,它的值是将是根据它在数组中的索引所访问到的当前值。被删除的元素仍旧会被访问到,但是其值已经是undefined了。
let arr = [
{ x: 1 },
{ x: 2 },
{ x: 3 },
{ x: 4 }
]
let obj = arr.find(item => item.x == 2)
console.log(obj)//{x: 2}
推荐阅读
- 昨夜小楼听风
- 为什么你的路演总会超时()
- 深入理解Go之generate
- 遗憾是生活的常态,但孝顺这件事,我希望每一个人都不留遗憾
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 唱歌教学(导致嗓音损坏的几个常见的错误唱歌方法!)
- 迷茫是人生常态
- Hive常见问题汇总
- 数组常用方法一
- 【原创】君子之心,常怀敬畏