在實際開發(fā)中休蟹，Array 是除了 Object 最長用的數(shù)據(jù)類型了。Array 和其他編程語言有些許的差別日矫，JavaScript 中的 Array 每個槽位可以存儲任意類型的數(shù)據(jù)赂弓，此外它也是動態(tài)大小的，會隨著數(shù)據(jù)的添加而自動增長哪轿。今天盈魁，就讓我們來總結(jié)一下吧。

一窃诉、創(chuàng)建數(shù)組

1杨耙、使用 Array 構(gòu)造函數(shù)

無參構(gòu)造

let arr = new Array(); // 創(chuàng)建一個空數(shù)組

帶參構(gòu)造

如果知道數(shù)組中元素的數(shù)量，那么可以給構(gòu)造函數(shù)傳入一個數(shù)值飘痛，然后 length 屬性就會被自動創(chuàng)建并設(shè)置為這個值珊膜。也可以給 Array 構(gòu)造函數(shù)傳入要保存的元素。

let arr1 = new Array(10); // 長度為10的空數(shù)組
let arr2 = new Array("Mercury", "www.shanzhonglei.com"); // 創(chuàng)建一個包含2個字符串的數(shù)組

注意：使用 Array 構(gòu)造函數(shù)時宣脉，可以省略 new 操作符车柠。

2、數(shù)組字面量

let arr1 = []; //創(chuàng)建一個空數(shù)組
let arr2 = [10]; // 創(chuàng)建一個包含1項數(shù)據(jù)為10的數(shù)組
let arr3 = ["Mercury", "www.shanzhonglei.com"]; // 創(chuàng)建一個包含2個字符串的數(shù)組

3脖旱、Array.from()

Array.from()從一個類似數(shù)組或可迭代對象創(chuàng)建一個新的堪遂，淺拷貝的數(shù)組實例介蛉。

Array.from(arrayLike[, mapFn[, thisArg]])

/*
arrayLike  想要轉(zhuǎn)換成數(shù)組的偽數(shù)組對象或可迭代對象萌庆。
mapFn 可選 如果指定了該參數(shù)，新數(shù)組中的每個元素會執(zhí)行該回調(diào)函數(shù)币旧。
thisArg 可選 可選參數(shù)践险，執(zhí)行回調(diào)函數(shù) mapFn 時 this 對象。
*/

Array.from('shan');  // [ "s", "h", "a", "n" ]

const set = new Set(["Mercury","Venus","Earth"]);
Array.from(set); // ["Mercury","Venus","Earth"]

Array.from([1, 2, 3], x => x + x); // [2, 4, 6]

2吹菱、Array.of()

Array.of()用于將一組參數(shù)轉(zhuǎn)換為數(shù)組實例巍虫，而不管參數(shù)的數(shù)量與類型。

Array.of(element0[, element1[, ...[, elementN]]])

// elementN 任意個參數(shù)鳍刷，將按順序成為返回數(shù)組中的元素占遥。

Array.of(1, 2, 3);   // [1, 2, 3]
Array.of(undefined); // [undefined]

二、檢測數(shù)組

在只有一個網(wǎng)頁的情況输瓜，也就是只有一個全局作用域的時候瓦胎，可以使用 instanceof 操作符芬萍。

if (value instanceof Array) {
  // ...
}

如果不確定值是哪個全局執(zhí)行上下文創(chuàng)建的，可以是用 Array.isArray()

if (Array.isArray(value)) {
  // ...
}

三搔啊、迭代器

Array 的原型上暴露了 3 個用于檢索數(shù)組內(nèi)容的方法： keys()柬祠、 values()和 entries()。

• keys()返回數(shù)組索引的迭代器
• values()返回數(shù)組元素的迭代器
• entries()返回索引/值對的迭代器

const planets = ["Mercury", "Venus", "Earth", "Mars", "Jupiter"];

// 因為這些方法都返回迭代器负芋，所以可以將它們的內(nèi)容
// 通過 Array.from()直接轉(zhuǎn)換為數(shù)組實例

const aKeys = Array.from(planets.keys());
console.log(aKeys);
// [ 0, 1, 2, 3, 4 ]

const aValues = Array.from(planets.values());
console.log(aValues);
// [ 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter' ]

const aEntries = Array.from(planets.entries());
console.log(aEntries);
/*
[ 0, 'Mercury' ],
[ 1, 'Venus' ],
[ 2, 'Earth' ],
[ 3, 'Mars' ],
[ 4, 'Jupiter' ]
*/

