es6數(shù)組方法：1、map方法；2、find方法；3、findIndex方法；4、filter方法；5、every方法；6、some方法；7、reduce方法；8、reduceRight方法；9、foreach方法；10、keys方法等等。

本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

數(shù)組是相同數(shù)據(jù)類型的數(shù)據(jù)按一定順序排列的集合。在ES6（ECMAScript 6）新版本JavaScript語(yǔ)言標(biāo)準(zhǔn)中，ES6給數(shù)組添加了一些新特性，而這些新特性擴(kuò)展了數(shù)組處理數(shù)據(jù)的能力，面對(duì)大數(shù)據(jù)集合往往不需循環(huán)操作即可完成累加、篩選、轉(zhuǎn)換等工作。在本文將總結(jié)有關(guān)于ES6給數(shù)組提供一些新特性的使用方法。

1、map方法

通過(guò)制定方法處理數(shù)組中的每一個(gè)元素，并返回處理后的數(shù)組。

console.clear(); var arr = [12,14,34,22,18]; var arr1 = arr.map((currentValue,index,arr) => {     console.log("當(dāng)前元素"+currentValue); 　　console.log("當(dāng)前索引"+index);     if (currentValue>20) {         return currentValue-10;     } else {         return currentValue-5;     } }) console.log(arr1) //另一種形式 let nums = [1, 2, 3]; let obj = {val: 5}; let newNums = nums.map(function(item,index,array) { return item + index + array[index] + this.val; //對(duì)第一個(gè)元素，1 + 0 + 1 + 5 = 7 //對(duì)第二個(gè)元素，2 + 1 + 2 + 5 = 10 //對(duì)第三個(gè)元素，3 + 2 + 3 + 5 = 13 }, obj); console.log(newNums);//[7, 10, 13]

2、find和findIndex方法

檢索數(shù)組中的元素，find方法返回第一個(gè)符合要求的元素，findIndex方法返回第一個(gè)符合要求的元素下標(biāo)。

console.clear(); var arr = [12,14,34,22,18]; var arr1 = arr.find((currentValue, index) => {     return currentValue>20; }) var arr2 = arr.findIndex((currentValue, index) => {     return currentValue>20; }) console.log(arr,arr1,arr2); //數(shù)組元素為對(duì)象 var allPeple = [     {name: '小王', id: 14},     {name: '大王', id: 41},     {name: '老王', id: 61} ] var PId = 14; //假如這個(gè)是要找的人的ID var myTeamArr = [{name: '小王',   id: 14}] function testFunc(item){return item.id == PId ;} //判斷myteam里是不是有這個(gè)人，如果==-1 代表沒(méi)有，在allPeople中找到他，添加入我的隊(duì)伍 myTeamArr.findIndex(testFunc) == -1     ? myTeamArr.push(allPeple.find(testFunc))      : console.log('已存在該人員'); //檢索滿足條件的對(duì)象 var stu = [     {name: '張三', gender: '男', age: 20},     {name: '王小毛', gender: '男', age: 20},     {name: '李四', gender: '男', age: 20} ] var obj = stu.find((element) => (element.name == '李四')) console.log(obj); console.log(obj.name); [1,2,3].findIndex(function(x) {x == 2;}); // Returns an index value of 1. [1,2,3].findIndex(x => x == 4); // Returns an index value of -1

3、filter方法

檢索數(shù)組中的元素，并以數(shù)組的形式返回所有符合要求的元素。

console.clear(); var arr = [12,14,34,22,18]; var arr1 = arr.filter((currentValue, index) => {     return currentValue>20; }) console.log(arr,arr1); //邏輯屬性的篩選 var arr = [   { id: 1, text: 'aa', done: true },   { id: 2, text: 'bb', done: false } ] console.log(arr.filter(item => item.done)) // 保留奇數(shù)項(xiàng) let nums = [1, 2, 3]; let oddNums = nums.filter(item => item % 2); console.log(oddNums);

4、every方法

檢測(cè)數(shù)組中的每一個(gè)元素是否符合條件，是則返回true,否則是false。

console.clear(); var arr = [12,14,34,22,18]; var arr1 = arr.every((currentValue, index) => {     return currentValue>20; }) console.log(arr,arr1);

5、some方法

檢測(cè)數(shù)組中是否符合條件的元素，有則返回true,否則是false。

