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

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中怎么去操作數組的種種技巧，其實在日常開發中，很可能還會遇到更加復雜的業務，希望你們能一一解剖成小問題，找到入手的地方。加油小伙伴們！

作者：小華堅決上王者
鏈接：https://juejin.im/post/6844904067446079496
來源：掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。