四漫蛔、復(fù)制和填充方法

批量復(fù)制方法copyWithin()，以及填充數(shù)組方法 fill()旧蛾，都不會改變數(shù)組的大小莽龟。

fill()方法用一個固定值填充一個數(shù)組中從起始索引到終止索引內(nèi)的全部元素。不包括終止索引锨天。

/*
arr.fill(value[, start[, end]])
value 用來填充數(shù)組元素的值轧房。
start 可選 起始索引，默認(rèn)值為0绍绘。
end 可選 終止索引奶镶，默認(rèn)值為 this.length。
注意：start和end的范圍是包括start陪拘，不包括end厂镇，應(yīng)該表示為[start, end)
*/

[1, 2, 3].fill(4); // [4, 4, 4]
[1, 2, 3].fill(4, 1); // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2); // [1, 4, 3]

copyWithin() 方法用于從數(shù)組的指定位置淺拷貝元素到數(shù)組的另一個指定位置中。

/*
array.copyWithin(target, start, end)
target 必需 復(fù)制到指定目標(biāo)索引位置
start 可選 元素復(fù)制的起始位置
end 可選 停止復(fù)制的索引位置 (默認(rèn)為 array.length)左刽。如果為負(fù)值捺信，表示倒數(shù)

如果 start 為負(fù)，則其指定的索引位置等同于 length+start欠痴，length 為數(shù)組的長度迄靠。end 也是如此
*/

[1, 2, 3, 4, 5].copyWithin(-2) // [1, 2, 3, 1, 2]
[1, 2, 3, 4, 5].copyWithin(0, 3) // [4, 5, 3, 4, 5]
[1, 2, 3, 4, 5].copyWithin(0, 3, 4) // [4, 2, 3, 4, 5]
[1, 2, 3, 4, 5].copyWithin(-2, -3, -1) // [1, 2, 3, 3, 4]

五、轉(zhuǎn)換方法

所有對象都有 toString()和 valueOf()方法喇辽。

• valueOf() 返回的還是數(shù)組本身
• toString() 返回由數(shù)組中每個值的等效字符串拼接而成的一個逗號分隔的字符串掌挚。也就是說，對數(shù)組的每個值都會調(diào)用其 toString()方法菩咨，以得到最終的字符串

const planets = ["Mercury", "Venus", "Earth"];
console.log(planets.toString()); // Mercury,Venus,Earth
console.log(planets.valueOf()); // [ 'Mercury', 'Venus', 'Earth' ]

六吠式、棧方法

棧是一種后進先出（LIFO， Last-In-First-Out）的結(jié)構(gòu)抽米，也就是最近添加的項先被刪除特占。

數(shù)據(jù)項的插入（push）和刪除（pop）只在棧的一個棧頂發(fā)生。

push()方法接收任意數(shù)量的參數(shù)云茸，并將它們添加到數(shù)組末尾是目，返回數(shù)組的最新長度。
pop()方法則用于刪除數(shù)組的最后一項标捺，同時減少數(shù)組的 length 值懊纳，返回被刪除的項网持。

let planets1 = ["Mercury", "Venus", "Earth", "Mars", "Jupiter"];
let length = planets1.push("Saturn", "Uranus");
console.log(length); // 7
console.log(planets1.toString()); // Mercury,Venus,Earth,Mars,Jupiter,Saturn,Uranus

let planets2 = ["Mercury", "Venus", "Earth", "Mars", "Jupiter"];
let planet = planets2.pop();
console.log(planet); // Jupiter
console.log(planets2.toString()); // Mercury,Venus,Earth,Mars

七、隊列方法

隊列以先進先出（FIFO长踊， First-In-First-Out）形式限制訪問功舀。隊列在列表末尾添加數(shù)據(jù)，但從列表開頭獲取數(shù)據(jù)身弊。

shift()和 push()組成一組隊列方法辟汰，unshift()和 pop()組成一組隊列方法。

shift()方法把數(shù)組的第一個元素刪除掉阱佛，并且返回所刪除的元素帖汞。
unshift()在數(shù)組前端添加任意項，并返回新數(shù)組的長度凑术。

let planets1 = ["Mercury", "Venus", "Earth", "Mars", "Jupiter"];
let count = planets1.unshift("Saturn", "Uranus");
console.log(count); // 7
console.log(planets1.toString()); // Saturn,Uranus,Mercury,Venus,Earth,Mars,Jupiter

