你應該知道的13個有用的JavaScript數組技巧

  • 2020 年 2 月 21 日
  • 筆記

數組是Javascript最常見的概念之一，它為我們提供了處理數據的許多可能性。您可以在編程開始之初就了解它，在本文中，我想向您展示一些您可能不知道並且可能非常有用的技巧。有助於編碼！讓我們開始吧。

1. 數組去重

這是一個非常流行的關於Javascript數組的採訪問題，數組去重。這裡有一個快速簡單的解決方案，可以使用一個新的Set()。我想向您展示兩種可能的方法，一種是使用.from()方法，另一種是使用spread操作符(…)。

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(start、valueToRemove、valueToAdd)，並將所有三個參數傳遞給它，這些參數可以指定我們希望從哪裡開始修改、希望修改多少值和新值。

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()方法，但是有一個不同的解決方案，它可以用來獲得類似的效果和非常乾淨的代碼。我們可以使用.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. 將數組轉換為對象

我們有一個數組，但出於某種目的，我們需要一個對象來處理這些數據，而將數組轉換為對象的最快方法是使用眾所周知的spread運算符(…)。

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()方法將數組合併到一個數組中嗎?有一種簡單的方法可以用一行代碼將任意數量的數組合併。正如您可能已經意識到的，spread操作符(…)在處理數組時非常有用，在本例中也是如此。

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方法和.include方法。最後，將得到兩個數組的交集。例：

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. 從數組中刪除假值

首先，讓我們定義假值。在Javascript中，假值是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()方法

在Javascript中，有一個有趣的方法，它允許查找給定元素的最後一次出現的索引。例如，如果我們的數組有重複的值，我們可以找到它最後一次出現的位置。讓我們看看代碼示例:

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個數組使用的技巧，它們可以幫助您編寫代碼，並使您的代碼保持簡潔。另外，請記住，在Javascript中有很多值得研究的技巧，不僅是關於數組的，還包括不同的數據類型。我希望您喜歡本文提供的解決方案，並將使用它們來改進您的開發過程。

好好編碼吧!

原文：https://www.blog.duomly.com/13-useful-javascript-array-tips-and-tricks-you-should-know/

譯：winty

VirMach 便宜 VPS

QNews

QNews