你須要知道的13個關於JavaScript數組的小技巧

譯者：道奇
做者：Duomly
原文：13 useful JavaScript array tips and tricks you should know

數組是JavaScript中最多見的概念了，它爲JavaScript的內部數據存儲提供了不少可能性，考慮到在編程之初，數組是JavaScript最基礎的主題之一，在這篇文章中，我會帶來一些你可能不知道可是很是有用的小技巧！下面讓咱們開始。

1.從數組中移除重複項

怎樣從JavaScript數組中提取惟一值，這是很是常見的JavaScript面試題，這個問題的即快速又簡單的解決方法是使用new Set()方法。有兩種途徑能夠作到，一種是經過.from() ，另一種是使用擴展運算符（...）。

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


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


// 第二種方法
var uniqueFruits2 = […new Set(fruits)];
console.log(uniqueFruits2);
// 返回["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); // 返回["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); 
//返回 ["John", "Peter", "Mark", "Maria", "Monica", "Martha"]
複製代碼

4.清空數組

有時候須要將有元素的數組清空，但不想一個一個移除它們，能夠經過一行代碼很簡單的作到。清空數組只須要將數組的長度設置爲0，這樣就能夠了。

var fruits = ["banana」, "apple", "orange", "watermelon", "apple", "orange", "grape","apple"]; fruits.length = 0; console.log(fruits); // 返回 [] 複製代碼

5.將數組轉換成對象

有時候咱們碰巧有個數組，但出於一些目的，須要一個帶數據的對象，最快的方式就是使用擴展運算符（...）將數組直接轉換成對象。

var fruits = ["banana","apple", "orange", "watermelon"];
var fruitsObj = { …fruits };
console.log(fruitsObj);
//返回{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); 
// 返回 ["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); // 返回 [2, 4, 6]
複製代碼

9. 移除數組中的假(falsy)值

首先，定義一下假值。在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); // 返回 ["blue", 9, true, "white"]

複製代碼

10. 從數組中獲取隨機值

有時候，咱們須要隨機從數組中選擇一個值，爲了使用簡短、快速而且保持代碼簡潔的方式，能夠根據數組的長度獲取隨機索引值，看一下代碼：

var colors = ["blue", "white", "green", "navy", "pink", "purple", "orange"];
var randomColor = colors[(Math.floor(Math.random() * (colors.length)))]
複製代碼

11. 反轉數組

當咱們須要翻轉數組時不須要經過複雜的循環和函數來建立它，有一種簡單的數組方法能幫咱們作到，而且只要一行代碼，就能反轉數組。下面就檢查一下：

var colors = ["blue", "white", "green", "navy", "pink", "purple", "orange"];
var reversedColors = colors.reverse();
console.log(reversedColors); 
// returns ["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); // 返回 9
複製代碼

13. 求和數組中全部值

這是另一個在面試開發工程師時常常碰到的挑戰，沒什麼可怕的，可使用.reduce方法一行代碼就能夠解決，看代碼：

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

總結

在這篇文章中，我給出了13個技巧幫助你編寫簡潔的代碼，一樣記住JavaScript中還有不少值得探索的不一樣技巧，不只是關於數組的，還有其餘數據類型的，我但願你能喜歡這篇文章中提供的這些解決方法，你可使用它們來改進開發過程。

祝coding愉快！