ES6常用数据处理方法

1. forEach()

接收一个方法，该方法可传入三个参数，第一个为数组的一个元素，第二位为该元素的下标，第三个为原数组。

遍历数组并使用传入参数方法，无返回值。除非循环结束或报错终止，否则forEach方法无法跳出循环。

let array = [1,2,3,4];
array.forEach((item, index, array) => {
　　console.log(item);
});

forEach会遍历数组, 没有返回值, 不允许在循环体内写return, 不会改变原来数组的内容.

2. map()

接收一个方法，该方法可传入三个参数，第一个为数组的一个元素，第二位为该元素的下标，第三个为原数组。

遍历数组并使用传入参数方法，返回一个由参数方法执行之后返回的新元素组成的新数组。

let array = [1, 2, 3, 4];
let temp = array.map((item, index, array) => {
    return item * 10;
});
console.log(temp);　　//  [10, 20, 30, 40];
console.log(array);　　// [1, 2, 3, 4]

map 遍历数组, 会返回一个新数组, 不会改变原来数组里的内容
let temp2 = array.map(String);　　// 把数组里的元素都转成字符串

3. filter()

接收一个方法，该方法可传入三个参数，第一个为数组的一个元素，第二位为该元素的下标，第三个为原数组。

遍历数组并使用传入参数方法，返回一个由参数方法返回值为true的元素组成的新数组。

let array = [1, 2, 3, 4];
let temp = array.filter((item, index, array) => {
　　return item >  3;
});
console.log(temp);　　// [4]
console.log(array);　　// [1, 2, 3, 4]

filter 会过滤掉数组中不满足条件的元素, 把满足条件的元素放到一个新数组中, 不改变原数组

4. reduce()

arr.reduce(function(res,cur,ind,arr){
    return something
},initRes)

reduce可以接受两个参数，reduce接受的第一个参数是一个方法，该方法可以接受四个参数，第一个参数为上一次函数调用的返回值（第一次调用时默认是数组的第一个元素），第二个参数为当前被遍历的元素，第三个参数为当前遍历元素的下标，第四个参数为执行reduce方法的原数组，reduce接受的第二个参数是第一个参数方法第一次调用的返回值的初始值（默认是数组的第一个元素）。

reduce可以遍历调用该方法的数组并使用传入参数方法，返回遍历完成后最终的执行结果，不会修改原数组。

以下用于数组求和

//数组求和
var arr = [0,1,2,3,4];
var sum = arr.reduce( (prev,cur) => prev+cur ); // sum 为 10

上面的代码执行过程可以通过下面的代码来了解

var sum = arr.reduce((prev,cur,ind) => { 
    
console.log(ind+' : prev=' + prev + ' cur=' + cur) 
   
 return prev + cur
});

console.log('sum=' + sum)

//0 : prev=0 cur=1

//1 : prev=1 cur=2

//2 : prev=3 cur=3

//3 : prev=6 cur=4

 

x 是上一次计算过的值, 第一次循环的时候是数组中的第1个元素
y 是数组中的每个元素, 第一次循环的时候是数组的第2个元素

5. every()

接收一个方法，该方法可传入三个参数，第一个为数组的一个元素，第二位为该元素的下标，第三个为原数组。

遍历数组并使用传入参数方法，如果参数方法返回值为false，则继续循环，如果参数方法返回值为true，则继续循环，如果遍历结束且参数方法返回值全部为true，则some方法返回true。

let array = [1, 2, 3, 4];
let bo = array.every((item, index, array) => {
　　return item > 2;
});
console.log(bo);　　　　// false;

every遍历数组, 每一项都是true, 则返回true,只要有一个是false,就返回false

6. some()

接收一个方法，该方法可传入三个参数，第一个为数组的一个元素，第二位为该元素的下标，第三个为原数组。

遍历数组并使用传入参数方法，如果参数方法返回值为false，则继续循环，如果参数方法返回值为true，则终止循环，some方法返回true。如果遍历结束且参数方法返回值全部为false，则some方法返回false。

let array = [1, 2, 3, 4];
let tmep = array.some((item, index, array) => {
　　return item > 1;
});
console.log(temp);　　// true

遍历数组的每一项, 有一个返回true, 就返回true，就停止循环

7、find()跟findIndex()

ES6为Array增加了find()，findIndex函数。find()函数用来查找目标元素，找到就返回该元素，找不到返回undefined，而findIndex()函数也是查找目标元素，找到就返回元素的位置，找不到就返回-1。

他们的都是一个查找回调函数。

查找函数有三个参数。

value：每一次迭代查找的数组元素。

index：每一次迭代查找的数组元素索引。

arr：被查找的数组。

示例如下：

我们给vue组件绑定了一个班级的学生列表数据。其数据结构可能如下格式，如果你想从以下数据中查找出姓名为李四的学生的信息。

var stu = [
    {
        name: '张三',
        gender: '男',
        age: 20
    },
    {
        name: '王小毛',
        gender: '男',
        age: 20
    },
    {
        name: '李四',
        gender: '男',
        age: 20
    }

查找如下：

stu.find((element) => (element.name == '李四'));返回的是{name: "李四", gender: "男", age: 20}这个元素
stu.findIndex((element)=>(element.name =='李四'));返回的是索引下标：2

 

8、includes()

 includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。有2个参数，第一个是查找值，第二个是查找的位置！！！

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true

 

9.values()

let arr=[1,2,234,'sdf',-2];
for(let a of arr.values()){
    console.log(a) //结果：1,2,234,sdf,-2 遍历了数组arr的值
}

values，对数组项的遍历

10.keys()

let arr=[1,2,234,'sdf',-2];
for(let a of arr.keys()){
    console.log(a) //结果：0,1,2,3,4  遍历了数组arr的索引
}

keys，对数组索引的遍历

11.entries()

let arr=['w','b'];
for(let a of arr.entries()){
    console.log(a) //结果：[0,w],[1,b]
}
for(let [i,v] of arr.entries()){
    console.log(i,v) //结果：0 w,1 b
}

entries，对数组键值对的遍历。

总结：

以上9个方法IE9及以上才支持。不过可以通过babel转义支持IE低版本。
以上均不改变原数组。
some、every返回true、false。
map、filter返回一个新数组。
reduce让数组的前后两项进行某种计算，返回最终操作的结果。
forEach 无返回值。