[技術翻譯]您應該知道的13個有用的JavaScript數組技巧

本次預計翻譯三篇文章以下：

• 01.[譯]9個可讓你在2020年成爲前端專家的項目
• 02.[譯]預加載響應式圖像，從Chrome 73開始實現
• 03.[譯]您應該知道的13個有用的JavaScript數組技巧

我爲何要建立這個git倉庫？經過翻譯國外的web相關的技術文章來學習和跟進web發展的新思想和新技術。git倉庫地址：github.com/yzsunlei/ja…

數組是Javascript最多見的概念之一，它爲咱們提供了許多處理存儲在其中的數據的可能性。考慮到數組是Javascript語言中最基本的主題之一，您能夠在編程開始時就瞭解它，在本文中，我想向您展現一些您可能不知道而且可能很是有用的技巧。來幫助你編碼！讓咱們開始吧。

1.從數組中去除重複項

關於Javascript數組，這是一個很是受歡迎的面試問題，如何從Javascript數組中提取惟一值。這是解決此問題的快速簡便的解決方案，您能夠爲此使用新的Set()。我想向您展現兩種可行的方法，一種使用.from()方法，第二種使用展開運算符(...)。

var fruits = ["banana", "apple", "orange", "watermelon", "apple", "orange", "grape", "apple"];

// 第一種方法
var uniqueFruits = Array.from(new Set(fruits));
console.log(uniqueFruits);
// returns ["banana", "apple", "orange", "watermelon", "grape"]

// 第二種方法
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數組

也許每一個人都知道數組的.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.從數組中刪除假值

首先，讓咱們定義假值。在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.對數組中的全部值求和

在Javascript工程師討論中常常遇到的另外一個挑戰。這沒有什麼可怕的。能夠在一行代碼中使用.reduce()方法解決。讓咱們檢查一下代碼：

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

總結

在本文中，我向您介紹了13個JavaScript數組相關的技巧和提示，它們能夠幫助您進行編碼並使代碼簡潔明瞭。此外，請記住，您能夠在Javascript中使用許多值得探索的技巧，不只涉及數組，並且涉及不一樣的數據類型。我但願您喜歡本文中提供的解決方案，而且將使用它們來改善您的開發過程。

一塊兒有一個不錯的編碼吧！

原文連接：dev.to/duomly/13-u…