在Javascript中，數(shù)組是一個重要且常見的知識點(diǎn)，我們經(jīng)常將數(shù)據(jù)存儲在數(shù)組中。作為一名Javascript工程師，數(shù)組必須要運(yùn)用自如。這篇文章，向大家展示了在日常開發(fā)中，數(shù)組有哪些奇淫技巧值得關(guān)注和學(xué)習(xí)，讓我們開始吧！

1、去重

這也是一道常見的面試題，怎么對JS的數(shù)組去重。在ES6的時代，有個非常快速且簡單的方法，使用new Set()以及Array.from()或者展開運(yùn)算符(...)

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、替換

日常開發(fā)中經(jīng)常需要替換或者刪除一些指定的數(shù)據(jù)，遇到這種場景時一定要聯(lián)想到Array.protoType.splice這個方法。傳參時稍微復(fù)雜點(diǎn)，第一個參數(shù)是開始的索引，第二個參數(shù)是需要刪除的數(shù)量，剩下的就是需要添加的值（可以是一個或者多個）。

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、遍歷數(shù)組

平時我們使用最多的就是數(shù)組的.map方法，其實(shí)還有一個方法也能達(dá)到一樣的目的，用法比較冷門，所以我們總是忽視，那就是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、清空數(shù)組

有時我們需要清空一個數(shù)組，比如用戶點(diǎn)擊了清空購物車。可以一條一條地刪除，但是很少有這么可愛的程序員，哈哈。其實(shí)一行代碼就能搞定，那就是直接將之length設(shè)置成0

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

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

有時候需要將數(shù)組轉(zhuǎn)換成對象的形式，使用.map()一類的迭代方法能達(dá)到目的，這里還有個更快的方法，前提是你正好希望對象的key就是數(shù)組的索引

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、填充數(shù)組

創(chuàng)建數(shù)組的時候，你有沒有遇到過需要填充上默認(rèn)值的場景，你肯定首先想到的就是循環(huán)這個數(shù)組。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、合并數(shù)組

你知道如何合并數(shù)組嗎，答案就是.concat()。哈哈，但是今天的主角是ES6的展開運(yùn)算符(...)

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”, “tom

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

找出兩個數(shù)組的交集算是一道經(jīng)典的JS面試題了，這題能很好地考察候選人的邏輯是否清晰，對數(shù)組的掌握是否熟練。這題的答案有很多，下面展示的是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。現(xiàn)在我們找到這些假值并將它們移除，這里使用的是.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、隨機(jī)值

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

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

11、倒序

怎么對數(shù)組進(jìn)行倒序？只需要一行代碼

var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”]; var reversedColors = colors.reverse(); // 或者 colors.slice().reverse(); // 兩者有啥區(qū)別？ console.log(reversedColors); // returns [“brown”, “black”, “yellow”, “orange”, “purple”, “pink”, “navy”, “green”, “white”, “blue”]

12、lastIndexOf()

很多時候我們查找元素是否存在于某個數(shù)組中，經(jīng)常使用indexOf方法，常常忽略lastIndexOf方法，后者會被使用的一個場景就是，某個數(shù)組中有重復(fù)的數(shù)據(jù)。

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

對數(shù)組中的所有元素進(jìn)行求和，哈哈，又是一道如數(shù)家珍的面試題。答案也是很多，條條大道通羅馬，這里使用的是reduce，reduce方法是很值得學(xué)習(xí)的知識點(diǎn)，用處很多。

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

總結(jié)

這篇文章，向小伙伴們展示了在JS中怎么去操作數(shù)組的種種技巧，其實(shí)在日常開發(fā)中，很可能還會遇到更加復(fù)雜的業(yè)務(wù)，希望你們能一一解剖成小問題，找到入手的地方。加油小伙伴們！

作者：小華堅(jiān)決上王者
鏈接：https://juejin.im/post/6844904067446079496
來源：掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

總結(jié)

以上是生活随笔為你收集整理的js多层对象数组 合并_13个你必须知道的JS数组技巧的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。