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

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

• 01.[譯]9個可以讓你在2020年成為前端專家的專案
• 02.[譯]預加載回應式影像，從Chrome 73開始實作
• 03.[譯]您應該知道的13個有用的JavaScript陣列技巧

我為什么要創建這個git倉庫？通過翻譯國外的web相關的技術文章來學習和跟進web發展的新思想和新技術，git倉庫地址：https://github.com/yzsunlei/javascript-article-translate

陣列是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中使用許多值得探索的技巧，不僅涉及陣列，而且涉及不同的資料型別，我希望您喜歡本文中提供的解決方案，并且將使用它們來改善您的開發程序，

一起有一個不錯的編碼吧！

原文鏈接：https://dev.to/duomly/13-useful-javascript-array-tips-and-tricks-you-should-know-2jfo

標籤：JavaScript

上一篇：Vue-cli專案部署到Nginx

下一篇：webpack資源加載常用配置