console.clear(); var arr = [12,14,34,22,18]; var arr1 = arr.some((currentValue, index) => {     return currentValue>20; }) console.log(arr,arr1);

6、reduce和reduceRight方法

接收一個(gè)函數(shù)作為累加器（accumulator），數(shù)組中的每個(gè)值（從左到右）開始縮減，最終為一個(gè)值。reduce接受一個(gè)函數(shù)，函數(shù)有四個(gè)參數(shù)，分別是：上一次的值previousValue，當(dāng)前值currentValue，當(dāng)前值的索引index，數(shù)組array。

reduceRight方法和reduce方法一樣，都是求數(shù)組累計(jì)數(shù)。不同的是reduceRight()從數(shù)組的末尾向前將數(shù)組中的數(shù)組項(xiàng)做累加。

reduceRight()首次調(diào)用回調(diào)函數(shù)callbackfn時(shí)，prevValue 和 curValue 可以是兩個(gè)值之一。如果調(diào)用 reduceRight() 時(shí)提供了 initialValue 參數(shù)，則 prevValue 等于 initialValue，curValue 等于數(shù)組中的最后一個(gè)值。如果沒(méi)有提供 initialValue 參數(shù)，則 prevValue 等于數(shù)組最后一個(gè)值， curValue 等于數(shù)組中倒數(shù)第二個(gè)值。

console.clear(); var arr = [0,1,2,3,4]; var total = arr.reduce((a, b) => a + b); //10 console.log(total); var sum = arr.reduce(function(previousValue, currentValue, index, array){   console.log(previousValue, currentValue, index);   return previousValue + currentValue; }); console.log(sum); //第二個(gè)參數(shù)為5，第一次調(diào)用的previousValue的值就用傳入的第二個(gè)參數(shù)代替 var sum1 = arr.reduce(function(previousValue, currentValue, index){   console.log(previousValue, currentValue, index);   return previousValue + currentValue; },5); console.log(sum1); var sum2 = arr.reduceRight(function (preValue,curValue,index) {     return preValue + curValue; }); // 10 var sum3 = arr.reduceRight(function (preValue,curValue,index) {     return preValue + curValue; }, 5); // 15 //計(jì)算數(shù)組arr的平方和 var arr1 = arr.map((oVal) => {return oVal*oVal;})  console.log(arr1); var total1 = arr1.reduce((a, b) => a + b); //30 console.log(total1); //計(jì)算指定數(shù)組和 let nums = [1, 2, 3, 4, 5];// 多個(gè)數(shù)的累加 let newNums = nums.reduce(function(preSum,curVal,array) { return preSum + curVal; }, 0); console.log(newNums)//15

7、foreach方法

循環(huán)遍歷數(shù)組的元素，作用相當(dāng)于for循環(huán)，無(wú)返回值。

console.clear(); var arr = [12,14,34,22,18]; var arr1 = arr.forEach((currentValue, index) => {     console.log(currentValue, index); })

8、keys，values，entries方法

ES6 提供三個(gè)新的方法，entries()，keys()和values()，用于遍歷數(shù)組。它們都返回一個(gè)遍歷器對(duì)象，可以用for…of循環(huán)進(jìn)行遍歷，唯一的區(qū)別是keys()是對(duì)鍵名的遍歷、values()是對(duì)鍵值的遍歷，entries()是對(duì)鍵值對(duì)的遍歷。

console.clear(); for (let index of ['a', 'b'].keys()) { console.log(index); } // 0 // 1 for (let elem of ['a', 'b'].values()) { console.log(elem); } // 'a' // 'b' for (let [index, elem] of ['a', 'b'].entries()) { console.log(index, elem); } // 0 "a" // 1 "b"

9、Array.from靜態(tài)方法

