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 無返回值。