（JS基礎）Array

JavaScript 的Array對象是用於構造數組的全局對象，數組是相似於列表的高階對象。

基本操做

建立

數組內存放的能夠是任意類型的數據。

let arr1 = [1, { a: 1 }, 'b', [22, 11], true];
let arr2 = new Array(1, { a: 1 }, 'b', [22, 11], true);
let arr3 = Array(1, { a: 1 }, 'b', [22, 11], true);

// 建立指定長度的空數組
let arr4 = new Array(3);    // 長度爲3的空數組 [ <3 empty slots> ]
let arr4 = Array(3);    // 效果同上
複製代碼

獲取和修改爲員

獲取數組成員的方式：[]運算。

let arr = [1, { a: 1 }, 'b', [22, 11], true];
console.log(arr[1]);    // { a: 1 }
arr[0] = 100;
console.log(arr);       // [100, { a: 1 }, 'b', [22, 11], true]
複製代碼

引用類型

Object是Array的基類，和Object同樣，數組也是引用類型的數據。因此簡單的賦值並不能複製數組，只是單純的把"指針"複製給新的變量。看以下例子：

let arr = [1, 2, 3];
let arr2 = arr;
arr2[1] = 200;
console.log(arr);    // [ 1, 200, 3 ]複製代碼

能夠看出，arr2的修改也會對arr形成影響，其緣由是二者指向是同一個對象。要想二者互不影響，必須使用"深拷貝"。（看另外一篇文章講述深拷貝）

成員的增減

添加/刪除數組成員的方法有幾個，能夠從任意位置操做任意多個的成員，且都會改變數組的長度。下面介紹最簡單的從數組尾部添加/刪除。

let arr = [1, 2, 3];
arr.pop();
console.log(arr);    // [ 1, 2 ]
arr.push(100);
console.log(arr);    // [ 1, 2, 100 ]複製代碼

還有一種"特別的"刪除成員方法，就是使用delete運算符，但不會改變數組長度，只會把成員變爲"空"：

let arr = [1, 2, 3];
delete arr[0];
console.log(arr);    // [ <1 empty slot>, 2, 3 ]複製代碼

實例屬性

目前經常使用的屬性就一個：length。用於獲取數組的長度。

實例方法

這些方法都是對數組的增刪改查。其中"增"、"刪"、"改"都會改變原數組。

增

• push(el1[, el2[, ...[, elN]]])：將一個或多個元素添加到數組的末尾，並返回該數組的新長度。
• unshift(el1[, el2[, ...[, elN]]])：將一個或多個元素添加到數組的開頭，並返回該數組的新長度。
• fill(value[, start[, end]])：用一個固定值填充一個數組中從起始索引到終止索引內的所有元素。不包括終止索引。

// 【fill】
let arr2 = Array(3).fill('a');
console.log(arr2);  // [ 'a', 'a', 'a' ]
複製代碼

刪

• pop()：從數組中刪除最後一個元素，並返回該元素的值。
• shift()：從數組中刪除第一個元素，並返回該元素的值。

改

• copyWithin(target[, start[, end]])：參數都是索引值。淺複製數組的一部分到同一數組中的另外一個位置，並返回它，原數組長度不變。
• splice(start[, deleteCount[, item1[, item2[, ...]]]])：刪除或替換現有元素或者原地添加新的元素來修改數組，並以數組形式返回被修改的內容。start​表示修改開始的索引值，負數表示末尾開始；deleteCount表示移除的個數，可選，非負整數，超出邊界取邊界值；item1, item2, ...表示要添加的元素，省略則只刪除。
• reverse()：把數組順序顛倒，並返回該數組。
• sort([compareFunction])：以指定的算法對數組排序。compareFunction表示規定排序規則的函數，接收兩個參數：currentEl當前元素，nextEl下一個元素。compareFunction返回 -1 表示currentEl < nextEl；返回 0 表示currentEl = nextEl；返回 1 表示currentEl < nextEl。

// 【sort】
let arr = [ 'b', 'a', 4, 3, 2, 1 ]
arr.sort((a, b) => {
  return a - b
})
console.log(arr);   // [ 'b', 'a', 1, 2, 3, 4 ]
複製代碼

查

• indexOf(searchElement[, fromIndex])：返回在數組中能夠找到一個給定元素的第一個索引值，若是不存在，則返回 -1 。searchElement表示要查找的元素；fromIndex表示開始查找的索引值，能夠爲負數，表示從末尾開始。
• lastIndexOf(searchElement[, fromIndex])：和indexOf()相似，只是從末尾開始，很少介紹。

遍歷

正常狀況下，遍歷都不會修改原數組，除非你利用索引值對原數組進行修改。方法內傳入的callback表示回調函數，該回調函數可傳入三個參數，分別是：當前值value，當前索引值index，調用該方法的整個數組array。thisArg則表示執行callback時做爲this對象的值。

• find(callback[, thisArg])：返回數組中知足callback函數的第一個元素的值。不然返回undefined。
• findIndex(callback[, thisArg])：與find()相似，只是返回的是索引值。若是不存在，則返回 -1 。

• filter(callback[, thisArg])：以callback爲條件過濾數組。即對數組每一個元素執行一次callback，返回以callback返回值爲true的元素組成的新數組，全部元素的callback都是false則返回[]。
• forEach(callback[, thisArg])：對數組的每一個元素執行一次callback函數，無返回值。
• map(callback[, thisArg])：對每一個元素執行callback函數，返回以callback的返回值所組成的新數組。
• reduce(callback[, initialValue])：以callback函數每次返回的值進行特定的運算，直到把數組全部元素"累積"成一個值。和上面的方法不同，callback接收的參數有四個：accumulator表示上一次調用回調時返回的累積值，初始值等於initialValue；currentValue表示正在處理的元素；currentIndex表示正在處理的元素的索引值，可選；array表示調用該方法的數組。initialValue表示計算的初始值，可選。
• reduceRight(callback[, initialValue])：與reduce()相似，只是從右邊開始，很少介紹。

