ES6学习（五）---数组实例方法

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

由于空位的处理规则非常不统一，所以建议避免出现空位。