[toc]  JavaScript 提供了多種新增，移除，替換數組元素的方法，但是有些會影響原來的數組；有些則不會，它是新建了一個數組。 注意：區分以下兩個方法的不同點： - array.splice() 影響原來的數組 - array.slice() 不影響原來的數組 ## 1.新增：影響原數組 使用 `array.push()` 和 `array.ushift()` 新增元素會影響原來的數組。 ```js var arr = ['a','b','c','d','e']; arr.push('f'); // ['a','b','c','d','e','f'] arr.unshift('z'); // ['z','a','b','c','d','e','f'] ``` ## 2. 新增：不影響原數組 兩種方式新增元素不會影響原數組，第一種是 `array.concat()`。 ```js var arr1 = ['a','b','c','d','e']; var arr2 = arr1.concat('f'); // ['a','b','c','d','e','f'] console.log(arr1); // ['a','b','c','d','e'] ``` 第二種方法是使用 JavaScript 的展開（spread）操作符，展開操作符是三個點（`…`） ```js var arr1 = ['a','b','c','d','e']; var arr2 = [...arr1, 'f']; // ['a','b','c','d','e','f']; var arr3 = ['z', ...arr1]; // ['z','a','b','c','d','e'] console.log(arr1); // ['a','b','c','d','e'] ``` 展開操作符會復制原來的數組，從原數組取出所有元素，然后存入新的環境。 ## 3.移除：影響原數組 使用 `array.pop()` 和 `array.shift()` 移除數組元素時，會影響原來的數組。 ```js var arr = ['a','b','c','d','e']; arr.pop(); // ['a','b','c','d'] arr.shift(); // ['b','c','d'] ``` `array.pop()` 和 `array.shift()`返回被移除的元素，你可以通過一個變量獲取被移除的元素 ```js let arr = ['a','b','c','d','e']; const removeKey1 = arr.pop(); console.log(arr1); // ['a','b','c','d']; console.log(removeKey1); // e const removeKey2 = arr.shift(); // ['b','c','d'] console.log(arr1); // ['b','c','d']; console.log(removeKey1); // a ``` `array.splice()` 也可以刪除數組的元素 ```js let arr = ['a','b','c','d','e']; arr.splice(0, 2); // ['c','d','e'] ``` 像 array.pop() 和 array.shift() 一樣，`array.splice()` 同樣返回移除的元素 ```js let arr = ['a','b','c','d','e']; const returnItems = arr.splice(0, 2); console.log(arr); // ['c','d','e'] console.log(returnItem); // ['a','b'] ``` ## 4.移除：不影響原數組 JavaScript 的 `array.filter()` 方法基于原數組創建一個新數組，新數組僅包含匹配特定條件的元素 ```js const arr = ['a','b','c','d','e']; const arr2 = arr.filter(a = > a !== 'e'); // ['a','b','c','d'] ``` 以上代碼的條件是“不等于 ‘e’ ”，因此新數組（arr2）里面沒有包含 ‘e’。 箭頭函數的獨特性： - 單行箭頭函數，`return` 關鍵字是默認自帶的，不需要手動書寫。 - 可是，多行箭頭函數就需要明確地返回一個值。 另一種不影響原數組的方式是 `array.slice()`（不要與 `array.splice()` 混淆）。 ```js const arr = ['a','b','c','d','e']; const arr2 = arr.slice(1, 5); // ['b','c','d','e'] const arr3 = arr.slice(2); // ['c','d','e'] ``` ## 5.替換：影響原數組 如果知道替換哪一個元素，可以使用 `array.splice()` ```js let arr = ['a','b','c','d','e']; arr.splice(2, 1, 30); // ['a','b',30,'d','e'] arr.splice(2, 1, 30, 31); // ['a','b',30,31,'d','e'] ``` ## 6.替換：不影響原數組 可以使用 `array.map()` 創建一個新數組，并且可以檢查每一個元素，根據特定的條件替換它們。 ```js const arr1 = ['a','b','c','d','e']; const arr2 = arr1.map(item => { if(item === 'c') item = 'CAT'; return item; }); // ['a','b','CAT','d','e'] ``` 使用 array.map() 轉換數據。array.map() 是個強力方法，可以用于轉換數據，而不污染原先的數據源 ```js const origArr = ['a','b','c','d','e']; const transformArr = origArr.map(n => n + 'Hi!'); // ['aHi!','bHi!','cHi!','dHi!','eHi!'] console.log(origArr); // ['a','b','c','d','e']; 原數組毫發無損 ```