超實用的JavaScript數(shù)組技巧和竅門

數(shù)組是Javascript最常見的概念之一，它為我們提供了處理存儲在其中的數(shù)據(jù)的許多可能性。數(shù)組是Javascript中最基本的主題之一，你可能在編程開始之初就了解它，在這篇文章中，我會給大家分享一些你可能不知道但是很有用的技巧。

1、移除數(shù)組重復(fù)項

這是一個非常常見的數(shù)組面試問題，如何在數(shù)組中提取重復(fù)的值，你可以用new set（）達到這個目的，我也愿意分享其兩種的方式，一個是.from()方法另一個是擴展運算符(...)

var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];
var uniqueFruits = Array.from(new Set(fruits));
console.log(uniqueFruits); 
var uniqueFruits2 = […new Set(fruits)];
console.log(uniqueFruits2);

2、替換數(shù)組中的具體值

有時寫代碼的時候，會遇到需要替換數(shù)組中的某些具體值，這有一個你以前也許不知道的又好又簡短的方法，我們可以用splice（開始位置，需要移除的值，需要添加的值），傳遞這三個參數(shù)指定我們在哪里修改，我們需要更改多個少個值，以及新的值。

var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];
fruits.splice(0, 2, “potato”, “tomato”);
console.log(fruits);

3、沒有.map()的map數(shù)組

可能每個人都知道數(shù)組的map()方法，但是這有另一個不同的方式用更簡單的代碼實現(xiàn)相同的效果。我們可以用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);

4、空數(shù)組

你是否有一個包含很多元素的數(shù)組，但是出于某些原因需要對其進行清理，并且您不想一個一個地刪除？只需一行代碼即可完成操作。清空一個數(shù)組，你只需要設(shè)置數(shù)組的長度是0，就這樣。

var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];
fruits.length = 0;
console.log(fruits);

5、數(shù)組轉(zhuǎn)成對象

在某些情況下，我們經(jīng)常需要把數(shù)組轉(zhuǎn)成對象，把數(shù)組轉(zhuǎn)成對象的一個最快的方式就是用熟知的擴展運算符。

var fruits = [“banana”, “apple”, “orange”, “watermelon”];
var fruitsObj = { …fruits };
console.log(fruitsObj);

6、快速創(chuàng)建一個有數(shù)據(jù)的數(shù)組

有時我們創(chuàng)建一個數(shù)組，并且需要用同樣的數(shù)據(jù)填充，這種情況下，我們可以用fill()方法，簡單又簡潔。

var newArray = new Array(10).fill(“1”);
console.log(newArray);

7、合并數(shù)組

你知道怎么不用concat()方法來合并數(shù)組嗎？這有一個簡單的方法用一行代碼就可以合并多個數(shù)組，在這種情況下，可能你已經(jīng)意識到擴展運算符非常有用

var fruits = [“apple”, “banana”, “orange”];
var meat = [“poultry”, “beef”, “fish”];
var vegetables = [“potato”, “tomato”, “cucumber”];
var food = […fruits, …meat, …vegetables];
console.log(food);

8、找到兩個數(shù)組的交集

這也是在面試中都可能面臨的最普遍的問題之一，因為它表明了你是否能夠使用數(shù)組方法以及你的邏輯。找到兩個數(shù)組的交集，我們將用文章前面講到過得方法，為了確保數(shù)組中的值沒有重復(fù)的，將使用filter（）方法和includes（）最后，我們將得到兩個數(shù)組都存在的值，code如下：

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);

9、從數(shù)組中刪除false

一開始，我們定義了false，在JavaScript中，fasle值有false，0，null，NaN，undefined，現(xiàn)在我們?nèi)绾螐臄?shù)組中移除這些false值，為了實現(xiàn)這個目的，我們可以用filter（）方法

var mixedArr = [0, “blue”, “”, NaN, 9, true, undefined, “white”, false];
var trueArr = mixedArr.filter(Boolean);
console.log(trueArr);

10、從數(shù)組中獲取隨機值

有時我們需要從數(shù)組中隨機提取值，為了創(chuàng)造一個簡單的，有效的，最簡短的并且保持代碼干凈，我們可以根據(jù)數(shù)組的長度得到一個隨機數(shù)，可以如下：

var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”];
var randomColor = colors[(Math.floor(Math.random() * (colors.length)))]

11、倒置數(shù)組

當我們需要倒置數(shù)組，不需要通過寫復(fù)雜的循環(huán)和方法，有一種簡單的，只需要一行代碼的，數(shù)組方法已經(jīng)為我們把數(shù)組倒置了，讓我們檢查下：

var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”];
var reversedColors = colors.reverse();
console.log(reversedColors);

12、.lastIndexOf()

在JavaScript中，有一個有趣的方法能夠允許找到給定元素最后一次出現(xiàn)的下標，例如， 如果我們的數(shù)組中有重復(fù)的值，我們可以找到他最后一次出現(xiàn)的下標，看下代碼：

var nums = [1, 5, 2, 6, 3, 5, 2, 3, 6, 5, 2, 7];
var lastIndex = nums.lastIndexOf(5);
console.log(lastIndex);

13、求數(shù)組中所有值得和

另一個在JavaScript面試時經(jīng)常會被問到的問題。沒有什么可怕的，用reduce（），一行代碼就可以解決,說白了就是遞歸。如下：

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

結(jié)論

在本文中，我菜頭為大家列出了13個，基本涵蓋了面試時數(shù)組方面的問題(只適用于高級一下哈)，除了面試幫助，還可以幫助你coding 并且保持代碼簡短干凈的技巧和竅門，另外，請記住，您可能需要在Javascript中使用許多不同的技巧，以進行探索，不僅涉及數(shù)組，而且涉及不同的數(shù)據(jù)類型。我希望你能喜歡本文中提供的解決方案，并且你可以用他們提升你的發(fā)開效率。

- END -