Array.from()方法主要用于將兩類對(duì)象(類似數(shù)組的對(duì)象[array-like object]和可遍歷對(duì)象[iterable]）轉(zhuǎn)為真正的數(shù)組。

console.clear(); //類似數(shù)組的對(duì)象轉(zhuǎn)為真正的數(shù)組 let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 } console.log(Array.from(arrayLike)); // ["a","b","c"] //字符轉(zhuǎn)數(shù)組 let arr = Array.from('w3cplus.com')  //字符轉(zhuǎn)數(shù)組 console.log(arr); // ["w","3","c","p","l","u","s",".","c","o","m"] //Set數(shù)據(jù)轉(zhuǎn)數(shù)組 let namesSet = new Set(['a', 'b'])  //new Set創(chuàng)建無(wú)重復(fù)元素?cái)?shù)組 let arr2 = Array.from(namesSet);  //將Set結(jié)構(gòu)數(shù)據(jù)轉(zhuǎn)為數(shù)組 console.log(arr2); //["a","b"] //轉(zhuǎn)換Map數(shù)據(jù) let m = new Map([[1, 2], [2, 4], [4, 8]]); console.log(Array.from(m)); // [[1, 2], [2, 4], [4, 8]] //接受第二個(gè)參數(shù)為map轉(zhuǎn)換參數(shù) var arr = Array.from([1, 2, 3]);  //返回一個(gè)原樣的新數(shù)組 var arr1 = Array.from(arr, (x) => x * x) console.log(arr1);    // [1, 4, 9] var arr2 = Array.from(arr, x => x * x); console.log(arr2);    // [1, 4, 9] var arr3 = Array.from(arr).map(x => x * x); console.log(arr3);    // [1, 4, 9] //大樣本生成 var arr4 = Array.from({length:5}, (v, i) => i); console.log(arr4);  // [0, 1, 2, 3, 4] //第三個(gè)參數(shù)為diObj對(duì)象，map函數(shù)中this指向該對(duì)象 //該功能實(shí)現(xiàn)由對(duì)象自帶方法轉(zhuǎn)換數(shù)據(jù) let diObj = {   handle: function(n){     return n + 2   } } console.log(Array.from(   [1, 2, 3, 4, 5],    function (x){return this.handle(x)},   diObj ))  //[3, 4, 5, 6, 7]

10、copyWidthin方法

copyWidthin方法可以在當(dāng)前數(shù)組內(nèi)部，將指定位置的數(shù)組項(xiàng)復(fù)制到其他位置(會(huì)覆蓋原數(shù)組項(xiàng))，然后返回當(dāng)前數(shù)組。使用copyWidthin方法會(huì)修改當(dāng)前數(shù)組。

copyWidthin將會(huì)接受三個(gè)參數(shù)[.copyWithin(target, start = 0, end = this.length)]：

• target: 這個(gè)參數(shù)是必須的，從該位置開始替換數(shù)組項(xiàng)
• start: 這是一個(gè)可選參數(shù)，從該位置開始讀取數(shù)組項(xiàng)，默認(rèn)為0，如果為負(fù)值，表示從數(shù)組的右邊向左開始讀取
• end: 這是一個(gè)可選參數(shù)，到該位置停止讀取的數(shù)組項(xiàng)，默認(rèn)等于Array.length。如果為負(fù)值，表示倒數(shù)

console.clear(); var arr = [1, 2, 3, 4, 5]; //從下標(biāo)3開始提取2個(gè)（5-3=2）元素到下標(biāo)0 var arr = arr.copyWithin(0, 3, 5);   console.log(arr);

11、fill方法

fill方法使用給定的值填充一個(gè)數(shù)組。這種方法用于空數(shù)組的初始化非常方便。數(shù)組中已有的元素會(huì)全部被抹去。

fill方法還可以接受第二個(gè)和第三個(gè)參數(shù)，用于指定填充的起始位置和結(jié)束位置。

console.clear(); var arr = ['a', 'b', 'c',,,]; arr.fill(0, 2, 5); console.log(arr);  // ["a", "b", 0, 0, 0] arr.fill(0, 2); console.log(arr);  // ["a", "b", 0, 0, 0] arr = new Array(5).fill(0, 0, 3); console.log(arr);  // [0, 0, 0, empty × 2] arr = new Array(5).fill(0, 0, 5); console.log(arr);  // [0, 0, 0, 0, 0] console.log(new Array(3).fill({}));  //[{…}, {…}, {…}] console.log(new Array(3).fill(1));   //[1, 1, 1]

12、Set數(shù)組對(duì)象用法

ES6 提供了新的數(shù)據(jù)結(jié)構(gòu) Set。它類似于數(shù)組，但是成員的值都是唯一的，沒(méi)有重復(fù)的值。

console.clear(); var s = new Set(); [2,3,5,4,5,2,2].forEach(x => s.add(x)); console.log(s);  //{2, 3, 5, 4} for(let i of s) {console.log(i);}  //Set對(duì)象循環(huán) var set = new Set([1,2,3,4,4]); //符號(hào)”...“將一個(gè)數(shù)組轉(zhuǎn)為用逗號(hào)分隔的參數(shù)序列 console.log([...set]);  //[1, 2, 3, 4] var items = new Set([1,2,3,4,5,5,5,5,]); console.log(items.size);  //5，元素個(gè)數(shù) // add添加元素 var set = new Set(); set.add("a"); set.add("b"); console.log(set); //{"a", "b"} var s = new Set(); s.add(1).add(2).add(2);  //鏈?zhǔn)教砑?console.log(s.size); console.log(s.has(1));  //has判斷元素1是否存在 console.log(s.has(2));  //true console.log(s.has(3));  //false s.delete(2);  //刪除第2個(gè)元素 console.log(s.has(2));  //false // set轉(zhuǎn)數(shù)組 var items = new Set([1,2,3,4,5]); var array = Array.from(items); console.log(array);  //[1, 2, 3, 4, 5] // 數(shù)組的 map 和 filter 方法也可以間接用于Set var s = new Set([1,2,3]); s = new Set([...s].map(x => x * 2)); console.log(s);  //{2, 4, 6} s = new Set([...s].filter(x => (x % 3) ==0)); console.log(s);  //6，被3整除 // 實(shí)現(xiàn)并集、交集、差集 var a = new Set([1,2,3]); var b = new Set([4,3,2]); //并集  var union = new Set([...a, ...b]); console.log(union); //交集  var intersect = new Set([...a].filter(x => b.has(x))); console.log(intersect); //差集  var difference = new Set([...a].filter(x => !b.has(x))); console.log(difference); //遍歷數(shù)據(jù)同步改變?cè)瓉?lái)的Set結(jié)構(gòu) // 利用原Set結(jié)構(gòu)映射出一個(gè)新的結(jié)構(gòu) var set1 = new Set([1,2,3]); set1 = new Set([...set1].map(val => val *2)); console.log(set1); // 利用Array.from var set2 = new Set([1,2,3]); set2 = new Set(Array.from(set2, val => val * 2)); console.log(set2);

13、Map數(shù)組對(duì)象用

Map對(duì)象保存鍵值對(duì)，并且能夠記住鍵的原始插入順序。任何值(對(duì)象或者原始值) 都可以作為一個(gè)鍵或一個(gè)值。Map作為一組鍵值對(duì)結(jié)構(gòu)，具有極快的查找速度。

console.clear(); var names = ['Michael', 'Bob', 'Tracy']; var scores = [95, 75, 85]; //Map鍵值對(duì)的結(jié)構(gòu) var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]); console.log(m.get('Michael')); // 95 //初始化Map需要的二維數(shù)組 var m = new Map(); // 空Map m.set('Adam', 67); // 添加新的key-value m.set('Bob', 59); console.log(m.has('Adam')); // 是否存在key 'Adam': true m.get('Adam'); // 67 m.delete('Adam'); // 刪除key 'Adam' console.log(m.get('Adam')); // undefined //key相同時(shí)，后面的值會(huì)把前面的值沖掉 var m = new Map(); m.set('Adam', 67); m.set('Adam', 88); console.log(m.get('Adam')) // 88

ES6新版本JavaScript語(yǔ)言給數(shù)組添加了許多面向大數(shù)據(jù)處理的新功能，使得JS在數(shù)據(jù)處理量和速度方面有了質(zhì)的提升。需要提示的是，當(dāng)我們處理的數(shù)據(jù)量較大時(shí)，建議使用Google Chrome瀏覽器。ES6數(shù)組+Chrome瀏覽器，使得JS在數(shù)據(jù)處理功能產(chǎn)生變革，完全可以媲美Python或R語(yǔ)言等數(shù)據(jù)處理軟件。

提示：本頁(yè)中JS腳本代碼可復(fù)制粘貼到JS代碼運(yùn)行窗口調(diào)試體驗(yàn)； 文本編輯快捷鍵：Ctrl+A – 全選；Ctrl+C – 復(fù)制； Ctrl+X – 剪切；Ctrl+V – 粘貼

【推薦學(xué)習(xí)：javascript高級(jí)教程】