你应该知道的数组技巧和窍门

我们已经知道，除了对象之外，大多数情况下，我们在每个 JavaScript 程序中都会使用数组。它是每个人都应该了解的重要类型之一。

在本文中，我们将介绍一些有关在 JavaScript 中操作数组的技巧。

第一：如何删除数组中的重复项？

有时我们只想在数组中包含唯一的数据，那么该怎么做呢？我们可以使用Set对象来实现。因为集合应该包含唯一的值，所以它会删除重复的值。

var numbers = [“1”, “2”, “3”, “4”, “5”, “3”, “9”, “1”];

var uniqueNumbers = […new Set(numbers)];
console.log(uniqueFruits2);
// returns [“1”, “2”, “3”, “4”, “5”,"9"]

问题 2：如何替换数组中的特定值？

有时在创建代码时需要替换数组中的特定值，有一个你可能还不知道的简洁方法可以做到这一点。为此，我们可以使用 .splice(start, value to remove, valueToAdd) ，并传递三个参数，分别指定修改的起始位置、要修改的值的数量以及新的值。

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() 映射数组

可能每个人都知道数组的 .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); // returns [“John”, “Peter”, “Mark”, “Maria”, “Monica”, “Martha”]

4. 清空数组

您是否有一个装满元素的数组，但出于某种目的需要清理它，并且不想逐个删除元素？只需一行代码即可轻松完成。要清空数组，只需将数组的长度设置为 0，就这么简单！

var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];


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

5. 将数组转换为对象

碰巧我们有一个数组，但出于某种目的，我们需要一个包含此数据的对象，而将数组转换为对象的最快方法是使用众所周知的扩展运算符（...）。

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. 用数据填充数组

在某些情况下，当我们创建一个数组时，我们想用一些数据填充它，或者我们需要一个具有相同值的数组，在这种情况下，.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() 方法的情况下将多个数组合并为一个数组吗？有一种简单的方法，只需一行代码就能将任意数量的数组合并为一个。你可能已经意识到，展开运算符 (…) 在处理数组时非常有用，在本例中也是如此。

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. 求两个数组的交集

这也是 JavaScript 面试中最常见的问题之一，因为它会考察你是否能够使用数组方法以及你的逻辑是什么。为了求两个数组的交集，我们将使用本文前面介绍的方法之一，以确保检查的数组中的值不重复，并使用 .filter 方法和 .includes 方法。最终，我们将得到一个包含两个数组中所有值的数组。查看代码：

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. 从数组中删除虚假值

首先，让我们定义一些假值。在 JavaScript 中，假值包括 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. 从数组中获取随机值

有时我们需要从数组中随机选择一个值。为了简单、快速、简洁地创建它，并保持代码简洁，我们可以根据数组长度获取一个随机索引号。我们来看代码：

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();
console.log(reversedColors); // returns [“brown”, “black”, “yellow”, “orange”, “purple”, “pink”, “navy”, “green”, “white”, “blue”]

12. .lastIndexOf() 方法

在 JavaScript 中，有一个有趣的方法可以查找给定元素最后一次出现的索引。例如，如果我们的数组中有重复的值，我们可以找到它最后一次出现的位置。让我们看代码示例：

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. 对数组中的所有值求和

这是 JavaScript 工程师面试中经常遇到的另一个问题。其实没什么好怕的，只需一行代码，用 .reduce 方法就能解决。我们来看看代码：

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

结论

在本文中，我介绍了 13 个技巧和窍门，它们可以帮助你编写代码，并保持代码简洁明了。另外，请记住，JavaScript 中还有很多值得探索的技巧，不仅包括数组，还包括各种数据类型。希望你喜欢本文提供的解决方案，并利用它们来改进你的开发流程。

祝您编码顺利！

参考：

https://www.blog.duomly.com/13-useful-javascript-array-tips-and-tricks-you-should-know/

你应该知道的数组技巧和窍门

你应该知道的数组技巧和窍门

第一：如何删除数组中的重复项？

问题 2：如何替换数组中的特定值？

3. 不使用 .map() 映射数组

4. 清空数组

5. 将数组转换为对象

6. 用数据填充数组

7. 合并数组

8. 求两个数组的交集

9. 从数组中删除虚假值

10. 从数组中获取随机值

11. 反转数组

12. .lastIndexOf() 方法

13. 对数组中的所有值求和

结论

参考：

相关阅读📖