陣列是 JavaScript 中最常用到的概念之一。處理資料時很常用到這種資料結構。這篇文章介紹一些陣列操作的基本方法，希望對你有幫助！
1. 從陣列中移除重複項目
很經典的面試問題，需要從陣列中找出獨立值。使用 Set 資料型態，可以輕易完成這任務。這邊介紹兩種方法，一個使用 .from() 一個使用 ... 展開運算子。
var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];
// First method
var uniqueFruits = Array.from(new Set(fruits));
console.log(uniqueFruits); // returns [“banana”, “apple”, “orange”, “watermelon”, “grape”]
// Second method
var uniqueFruits2 = […new Set(fruits)];
console.log(uniqueFruits2); // returns [“banana”, “apple”, “orange”, “watermelon”, “grape”]很簡單吧！
2. 從陣列中抽換掉某個元素
這個情境也很常見。有一個簡單的好方法，就是使用 .splice ，參數分別是開始修改的位置、修改幾個元素、要更改成哪些值。
var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];
fruits.splice(0, 2, “potato”, “tomato”);
console.log(fruits); // returns [“potato”, “tomato”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”]3. 不用 .map() 的 map 功能
.map() 很常用、大家都會用，但有一個方法也很不錯，也很簡潔，就是 .from()
var friends = [
{ name: ‘John’, age: 22 },
{ name: ‘Peter’, age: 23 },
{ name: ‘Mark’, age: 24 },
{ name: ‘Maria’, age: 22 },
{ name: ‘Monica’, age: 21 },
{ name: ‘Martha’, age: 19 },
]
var friendsNames = Array.from(friends, ({name}) => name);
console.log(friendsNames); // returns [“John”, “Peter”, “Mark”, “Maria”, “Monica”, “Martha”]4. 清空陣列
有時候你會需要清空一個陣列。一個一個把元素刪掉太慢了，下面這個方法快多了：直接把長度設為 0 吧！
var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];
fruits.length = 0;
console.log(fruits); // returns []5. 把陣列轉換為物件
有時需要把陣列轉成物件。使用 ... 展開運算子可以很快完成這任務。
var fruits = [“banana”, “apple”, “orange”, “watermelon”];
var fruitsObj = { …fruits };
console.log(fruitsObj); // returns {0: “banana”, 1: “apple”, 2: “orange”, 3: “watermelon”, 4: “apple”, 5: “orange”, 6: “grape”, 7: “apple”}6. 陣列塞滿資料
有時需要把一個陣列塞滿某些資料。使用 .fill() 可以快速完成這任務：
var newArray = new Array(10).fill(“1”);
console.log(newArray); // returns [“1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”]7. 合併陣列
老方法是使用 .concat() 來合併。但有個新方法，就是用 ... 展開運算子，非常簡單俐落：
var fruits = [“apple”, “banana”, “orange”];
var meat = [“poultry”, “beef”, “fish”];
var vegetables = [“potato”, “tomato”, “cucumber”];
var food = […fruits, …meat, …vegetables];
console.log(food); // [“apple”, “banana”, “orange”, “poultry”, “beef”, “fish”, “potato”, “tomato”, “cucumber”]8. 找出陣列交集
這也是 JavaScript 面試最常見的問題。這邊使用 filter 跟 .includes 來完成這任務。
var numOne = [0, 2, 4, 6, 8, 8];
var numTwo = [1, 2, 3, 4, 5, 6];
var duplicatedValues = […new Set(numOne)].filter(item => numTwo.includes(item));
console.log(duplicatedValues); // returns [2, 4, 6]9. 把 false 相關的值從陣列移除
false 相關值包含 false, 0, "", null, NaN, undefined。使用 .filter() 可以俐落地過濾陣列。
var mixedArr = [0, “blue”, “”, NaN, 9, true, undefined, “white”, false];
var trueArr = mixedArr.filter(Boolean);
console.log(trueArr); // returns [“blue”, 9, true, “white”]10. 從陣列撈出隨機元素
有時需要隨機撈元素出來。根據陣列長度，隨機撈一個索引出來，就可以囉。
var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”];
var randomColor = colors[(Math.floor(Math.random() * (colors.length)))]11. 逆轉陣列
不需要複雜的迴圈跟函數，也能逆轉一個陣列。這樣一行就可以：
var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”];
var reversedColors = colors.reverse();
console.log(reversedColors); // returns [“brown”, “black”, “yellow”, “orange”, “purple”, “pink”, “navy”, “green”, “white”, “blue”]12. .lastIndexOf() 方法
這個有趣的方法，可以找到特定元素最後一次出現的索引。如果陣列中有重複值，就可用上這方法。
var nums = [1, 5, 2, 6, 3, 5, 2, 3, 6, 5, 2, 7];
var lastIndex = nums.lastIndexOf(5);
console.log(lastIndex); // returns 913. 陣列中全部數值加總
這也是面試常見考題。使用 .reduce 可以快速解決這問題。
var nums = [1, 5, 2, 6];
var sum = nums.reduce((x, y) => x + y);
console.log(sum); // returns 14結論
這 13 個小技巧，分別有一些進階觀念可以研究，這篇文章作為入門介紹，希望對您的工作有幫助！
共有 0 則留言
文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
熱門文章