13個(gè)超實(shí)用的JavaScript數(shù)組操作技巧

文章來(lái)源于公眾號(hào)：字節(jié)前端 ，作者子非魚

數(shù)組是JS最常見的概念之一，它為我們提供了處理存儲(chǔ)數(shù)據(jù)的許多可能性?？紤]到數(shù)組是 JavaScript 語(yǔ)言中最基本的概念之一，您可能在編程開始之初就了解到了這一點(diǎn)，在本文中，我將向您展示一些您可能不知道并且可能非常有用的技巧。這些技巧非常有助于我們編碼！讓我們開始吧。

1. 數(shù)組去重

這里只展示兩種可行的方法， 一種是實(shí)用.from()方法， 第二種是實(shí)用擴(kuò)展運(yùn)算符...

let  fruits = ["banana", "apple", "orange", "watermelon", "apple", "orange", "grape", "apple"]
// 第一種方法
let uniqueFruits = Array.from(new Set(fruits))
//第二種方法
let uniqueFruits2 = [...new Set(fruits)]

2 .替換數(shù)組中的特定值

我們可用使用.splice(start, value to remove, valueToAdd)，并在其中傳遞三個(gè)參數(shù)，這些參數(shù)指定了要在哪里開始修改，要更改多少個(gè)值以及新增加的值。

let  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()映射數(shù)組

也許每個(gè)人都知道數(shù)組的.map()方法，但是可以使用另一種方案來(lái)獲得相似的效果，并且代碼非常簡(jiǎn)潔。這里我們可用.from()方法。

let 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 },
]


let friendsNames = Array.from(friends, ({name}) => name)


console.log(friendsNames) //returns ["John", "Peter", "Mark", "Maria", "Monica", "Martha"]

4. 清空數(shù)組

您是否有一個(gè)包含所有元素的數(shù)組，但出于任何目的都需要對(duì)其進(jìn)行清理，并且不想一個(gè)一個(gè)地刪除元素？只需一行代碼即可完成。要清空數(shù)組，您需要將數(shù)組的長(zhǎng)度設(shè)置為0，僅此而已！

let fruits = ["banana", "apple", "orange", "watermelon", "apple", "orange", "grape", "apple"];


fruits.length = 0;
console.log(fruits); // returns []

5. 數(shù)組轉(zhuǎn)對(duì)象

碰巧我們有一個(gè)數(shù)組，但是出于某種目的，我們需要一個(gè)具有此數(shù)據(jù)的對(duì)象，而將數(shù)組轉(zhuǎn)換為對(duì)象的最快方法是使用眾所周知的擴(kuò)展運(yùn)算符...。

let fruits = ["banana", "apple", "orange", "watermelon"];


let fruitsObj = {...fruits};


console.log(fruitsObj) // returns {0: “banana”, 1: “apple”, 2: “orange”, 3: “watermelon”, 4: “apple”, 5: “orange”, 6: “grape”, 7: “apple”}

6. 用數(shù)據(jù)填充數(shù)組

在某些情況下，當(dāng)我們創(chuàng)建一個(gè)數(shù)組時(shí)，我們想用一些數(shù)據(jù)填充它，或者我們需要一個(gè)具有相同值的數(shù)組，在這種情況下，.fill()方法提供了一種簡(jiǎn)單而干凈的解決方案。

let newArray = new Array(10).fill('1')
console.log(newArray) // returns [“1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”]

7. 合并數(shù)組

除了使用.concat()方法，我們也可以使用擴(kuò)展運(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”, “tomato”, “cucumber”]

8. 求數(shù)組的交集

這也是您在任何 JavaScript 面試中面臨的最普遍的挑戰(zhàn)之一，因?yàn)樗故玖四闶欠窨梢允褂脭?shù)組方法以及你的邏輯是什么。

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. 從數(shù)組中刪除虛值

首先，讓我們定義虛值。在 JavaScript 中，虛值有false, 0, ?”, null, NaN, undefined。現(xiàn)在，我們可以找到如何從數(shù)組中刪除此類值。為此，我們將使用.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. 從數(shù)組中獲取隨機(jī)值

有時(shí)我們需要從數(shù)組中隨機(jī)選擇一個(gè)值。為了以簡(jiǎn)單，快速和簡(jiǎn)短的方式創(chuàng)建它并保持我們的代碼整潔，我們可以根據(jù)數(shù)組長(zhǎng)度獲取隨機(jī)索引號(hào)。讓我們看一下代碼：

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


var randomColor = colors[(Math.floor(Math.random() * (color.length)))]

11. 反轉(zhuǎn)數(shù)組

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

12. .lastIndexOf（）方法

在 JavaScript 中，有一個(gè)有趣的方法，它允許查找給定元素的最后一次出現(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); // returns 9

13. 對(duì)數(shù)組中的所有值求和

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

結(jié)論

在本文中，我向您介紹了13個(gè)技巧和小竅門，它們可以幫助你編寫簡(jiǎn)潔明了的代碼。另外，請(qǐng)記住，您可以在 Javascript 中使用許多值得探索的技巧，不僅涉及數(shù)組，而且涉及不同的數(shù)據(jù)類型。我希望您喜歡本文中提供的解決方案，并且將使用它們來(lái)改善您的開發(fā)過(guò)程。

以上就是W3Cschool編程獅關(guān)于13個(gè)超實(shí)用的JavaScript數(shù)組操作技巧的相關(guān)介紹了，希望對(duì)大家有所幫助。