javascript es6數組方法是什么

這篇文章主要介紹“javascript es6數組方法是什么”，在日常操作中，相信很多人在javascript es6數組方法是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”javascript es6數組方法是什么”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

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

本教程操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

數組是相同數據類型的數據按一定順序排列的集合。在ES6（ECMAScript 6）新版本JavaScript語言標準中，ES6給數組添加了一些新特性，而這些新特性擴展了數組處理數據的能力，面對大數據集合往往不需循環操作即可完成累加、篩選、轉換等工作。在本文將總結有關于ES6給數組提供一些新特性的使用方法。

1、map方法

通過制定方法處理數組中的每一個元素，并返回處理后的數組。

console.clear();
var arr = [12,14,34,22,18];
var arr1 = arr.map((currentValue,index,arr) => {
    console.log("當前元素"+currentValue);
　　console.log("當前索引"+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;
//對第一個元素，1 + 0 + 1 + 5 = 7
//對第二個元素，2 + 1 + 2 + 5 = 10
//對第三個元素，3 + 2 + 3 + 5 = 13
}, obj);
console.log(newNums);//[7, 10, 13]

2、find和findIndex方法

檢索數組中的元素，find方法返回第一個符合要求的元素，findIndex方法返回第一個符合要求的元素下標。

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);
//數組元素為對象
var allPeple = [
    {name: '小王', id: 14},
    {name: '大王', id: 41},
    {name: '老王', id: 61}
]
var PId = 14; //假如這個是要找的人的ID
var myTeamArr = [{name: '小王',   id: 14}]
function testFunc(item){return item.id == PId ;}
//判斷myteam里是不是有這個人，如果==-1 代表沒有，在allPeople中找到他，添加入我的隊伍
myTeamArr.findIndex(testFunc) == -1
    ? myTeamArr.push(allPeple.find(testFunc)) 
    : console.log('已存在該人員');
//檢索滿足條件的對象
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方法

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

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))
// 保留奇數項
let nums = [1, 2, 3];
let oddNums = nums.filter(item => item % 2);
console.log(oddNums);

4、every方法

檢測數組中的每一個元素是否符合條件，是則返回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方法

檢測數組中是否符合條件的元素，有則返回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方法

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

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

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

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);
//第二個參數為5，第一次調用的previousValue的值就用傳入的第二個參數代替
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
//計算數組arr的平方和
var arr1 = arr.map((oVal) => {return oVal*oVal;}) 
console.log(arr1);
var total1 = arr1.reduce((a, b) => a + b); //30
console.log(total1);
//計算指定數組和
let nums = [1, 2, 3, 4, 5];// 多個數的累加
let newNums = nums.reduce(function(preSum,curVal,array) {
return preSum + curVal;
}, 0);
console.log(newNums)//15

7、foreach方法

循環遍歷數組的元素，作用相當于for循環，無返回值。

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

8、keys，values，entries方法

ES6 提供三個新的方法，entries()，keys()和values()，用于遍歷數組。它們都返回一個遍歷器對象，可以用for...of循環進行遍歷，唯一的區別是keys()是對鍵名的遍歷、values()是對鍵值的遍歷，entries()是對鍵值對的遍歷。

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靜態方法

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

console.clear();
//類似數組的對象轉為真正的數組
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
}
console.log(Array.from(arrayLike)); // ["a","b","c"]
//字符轉數組
let arr = Array.from('w3cplus.com')  //字符轉數組
console.log(arr); // ["w","3","c","p","l","u","s",".","c","o","m"]
//Set數據轉數組
let namesSet = new Set(['a', 'b'])  //new Set創建無重復元素數組
let arr2 = Array.from(namesSet);  //將Set結構數據轉為數組
console.log(arr2); //["a","b"]
//轉換Map數據
let m = new Map([[1, 2], [2, 4], [4, 8]]);
console.log(Array.from(m)); // [[1, 2], [2, 4], [4, 8]]
//接受第二個參數為map轉換參數
var arr = Array.from([1, 2, 3]);  //返回一個原樣的新數組
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]
//第三個參數為diObj對象，map函數中this指向該對象
//該功能實現由對象自帶方法轉換數據
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方法可以在當前數組內部，將指定位置的數組項復制到其他位置(會覆蓋原數組項)，然后返回當前數組。使用copyWidthin方法會修改當前數組。

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

• target: 這個參數是必須的，從該位置開始替換數組項

• start: 這是一個可選參數，從該位置開始讀取數組項，默認為0，如果為負值，表示從數組的右邊向左開始讀取

• end: 這是一個可選參數，到該位置停止讀取的數組項，默認等于Array.length。如果為負值，表示倒數

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

11、fill方法

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

fill方法還可以接受第二個和第三個參數，用于指定填充的起始位置和結束位置。

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數組對象用法

ES6 提供了新的數據結構 Set。它類似于數組，但是成員的值都是唯一的，沒有重復的值。

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對象循環
var set = new Set([1,2,3,4,4]);
//符號”...“將一個數組轉為用逗號分隔的參數序列
console.log([...set]);  //[1, 2, 3, 4]
var items = new Set([1,2,3,4,5,5,5,5,]);
console.log(items.size);  //5，元素個數
// 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);  //鏈式添加
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個元素
console.log(s.has(2));  //false
// set轉數組
var items = new Set([1,2,3,4,5]);
var array = Array.from(items);
console.log(array);  //[1, 2, 3, 4, 5]
// 數組的 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整除
// 實現并集、交集、差集
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);
//遍歷數據同步改變原來的Set結構
// 利用原Set結構映射出一個新的結構
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數組對象用

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

console.clear();
var names = ['Michael', 'Bob', 'Tracy'];
var scores = [95, 75, 85];
//Map鍵值對的結構
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
console.log(m.get('Michael')); // 95
//初始化Map需要的二維數組
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相同時，后面的值會把前面的值沖掉
var m = new Map();
m.set('Adam', 67);
m.set('Adam', 88);
console.log(m.get('Adam')) // 88

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

提示：本頁中JS腳本代碼可復制粘貼到JS代碼運行窗口調試體驗； 文本編輯快捷鍵：Ctrl+A - 全選；Ctrl+C - 復制； Ctrl+X - 剪切；Ctrl+V - 粘貼

到此，關于“javascript es6數組方法是什么”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！