数组方法
数组方法1、forEach()2、map()3、filter()4、every()、 some()5、reduce() 总结
1、forEach()
Javascript数组forEach()方法为数组中的每个元素调用一个函数。
let arr6 = ['a', 'b', 'c', 'd'];
arr6.forEach(function(item, index, array){
console.log(item);//数组元素
console.log(index);//元素索引
console.log(array);//原数组本身
});
得到一下结果:
2、map()
Javascript数组map()方法创建一个新数组,其结果是在此数组中的每个元素上调用提供的函数。
**map
方法会给原数组中的每个元素都按顺序调用一次 callbackFn
函数。**
callbackFn
每次执行后的返回值(包括 undefined
)组合起来形成一个新数组。
因为 map
生成一个新数组,当你不打算使用返回的新数组却使用 map
是违背设计初衷的,请用 forEach
或者 for-of
替代。
如果有以下情形,则不该使用 map
:
-
你不打算使用返回的新数组;或
-
你没有从回调函数中返回值。
callbackFn
函数会被自动传入三个参数:数组元素,元素索引,原数组本身。
let arr7 = [1, 2, 3];
let new_arr7 = arr7.map(function(item, index, array) {
return item * item
})
console.log(new_arr7)
console.log(arr7);// 并未改变原数组(比较forEach)
const numbers = [1, 4, 9];
const roots = numbers.map(function(数组元素,元素索引,原数组本身){
return item * item
});
// roots 现在是 [1, 2, 3]
// numbers 依旧是 [1, 4, 9]
尝试下面的代码:
map()函数也称映射,将对应的元素按顺序执行callbackFn回调函数,再将这些新产生的新元素组成一个新数组。
因为
map
生成一个新数组,当你不打算使用返回的新数组却使用map
是违背设计初衷的,请用forEach
或者for-of
替代。大概意思就是如果你不需要对新元素操作,你就用不到该函数。
3、filter()
filter()
方法创建给定数组一部分的浅拷贝,其包含通过所提供函数实现的测试的所有元素。(过滤筛选)
filter()
为数组中的每个元素调用一次 callbackFn
函数,并利用所有使得 callbackFn
返回 true的元素创建一个新数组。
callbackFn
被调用时传入三个参数:
-
元素的值
-
元素的索引
-
被遍历的数组本身
filter()
不会改变原数组。(同map)
function isBigEnough(value) {
return value >= 10;
}
const filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]
let arr8 = [
{
name:'a',
height: 177
},
{
name: 'b',
height: 188
},
{
name: 'c',
height: 181
}
]
let higher = arr8.filter(function(i){
return i.height > 180
})
console.log(higher);
find()找到目标元素并返回的是目标元素。只找到,不找全。
4、every()、 some()
every()
方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。
some()
方法测试数组中是不是至少有 1 个元素通过了被提供的函数测试。它返回的是一个 Boolean 类型的值。
两个都返回布尔值。
every()每一个元素都满足条件true。
some()只要有一个元素满足条件true。
5、reduce()
reduce()
方法对数组中的每个元素按序执行一个由您提供的 reducer 函数(回调函数),每一次运行 reducer 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值。
第一次执行回调函数时,不存在“上一次的计算结果”。如果需要回调函数从数组索引为 0 的元素开始执行,则需要传递初始值。否则,数组索引为 0 的元素将被作为初始值。所以如果你不给一个初始值,那么index将从1开始,而不是从0。
-
callbackFn
一个“reducer”函数,包含四个参数:
previousValue
:上一次调用callbackFn
时的返回值。在第一次调用时,若指定了初始值
initialValue
,其值则为initialValue
,否则为数组索引为 0 的元素array[0]
。就是函数执行一次后的结果值,第一次没执行采用的结果就是你一开始给的初始值。
currentValue
:数组中正在处理的元素。在第一次调用时,若指定了初始值
initialValue
,其值则为数组索引为 0 的元素array[0]
,否则为array[1]
。currentIndex
:数组中正在处理的元素的索引。若指定了初始值
initialValue
,则起始索引号为 0,否则从索引 1 起始。array
:用于遍历的数组。 -
initialValue
可选作为第一次调用
callback
函数时参数 previousValue 的值。若指定了初始值initialValue
,则currentValue
则将使用数组第一个元素;否则previousValue
将使用数组第一个元素,而currentValue
将使用数组第二个元素。
// Array.ruduce(function(previousValue, currentValue,currentIndex){},initialValue)
// 和前面差不多: Array.ruduce(function(previousValue, item,index){ },initialValue)
//ruduce()本身两个参数,第二个参数可选。第一个参数即回调函数里,又有三个参数。
let sum = [1, 2, 3].reduce(function (previousValue, currentValue) {
return previousValue + currentValue
}, 0)
// sum is 6
//初始previousValue是0。函数每一次执行都会把结果保存给previousValue,然后去和currentValue相加。
总结
到此至少掌握:
-
forEach()、map()。
-
这几个回调函数的参数类似