陣列是 JavaScript 中最常用到的概念之一。處理資料時很常用到這種資料結構。這篇文章介紹一些陣列操作的基本方法,希望對你有幫助!

  • 原文出處:https://dev.to/duomly/13-useful-javascript-array-tips-and-tricks-you-should-know-2jfo

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 9

13. 陣列中全部數值加總

這也是面試常見考題。使用 .reduce 可以快速解決這問題。

var nums = [1, 5, 2, 6];
var sum = nums.reduce((x, y) => x + y);
console.log(sum); // returns 14

結論

這 13 個小技巧,分別有一些進階觀念可以研究,這篇文章作為入門介紹,希望對您的工作有幫助!


共有 0 則留言