let planets2 = ["Mercury", "Venus", "Earth", "Mars", "Jupiter"];
let planet = planets2.shift();
console.log(planet); // Mercury
console.log(planets2.toString()); // Venus,Earth,Mars,Jupiter

八翩蘸、排序方法

數(shù)組有兩個方法可以用來對元素重新排序： reverse()和 sort()。默認(rèn)情況下淮逊， sort()會按照升序重新排列數(shù)組元素催首，即最小的值在前面，最大的值在后面泄鹏。

sort()方法可以接收一個比較函數(shù)郎任，用于判斷哪個值應(yīng)該排在前面。比較函數(shù)接收兩個參數(shù)备籽，如果第一個參數(shù)應(yīng)該排在第二個參數(shù)前面舶治，就返回負(fù)值；如果兩個參數(shù)相等车猬，就返回 0霉猛；如果第一個參數(shù)應(yīng)該排在第二個參數(shù)后面，就返回正值珠闰。

var digit = [0, 1, 2, 3, 4, 5];
digist.reverse();
console.log(digit); // [ 5, 4, 3, 2, 1, 0 ]

var digist = [5, 13, 24, 20, 0, 10];
console.log(digist.sort()); //[ 0, 10, 13, 20, 24, 5 ]

function compare(num1, num2) {
  if (num1 < num2) {
    return 1;
  } else if (num1 > num2) {
    return -1;
  } else {
    return 0;
  }
}
digist.sort(compare);
console.log(digist); // [ 24, 20, 13, 10, 5, 0 ]

九惜浅、操作方法

concat()方法

可以接收多個參數(shù)，不會改變原來的數(shù)組铸磅。

arr1.concat(arr2, arr3, ..., arrX)

slice()方法

不會改變原始數(shù)組赡矢，返回截取的數(shù)組杭朱。

array.slice(start, [end]);
// 注意范圍阅仔，end表示從何處結(jié)束選取，不包括end弧械，也就是[start, end)

splice()方法

會改變原始數(shù)組八酒，從何處添加/刪除元素。

array.splice(index,howmany,item1,.....,itemX)

// index表示從何處添加/刪除元素
// howmany應(yīng)該刪除多少元素
// item1,.....,itemX新添加的元素

• 刪除：可以刪除任意數(shù)量的項刃唐，只需指定兩個參數(shù)羞迷，要刪除的第一項和要刪除的項數(shù)界轩。
• 插入：可以向指定位置插入任意數(shù)量的項：只需指定三個參數(shù)，起始位置衔瓮、0（要刪除的項數(shù)）浊猾、要插入的項。
• 替換：可以向指定位置插入任意數(shù)量的項热鞍，且同時刪除任意數(shù)量的項葫慎，只需指定三個參數(shù)，起始位置薇宠、要刪除的項數(shù)和要插入的任意數(shù)量的項偷办。

// concat()
var digist1 = [1, 2, 3];
var digist2 = [4, 5, 6];
console.log(digist1.concat(digist2)); // [ 1, 2, 3, 4, 5, 6 ]

// splice()，不會改變原始數(shù)組３胃邸＝费摹！
// 提取元素
var planets1 = ["Mercury", "Venus", "Earth", "Mars", "Jupiter"];
var planetArr1 = planets1.slice(1, 3);
console.log(planetArr1); // [ 'Venus', 'Earth' ], 截取了下標(biāo)1(包括)到下標(biāo)3(不包括)的元素
console.log(planets1); // [ 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter' ]回梧，原始數(shù)組沒有改變

// splice()废岂，會改變原始數(shù)組！
//刪除
var planets = ["Mercury", "Venus", "Earth", "Mars", "Jupiter"];
var removed = planets.splice(0, 1);
console.log(planets); // [ 'Venus', 'Earth', 'Mars', 'Jupiter' ]
console.log(removed); // [ 'Mercury' ]
//插入
var planets2 = ["Mercury", "Venus", "Earth", "Mars", "Jupiter"];
var removed2 = planets2.splice(1, 0, "Saturn", "Uranus");
console.log(removed2); // []
console.log(planets2); // [ 'Mercury','Saturn','Uranus','Venus','Earth','Mars','Jupiter' ]
//替換
var planets2 = ["Mercury", "Venus", "Earth", "Mars", "Jupiter"];
var removed2 = planets2.splice(1, 1, "Saturn", "Uranus");
console.log(removed2); // [ 'Venus' ]
console.log(planets2); // [ 'Mercury', 'Saturn', 'Uranus', 'Earth', 'Mars', 'Jupiter' ]