let arr = [1, 2, 3, 4, 5];
// 【filter】
let result1 = arr.filter(value => {
  return value > 2
});
console.log(result1);    // [ 3, 4, 5 ]
// 【reduce】
let result2 = arr.reduce((sum, current) => {
  return sum += current
}, 15);
console.log(result2);    // 30
複製代碼

測試

返回的結果都是布爾值，表示是否含有特定值或知足特定的條件。callback函數接受的參數參照上面的"遍歷"。

• every(callback[, thisArg])：測試一個數組內的全部元素是否都能經過callback函數的測試。
• some(callback[, thisArg])：測試一個數組內的全部元素是否有其中一個經過callback函數的測試。
• includes(valueToFind[, fromIndex])：查找數組是否包含指定元素。valueToFind表示要查找的元素，fromIndex表示開始查找的索引值，默認爲 0 ，能夠爲負數，表示從末尾開始。

// 【every】
let arr = [1, 2, 3, 4];
let result = arr.every((value) => {
  return value > 1
});
console.log(result);    // false
複製代碼

迭代器

• entries()：返回一個新的Array Iterator對象，該對象包含數組中每一個索引的鍵/值對。
• keys()：返回一個新的Array Iterator對象，該對象包含數組中每一個索引值。（對於數組，該方法實用性不大）
• value()：返回一個新的Array Iterator對象，該對象包含數組中每一個值。

// 【entries】
let arr = ['a', 'b', 'c'];
let iterator1 = array1.entries();
console.log(iterator1.next().value);    // [0, "a"]
console.log(iterator1.next().value);    // [1, "b"]
複製代碼

淺拷貝

如下方法都是返回新數組，不會改變原數組。

• concat(value1[, value2[, ...[, valueN]]])：合併兩個或多個數組組成新數組，返回新數組。valueN表示將數組和/或值鏈接成新數組。

• slice(begin, end)：提取數組，從索引begin到end(不包括end)的淺拷貝到一個新數組，返回新數組。begin和end都是索引值，均可以是負數，表示從末尾開始，若值超過數組邊界，取邊界值。
• flat(depth)：depth指定要提取嵌套數組的結構深度，默認值爲 1。按照一個可指定的深度遞歸遍歷數組，並將全部元素與遍歷到的子數組中的元素合併爲一個新數組返回。簡單說就是把多維數組平鋪，返回新數組，原數組不變。

// 【concat】
let arr = [1, 2, 3, 4];
let newArr = arr.concat([11, 22], 33);
console.log(newArr);    // [ 1, 2, 3, 4, 11, 22, 33 ]
// 【flat】
let arr = [1, [2, 3], [4, [5, 6], 7], 8]
let result4 = arr.flat(1);
let result5 = arr.flat(2);
console.log(result4);    // [ 1, 2, 3, 4, [5, 6], 7, 8 ]
console.log(result5);    // [ 1, 2, 3, 4, 5, 6, 7, 8 ]複製代碼

其餘

• join([separator])：用指定的分隔符把數組全部元素拼接成字符串（即除了最後一個，每一個元素轉化成字符串並加上分隔符，最後把全部字符串按順序鏈接），返回該字符串。separator表示分隔符，默認爲","。
• toLocaleString()：返回一個字符串表示數組中的元素。數組中的元素將使用各自的 toLocaleString 方法轉成字符串，這些字符串將使用一個特定語言環境的字符串（例如一個逗號 ","）隔開。
• toString()：返回一個字符串，表示指定的數組及其元素。
  
• [Symbol.iterator]：經過這個方式能夠改寫數組對象默認的迭代器方法，固然了，通常狀況不建議改寫。

靜態方法

目前靜態方法有三個：

• from(arrayLike[, mapFn[, thisArg]])：從一個相似數組或可迭代對象中建立一個新數組實例，返回新數組。例如，函數內部的arguments對象就是一個類數組，Array.from(arguments)能夠獲得一個數組對象。arrayLike表示要轉換成數組的僞數組對象或可迭代對象；mapFn表示新數組中的每一個元素會執行該回調函數，可選；thisArg表示執行回調函數mapFn時this對象，可選。
• of(element0[, element1[, ...[, elementN]]])：建立一個包含指定元素的新數組。與Array構造函數相似，二者惟一差異在於參數爲單個整數，Array構造函數獲得的是指定長度的空數組，而Array.of()獲得的是包含該數字的一個數組。
• isArray(target)：用於肯定target的值是不是一個Array。返回布爾值。

展開運算符（...）

這部份內容在另外一篇文章有介紹。

其餘

reduce() 方法的妙用

前面介紹到reduce()能夠將數組的成員以特定的方法"累積"成特定的值。

加入數組存放的不是"值"，而是"方法"，數組就能夠做爲一個"方法棧"，把某個值通過"方法棧"後獲得計算結果。例子以下：

let funcStack = [
  n => n + 2,
  n => n ** 3,
  n => n * 8
]
let input = 0,
  result = funcStack.reduce((computed, fn) => {
    return fn(computed);
  }, input);
// ((0 + 2) ^ 3) * 8 = 64
console.log(result);  // 64複製代碼

輸入值input依次經歷了三個數學運算，獲得最終的結果。