数组是Javascript最常见的概念之一，它为我们处理存储在其中的数据提供了很多可能性。考虑到数组是Javascript语言中最基本的主题之一，你可能在开始编程之初就学习了它，在本文中，我想向你展示一些你可能不知道并且可能对编码非常有帮助的技巧！让我们开始吧。

1.删除数组中的重复项

这是一个非常流行的关于Javascript数组的面试题，如何从Javascript数组中提取唯一的值。这里有一个快速简单的解决方案，使用一个new Set()。我想向你展示两种可能的方法，一种是使用.from()方法，另一种是使用spread操作符(…)。

  1. var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];
  3. // First method
  4. var uniqueFruits = Array.from(new Set(fruits));
  5. console.log(uniqueFruits); // returns [“banana”, “apple”, “orange”, “watermelon”, “grape”]
  6. // Second method
  7. var uniqueFruits2 = […new Set(fruits)];
  8. console.log(uniqueFruits2); // returns [“banana”, “apple”, “orange”, “watermelon”, “grape”]

容易吧？

2.替换数组中的特定值

有时在创建代码时需要替换数组中的特定值，有一种很好的简短方法可以做到这一点，但你可能还不知道。我们可以用.splice(start, value to remove, valueToAdd)，并将开始修改的位置、想要移除的个数、要添加的新元素传给对应的三个参数。

  1. var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];
  2. fruits.splice(0, 2, “potato”, “tomato”);
  3. console.log(fruits); // returns [“potato”, “tomato”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”]

3.不使用.map()遍历数组

也许每个人都知道数组的.map()方法，但是这里有一个不同的解决方案也可以获得类似的效果和非常整洁的代码。
为此，我们可以使用.from()方法。

  1. var friends = [
  2.     { name: ‘John’, age: 22 },
  3.     { name: ‘Peter’, age: 23 },
  4.     { name: ‘Mark’, age: 24 },
  5.     { name: ‘Maria’, age: 22 },
  6.     { name: ‘Monica’, age: 21 },
  7.     { name: ‘Martha’, age: 19 },
  8. ]
  10. var friendsNames = Array.from(friends, ({name}) => name);
  11. console.log(friendsNames); // returns [“John”, “Peter”, “Mark”, “Maria”, “Monica”, “Martha”]

4. 清空数组

你是否有这么一个数组，包含所有元素但是出于某种目的你需要对其进行清理，然而你并不想一个一个地删除它？这很简单，只需一行代码即可完成操作。
要清空一个数组，你需要将数组的长度设置为0，仅此而已！

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

5. 将数组转为一个对象

碰巧我们有一个数组，但是出于某种目的，我们一个需要具有这些数据的对象，而将数组转换为对象的最快方法是使用一个众所周知的spread操作符(…)。

  1. var fruits = [“banana”, “apple”, “orange”, “watermelon”];
  2. var fruitsObj = { …fruits };
  3. console.log(fruitsObj); // returns {0: “banana”, 1: “apple”, 2: “orange”, 3: “watermelon”, 4: “apple”, 5: “orange”, 6: “grape”, 7: “apple”}

6. 填充数组

在某些情况，当我们创建了一个数组，我们想用一些数据填充它，或者我们需要一个具有相同值的数组，在这种情况下，.fill（）方法提供了一种简单而整洁的解决方案。

  1. var newArray = new Array(10).fill(“1”);
  2. console.log(newArray); // returns [“1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”]

7. 合并数组

你知道如何不使用.concat()方法将数组合并为一个数组吗？有一种简单的方法可以将任意数量的数组合并为一行代码。你可能已经意识到，在处理数组的时候，spread操作符非常有用(…) ，在这种情况下也是。

  1. var fruits = [“apple”, “banana”, “orange”];
  2. var meat = [“poultry”, “beef”, “fish”];
  3. var vegetables = [“potato”, “tomato”, “cucumber”];
  4. var food = […fruits, …meat, …vegetables];
  5. console.log(food); // [“apple”, “banana”, “orange”, “poultry”, “beef”, “fish”, “potato”, “tomato”, “cucumber”]

8. 查找两个数组的交集

这也是在Javascript面试中最受欢迎的挑战之一，因为它可以表现是出你是否能使用数组方法以及你的逻辑是什么。为了找到两个数组的交集，我们将使用本文前面展示的方法之一，以确保我们所检查的数组中的值不重复，然后我们使用.filter方法和.includes方法。结果，我们将得到一个有两个数组共同值的数组。查找代码如下：

  1. var numOne = [0, 2, 4, 6, 8, 8];
  2. var numTwo = [1, 2, 3, 4, 5, 6];
  3. var duplicatedValues = […new Set(numOne)].filter(item => numTwo.includes(item));
  4. console.log(duplicatedValues); // returns [2, 4, 6]

9. 从数组中移除虚值

首先，让我们定义虚值。在Javascript中，虚值为false，0，’’，null，NaN，undefined。现在，我们可以找出如何从数组中删除这类值。为此，我们将使用.filter()方法。

  1. var mixedArr = [0, “blue”, “”, NaN, 9, true, undefined, “white”, false];
  2. var trueArr = mixedArr.filter(Boolean);
  3. console.log(trueArr); // returns [“blue”, 9, true, “white”]

10. 从数组中获取随机值

有时候我们需要从数组中随机选择一个值。为了以简单，快速和简短的方式创建它并保持我们的代码整洁，我们可以根据数组长度获取随机的索引号。让我们看一下代码：

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

11. 翻转数组

当我们需要翻转数组时，不需要通过复杂的循环和函数来创建数组，有一种简单的数组方法可以为我们完成所有工作，并且只需一行代码，我们就可以将数组反转。
让我们看一下：

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

12. .lastIndexOf() 方法

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

  1. var nums = [1, 5, 2, 6, 3, 5, 2, 3, 6, 5, 2, 7];
  2. var lastIndex = nums.lastIndexOf(5);
  3. console.log(lastIndex); // returns 9

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

另一个挑战经常出现在Javascript工程师面试中。这没有什么可怕的。我们可以在一行代码中用.reduce方法解决。让我们看一下代码：

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

总结

在这片文章中，我向你介绍了13个技巧和建议，他们可以帮助你编程并保持你代码简洁。另外，请记住，在Javascript有很多你可能会用到的技巧值得去研究，不仅是关于数组的，还包括其他数据类型。我希望你喜欢这篇文章提供的解决方案，并将使用它们来改进你的开发过程。
好好编码吧！

原文链接：https://dev.to/duomly/13-useful-javascript-array-tips-and-tricks-you-should-know-2jfo