十狱意、搜索和位置方法

包含 indexOf()泪喊、 lastIndexOf()和 includes()。

indexOf()和 lastIndexOf()都返回要查找的元素在數(shù)組中的位置髓涯，如果沒找到則返回-1袒啼，includes()返回布爾值。

let nums = [1, 2, 4, 6, 3, 8, 4, 7, 9, 6];

console.log(nums.indexOf(4)); // 2
console.log(nums.lastIndexOf(4)); // 6
console.log(nums.includes(6)); // true

十一纬纪、迭代方法

• every()： 對數(shù)組每一項都運行傳入的函數(shù)蚓再，如果對每一項函數(shù)都返回 true， 則這個方法返回 true包各。
• filter()：對數(shù)組每一項都運行傳入的函數(shù)摘仅，函數(shù)返回 true 的項會組成數(shù)組之后返回。
• forEach()：對數(shù)組每一項都運行傳入的函數(shù)问畅，沒有返回值娃属。
• map()：對數(shù)組每一項都運行傳入的函數(shù)，返回由每次函數(shù)調(diào)用的結(jié)果構(gòu)成的數(shù)組护姆。
• some()：對數(shù)組每一項都運行傳入的函數(shù)矾端，如果有一項函數(shù)返回 true，則這個方法返回 true卵皂。

注意秩铆，這些方法都不改變調(diào)用它們的數(shù)組！

// every()
var digist1=[1,2,3,4,5,6];
var everyDigist=digist1.every(function(currentValue,index,arr){
    return (currentValue>5);
});
console.log(everyDigist);  //false

//filter()
var digist2=[1,2,3,4,5,6];
var filterRestult=digist2.filter(function(currentValue,index,arr){
    return (currentValue>4);
});
console.log(filterRestult); //[ 5, 6 ]

// forEach()
var digist3=[5,6];
digist3.forEach(function(currentValue,index,arr){
    console.log(currentValue+"_"+index+"_"+arr);
    //5_0_5,6
    //6_1_5,6
});

// map() 
var digist=[1,2,3,4,5,6]; 
var mapResult=digist.map(function(currentValue,index,arr){
    return currentValue-1;
});
console.log(mapResult); //[ 0, 1, 2, 3, 4, 5 ] // some()
var digist=[1,2,3,4,5,6];
var someResult=digist.some(function(currentValue,index,arr){
    return (currentValue>5);
});
console.log(someResult); //true

十二、歸并方法

reduce()

對數(shù)組中的所有元素調(diào)用指定的回調(diào)函數(shù)殴玛。該回調(diào)函數(shù)的返回值為累積結(jié)果捅膘，并且此返回值在下一次調(diào)用該回調(diào)函數(shù)時作為參數(shù)提供，對于空數(shù)組是不會執(zhí)行回調(diào)函數(shù)的滚粟。

reduceRight()方法的功能和reduce()功能是一樣的寻仗，不同的是 reduceRight() 從數(shù)組的末尾向前將數(shù)組中的數(shù)組項做累加。

var values = [5,6,9,8,4,6];
var sum = values.reduce(function(prev,cur,index,array){
    return prev+cur;
},10);
console.log(sum);  //48

最后

歡迎關(guān)注我的公眾號【前端技術(shù)驛站】凡壤，多多交流愧沟，共同進步！
回復(fù)react:
1鲤遥、React.js大眾點評案例完整版
2沐寺、React+TypeScript高仿AntDesign開發(fā)企業(yè)級UI組件庫
3、React17+React Hook+TS4最佳實踐 仿Jira企業(yè)級項目
回復(fù)vue
1盖奈、[全棧開發(fā) ]Vue+Django REST framework 打造生鮮電商項目
2混坞、核心源碼內(nèi)參
3、Vue3+ElementPlus+Koa2 全棧開發(fā)后臺系統(tǒng)
4钢坦、ES6零基礎(chǔ)教學(xué)解析彩票
5究孕、Node.js+Koa2框架生態(tài)實戰(zhàn) - 從零模擬新浪微博（完整版）
6、vue無人點餐收銀系統(tǒng)
回復(fù)node
1爹凹、Nodejs視頻教程
2厨诸、全棧最后一公里 - Nodejs 項目的線上服務(wù)器部署與發(fā)布
3、深入淺出Node.js