13 个必知必会的 JavaScript 数组操作

数组是 Javascript 最常见的概念之一，它为我们提供了处理存储在其中的数据的许多可能性。考虑到数组是 Javascript 中最基本的主题之一，在本文中，我将向你展示一些你可能不知道的技巧，这些技巧可能对编写代码很有帮助！让我们开始吧。

这是关于 Javascript 数组的一个非常流行的面试问题，如何从 Javascript 数组中提取唯一值。这里有一个简单快捷的解决方案，你可以使用一个 new Set () 来解决这个问题。我想向您展示两种可行的方法，一种使用 .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”]

容易吧？

有时在创建代码时有必要替换数组中的特定值，并且你可能还不知道有一个不错的简短方法可以实现。 为此，我们可以使用 .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”]

可能每个人都知道数组的 .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”]

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

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

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

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

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”}

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

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

你知道如何不使用 .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”]

这也是在任何 Javascript 面试中你都可能面临的最常见的挑战之一，因为它展示了你是否可以使用数组方法以及你的逻辑是什么。为了找到两个数组的交集，我们将使用本文中前面所提到的方法之一，以确保我们正在检查的数组中的值不重复，并且我们将使用 .filter 方法和 .include 方法。结果，我们将获得两个数组中都存在的值的数组。检查代码：

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]

首先，让我们定义虚值。在 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”]

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

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

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

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”]

在 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

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

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

在本文中，我向你介绍了 13 个技巧和小窍门，它们可以帮助你编写简洁明了的代码。另外，请记住，你可以在 Javascript 中使用许多值得探索的技巧，不仅涉及数组，而且涉及不同的数据类型。我希望你喜欢本文中提供的解决方案，并且将使用它们来改善你的开发过程。

祝你有良好的编程体验！