2020年，你必須知道的JS數組技巧

在Javascript中，數組是一個重要且常見的知識點，咱們常常將數據存儲在數組中。做爲一名Javascript工程師，數組必需要運用自如。這篇文章，向你們展現了在平常開發中，數組有哪些奇淫技巧值得關注和學習，讓咱們開始吧！

1.去重

這也是一道常見的面試題，怎麼對JS的數組去重。在ES6的時代，有個很是快速且簡單的方法，使用new Set()以及Array.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.替換

平常開發中常常須要替換或者刪除一些指定的數據，遇到這種場景時必定要聯想到Array.protoType.splice這個方法。傳參時稍微複雜點，第一個參數是開始的索引，第二個參數是須要刪除的數量，剩下的就是須要添加的值（能夠是一個或者多個）。

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方法，其實還有一個方法也能達到同樣的目的，用法比較冷門，因此咱們老是忽視，那就是Array.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.清空數組

有時咱們須要清空一個數組，好比用戶點擊了清空購物車。能夠一條一條地刪除，可是不多有這麼可愛的程序員，哈哈。其實一行代碼就能搞定，那就是直接將之length設置成0

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

fruits.length = 0;
console.log(fruits); // returns []
複製代碼

5.數組轉換成對象

有時候須要將數組轉換成對象的形式，使用.map()一類的迭代方法能達到目的，這裏還有個更快的方法，前提是你正好但願對象的key就是數組的索引

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.填充數組

建立數組的時候，你有沒有遇到過須要填充上默認值的場景，你確定首先想到的就是循環這個數組。ES6提供了更便捷的.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()。哈哈，可是今天的主角是ES6的展開運算符(...)

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.兩個數組的交集

找出兩個數組的交集算是一道經典的JS面試題了，這題能很好地考察候選人的邏輯是否清晰，對數組的掌握是否熟練。這題的答案有不少，下面展現的是ES6的簡潔寫法

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.去除假值

首先，咱們熟悉下假值(falsy values)是什麼？在JS中，假值有：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.隨機值

從數組中獲取隨機的一個值，也是一道經典的面試題哦。其實考察的核心知識是隨機生成一個值x：x >= 0 而且 x < 數組的length

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();
// 或者 colors.slice().reverse();
// 二者有啥區別？
console.log(reversedColors); // returns [「brown」, 「black」, 「yellow」, 「orange」, 「purple」, 「pink」, 「navy」, 「green」, 「white」, 「blue」]
複製代碼

12.lastIndexOf()

不少時候咱們查找元素是否存在於某個數組中，常常使用indexOf方法，經常忽略lastIndexOf方法，後者會被使用的一個場景就是，某個數組中有重複的數據。

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.求和

對數組中的全部元素進行求和，哈哈，又是一道如數家珍的面試題。答案也是不少，條條大道通羅馬，這裏使用的是reduce，reduce方法是很值得學習的知識點，用處不少。

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

總結

這篇文章，向小夥伴們展現了在JS中怎麼去操做數組的種種技巧，其實在平常開發中，極可能還會遇到更加複雜的業務，但願大家能一一解剖成小問題，找到入手的地方。加油小夥伴們！

原文連接