1.forEach()
2.map()
3.filter()
4.find()
5.findIndex()
6.reduce()
7.every()
8.some()
9.includes()
10.数组的空位
本文涵盖ES5,ES6中常用的数组实例,并不单纯的是ES6语法
1.forEach()
forEach() 方法指定数组的每项元素都执行一次传入的函数,返回值为undefined。
语法:arr.forEach(fn, thisArg);
fn表示在数组每一项上执行的函数function(value, index, array),接受三个参数:
value 当前正在被处理的元素的值
index 当前元素的数组索引
array 数组本身
thisArg可选,用来当做fn函数内的this对象。
forEach
将为数组中每一项执行一次 fn 函数,那些已删除,新增或者从未赋值的项将被跳过(但不包括值为 undefined
的项)。
var array = [1, 3,undefined,null, 5];
var obj = {name:'cc'};
var sReturn = array.forEach(function(value, index, array){
array[index] = value * value;
console.log(this.name); // cc被打印了三次
},obj);
console.log(array); // [1, 9, NaN, 0, 25], 可见原数组改变了
console.log(sReturn); // undefined, 可见返回值为undefined
注意:
forEach
无法直接退出循环,只能使用return
来达到for
循环中continue
的效果,并且forEach
不能在低版本IE(6~8)中使用
2.map()
map()
方法遍历数组,使用传入函数处理每个元素,并返回函数的返回值组成的新数组(可理解为将数组的每个元素映射成指定的形式,新数组的长度与原数组相同)。
语法:arr.map(fn, thisArg) fn和thisArg同forEach()
var arr = [1,2,3,4];
var newArr = arr.map((value,index,array) => {
return value*10 //新数组为10,20,30,40
})
console.log('newArr',newArr); // [10, 20, 30, 40]
//map遍历数组,返回一个新数组,不改变原数组的值。
3.filter()
filter()
方法使用传入的函数测试所有元素,并返回所有通过测试的元素组成的新数组。它就好比一个过滤器,筛掉不符合条件的元素。
语法:arr.filter(fn, thisArg)
var arr = [1,2,3,4];
arr.filter((value,index,array) => {
return value > 2 //新数组为[3,4]
})
//filter过滤掉数组中不满足条件的值,返回一个新数组,不改变原数组的值。
4.find()
数组实例的find
方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true
的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined
。
语法:arr.find(fn,thisArg)
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) // 10
上面代码中,find
方法的回调函数可以接受三个参数,依次为当前的值、当前的位置和原数组。
5.findIndex()
findIndex
方法的用法与find
方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1
。
[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}) // 2
6.reduce()
reduce()
方法接收一个方法作为累加器,数组中的每个值(从左至右) 开始合并,最终为一个值。
语法:arr.reduce(fn, initialValue)
fn 表示在数组每一项上执行的函数,接受四个参数:
previousValue 上一次调用回调返回的值,或者是提供的初始值
value 数组中当前被处理元素的值
index 当前元素在数组中的索引
array 数组自身
var arr = [1,2,3,4];
arr.reduce((previousValue,value,index,array) => {
console.log(previousValue) // 1 3 6 previousValue为上次一计算的结果
console.log(value) // 2 3 4
console.log(index) // 1 2 3
return previousValue+value //最终结果为10
})
//reduce 让数组的前后两项进行某种计算。然后返回其值,并继续计算。
//不改变原数组,返回计算的最终结果,从数组的第二项开始遍历。
7.every()
every()
方法使用传入的函数测试所有元素,只要其中有一个函数返回值为 false
,那么该方法的结果为 false
;如果全部返回 true
,那么该方法的结果才为 true
。
var arr = [1,2,3,4];
arr.every((value,index,array) => {
return value> 1 //结果为false
})
//遍历数组每一项,每一项返回true,则最终结果为true。
//当任何一项返回false时,停止遍历,返回false。不改变原数组
8.some()
some()
方法刚好同 every()
方法相反,some
测试数组元素时,只要有一个函数返回值为 true
,则该方法返回 true
,若全部返回 false
,则该方法返回 false
。
some
方法与includes
方法有着异曲同工之妙,他们都是探测数组中是否拥有满足条件的元素,一旦找到,便返回true
。
var arr = [1,2,3,4];
arr.some((value,index,array) => {
return value> 3 //结果为true
})
//遍历数组每一项,只要有一个函数返回值为 true,结果返回true。
//若全部返回 false,则该方法返回 false。
//不改变原数组
9.includes()
Array.prototype.includes
方法返回一个布尔值,表示某个数组是否包含给定的值,与字符串的includes
方法类似。ES2016 引入了该方法。
[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false
[1, 2, NaN].includes(NaN) // true
该方法的第二个参数表示搜索的起始位置,默认为0
。如果第二个参数为负数,则表示倒数的位置,如果这时它大于数组长度(比如第二个参数为-4,但数组长度为3),则会重置为从0
开始。
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true
10.数组的空位
数组的空位指,数组的某一个位置没有任何值。比如,Array
构造函数返回的数组都是空位。
Array(3) // [, , ,]
注意,空位不是undefined
,一个位置的值等于undefined
,依然是有值的。空位是没有任何值。
ES5 对空位的处理,已经很不一致了,大多数情况下会忽略空位。
forEach(), filter(), reduce(), every() 和some()
都会跳过空位。
map()
会跳过空位,但会保留这个值
join()和toString()
会将空位视为undefined
,而undefined
和null
会被处理成空字符串。
// forEach方法
[,'a'].forEach((x,i) => console.log(i)); // 1
// filter方法
['a',,'b'].filter(x => true) // ['a','b']
// every方法
[,'a'].every(x => x==='a') // true
// reduce方法
[1,,2].reduce((x,y) => x+y) // 3
// some方法
[,'a'].some(x => x !== 'a') // false
// map方法
[,'a'].map(x => 1) // [,1]
// join方法
[,'a',undefined,null].join('#') // "#a##"
// toString方法
[,'a',undefined,null].toString() // ",a,,"
ES6 则是明确将空位转为undefined
。
扩展运算符(…)也会将空位转为undefined
。
[...['a',,'b']]
// [ "a", undefined, "b" ]
entries()、keys()、values()、find()和findIndex()
会将空位处理成undefined
。
// entries()
[...[,'a'].entries()] // [[0,undefined], [1,"a"]]
// keys()
[...[,'a'].keys()] // [0,1]
// values()
[...[,'a'].values()] // [undefined,"a"]
// find()
[,'a'].find(x => true) // undefined
// findIndex()
[,'a'].findIndex(x => true) // 0
由于空位的处理规则非常不统一,所以建议避免出现空位。