超實用的JavaScript數組技巧和竅門

超實用的JavaScript數組技巧和竅門

數組是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); 

var uniqueFruits2 = […new Set(fruits)];

console.log(uniqueFruits2); 
複製代碼

二、替換數組中的具體值

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

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

fruits.splice(0, 2, 「potato」, 「tomato」);

console.log(fruits); 
複製代碼

三、沒有.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); 
複製代碼

四、空數組

你是否有一個包含不少元素的數組，可是出於某些緣由須要對其進行清理，而且您不想一個一個地刪除？只需一行代碼便可完成操做。清空一個數組，你只須要設置數組的長度是0，就這樣。

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

fruits.length = 0;

console.log(fruits); 
複製代碼

五、數組轉成對象

在某些狀況下，咱們常常須要把數組轉成對象，把數組轉成對象的一個最快的方式就是用熟知的擴展運算符。

var fruits = [「banana」, 「apple」, 「orange」, 「watermelon」];

var fruitsObj = { …fruits };

console.log(fruitsObj); 
複製代碼

六、快速建立一個有數據的數組

有時咱們建立一個數組，而且須要用一樣的數據填充，這種狀況下，咱們能夠用fill()方法，簡單又簡潔。

var newArray = new Array(10).fill(「1」);

console.log(newArray); 
複製代碼

七、合併數組

你知道怎麼不用concat()方法來合併數組嗎？這有一個簡單的方法用一行代碼就能夠合併多個數組，在這種狀況下，可能你已經意識到擴展運算符很是有用

var fruits = [「apple」, 「banana」, 「orange」];

var meat = [「poultry」, 「beef」, 「fish」];

var vegetables = [「potato」, 「tomato」, 「cucumber」];

var food = […fruits, …meat, …vegetables];

console.log(food); 
複製代碼

八、找到兩個數組的交集

這也是在面試中均可能面臨的最廣泛的問題之一，由於它代表了你是否可以使用數組方法以及你的邏輯。找到兩個數組的交集，咱們將用文章前面講到過得方法，爲了確保數組中的值沒有重複的，將使用filter（）方法和includes（）最後，咱們將獲得兩個數組都存在的值，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); 
複製代碼

九、從數組中刪除false

一開始，咱們定義了false，在JavaScript中，fasle值有false，0，null，NaN，undefined，如今咱們如何從數組中移除這些false值，爲了實現這個目的，咱們能夠用filter（）方法

var mixedArr = [0, 「blue」, 「」, NaN, 9, true, undefined, 「white」, false];

var trueArr = mixedArr.filter(Boolean);

console.log(trueArr); 
複製代碼

十、從數組中獲取隨機值

有時咱們須要從數組中隨機提取值，爲了創造一個簡單的，有效的，最簡短的而且保持代碼乾淨，咱們能夠根據數組的長度獲得一個隨機數，能夠以下：

var colors = [「blue」, 「white」, 「green」, 「navy」, 「pink」, 「purple」, 「orange」, 「yellow」, 「black」, 「brown」];

var randomColor = colors[(Math.floor(Math.random() * (colors.length)))]
複製代碼

十一、倒置數組

當咱們須要倒置數組，不須要經過寫複雜的循環和方法，有一種簡單的，只須要一行代碼的，數組方法已經爲咱們把數組倒置了，讓咱們檢查下：

var colors = [「blue」, 「white」, 「green」, 「navy」, 「pink」, 「purple」, 「orange」, 「yellow」, 「black」, 「brown」];

var reversedColors = colors.reverse();

console.log(reversedColors); 
複製代碼

十二、.lastIndexOf()

在JavaScript中，有一個有趣的方法可以容許找到給定元素最後一次出現的下標，例如， 若是咱們的數組中有重複的值，咱們能夠找到他最後一次出現的下標，看下代碼：

var nums = [1, 5, 2, 6, 3, 5, 2, 3, 6, 5, 2, 7];

var lastIndex = nums.lastIndexOf(5);

console.log(lastIndex); 
複製代碼

1三、求數組中全部值得和

另外一個在JavaScript面試時常常會被問到的問題。沒有什麼可怕的，用reduce（），一行代碼就能夠解決,說白了就是遞歸。以下：

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

console.log(sum); 
複製代碼

結論

在本文中，我菜頭爲你們列出了13個，基本涵蓋了面試時數組方面的問題(只適用於高級一下哈)，除了面試幫助，還能夠幫助你coding 而且保持代碼簡短乾淨的技巧和竅門，另外，請記住，您可能須要在Javascript中使用許多不一樣的技巧，以進行探索，不只涉及數組，並且涉及不一樣的數據類型。我但願你能喜歡本文中提供的解決方案，而且你能夠用他們提高你的發開效率。