数组数据类型是处理有序值列表时最常用的数据类型之一。

每个值都被称为具有唯一 id 的元素。它存储可以通过单个变量访问的各种数据类型的元素。

在实践中，一个数组可以包含一个用户列表，我们可能需要在最后一个元素之后、第一个元素之前或数组中的任何指定点添加一个元素到数组中。

本文将向你展示如何使用 JavaScript 将元素插入到数组中。如果你赶时间，以下是我们将在本文中深入讨论的方法：

// 添加到数组的开头
Array.unshift(element);

// 添加到数组的末尾
Array.push(element);

// 添加到指定位置
Array.splice(start_position, 0, new_element...);

// 使用 concat 方法添加而不改变原始数组
let newArray = [].concat(Array, element);

• 当你想在数组末尾添加一个元素时，请使用 push()。
• 如果你需要在数组的开头添加一个元素，请使用 unshift()。
• 如果要将元素添加到数组的特定位置，请使用 splice()。
• 最后，当你想保持原始数组时，可以使用 concat() 方法。

如何使用 unshift() 方法添加到数组的开头

在 JavaScript 中，你可以使用 unshift() 方法将一个或多个元素添加到数组的开头，并在添加新元素后返回数组的长度。

如果我们有一个国家数组，并且想在当前第一个索引 0 处的 “Nigeria” 之前添加一个国家，我们可以使用 unshift() 方法来完成，如下所示：

const countries = ["Nigeria", "Ghana", "Rwanda"];

countries.unshift("Kenya");

console.log(countries); // ["Kenya","Nigeria","Ghana","Rwanda"]

我们还可以使用 unshift() 方法添加多个元素：

const countries = ["Nigeria", "Ghana", "Rwanda"];

countries.unshift("South Africa", "Mali", "Kenya");

console.log(countries); // ["South Africa","Mali","Kenya","Nigeria","Ghana","Rwanda"]

在我们对 unshift() 方法的解释中，我们还声明它返回新数组的长度，如下所示：

const countries = ["Nigeria", "Ghana", "Rwanda"];

let countriesLength = countries.unshift("South Africa", "Mali", "Kenya");

console.log(countriesLength); // 6

如何使用 push() 方法推送到数组的末尾

push() 方法类似于 unshift() 方法，因为它将元素添加到数组的末尾而不是开头。它返回新数组的长度，并且与 unshift() 方法一样，可用于添加多个元素。

让我们再次尝试相同的示例，但这次使用 push() 方法将它们添加到数组的末尾：

const countries = ["Nigeria", "Ghana", "Rwanda"];

countries.push("Kenya");

console.log(countries); // ["Nigeria","Ghana","Rwanda","Kenya"]

countries.push("South Africa", "Mali");

console.log(countries); // ["Nigeria","Ghana","Rwanda","Kenya","South Africa","Mali"]

我们可以用它来获取新数组的长度：

const countries = ["Nigeria", "Ghana", "Rwanda"];

let countriesLength = countries.push("Kenya");

console.log(countriesLength); // 4

如何使用 splice() 方法将元素添加到数组中的指定位置

到目前为止，我们只看到了如何将元素添加到数组的开头或结尾，但是你可能想知道如何将元素添加到数组中的特定位置。好吧，你可以使用 splice() 方法来做到这一点。

splice() 方法是一种通用方法，用于通过在数组的指定位置删除、替换或添加元素来更改数组的内容。本节将介绍如何使用此方法将元素添加到特定位置。

例如，考虑以下国家数组，其中包含按字母顺序排列的三个元素（国家）：

const countries = ["Ghana", "Nigeria", "Rwanda"];

假设我们要添加 “Kenya”，按照字母顺序，它应该放在第二个位置，索引 1（在 Ghana 之后和 Nigeria 之前）。在这种情况下，我们将使用 splice() 方法，语法如下：

Array.splice(start_position, 0, new_element...);

• start_position 指定了我们希望将新元素插入到数组中的位置的索引。如果有多个元素，它指定插入的元素将从哪里开始。
• 如果我们想添加元素到数组中，我们将第二个参数设置为零（0），指示 splice() 方法不要删除任何数组元素。
• 以下参数或元素可能不止一个，因为这些是我们要在指定位置添加到数组中的元素。

例如，让我们在国家数组中将 “Kenya” 放在 “Ghana” 之后：

const countries = ["Ghana", "Nigeria", "Rwanda"];

countries.splice(1, 0, 'Kenya');

console.log(countries); // ["Ghana","Kenya","Nigeria","Rwanda"]

就像我们对其他方法所做的那样，我们也可以添加多个元素：

const countries = ["Ghana", "Nigeria", "Rwanda"];

countries.splice(1, 0, 'Kenya', 'Mali');

console.log(countries); // ["Ghana","Kenya","Mali","Nigeria","Rwanda"]

请注意，前面的方法返回新数组的长度，但 splice() 方法更改了原始数组。它不会删除任何元素，因此它返回一个空数组。

如何使用 concat() 方法将元素添加到数组

我们可以使用 concat() 方法将元素添加到数组中，而无需改变或更改原始数组。如果我们不希望原始数组受到影响，则创建一个新数组是一种更好的方法。

我们可以使用此方法根据放置元素的位置将元素添加到数组的开头和结尾：

const countries = ["Ghana", "Nigeria", "Rwanda"];

let newCountries = [].concat("Mali", countries, "Kenya");

console.log(newCountries); // ["Mali","Ghana","Nigeria","Rwanda","Kenya"]

concat() 方法还允许我们将两个（或更多）数组连接到一个新数组中：

const africanCountries = ["Ghana", "Nigeria", "Rwanda"];
const europeanCountries = ["Germany", "France", "spain"];

let countries = [].concat(africanCountries, europeanCountries);

console.log(countries); // ["Ghana","Nigeria","Rwanda","Germany","France","spain"]

总结

在本文中，我们学习了使用 splice() 方法将元素添加到数组的开始、末尾或任何位置的各种方法。

我们还了解到 concat() 方法允许我们在不改变原始数组的情况下添加元素。

你可以使用任何你需要的方法。

祝你编程快乐！

.from() 方法是 JavaScript ES6 中 Array 对象的一个静态方法。它从一个类似数组或可迭代的对象（如 map 和 set）创建一个新的、浅拷贝的数组实例。

这个方法从任何具有长度属性的对象中返回一个数组。你可以用它来创建一个指定范围内的数字数组。

在这篇文章中，你将了解 .from() 静态方法是什么，它是如何工作的，以及你如何在 JavaScript 中创建一个数字范围。

如果你着急了解，这里有一个方法可以帮助你获得范围：

const arrayRange = (start, stop, step) =>
    Array.from(
    { length: (stop - start) / step + 1 },
    (value, index) => start + index * step
    );

console.log(arrayRange(1, 5, 1)); // [1,2,3,4,5]

你可以继续阅读这篇短文来了解它的原理。

.from() 方法如何在 JavaScript 中运行

Array.from() 方法从任何类似数组或可迭代对象中返回一个数组。该方法接收一个必选参数和另外两个可选参数：

// 语法
Array.from(arraylike, mapFunc, thisArg)

• arraylike - 一个类数组或可迭代对象，用于转换为数组。
• mapFunc - 这是一个可选的参数。映射函数会在每个元素上被调用。
• thisArg - 这个值在执行 mapFunc 作为 this 的时候使用。它也是可选的。

为了看看这是如何运行的，让我们使用 Array.from() 方法从一个字符串创建一个数组：

let newArray = Array.from("freeCodeCamp");

console.log(newArray); // ["f","r","e","e","C","o","d","e","C","a","m","p"]

在上面的例子中，Array.from() 方法返回一个字符串的数组。你也可以使用该方法从任何具有长度属性的对象中返回一个数组，该属性指定了对象中的元素数量。

let arrayLike = {0: 1, 1: 2, 2: 3, length: 3};
let newArray = Array.from(arrayLike);

console.log(newArray); // [1,2,3]

你也可以引入映射函数，为每个元素调用。例如，如果你想操作每个数组项，也许是将每个项与一个特定的数字相乘：

let arrayLike = {0: 1, 1: 2, 2: 3, length: 3};
let newArray = Array.from(arrayLike, x => x * 2);

console.log(newArray); // [2,4,6]

注意：.from() 是一个静态方法，这就是为什么它使用数组类的名称。你只能把它当作 Array.from() 来使用，而不是 myArray.from()，其中 myArray 是一个数组。它将返回未定义。

如何用 .from() 方法创建一个数字序列

Array.from() 方法使你有可能使用映射函数创建一个数字序列：

let newArray = Array.from({ length: 7 }, (value, index) => index);

console.log(newArray); // [0,1,2,3,4,5,6]

上面的方法创建了一个由 7 个元素组成的数组，默认初始化为 undefined。但是使用映射函数，现在使用的是索引值而不是其实际值 undefined。

如果你使用它的实际值，你将得到一个 7 个元素的数组（基于长度），值为 undefined：

let newArray = Array.from({ length: 7 }, (value, index) => value);

console.log(newArray); 
// 返回
[undefined,undefined,undefined,undefined,undefined,undefined,undefined]

如何用 .from 方法创建一个数字范围

你现在知道如何用一个数字序列创建一个数组。但是当你创建一个范围时，你希望这些数字从一个指定的值开始，在一个指定的值结束。例如，在 4 和 8 的范围内的数字将是 4、5、6、7、8。

你还可以指定你想要一个指定范围内的奇数或偶数的数组。所有这些都可以通过 Array.from() 方法实现。

const arrayRange = (start, stop, step) =>
    Array.from(
    { length: (stop - start) / step + 1 },
    (value, index) => start + index * step
    );

在上面的代码中，类似数组的对象的长度是通过从范围内的第一个数字减去最后一个数字，然后除以步长加一来定义的。这将给出数组中元素的确切数量。

在映射函数中，起始数被添加到每个元素的索引中（记住，该值总是未定义的），并乘以步长值。这个映射函数为每个元素运行，帮助计算每个元素的值。

让我们用几个例子试试这个方法：

// 产生从范围 2 到 7 的数字
let range = arrayRange(2, 7, 1);
console.log(range); // [2,3,4,5,6,7]

// 产生从范围 2 到 7 的偶数
let evenRange = arrayRange(2, 7, 2);
console.log(evenRange); // [2,4,6]

// 产生从范围 1 到 5 的奇数
let oddRange = arrayRange(1, 5, 2);
console.log(oddRange); // [1,3,5]

总结

在这篇文章中，你学习了如何用 Array.from() 方法创建一个数字数组，你还学习了 Array.from() 方法的工作原理。

请记住，在 JavaScript 中还有其他选择来创建数字范围——我们在本教程中只关注了 .from()。

祝你编码愉快！

在 JavaScript 中，数组是最常用的数据类型之一。它在一个变量中存储多个值和元素。

这些值可以是任何数据类型——意味着你可以在一个变量中存储字符串、数字、布尔值和其他数据类型。

在 JavaScript 中，有两种标准的方法来声明数组。它们是通过数组构造函数或字面量。

下面是两种方式声明数组：

// 使用构造函数
let array = new array("John Doe", 24, true);

// 使用字面量
let array = ["John Doe", 24, true];

你可以继续阅读这篇文章，以正确理解这些方法以及它们的一些其他有趣的选项。

如何用字面量声明一个数组

这是创建数组的最流行和最简单的方法。它是一种更简短、更清晰的声明数组的方法。

用字面量声明一个数组，你只需用空括号定义一个新的数组，像这样：

let myArray = [];

你要把所有的元素放在方括号内，用逗号把每个项目或元素分开。

let myArray = ["John Doe", 24, true];

数组是零索引的，这意味着你可以从零开始访问每个元素或输出整个数组。

console.log(myArray[0]); // 'John Doe'
console.log(myArray[2]); // true
console.log(myArray); // ['John Doe', 24, true]

如何用数组构造函数声明一个数组

你也可以使用数组构造函数来创建或声明一个数组。用 Array() 构造函数声明一个数组有很多技术上的问题。

就像你可以用字面量在一个变量中存储不同数据类型的多个值一样，你也可以用数组构造函数做同样的事情。

let myArray = new Array();
console.log(myArray); // []

上述代码将创建一个新的空数组。你可以在新数组中添加数值，方法是将它们放在括号中，用逗号隔开。

let myArray = new Array("John Doe", 24, true);

就像你之前学到的那样，你可以使用其索引号来访问每个值，索引号从零（0）开始。

console.log(myArray[0]); // 'John Doe'
console.log(myArray[2]); // true
console.log(myArray); // ['John Doe', 24, true]

当用构造函数声明数组时，必须牢记以下几点。

• 当你向数组构造函数传递一个数字时，它将用你输入的空值的数量来填充数组。

let myArray = new Array(4);
console.log(myArray); // [,,,]

但当你传递一个单一的字符串或任何其他数据类型时，它正常运行。

let myArray = new Array(true);
console.log(myArray); // [true]

• 并非一定要添加 new，因为 Array() 和 new Array() 都是执行相同的任务。

let myArray = Array("John Doe", 24, true);

小结

在这篇文章中，你已经学会了如何在 JavaScript 中声明一个数组。重要的是要知道，不是一定要使用构造函数，因为它比字面量要复杂得多。

你可以在文章《JavaScript 数组——如何在 JavaScript 中创建数组》中了解更多信息。

祝你编码愉快！

当你在处理数组时，有时你需要在 JavaScript 中交换数组中的两个元素。

也许你正在研究一个算法问题，比如气泡排序算法，你需要比较两个值，然后在条件为真时交换它们。

除此之外，许多其他情况可能需要你交换数组元素。

如果你还不明白我说的“交换”是什么意思，这里有一个例子。假设你有一个数字数组，你想把索引 1 的元素 -2 和索引 0 的元素 12 互换，如下图所示：

如果你还不熟悉 JS 是如何做这些事情的，在 JavaScript 中实现这一点可能会让你感到困惑。你可能也在寻找更好的方法来处理这个问题。

这篇文章将教你三种方法：使用临时变量、解构赋值和使用 splice() 数组方法。

如何用一个临时变量来交换两个数组元素

为了交换元素，你可以使用一个临时变量并经过三个步骤。

第一步是创建一个临时变量来保存第一个元素的值。第二步是将第一个元素的值设置为第二个元素的值。第三步是将第二个元素的值设置为临时变量中的值。

let myArray = [12, -2, 55, 68, 80];

const temp = myArray[0];
myArray[0] = myArray[1];
myArray[1] = temp;

console.log(myArray); // [-2,12,55,68,80]

你也可以创建一个可重复使用的函数来处理这个问题，你可以指定数组和你希望交换的两个索引。

const swapElements = (array, index1, index2) => {
    let temp = array[index1];
    array[index1] = array[index2];
    array[index2] = temp;
};

let myArray = [12, -2, 55, 68, 80];
swapElements(myArray, 0, 1);
console.log(myArray); // [-2,12,55,68,80]

如何通过解构赋值交换两个数组元素

一个更好的交换数组元素的方法是解构赋值，因为它只需一行代码就能完成工作。

你只需创建一个新的数组，其中包含按特定顺序排列的两个元素，然后将其分配给一个新的数组，其中包含按相反顺序排列的两个元素。

let myArray = [12, -2, 55, 68, 80];

[myArray[0], myArray[1]] = [myArray[1], myArray[0]];

console.log(myArray); // [-2,12,55,68,80]

你也可以创建一个可重复使用的函数来处理这个问题，你可以指定数组和你希望交换的两个索引。

const swapElements = (array, index1, index2) => {
    [myArray[index1], myArray[index2]] = [myArray[index2], myArray[index1]];
};

let myArray = [12, -2, 55, 68, 80];
swapElements(myArray, 0, 1);
console.log(myArray); // [-2,12,55,68,80]

如何用 Splice() 方法交换两个数组元素

最后，你可以使用 splice() 数组方法。你可以用这个方法从一个数组中移除一个或多个元素，然后用任何指定的元素替换这些元素。

// 语法
array.splice(index, howmany, element1, ....., elementX)

例如，如果你有一个数组，你想删除一个特定的元素，你将指定它的 id 和想删除的元素的数量。在我们的例子中，这两个值是 1。

let myArray = [12, -2, 55, 68, 80];

myArray.splice(1, 1);
console.log(myArray); // 12,55,68,80]

另外，如果你想用另一个元素替换掉被删除的元素，你的代码会是这样的：

let myArray = [12, -2, 55, 68, 80];

myArray.splice(1, 1, 32);
console.log(myArray); // [12,32,55,68,80]

但如果你想交换两个元素，代码应该是这样：

let myArray = [12, -2, 55, 68, 80];

myArray[0] = myArray.splice(1, 1, myArray[0])[0];

console.log(myArray); // [-2,12,55,68,80]

你也可以创建一个可重复使用的函数来处理这个问题，你可以指定数组和希望交换的两个索引。

const swapElements = (array, index1, index2) => {
    myArray[index1] = myArray.splice(index2, 1, myArray[index1])[0];
};

let myArray = [12, -2, 55, 68, 80];
swapElements(myArray, 0, 1);
console.log(myArray); // [-2,12,55,68,80]

小结

在这篇文章中，你学习了在 JavaScript 中交换数组元素的三种方法。

你可以使用任何方法，但最好是使用 ES6 的解构赋值方法，因为它更容易被大家理解和使用。

祝你编程愉快!

数组是一个变量存储不同数据类型的元素。我们可以通过单个变量访问数组。

它是一个有序的值列表，每个值是一个元素，可以通过索引访问。

知道这些单个变量包含元素列表，你可能希望创建这些元素的列表，以便你可以使用它们执行单个功能等等。这就是循环发挥作用的地方。

JavaScript 中的循环是什么

循环是一种计算机程序，它允许我们将特定操作重复预定次数，而无需单独编写该操作。

例如，如果我们有一个数组，想要输出数组中的每个元素，我们可以简单地循环并执行一次该操作，而不是使用索引号一个一个地这样做。

在 JavaScript 中有很多方法可以循环遍历数组。在本文中，我们将介绍最常用的方法，以便你学习不同的方法并了解它们的工作原理。

我们将在本文中使用以下数组：

const scores = [22, 54, 76, 92, 43, 33];

如何在 JavaScript 中使用 While 循环遍历数组

你可以使用 while 循环来评估括在括号 () 中的条件。如果条件为 true，则执行 while 循环内的代码。如果为 false，则终止循环。

如果我们想遍历一个数组，可以使用 length 属性来指定循环应该一直持续到我们到达数组的最后一个元素。

现在让我们使用 while 循环方法来循环遍历数组：

let i = 0;

while (i < scores.length) {
    console.log(scores[i]);
    i++;
}

这将一个接一个地返回我们数组中的每个元素：

22
54
76
92
43
33

在上面的循环中，我们首先初始化了索引号，使其从 0 开始。然后这个数字会不断增加并输出每个元素，直到我们设置的条件返回 false，说明我们已经到了数组的末尾。当 i = 6 时，将不再执行条件，因为数组的最后一个索引是 5。

如何在 JavaScript 中使用 do…while 循环遍历数组

do...while 循环与 while 循环几乎相同，只是它先执行主体，然后再评估后续执行的条件。这意味着循环的主体总是至少执行一次。

让我们用 do...while 循环执行相同的循环，看看它是如何工作的：

let i = 0;

do {
    console.log(scores[i]);
    i++;
} while (i < scores.length);

这将返回我们数组中的每个元素：

22
54
76
92
43
33

如前所述，这将始终在评估任何条件集之前运行一次。例如，如果我们将索引 i 设置为 6，并且它不再小于 score.length，则循环体将在检查条件之前首先运行：

let i = 6;

do {
    console.log(scores[i]);
    i++;
} while (i < scores.length);

这将返回 undefined，因为我们在数组中没有索引为 6 的元素，但你可以看到它在停止之前运行了一次。

如何在 JavaScript 中使用 for 循环遍历数组

for 循环是一个迭代语句，它检查某些条件，然后只要满足这些条件就重复执行一段代码。

使用 for 循环方法时，我们不需要先初始化索引，因为初始化、条件、迭代都在括号中处理，如下所示：

for (let i = 0; i < scores.length; i++) {
    console.log(scores[i]);
}

这将像其他方法一样返回所有元素：

22
54
76
92
43
33

如何在 JavaScript 中使用 for...in 循环遍历数组

for...in 循环是一种更简单的遍历数组的方法，因为它为我们提供了键，我们现在可以使用该键以这种方式从数组中获取值：

for (i in scores) {
    console.log(scores[i]);
}

这将输出我们数组中的所有元素：

22
54
76
92
43
33

如何在 JavaScript 中使用 for...of 循环遍历数组

for...of 循环遍历可迭代对象，例如数组、集合、映射、字符串等。它与 for...in 循环具有相同的语法，但它不是获取键，而是获取元素本身。

这是循环数组的最简单方法之一，并在 JavaScript ES6 的更高版本中引入。

for (score of scores) {
    console.log(score);
}

这将获取数组的每个元素，我们不再需要使用索引来获取数组的每个元素：

22
54
76
92
43
33

如何在 JavaScript 中使用 forEach 循环遍历数组

数组方法 forEach() 循环遍历任何数组，按索引升序对每个数组元素执行一次提供的函数。此函数被称为回调函数。

这是一种更高级的方法，它可以做的不仅仅是简单地遍历每个元素，你也可以使用它以这种方式循环：

scores.forEach((score) => {
    console.log(score);
});

你可以这样写成一行：

scores.forEach((score) => console.log(score));

这将为我们提供与所有先前方法相同的输出：

22
54
76
92
43
33

总结

在本文中，我们研究了六种不同/标准的遍历数组的方法。

了解所有这些方法，然后确定哪种方法更适合你、更易于使用且更易于阅读，这一点非常重要。

在本文中，我将解释如何使用 ES2019（EcmaScript 2019）中引入的新数组方法——flat() 和 flatMap()。你可以使用这些方法来展平数组。

这些方法非常有用且易于使用。在你的下一个项目中使用这些方法真的很酷。喝杯咖啡，让我们开始学习吧。

前提

你应该熟悉 JavaScript 中数组的概念，然后才能学习本教程。

什么是数组

数组对象是一种数据结构，在不同的编程语言中用于存储不同的数据集合。

JavaScript 中的数组示例

const array = [1, 2, 3, true, null, undefined];

console.log(array);

// 期待的输出
1, 2, 3, true, null, undefined

在上面的代码中，我们分配了一个名为 arr 的变量，并在其中存储了不同数据类型的不同元素/数据。

第一个为 1 的元素位于索引 0 处。最后一个元素 undefined 位于索引 5 处。

不要忘记数组对象是零索引的，这意味着第一个元素从零索引开始。

JavaScript 数组的特征

• 数组是零索引的：这表示数组中的第一个元素位于索引 0 处。这里的索引表示位置。在 JavaScript 和其他编程语言中，我们应该使用的词是索引而不是位置。
• JavaScript 数组可以包含不同的数据类型：这意味着 JavaScript 数组可以包含数字、字符串、布尔值、空值等的混合。
• JavaScript 创建浅拷贝：这意味着你可以创建数组的不同副本——即无需更改原始数组。

新的 JavaScript 数组方法

数组是 JavaScript 中用于存储数据的最流行的数据结构之一。

你可以使用不同的数组方法来简化操作并使你的生活更轻松。其中一些方法包括 reduce()、filter()、map()、flat()、flatMap() 等等。

但在本文中，我们不会讨论 JavaScript 中使用的所有数组方法。在这里，我们将讨论新的 flat() 和 flatMap() 方法，你可以使用它们将原始数组转换为新数组。

如何在 JavaScript 中使用 flat 数组方法

你使用 flat 方法将原始数组转换为新数组。它通过收集数组中的子数组并将其连接到单个数组中来实现这一点。

关于此数组方法的一个重要说明是，你可以根据数组的深度将原始数组计算为另一个数组。这种方法非常有用，因为它使计算数组的操作变得更加容易。

flat() 数组方法的例子

如何设置 depth 参数

array.flat(depth);

depth 值默认为 1，你可以将其留空。depth 值采用数字作为其数据类型。

flat() 数组方法示例 1

array.flat(1) 等同于 array.flat()。

array.flat(2);

上面的 depth 值是 2。

const arr = ["mon", "tues", ["wed", "thurs", ["fri", "sat"]], "sun"] ;

console.log(arr.flat());

// 期待的输出
["mon", "tues", "wed", "thurs", Array ["fri", "sat"], "sun"];

那么这段代码发生了什么？

首先，该数组包含两个子数组，它们是 ["wed", "thurs", ["fri", "sat"]]。

我们在名为 arr 的数组上使用 flat() 方法连接第一个子数组，因为我们没有在 flat() 方法中指定 depth 值。回想一下，默认 depth 值为 1。

所以你可以猜到如果 depth 值为 2，数组对象会是什么，对吧？

flat() 数组方法示例 2

const arr = [1, 2, [3, 4, 5], 6, 7];

console.log(arr.flat());

// 期待的输出
[1, 2, 3, 4, 5, 6, 7]

在上面的代码中，数组包含一个子数组，即 [3, 4, 5]。

我们在名为 arr 的数组上使用 flat() 方法将两个数组连接在一起成为一个数组。

flat() 数组方法示例 3

//depth 2 example 
const arr2 = [[[1, 2], 3, 4, 5]] ;

console.log(arr2.flat(2));

// 期待的输出
[1, 2, 3, 4, 5]

在上面的代码中，名为 arr2 的数组包含两个子数组。

我们在 arr2 上使用 flat() 方法将两个数组连接成一个数组，因为在 flat(2) 方法中使用了 depth 值 2。快速浏览一下上面的 depth 值的作用。

数组方法是递归连接数组中元素的好方法。

如何在 JavaScript 中使用 flatMap 数组方法

flatMap() 方法使用 map() 和 flat() 方法的组合来执行操作。

flatMap() 循环遍历数组的元素，并将元素连接到一个级别。 flatMap() 接受一个回调函数，该函数接受原始数组的当前元素作为参数。

flatMap() 数组方法示例

const arr3 = [1, 2, [4, 5], 6, 7, [8]] ;

console.log(arr3.flatMap((element) => element)); 

// 期待的输出
[1, 2, 4, 5, 6, 7, 8]

在上面的代码中，名为 arr3 的数组包含两个不同的子数组。

我们通过传入一个回调函数 (element) => element 在数组上使用 flatMap() 方法，该函数循环遍历数组，然后将数组连接成一个数组。

有时你会遇到一种情况，即 depth 值大于 1，并且你决定将新数组更改为一个基本级别，然后你必须在 flatMap() 方法之后立即使用 flat() 方法。

这是一个例子：

const arr4 = [1, 2, [3, [4, 5, [6, 7]]]] ;

console.log(arr4.flatMap((element) => element).flat(2)) ;

// 期待的输出 
[1, 2, 3, 4, 5, 6, 7]

在上面的代码中，名为 arr4 的数组包含三个子数组。

我们通过传入一个回调函数 (element) => element 在数组上使用 flatMap() 方法，该函数循环遍历数组，然后连接数组。

我们使用 flat(2) 方法通过传入 depth 值 2 来进一步将数组连接成单个数组。

确保在不通过 flat(2) 方法的情况下练习上面的示例并查看差异。

这就是你开始使用这两种新数组方法所需的全部内容。

小结

在本文中，我简要讨论了数组是什么以及它们在 JavaScript 中的用处。然后我们了解了 ECMAScript 2019 中引入的两个新的重要数组方法，它们允许你将原始数组更改为新数组。

这些新的数组方法是 flat() 和 flatMap() 方法。

你使用 flat() 方法将子数组递归地连接到单个数组中。flat() 方法将 depth 值作为其参数，该参数是可选的，具体取决于你希望展平（连接）的数组的深度。flat() 方法默认采用 1 作为深度。

另一方面，flatMap() 的工作原理基本相同，只是它是 map() 和 flat() 方法的组合。 flatMap() 循环遍历数组中的元素并连接元素。

当你将原始数组更改为新数组时，这两种新方法都很有用。它们值得你在下一个大项目或小项目中尝试。

参考资料：

• MDN 上关于 flatMap() 的介绍
• MDN 上关于 flat() 的介绍

你可以使用 JavaScript 中的 includes() 方法来检查一个项目是否存在于数组中。你还可以使用它来检查字符串中是否存在子字符串。

如果在数组/字符串中找到该项目，则返回 true；如果该项目不存在，则返回 false。

在本文中，你将了解如何使用 JavaScript 中的 includes() 方法来检查项目是否在数组中，以及字符串中是否存在子字符串。

在 JavaScript 中如何使用 Array.includes() 来检查项目是否在数组中

下面是使用 includes() 方法检查项目是否在数组中的语法：

array.includes(item, fromIndex)

让我们分解上面的语法：

array 表示将被搜索以检查项目是否存在的数组的名称。

includes() 方法接受两个参数——item 和 fromIndex。

• item 是你正在搜索的特定项目。
• fromIndex 是一个可选参数，指定开始搜索的索引。如果不包含此参数，则默认索引将设置为 0（第一个索引）。

下面是一些示例，展示如何使用 includes() 方法检查数组中是否存在项目：

const nums = [ 1, 3, 5, 7];
console.log(nums.includes(3));
// true

在上面的示例中，我们创建了一个名为 nums 的数组，其中包含四个数字——1、3、5、7。

使用点表示法，我们将 includes() 方法附加到 nums 数组。

在 includes() 方法的参数中，我们传入了 3，这是我们要搜索的项目。

我们返回了 true，因为 nums 数组中存在 3。

让我们尝试搜索数组中不存在的数字。

const nums = [ 1, 3, 5, 7];
console.log(nums.includes(8));
// false

正如预期的那样，我们在上面的示例中返回了 false，因为 8 不是 nums 数组中的项目。

在 JavaScript 中如何使用 Array.includes() 从指定索引开始检查项目是否在数组中

在上一节中，我们看到了如何在不使用 includes() 方法中的第二个参数的情况下检查一个项目是否存在于数组中。

提醒一下，第二个参数用于指定在数组中搜索项目时的起始索引。

数组的索引从 0 开始。所以第一项是 0，第二项是 1，第三项是 2，以此类推。

下面是一个例子来展示我们如何使用 includes() 方法的第二个参数：

const nums = [ 1, 3, 5, 7];
console.log(nums.includes(3,2));
// false

即使我们在数组中有 3 这个项目，上面的示例仍返回 false，原因如下：

使用第二个参数，我们告诉 include() 方法从索引 2 开始搜索数字 3：nums.includes(3,2)。

这是数组： [ 1, 3, 5, 7]
索引 0 = 1
索引 1 = 3
索引 2 = 5
索引 3 = 7

所以从第二个索引 5 开始，我们只有 5 和 7 ([5,7]) 需要搜索。这就是为什么从索引 2 搜索 3 返回 false 的原因。

如果你更改索引以从 1 开始搜索，那么将返回 true，因为可以在该范围内找到 3。

const nums = [ 1, 3, 5, 7];
console.log(nums.includes(3,1));
// true

在 JavaScript 中如何使用 includes() 方法检查子字符串是否在字符串中

与前面的示例类似，你必须使用点表示法将 include() 方法附加到要搜索的字符串的名称上。

语法如下所示：

string.includes(substring, fromIndex)

这是一个例子：

const bio = "I am a web developer";
console.log(bio.includes("web"));
// true

在上面的示例中，bio 变量的值为 “I am a web developer”。

使用 includes() 方法，我们搜索了子字符串 “web”。

我们返回了 true，因为 “web” 在 bio 字符串中。

你还可以使用第二个参数指定搜索的开始位置，但请注意字符串中的每个字符都代表一个索引，每个子字符串之间的空格也代表一个索引。

这是一个示例：

let bio = "I am a web developer";
console.log(bio.includes("web",9));
// false

我们得到了 false，因为 “web” 中的索引 9 是 e。

从索引 9 开始，字符串将是 “eb developer”。字符串中不存在子字符串 “web”，因此返回 false。

小结

在本文中，我们讨论了 JavaScript 中的 includes() 方法。你可以使用它来检查一个项目是否存在于数组中。你还可以使用它来检查是否可以在字符串中找到子字符串。

我们看到了一些示例，这些示例解释了它用于从第一个索引开始检查数组中的项目，然后是指定索引的另一个示例。

最后，我们看到了如何使用 includes() 方法来检查从第一个索引和指定索引开始的字符串中是否存在子字符串。

祝你编程愉快！

String.prototype.replace() 方法搜索第一次出现的字符串，并将其替换为指定的字符串。它在不改变原始字符串的情况下执行此操作。

此方法也适用于正则表达式，因此你正在搜索的项目可能是正则表达式。

作为替换值返回的值可能是字符串或函数。

String.prototype.replace() 方法的基本语法

const variable = variable.replace("stringToReplace", "expectedString");

你可以通过以下方式使用 replace() 方法：

• 将初始字符串或字符串分配给变量
• 声明另一个变量
• 对于新变量的值，在新变量名前加上 replace() 方法
• 逗号分隔要替换的字符串和括号中的预期字符串

String.prototype.replace() 方法使用示例

这是一个基本的示例：

const coding = "I learned how to code from TV";
const replacedString = coding.replace("TV", "freeCodeCamp");

console.log(replacedString); // Result: I learned how to code from freeCodeCamp

在上面的示例中：

• 我声明了一个名为 coding 的变量，并为它赋值了字符串 “I learned how to code from TV”
• 我声明了另一个名为 replacedString 的变量
• 对于 replacedString 变量的值，我引入了 replace() 方法，并指定我想将初始变量中的 “TV” 替换为 “freeCodeCamp”。

下面是一个示例，展示了 replace() 方法永远不会改变（更改）初始字符串：

const coding = "I learned how to code from TV";
const replacedString = coding.replace("TV", "freeCodeCamp");

console.log(replacedString); // Result: I learned how to code from freeCodeCamp
console.log(coding); // Result: I learned how to code from TV

在下面的示例中，我使用正则表达式搜索匹配 “TV” 的文本并将其替换为 “freeCodeCamp”：

const coding = "I learned how to code from TV";
const replacedString = coding.replace(/TV/, "freeCodeCamp");

console.log(replacedString); // Result: I learned how to code from freeCodeCamp

由于 replace() 方法仅适用于字符串中某些文本第一次出现，如果你想用另一个单词完全替换字符串中的某个单词怎么办？你可以使用 replaceAll() 方法。

如何使用 replaceAll() 方法

与 replace() 方法稍微相似的字符串方法是 replaceAll() 方法。

此方法完全替换字符串中某个单词。

replaceAll() 方法示例

const coding = "I learned how to code from TV. TV remains in my heart for life.";
const replacedString = coding.replaceAll("TV", "freeCodeCamp");

console.log(replacedString); // Result: I learned how to code from freeCodeCamp. freeCodeCamp remains in my heart for life.

replaceAll() 方法把每次出现的 “TV” 都被替换为 “freeCodeCamp”。

使用原始的 replace() 方法，你可以通过使用正则表达式搜索字符串中某个单词，并将其替换为另一个单词，来实现 replaceAll() 的功能。

const coding = "I learned how to code from TV. TV remains in my heart for life.";
const replacedString = coding.replace(/TV/g, "freeCodeCamp");

console.log(replacedString); // Result: I learned how to code from freeCodeCamp. freeCodeCamp remains in my heart for life.

我能够使用正则表达式的 g 标志搜索与 “TV” 匹配的每个单词，并将其替换为 “freeCodeCamp”。

如何将函数传递给 replace() 方法

正如我之前所说，你可以将要返回的值作为函数的替换值。

在下面的示例中，我使用 replace() 方法将本文的标题转换为 URL slug：

const articleTitle = "JavaScript Replace – How to Use the String.prototype.replace() Method";
const slugifyArticleTitle = articleTitle.toLowerCase().replace(/ /g, function (article) {
    return article.split(" ").join("-");
  });

console.log(slugifyArticleTitle); //Result: javascript-replace-–-how-to-use-the-string.prototype.replace()-method

在上面的脚本中：

• 我声明了一个名为 articleTitle 的变量，并把这篇文章的标题赋值给它
• 我声明了另一个名为 slugifyArticleTitle 的变量，并使用 toLowerCase() 方法将文章标题转换为小写字母
• 我引入了 replace() 方法并用 / /g 搜索每个空格
• 然后我将一个函数传递给 replace() 方法，并为其分配了一个 article 参数，该参数是指被转换为小写字母的字符串（文章标题）
• 在函数内部，返回的是将文章标题按空格进行拆分，这是通过 split() 方法完成的
• 在所有有空格的地方拆分文章标题后，我使用 join() 方法用连字符连接字符串中的各个字母

总结

String.prototype.replace() 方法是一个强大的字符串方法，你可以在 JavaScript 中处理字符串时完成很多事情。

除了 String.prototype.replace() 方法之外，我还向你展示了如何使用 String.prototype.replaceAll() 方法—— String.prototype.replace() 方法的混合体。

你应该小心使用 String.prototype.replaceAll() 方法，因为某些浏览器尚不支持它。除了使用 replaceAll()，我还向你展示了如何通过使用正则表达式搜索特定字符串中的所有值来实现相同的功能。

如果你觉得这篇文章有帮助，请不要犹豫，与你的朋友和家人分享它。

感谢你阅读本文。

如果你是一个想提升自身编程能力的 JavaScript 开发者，那你应该对最常用的 ES5 和 ES6+ 的数组方法很熟悉。

这些方法能使编程变得更简单，并让你的代码看起来整洁易读。

在这篇文章中，我们将探索一些最受欢迎并被广泛使用的数组方法。让我们开始吧。

Array.forEach 方法

Array.forEach 方法的语法如下：

Array.forEach(callback(currentValue [, index [, array]])[, thisArg]);

forEach 方法为数组中的每一项执行一次给定的函数。

请看以下代码：

const months = ['January', 'February', 'March', 'April'];

months.forEach(function(month) {
  console.log(month);
});

/* output

January
February
March
April

*/

这里是 CodePen 演示。

在这个 forEach 循环的回调函数中，数组中的每一项都自动作为第一个参数传到函数中。

与上面例子的效果相同的 for 循环代码如下：

const months = ['January', 'February', 'March', 'April'];

for(let i = 0; i < months.length; i++) {
  console.log(months[i]);
}

/* output

January
February
March
April

*/

这里是 CodePen 演示。

要记住的一点是，这个方法不返回任何值。

请看以下代码：

const months = ['January', 'February', 'March', 'April'];
const returnedValue = months.forEach(function (month) {
  return month;
});

console.log('returnedValue: ', returnedValue); // undefined

这里是 CodePen 演示。

注意 _forEach_ 只用于循环数组，执行操作或者打印日志。它并不返回任何值，即使在回调函数中明确的返回一个值（这意味着上个例子中返回的值是 undefined ）。

在上面的所有例子中，我们都只使用了回调函数的第一个参数。但回调函数还接收两个额外的参数，它们是：

• index - 当前迭代元素的索引
• array - 当前循环的原始数组

const months = ['January', 'February', 'March', 'April'];

months.forEach(function(month, index, array) {
  console.log(month, index, array);
});

/* output

January 0 ["January", "February", "March", "April"]
February 1 ["January", "February", "March", "April"]
March 2 ["January", "February", "March", "April"]
April 3 ["January", "February", "March", "April"]

*/

这里是 CodePen 演示。

根据不同的需求，你会发现 index 和array 这两个参数也很有用。

forEach 相比 for 循环的优点

• 使用 forEach 能让你的代码量更少，且更容易理解
• 使用 forEach 时，我们不需要记录数组中有多少可用元素，因此可以避免创建一个额外的计数器变量。
• 使用 forEach 循环更方便调试，因为循环数组没有额外的变量
• 在数组中所有元素都迭代完，forEach 循环会自动停止。

浏览器支持

• IE9 版本及以上和所有现代浏览器
• Edge12 版本及以上

Array.map 方法

数组的 map 方法是所有其他方法中最有用且使用最广泛的。

Array.map 方法的语法如下：

Array.map(function callback(currentValue[, index[, array]]) {
    // Return element for new_array
}[, thisArg])

map 方法为数组中的每个元素执行一次给定的函数，并且 返回一个转换过后的新数组。

请看以下代码：

const months = ['January', 'February', 'March', 'April'];
const transformedArray = months.map(function (month) {
  return month.toUpperCase();
});

console.log(transformedArray); // ["JANUARY", "FEBRUARY", "MARCH", "APRIL"]

这里是 CodePen 演示。

在上面的代码中，回调函数将每个元素转化成大写并且返回。

与上面例子的效果相同的 for 循环代码如下：

const months = ['January', 'February', 'March', 'April'];
const converted = [];

for(let i = 0; i < months.length; i++) {
 converted.push(months[i].toUpperCase());
};

console.log(converted); // ["JANUARY", "FEBRUARY", "MARCH", "APRIL"]

这里是 CodePen 演示。

使用 map 可以避免预先创建一个单独的 转换过的 数组来存储转换过的元素。因此使用 map 可以节省储存空间，也能让代码看起来更整洁，如下：

const months = ['January', 'February', 'March', 'April'];

console.log(months.map(function (month) {
  return month.toUpperCase();
})); // ["JANUARY", "FEBRUARY", "MARCH", "APRIL"]

这里是 CodePen 演示。

注意 map 方法返回一个与原数组长度一致的新数组。

forEach 与 map 方法的区别是 forEach 只用于循环，没有任何返回值。而 map 方法返回一个与原数组长度相同的新数组。

也要注意 map 并不改变原数组而是返回一个新的数组。

请看以下代码：

const users = [
  {
    first_name: 'Mike',
    last_name: 'Sheridan'
  },
  {
    first_name: 'Tim',
    last_name: 'Lee'
  },
  {
    first_name: 'John',
    last_name: 'Carte'
  }
];

const usersList = users.map(function (user) {
  return user.first_name + ' ' + user.last_name;
});

console.log(usersList); // ["Mike Sheridan", "Tim Lee", "John Carte"]

这里是 CodePen 演示。

这里通过使用对象数组和 map 方法，我们可以轻松生成一个姓和名组合的一维数组。

上面的代码中，我们使用 + 连接符连接两个值，但通常我们会使用 ES6 的模板字符串语法，如下：

const users = [
  {
    first_name: 'Mike',
    last_name: 'Sheridan'
  },
  {
    first_name: 'Tim',
    last_name: 'Lee'
  },
  {
    first_name: 'John',
    last_name: 'Carte'
  }
];

const usersList = users.map(function (user) {
  return `${user.first_name} ${user.last_name}`;
});

console.log(usersList); // ["Mike Sheridan", "Tim Lee", "John Carte"]

这里是 CodePen 演示。

如果你想得到数组中特定的数据，数组的 map 方法也是有用的，如下：

const users = [
  {
    first_name: 'Mike',
    last_name: 'Sheridan',
    age: 30
  },
  {
    first_name: 'Tim',
    last_name: 'Lee',
    age: 45
  },
  {
    first_name: 'John',
    last_name: 'Carte',
    age: 25
  }
];

const surnames = users.map(function (user) {
  return user.last_name;
});

console.log(surnames); // ["Sheridan", "Lee", "Carte"]

这里是 CodePen 演示。

在上面的代码中，我们只把每个用户的姓提取出来，然后将它们存储在一个数组中。

我们还可以使用 map 生成一个动态内容如下：

const users = [
  {
    first_name: 'Mike',
    location: 'London'
  },
  {
    first_name: 'Tim',
    location: 'US'
  },
  {
    first_name: 'John',
    location: 'Australia'
  }
];

const usersList = users.map(function (user) {
  return `${user.first_name} lives in ${user.location}`;
});

console.log(usersList); // ["Mike lives in London", "Tim lives in US", "John lives in Australia"]

这里是 CodePen 演示。

注意在上面的代码中，我们并没有改变原始的 users 数组。我们创建了一个新的动态内容数组，因为 map 总是返回一个新的数组。

使用 map 方法的优点

• 可以在不改变原数组的同时快速生成一个新数组
• 可以基于每个元素生成一个动态内容的数组
• 可以快速提取数组中的任意一个元素
• 它能生成一个与原数组长度相同的数组

浏览器支持

• IE9 版本及以上和所有现代浏览器
• Edge12 版本及以上

Array.find 方法

Array.find 方法的语法如下：

Array.find(callback(element[, index[, array]])[, thisArg])

_find_ 方法返回数组中满足给定条件的 _第一个元素_的 _值_。

find 方法将 callback 函数作为第一个 argument 对象，并为数组中的每个元素执行 callback 函数。每个数组中的元素值都被作为第一个参数传到 callback 函数中。

设想我们有这样一个应聘者列表：

const employees = [
 { name: "David Carlson", age: 30 },
 { name: "John Cena", age: 34 },
 { name: "Mike Sheridan", age: 25 },
 { name: "John Carte", age: 50 }
];

我们想得到姓名是 John 的应聘者记录，在这种情况下，我们可以使用 find 方法，如下：

const employee = employees.find(function (employee) {
  return employee.name.indexOf('John') > -1;
});

console.log(employee); // { name: "John Cena", age: 34 }

这里是 CodePen 演示。

尽管列表中有 "John Carte" ，但 find 方法在第一次匹配后就会停止。因此它不会返回名为 "John Carte" 的这个对象。

与上例相同的 for 循环代码如下：

const employees = [
 { name: "David Carlson", age: 30 },
 { name: "John Cena", age: 34 },
 { name: "Mike Sheridan", age: 25 },
 { name: "John Carte", age: 50 }
];

let user;

for(let i = 0; i < employees.length; i++) {
  if(employees[i].name.indexOf('John') > -1) {
    user = employees[i];
    break;
  }
}

console.log(user); // { name: "John Cena", age: 34 }

这里是 CodePen 演示。

可以看到的是，使用普通的 for 循环会使代码量更大并且更难理解。但是使用 find 方法，我们可以通过容易理解的方式写出同样的代码。

find 方法的优点

• 我们可以不用写大量代码就快速找到任意一个元素
• 找到匹配元素后会立即停止循环，因此不用写额外的 break 语句

浏览器支持

• 除 IE 之外的所有现代浏览器
• Edge 12 版本及以上

Array.findIndex 方法

Array.findIndex 方法的语法如下：

Array.findIndex(callback(element[, index[, array]])[, thisArg])

findIndex 方法返回数组中 满足给定测试条件 的第一个元素的 索引。否则返回 -1，表示没有元素通过检测。

const employees = [
  { name: 'David Carlson', age: 30 },
  { name: 'John Cena', age: 34 },
  { name: 'Mike Sheridan', age: 25 },
  { name: 'John Carte', age: 50 }
];

const index = employees.findIndex(function (employee) {
  return employee.name.indexOf('John') > -1;
});

console.log(index); // 1

这里是 CodePen 演示。

这里我们得到的输出 1 就是名为 John 的第一个对象的索引。注意索引是从0开始的。

与上面例子的效果相同的 for 循环代码如下：

const employees = [
  { name: 'David Carlson', age: 30 },
  { name: 'John Cena', age: 34 },
  { name: 'Mike Sheridan', age: 25 },
  { name: 'John Carte', age: 50 }
];

let index = -1;

for(let i = 0; i < employees.length; i++) {
  if(employees[i].name.indexOf('John') > -1) {
    index = i;
    break;
  }
}

console.log(index); // 1

这里是 CodePen 演示。

使用 findIndex 的优点

• 能让我们不用写大量代码就快速找到元素的索引
• 找到匹配元素后会立即停止循环，因此不用写额外的 break 语句
• 我们也可以用 find 方法来找到索引，但是使用 findIndex 会更简单，且能避免额外创建变量来存储索引

浏览器支持

• 除 IE 之外的所有现代浏览器
• Edge 12 版本及以上

Array.filter 方法

Array.filter 方法的语法如下：

Array.filter(callback(element[, index[, array]])[, thisArg])

filter 方法返回一个符合给定测试条件所有元素组成的 新数组 。

filter 方法将 callback 函数作为第一个 argument 对象，并为数组中的每一个元素执行该 callback 函数。数组中的每个元素值被作为第一个参数传递到 callback 函数中。

const employees = [
  { name: 'David Carlson', age: 30 },
  { name: 'John Cena', age: 34 },
  { name: 'Mike Sheridan', age: 25 },
  { name: 'John Carte', age: 50 }
];

const employee = employees.filter(function (employee) {
  return employee.name.indexOf('John') > -1;
});

console.log(employee); // [ { name: "John Cena", age: 34 }, { name: "John Carte", age: 50 }]

这里是 CodePen 演示。

从上面的代码里可以看出，使用 filter 方法能找出数组中所有符合特定检测条件的元素。

因此使用 filter ，在找到数组中符合条件的元素时也不会停止搜索其他满足条件的元素，之后会返回所有满足条件的元素。

find 与 filter 的主要区别在于 find 只返回数组中匹配的第一个元素，而 filter 返回数组中所有匹配元素。

注意 filter 方法返回的是一个数组，如果没有元素通过检测条件，将会返回一个空数组。

与上面例子的效果相同的 for 循环代码如下：

const employees = [
  { name: 'David Carlson', age: 30 },
  { name: 'John Cena', age: 34 },
  { name: 'Mike Sheridan', age: 25 },
  { name: 'John Carte', age: 50 }
];

let filtered = [];

for(let i = 0; i < employees.length; i++) {
 if(employees[i].name.indexOf('John') > -1) {
   filtered.push(employees[i]);
 }
}

console.log(filtered); // [ { name: "John Cena", age: 34 }, { name: "John Carte", age: 50 }]

这里是 CodePen 演示。

使用 filter 方法的优点

• 可以让我们快速找到数组中所有匹配的元素
• 不管有没有匹配到，都会返回一个数组，因此可以避免写额外的 if 条件
• 可以避免创建一个额外的变量来存储过滤后的元素

浏览器支持

• IE9 及以上和所有现代浏览器
• Edge 12 及以上

Array.every 方法

Array.every 方法的语法如下：

Array.every(callback(element[, index[, array]])[, thisArg])

every 方法检测数组中的所有元素是否都通过给定的条件，并且返回一个布尔值 true 或者 false 。

假设有一个数字组成的数组，想检测是否数组中的每个元素都是正数，我们可以使用 every 方法来完成。

let numbers = [10, -30, 20, 50];

let allPositive = numbers.every(function (number) {
  return number > 0;
});
console.log(allPositive); // false 

numbers = [10, 30, 20, 50];

allPositive = numbers.every(function (number) {
  return number > 0;
});
console.log(allPositive); // true

假设有一个注册表格，你想在提交前检查是否所有必填项都已输入，就可以使用 every 方法来轻松检查表单的每一项。

window.onload = function () {
  const form = document.getElementById('registration_form');
  form.addEventListener('submit', function (event) {
    event.preventDefault();
    const fields = ['first_name', 'last_name', 'email', 'city'];
    const allFieldsEntered = fields.every(function (fieldId) {
      return document.getElementById(fieldId).value.trim() !== '';
    });

    if (allFieldsEntered) {
      console.log('All the fields are entered');
      // All the field values are entered, submit the form
    } else {
      alert('Please, fill out all the field values.');
    }
  });
};

这里是 CodePen 演示。

上面 every 方法的回调函数中，我们检查表单的每一项是否都不为空，并且返回一个布尔值。

在上面的代码中，如果回调函数中，fields 数组中的每一项都返回 true ，那 every 方法就返回 true 。

如果 fields 数组中任意一个回调函数返回 false 值， every 方法就会返回 false 结果。

使用 every 方法的优点

• 能让我们不用写大量代码就快速检测出是否所有元素都满足特定的标准

浏览器支持

• IE9 及以上和所有现代浏览器
• Edge 12 及以上

Array.some 方法

Array.some 方法的语法如下：

 Array.some(callback(element[, index[, array]])[, thisArg]

some 方法检测数组中是否至少有一个元素通过给定函数的检测条件，并且返回一个 true 或 false 的布尔值。

一旦找到第一个匹配元素，会立即返回 true ，如果没有，则会返回 false 。

假定有一个数字组成的数组，我们想检测数组中是否至少包含一个正数，就可以使用 some 方法来完成。

let numbers = [-30, 40, 20, 50];

let containsPositive = numbers.some(function (number) {
  return number > 0;
});
console.log(containsPositive); // true 

numbers = [-10, -30, -20, -50];

containsPositive = numbers.every(function (number) {
  return number > 0;
});
console.log(containsPositive); // false

这里有一些使用 some 方法的有用场景：

Some 方法示例 1

假设有一个应聘者的列表，我们想检查某个特定的应聘者是否在这个数组中，如果有的话，同时要得到在数组总的索引位置。

因此我们可以使用 some 方法同时得到这两个值，而不用分别单独使用 find 和 findIndex 方法。

const employees = [
  { name: 'David Carlson', age: 30 },
  { name: 'John Cena', age: 34 },
  { name: 'Mike Sheridon', age: 25 },
  { name: 'John Carte', age: 50 }
];

let indexValue = -1;
const employee = employees.some(function (employee, index) {
  const isFound = employee.name.indexOf('John') > -1;
  if (isFound) {
    indexValue = index;
  }
  return isFound;
});

console.log(employee, indexValue); // true 1

这里是 CodePen 演示。

Some 方法示例 2

forEach、map 和 filter 方法会将数组中的所有元素从头到尾执行一次。没有终止循环的方法，除非找到特定的元素。

在这种情况下，我们可以使用数组的 some 方法。 map、forEach 和 some 方法的回调函数传递的参数都相同。

• 第一个参数是当前值
• 第二个参数是当前索引
• 第三个参数是原始数组

如上面例 1 中看到的，一旦找到特定的匹配值， some 方法就会停止循环。

使用 some 方法的优点

• 能让我们不用写大量代码就快速检测是否有匹配一定标准的元素
• 能快速终止循环，这是上面其他循环方法没有的

浏览器支持

• IE9 及以上和所有现代浏览器
• Edge 12 及以上

Array.reduce 方法

Array.reduce 方法的语法如下：

Array.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

reduce 方法对数组中的每个元素执行一个由你提供的 reducer 函数，将其结果汇总为单个返回值。

注意 reduce 方法的输出总是一个单一的值。它可以是一个对象、一个数字、一个字符串、一个数组等等，这取决于你想要 reduce 方法输出那种，但它总是一个单一的值。

如果你想求数组中所有数字的和，可以用 reduce 方法。

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce(function(accumulator, number) {
  return accumulator + number; 
}, 0);

console.log(sum); // 15

这里是CodePen 演示。

reduce 方法接收一个回调函数，参数为 accumulator, number, index 和 array 。在上面的代码中，我们只使用了 accumulator 和 number。

accumulator 包含数组中要用到的 initialValue 。initialValue 决定了 reduce 方法返回的数据类型。

number 是回调函数中的第二个参数，包含循环中的每个枚举值。

上面的代码中，我们提供了 0 作为 accumulator 的 initialValue 。因此回调函数第一次执行时，accumulator + number 是 0 + 1 = 1 ，返回值是 1。

下一次回调函数运行时，accumulator + number 是 1 + 2 = 3 （这里的 1 是上次迭代返回的值，2 是数组中下一个元素）。

下一次运行，accumulator + number 就是 3 + 3 = 6（这里的第一个 3 是上次迭代的返回值，下一个 3 是数组中下一个元素），并且这会持续到数组中的 numbers 不再迭代。

因此 accumulator 会保持上一次操作的值，就像一个静态变量。

上面的代码中，initialValue 的 0 并不是必须的，因为数组中的元素都是整数。

因此下面的代码同样可行：

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce(function (accumulator, number) {
  return accumulator + number;
});

console.log(sum); // 15

这里是 CodePen 演示。

这里的 accumulator 包含数组中的第一个元素，number 包含数组中的下一个元素（第一次迭代是 1 + 2 = 3 ，第二次迭代是 3 + 3 = 6 ，以此类推）。

但搞清楚 accumulator 的 initialValue 也是很有用的，因为这能让你更容易理解 reduce 方法的返回类型，并且得到正确类型的返回值。

请看以下代码：

const numbers = [1, 2, 3, 4, 5];

const doublesSum = numbers.reduce(function (accumulator, number) {
  return accumulator + number * 2;
}, 10);

console.log(doublesSum); // 40

这里是 CodePen 演示。

这里我们给数组中的每个元素乘以 2。我们给 accumulator 提供了一个 initialValue 为 10，因此 10 被加到总和结果中，如下：

[1 * 2, 2 * 2, 3 * 2, 4 * 2, 5 * 2] = [2, 4, 6, 8, 10] = 30 + 10 = 40

假设一个有 x 和 y 坐标的对象数组，你想得到 x 坐标的和，就可以使用 reduce 方法。

const coordinates = [
  { x: 1, y: 2 }, 
  { x: 2, y: 3 }, 
  { x: 3, y: 4 }
];

const sum = coordinates.reduce(function (accumulator, currentValue) {
    return accumulator + currentValue.x;
}, 0);

console.log(sum); // 6

这里是 CodePen 演示。

使用 reduce 方法的优点

• 使用 reduce 可以基于数组生成任何简单或者复杂类型的数据
• 它能记住循环中之前的返回值，因此可以避免创建一个保存历史值的全局变量

浏览器支持

• IE9 及以上和所有现代浏览器
• Edge 12 及以上

感谢阅读！

想要详细学习更多包括 let 和 const、promise、数组与对象解构、数组方法、async/await、import/export 等其他 ES6+ 的特性？

点击查看我的书：《掌握现代 JavaScript》。这本书为你学习 React 做准备，并且帮助你更好的掌握 JavaScript 和 React。

也可以通过我的免费课程 React Router 介绍 来从头学习 React Router。

想要紧跟最新 JavaScript、React、Node.js 的内容？在 LinkedIn 上关注我。

如果你需要将一个字符串分割成一个子字符串的数组，那么你可以使用JavaScript split() 方法。

在这篇文章中，我将介绍 JavaScript split() 方法并提供代码示例。

split() 方法的基本语法

下面是 JavaScript split() 方法的语法。

str.split(optional-separator, optional-limit)

optional-separator 参数是一种模式，它告诉计算机应该在哪里分割。

optional-limit 参数是一个正数，告诉计算机在返回的数组值中应该有多少个子字符串。

JavaScript split() 方法代码示例

在这第一个例子中，我有一个字符串 "I love freeCodeCamp"。如果我使用没有分隔符的 split() 方法，那么返回值将是整个字符串的数组。

const str = 'I love freeCodeCamp';

str.split();
// 返回值是 ["I love freeCodeCamp"]

使用分隔符参数的例子

如果我想改变它，使字符串被分割成单个字符，那么我需要添加一个分隔符。分隔符将是一个空字符串。

const str = 'I love freeCodeCamp';

str.split('');
// 返回值 ["I", " ", "l", "o", "v", "e", " ", "f", "r", "e", "e", "C", "o", "d", "e", "C", "a", "m", "p"]

请注意，在返回值中，空格被视为字符。

如果我想改变它，使字符串被分割成各个单词，那么分隔符将是一个带有空格的空字符串。

const str = 'I love freeCodeCamp';

str.split(' ');
// 返回值 ["I", "love", "freeCodeCamp"]

使用 limit 参数的例子

在这个例子中，我将使用 limit 参数来返回一个只包含句子 "I love freeCodeCamp" 的第一个单词的数组。

const str = 'I love freeCodeCamp';

str.split(' ',1);
// 返回值 ["I"]

如果我把 limit 改为零，那么返回值将是一个空数组。

const str = 'I love freeCodeCamp';

str.split(' ',0);
//返回值 []

你应该使用 split() 方法来反转一个字符串吗

反转字符串的练习是一个非常流行的编码挑战。解决它的一个常见方法是使用 split() 方法。

在这个例子中，我们有一个字符串 “freeCodeCamp”。如果我们想反转这个词，那么我们可以把 split()、reverse() 和 join() 方法连在一起，以返回新的反转字符串。

const str = 'freeCodeCamp';

str.split('').reverse().join('');
//返回值 "pmaCedoCeerf"

.split('') 部分将字符串分割成一个字符数组。

.reverse() 部分将字符数组反转。

.join('') 部分将数组中的字符连接起来并返回一个新的字符串。

这种方法似乎对这个例子很有效。但在一些特殊情况下，这种方法是行不通的。

让我们看一下 MDN 文档中提供的例子。

如果我们试图反转字符串 “mañana mañana”，那么就会导致意外的结果。

const str = 'mañana mañana'
const reversedStr = str.split('').reverse().join('')

console.log(reversedStr)
// 返回值将是 "anãnam anañam"

Notice how the tilde(~) is placed over the letter "a" instead of "n" in the reversed word. This happens because our string contains what is called a grapheme.

A grapheme cluster is a series of symbols combined to produce one single character that humans can read on screen. When we try to reverse the string using these types of characters, the computer can misinterpret these characters and produce an incorrect version of the reversed string.

If we just isolate the split method, you can see how the computer is breaking up each individual character.

注意到在反转的单词中，波浪线（~）是如何放在字母 "a" 而不是 "n" 上面的。发生这种情况是因为我们的字符串包含了所谓的字素。

字素簇是一系列符号组合成的一个单一字符，人类可以在屏幕上阅读。当我们试图用这些类型的字符来反转字符串时，计算机会误解这些字符，并产生一个不正确的反转字符串版本。

如果我们只是孤立的分割方法，你可以看到计算机是如何分割每个单独的字符的。

const str = 'mañana mañana'

console.log(str.split(''))
//["m", "a", "ñ", "a", "n", "a", " ", "m", "a", "n", "̃", "a", "n", "a"]

如果你使用这些特殊字符，你可以在你的项目中使用一些包来修复这个问题，并正确地反转字符串。

总结

JavaScript split() 方法是用来将一个字符串分割成一个子字符串数组的。

下面是 JavaScript split() 方法的语法。

str.split(optional-separator, optional-limit)

分隔符是一种模式，它告诉计算机每个分割应该发生在哪里。

limit 参数是一个正数，告诉计算机在返回的数组值中应该有多少个子字符串。

你可以使用 split() 方法来反转一个字符串，但是在一些特殊情况下这是行不通的。如果你的字符串中包含字素簇，那么结果可能会产生一个不正确的反转词。

你也可以选择使用 spread() 语法，在反转字符串之前将其拆分。

const str = 'mañana mañana'
console.log([...str].reverse().join(""))

我希望你喜欢这篇文章，并祝你在 JavaScript 之旅中好运。

在这篇文章中，我们将讨论 Java 中的数组。我将通过一些例子来帮助你理解什么是数组，如何声明数组，以及如何在你的 Java 代码中使用它们。

什么是数组

在 Java 中，你用数组来在一个变量中存储多个相同数据类型的值。你也可以把它看作是同一数据类型的值的集合。这意味着如果你要在数组中存储字符串，那么你的数组中的所有值都应该是字符串。

如何在 Java 中声明一个数组

我们使用方括号 [] 来声明一个数组：

String[] names;

我们已经声明了一个名为 names 的变量，它将保存一个字符串数组。

如果我们要为整数声明一个变量，那么我们会这样做：

int[] myIntegers;

所以要创建一个数组，你要指定将存储在数组中的数据类型，后面加方括号，然后是数组的名称。

如何在 Java 中初始化一个数组

初始化一个数组只是意味着给数组赋值。让我们来初始化我们在上一节中声明的数组。

String[] names = {"John", "Jade", "Love", "Allen"};

int[] myIntegers = {10, 11, 12};

我们通过传入相同数据类型的值来初始化数组，每个值用逗号隔开。

如果我们想访问数组中的元素/值，我们将参考它们在数组中的索引号。第一个元素的索引是 0。下面是一个例子：

String[] names = {"John", "Jade", "Love", "Allen"};

System.out.println(names[0]);
// John

System.out.println(names[1]);
// Jade

System.out.println(names[2]);
// Love

System.out.println(names[3]);
// Allen

现在我们知道了如何访问每个元素，让我们来改变第三个元素的值：

String[] names = {"John", "Jade", "Love", "Allen"};
names[2] = "Victor";

System.out.println(names[2]);
// Victor

我们还可以使用 length 属性检查数组的长度，例如：

String[] names = {"John", "Jade", "Love", "Allen"};
System.out.println(names.length);
// 4

如何在 Java 中遍历一个数组

我们可以使用 for 循环来遍历一个数组中的元素。

String[] names = {"John", "Jade", "Love", "Allen"};
for (int i = 0; i < names.length; i++) {
  System.out.println(names[i]);
}

// John
// Jade
// Love
// Allen

上面的循环将打印我们数组中的元素。我们使用了 length 属性来指定循环运行的次数。

小结

在这篇文章中，我们学习了如何在 Java 代码中声明和初始化数组。我们还看到了如何访问数组中的每个元素，以及如何在这些元素中循环。

祝你编程愉快！

什么是数组

根据定义，数组是相同类型数据的集合。

声明一个数组，你就可以在同一个内存中拥有多个值——不像变量，你只能在内存中拥有一个值。

因此，数组让你可以创建一个将不同的值保存在一起的变量，而不是为每个值声明一个变量。

数组中特定数据点的位置被称为其索引，而数据本身被称为元素。

在本教程中，我将向你展示如何声明一个数组，初始化它，并使用 for 循环和增强的 for 循环遍历它。 然后你可以开始在你的 Java 项目中使用它。

我将使用 intelliJIDEA IDE 来编写代码。你可以根据需要使用它，也可以使用你选择的任何 IDE。

如何在 Java 中声明和初始化数组

在 Java 中有两种方法可以声明和初始化数组。第一个是使用 new 关键字，你必须在其中一个一个地初始化值。第二种方法是将值放在花括号中。

如何使用 new 关键字初始化数组

你可以使用以下语法声明数组：

dataType [ ] nameOfArray;

dataType：要放入数组的数据类型。这可以是字符串、整数、双精度值等。

[ ]：表示要声明的变量将包含数组。

nameOfArrary：数组标识符。

有了上面的信息，你只声明了数组——你还需要初始化它。

以这种方式初始化数组的基本语法如下所示：

dataType [] nameOfArray = new dataType [size]

大小通常用数值表示，它表示你想在数组中保存多少个值。它的值是不可变的，这意味着你将无法放入超过指定为数组大小的数字。

你现在可以将值放入数组中，如下所示：

package com.kolade;

import java.util.Arrays;

public class Main {

    public static void main(String[] args) {
   // 在这里写你的代码
String [] names = new String[3];
names[0] = "Quincy";
names[1] = "Abbey";
names[2] = "Kolade";
   }
}

在上面的代码片段中，我初始化了一个名为 names（标识符）的字符串数组，大小是 3，所以它只能容纳三个值。

总共有3个索引：

• 第一个值 Quincy 的索引是 0
• 第二个值 Abbey 的索引是 1
• 第三个值 Kolade 的索引是 2

不要被数字 0、1、2 弄得迷糊。数组是从 0 开始计数，而不是从 1 开始。

在上面的数组中，如果你添加额外的数据——例如，names[3] = “Chris”——你会得到一个错误，因为你已经指定了数组应该只包含 3 个值。如果要添加更多值，则必须增加数组的大小。

要将数组打印到控制台，你可以使用内置的 toString() 方法：

System.out.println(Arrays.toString(names));

2. 如何在一行中初始化数组

你可以使用如下基本的语法在一行代码中初始化一个数组：

dataType [ ] nameOfArray = {value1, value2, value3, value4}

使用此方法，你无需指定数组的大小，因此你可以在其中放入任意数量的值。

查看下面代码片段中的示例：

package com.kolade;

import java.util.Arrays;

public class Main {

    public static void main(String[] args) {
   // write your code here
     String [] namesTwo = {"Quincy", "Abbey", "Kolade", "Chris", "Kayode"};
  }
}

将数组打印到控制台显示如下值：

如何在 Java 中循环遍历数组

你可以使用 for 循环和增强的 for 循环遍历 Java 中的数组。使用 for 循环，你可以访问各个值的索引，但使用增强的 for 循环，你不能这么做。

如何使用 for 循环遍历数组

在 Java 中，你可以使用 for 循环的基本语法：

for (dataType i = 0; i < nameOfArray.length; i++) {
    //   要执行的代码
}

你可以像这样遍历 namesTwo 数组：

package com.kolade;

import java.util.Arrays;

public class Main {

    public static void main(String[] args) {
   // 在这里写你的代码

        String [] namesTwo = {"Quincy", "Abbey", "Kolade", "Chris", "Kayode"};

        for (int i = 0; i < namesTwo.length; i++) {
            System.out.println("Element at index " + i + " : " + namesTwo[i]);
        }
    }
}

如何使用增强的 for 循环遍历数组

增强的 for 循环是 for 循环的更清晰版本。缺点你无法使用它访问数组中各个值的索引。

增强的 for 循环的基本语法如下所示：

for (dataType variable : nameOfArray) {
    // 要执行的代码
}

package com.kolade;

import java.util.Arrays;

public class Main {

    public static void main(String[] args) {
   // 在这里写你的代码

        String [] namesTwo = {"Quincy", "Abbey", "Kolade", "Chris", "Kayode"};

        for (String names : namesTwo) {
            System.out.println(names);
        }
    }
}

总结

在本教程中，你学习了如何以两种不同的方式声明和初始化数组——使用 new 关键字和使用大括号。

你还学习了如何使用 for 循环和增强的 for 循环遍历数组，因此你不只是初始化数组，而什么都不做。

感谢你阅读本文！

原文：Java Array Declaration – How to Initialize an Array in Java with Example Code，作者：Kolade Chris

数组是一种用来保存相同数据类型的数据结构。 数组的元素在内存中是连续存储的。

Java 中数组即对象。类的所有方法都被放进数组中调用。我们可以声明一个指定长度的数组。

声明一个基本数据类型数组：

int[] intArray = {2,5,46,12,34};

现在尝试使用  System.out.println()  方法打印数组：

System.out.println(intArray);
// output: [I@74a14482

为什么 Java 没有打印出来数组数据呢？背后发生了什么事情？

方法  System.out.println()  通过调用  String.valueOf()  把入参对象转换为一个字符串。 如果我们查看  String.valueOf()  方法的实现，会看到如下的代码：

public static String valueOf(Object obj) {
    return (obj == null) ? "null" : obj.toString();
}

如果入参是  null  会返回空， 其它情况会调用  obj.toString()。 最后  System.out.println()  调用  toString()  方法打印出了字符串。

如果对象的类没有重写  Object.toString()  方法并实现，那就会调用超类  Object  的  Object.toString()  方法。

Object.toString()  返回的是  getClass().getName()+****‘@’****+Integer.toHexString(hashCode())。 简化格式为：“class name @ object’s hash code”。

上文中输出的内容是  [I@74a14482，  [  表示数组，  I  表示 int 数据类型（数组的数据类型）。  74a14482  是数组的无符号十六进制 hash 值。

当创建自定义类时，重写  Object.toString()  方法是最佳的实践。

Java 中我们不能简单的使用  System.out.println()  方法打印数组。 相反，下面的几种方法可以打印：

1. 循环：for 循环和 for-each 循环
2. Arrays.toString()  方法
3. Arrays.deepToString()  方法
4. Arrays.asList()  方法
5. Java Iterator interface
6. Java Stream API

让我们来学习如何使用它们吧。

1. 循环：for 循环和 for-each 循环

for 循环示例：

int[] intArray = {2,5,46,12,34};

for(int i=0; i<intArray.length; i++){
    System.out.print(intArray[i]);
    // output: 25461234
}

Java 的包装类都重写了  Object.toString()  ，返回数组元素的字符串形式。

for-each 循环示例：

int[] intArray = {2,5,46,12,34};
for(int i: intArray){
    System.out.print(i);
    // output: 25461234
}

2. Arrays.toString() 方法

Arrays.toString()  是  java.util  包下数组类的一个静态方法。它返回指定数组内容的字符串形式。这种方法可以用来打印一维数组。

数组元素被转换为字符串，调用了  String.valueOf()  方法，例如：

int[] intArray = {2,5,46,12,34};
System.out.println(Arrays.toString(intArray));
// output: [2, 5, 46, 12, 34]

对于引用类型的数组，确保重写该引用类的  Object.toString()  方法。

例如：

public class Test {
    public static void main(String[] args) {
        Student[] students = {new Student("John"), new Student("Doe")};
    System.out.println(Arrays.toString(students));
    // output: [Student{name='John'}, Student{name='Doe'}]
}}
class Student {
    private String name;
public Student(String name){
    this.name = name;
}
public String getName() {
    return name;
}
public void setName(String name) {
    this.name = name;
}
@Override
public String toString() {
    return "Student{" + "name='" + name + ''' + '}';
}

此方法不适用于多维数组。在多维数组中，  Object.toString()  会打印数组元素的内存地址而不是内容。

例如：

// creating multidimensional array
int[][] multiDimensionalArr = { {2,3}, {5,9} };
System.out.println(Arrays.toString(multiDimensionalArr));
// output: [[I@74a14482, [I@1540e19d]

借助  Arrays.deepToString()  方法可以打印多维数组。

3. Arrays.deepToString() 方法

Arrays.deepToString()  返回数组“深层内容”的字符串形式。

对于基本类型数组，通过重载调用  Arrays.toString()  方法将其转换为字符串。

基本类型多维数组示例：

// creating multidimensional array
int[][] multiDimensionalArr = { {2,3}, {5,9} };
System.out.println(Arrays.deepToString(multiDimensionalArr));
// output: [[2, 3], [5, 9]]

对于引用类型数组，通过递归调用  Arrays.deepToString()  方法将其转换为字符串。

Teacher[][] teachers = 
{{ new Teacher("John"), new Teacher("David") }, {new Teacher("Mary")} };
System.out.println(Arrays.deepToString(teachers));
// output: 
[[Teacher{name='John'}, Teacher{name='David'}],[Teacher{name='Mary'}]]

我们在 Teacher 类中重写了  Object.toString()  方法。

如果你对递归调用感兴趣，请查看  Arrays.deepToString()  方法的源码。

NOTE:  引用类型的一维数组也可以用  Arrays.deepToString()  方法打印。 例如:

Integer[] oneDimensionalArr = {1,4,7};
System.out.println(Arrays.deepToString(oneDimensionalArr));
// output: [1, 4, 7]

4. Arrays.asList() 方法

此方法返回固定大小（数组长度）的列表。

Integer[] intArray = {2,5,46,12,34};
System.out.println(Arrays.asList(intArray));
// output: [2, 5, 46, 12, 34]

因为 List 是对象列表集合，所以数据类型由 int 变为 Integer。当我们把数组转换为列表时，数组应该是引用类型。

Java 调用  Arrays.**asList**(intArray).toString()  。其内部实现是列表元素调用了  toString()  方法。

自定义 Teacher 类示例：

Teacher[] teacher = { new Teacher("John"), new Teacher("Mary") };
System.out.println(Arrays.asList(teacher));
// output: [Teacher{name='John'}, Teacher{name='Mary'}]

NOTE:  不能使用此方法打印多维数据。 例如：

Teacher[][] teachers = 
{{ new Teacher("John"), new Teacher("David") }, { new Teacher("Mary") }};
System.out.println(Arrays.asList(teachers));
// output: [[Lcom.thano.article.printarray.Teacher;@1540e19d, [Lcom.thano.article.printarray.Teacher;@677327b6] 

5. Java Iterator interface

Iterator 接口和 for-each 循环类似，可以使用 Iterator 接口遍历数组元素并打印。

Collection 调用  iterator()  方法创建 Iterator 对象。Iterator 对象可以遍历该集合的元素。

Iterator 接口打印数组示例：

Integer[] intArray = {2,5,46,12,34};
// creating a List of Integer
List<Integer> list = Arrays.asList(intArray);
// creating an iterator of Integer List
Iterator<Integer> it = list.iterator();
// if List has elements to be iterated
while(it.hasNext()) {
    System.out.print(it.next());
    // output: 25461234
}

6. Java Stream API

Stream API 用于处理对象集合。 流是一个对象序列。流不能改变原始数据结构，它仅根据请求的操作提供结果。

借助终端操作  forEach()  可以遍历流的每个元素。

例如：

Integer[] intArray = {2,5,46,12,34};
Arrays.stream(intArray).forEach(System.out::print);
// output: 25461234

现在我们掌握了 Java 数组的打印方式。

感谢阅读！

我的另一篇文章在  Medium。

Happy Coding!

原文：Java Array Methods – How to Print an Array in Java，作者：Thanoshan MV

在本文中，我将分享在 JavaScript 中使用对象数组的基础知识。

如果你曾经使用过 JSON 结构，那么你就已经使用过 JavaScript 对象。JSON 的意思是 JavaScript Object Notation（JavaScript 对象表示法）。

创建对象是如此简单：

{
  "color": "purple",
  "type": "minivan",
  "registration": new Date('2012-02-03'),
  "capacity": 7
}

这个对象代表一辆汽车。汽车可以有多种类型和颜色，每个对象代表一辆特定的汽车。

大多数时候你都是从外部服务获取此类数据。但是，有时你需要手动创建对象及其数组，就像我创建这个电子商店时所做的一样：

每个类别列表项在 HTML 中看起来是像这样：

我不想将此代码重复 12 次，这将使其无法维护。

创建一个对象数组

我们回到汽车。看一下这一组汽车：

我们可以将它们写成这样的数组：

let cars = [
  {
    "color": "purple",
    "type": "minivan",
    "registration": new Date('2017-01-03'),
    "capacity": 7
  },
  {
    "color": "red",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  },
  {
    ...
  },
  ...
]

对象数组并非始终保持不变。我们几乎总是需要操作它们。因此，让我们看一下如何将对象添加到已经存在的数组中。

使用 Array.unshift 在开头添加一个新对象

我们可以使用 Array.unshift 在数组的开头添加一个新的对象。

let car = {
  "color": "red",
  "type": "cabrio",
  "registration": new Date('2016-05-02'),
  "capacity": 2
}
cars.unshift(car);

使用 Array.push 在结尾添加一个新对象

我们可以使用 Array.push 在数组的结尾添加一个新的对象。

let car = {
 "color": "red",
 "type": "cabrio",
 "registration": new Date('2016-05-02'),
 "capacity": 2
}
cars.push(car);

使用 Array.splice 在中间添加一个新对象

我们可以使用 Array.splice 在数组的中间添加一个新的对象。这个方法非常方便，因为它也可以删除项目。注意其参数：

Array.splice(
  {index where to start},
  {how many items to remove},
  {items to add}
);

因此，如果我们要在第五个位置添加红色的 Volkswagen Cabrio，可以这么写：

let car = {
  "color": "red",
  "type": "cabrio",
  "registration": new Date('2016-05-02'),
  "capacity": 2
}
cars.splice(4, 0, car);

遍历对象数组

让我在这里问你一个问题：为什么要遍历对象数组？我要问的原因是，循环几乎从来不是我们用于实现目的的首选。

JavaScript 提供了许多功能，可以解决你的问题，而无需通过循环来实现。让我们来看看。

使用 Array.find 根据它的值在数组中找到对象

如果我们想找到红色的车，可以使用 Array.find。

let car = cars.find(car => car.color === "red");

它返回第一个匹配的元素：

console.log(car);
// output:
// {
//   color: 'red',
//   type: 'station wagon',
//   registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)',
//   capacity: 5
// }

也可以搜索多个值：

let car = cars.find(car => car.color === "red" && car.type === "cabrio");

在这种情况下，我们可以得到列表中的最后一辆车。

使用 Array.filter 从数组中获取满足一个条件的多个项目

Array.find 只返回一个对象，如果我们想获取所有红色的车，则需要使用 Array.filter。

let redCars = cars.filter(car => car.color === "red");
console.log(redCars);
// output:
// [
//   {
//     color: 'red',
//     type: 'station wagon',
//     registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)',
//     capacity: 5
//   },
//   {
//     color: 'red',
//     type: 'cabrio',
//     registration: 'Sat Mar 03 2012 01:00:00 GMT+0100 (GMT+01:00)',
//     capacity: 2
//   }
// ]

使用 Array.map 转换一个数组的对象

我们会经常需要这么做，使用 Array.map 将一个对象数组转换为不同对象的数组。假设我们要根据汽车的大小将其分为三类。

let sizes = cars.map(car => {
  if (car.capacity <= 3){
    return "small";
  }
  if (car.capacity <= 5){
    return "medium";
  }
  return "large";
});
console.log(sizes);
// output:
// ['large','medium','medium', ..., 'small']

如果我们需要更多值，也可以创建一个新的对象：

let carsProperties = cars.map(car => {
 let properties = {
   "capacity": car.capacity,
   "size": "large"
 };
 if (car.capacity <= 5){
   properties['size'] = "medium";
 }
 if (car.capacity <= 3){
   properties['size'] = "small";
 }
 return properties;
});
console.log(carsProperties);
// output:
// [
//   { capacity: 7, size: 'large' },
//   { capacity: 5, size: 'medium' },
//   { capacity: 5, size: 'medium' },
//   { capacity: 2, size: 'small' },
//   ...
// ]

使用 Array.forEach 给数组中的每一个对象添加一个属性

但是，如果我们也想要汽车对象怎么办？在这种情况下，我们可以增强对象，让它具有新的属性 size。 这是使用 Array.forEach 的一个很好的示例。

cars.forEach(car => {
 car['size'] = "large";
 if (car.capacity <= 5){
   car['size'] = "medium";
 }
 if (car.capacity <= 3){
   car['size'] = "small";
 }
});

使用 Array.sort 根据一个属性对数组进行排序

完成对象转换后，通常需要以一种方式对它们进行排序。

通常，排序是基于每个对象都具有的属性的值。我们可以使用 Array.sort，但是我们需要提供一个定义排序机制的函数。

假设我们要根据汽车载客量对汽车进行降序排序。

let sortedCars = cars.sort((c1, c2) => (c1.capacity < c2.capacity) ? 1 : (c1.capacity > c2.capacity) ? -1 : 0);
console.log(sortedCars);
// output:
// [
//   {
//     color: 'purple',
//     type: 'minivan',
//     registration: 'Wed Feb 01 2017 00:00:00 GMT+0100 (GMT+01:00)',
//     capacity: 7
//   },
//   {
//     color: 'red',
//     type: 'station wagon',
//     registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)',
//     capacity: 5
//   },
//   ...
// ]

Array.sort 比较两个对象，如果排序函数的结果为正，则将第一个对象放在第二位。 你可以把排序函数理解成一个问题：应该将第一个对象放在第二位吗？

当两个对象的比较值相同时，请添加结果为零的情况，以避免不必要的交换。

使用 Array.every, Array.includes 检查数组中的对象是否满足条件

当我们只需要检查对象的特定条件时，Array.every 和 Array.some 就派上用场了。

汽车列表中有红色敞篷车吗？所有的汽车都能载至少 4 人吗？或者更细致：购物车中是否有特定产品？

cars.some(car => car.color === "red" && car.type === "cabrio");
// output: true

cars.every(car => car.capacity >= 4);
// output: false

你可能还记得 Array.includes，它类似于 Array.some，但仅适用于基本类型。

小结

在本文中，我们介绍了一些基本方法，这些方法可以帮助你创建、操作、转换和循环对象数组。它们应涵盖你会遇到的大多数情况。

如果你需要使用更高级的功能，可以看一下这个对数组的详细指南，或者联系我，我会写更多相关文章。

原文：JavaScript Array of Objects Tutorial – How to Create, Update, and Loop Through Objects Using JS Array Methods，作者：Ondrej Polesny

你可以使用 .length 属性来检查一个数组是否为空。

length 属性设置或返回数组中元素的数量。通过知道数组中元素的数量，你可以知道它是否为空。空数组内部将包含 0 个元素。

让我们来看一些例子。

.length 示例语法

Const myArray = [‘Horses’, ‘Dogs’, ‘Cats’];

在这里，我们创建一个指向空数组的变量。

使用 length 属性，我们可以检查数组的长度：

myArray.length

这将返回 3，因为数组中有 3 个元素。

我们可以通过三种方式使用 .length 检查数组是否为空。

.length 示例一

首先，我们创建一个没有任何元素的新数组。

const arr = []

现在，我们可以用 .length 检查数组是否为空。

arr.length

这将返回 0，因为数组中有 0 个元素。

.length 示例二

if (arr.length === 0) { console.log("Array is empty!") }

如果数组为空，则上面的消息将被打印出来。如果数组中包含元素，则 if 语句中的代码将不会运行。

下面是使用 .length 检查数组是否为空的第三种方法。

.length 示例三

通过结合使用 length 属性和 JavaScript 中的逻辑 “非” 运算符 “!” 符号，我们可以检查数组是否为空。

! 运算符使表达式取反。也就是说，如果数组为空，我们可以使用它返回 true。

对于这个示例，我们打开 JavaScript 控制台。点击 Inpsect（检查）-> Console，在 Chrome 中打开控制台。

首先，创建一个没有元素的数组。

接下来，让我们使用逻辑“非”运算符以及 .length 属性来测试数组是否为空。

如果没有使用“非”运算符，则 arr.length 将返回 0。添加了该运算符后，如果其操作结果为 false，则它将返回 true。因为 arr.length 为 0 或 false，所以它返回 true。

让我们将其与 if 语句一起使用。如果我们的数组为空，则输出一条消息。

在检查数组是否为空时，通常最好还检查该数组是否确实为数组。

为什么？

因为在某些情况下，你可能希望检查数组的长度，但是你却在对其他数据类型进行操作，例如字符串：

因为 length 属性可以用于其他数据类型，所以最好检查一下数组是否确实是你期望的数组。

我建议你也使用 Array.isArray() 方法来确认你的数组是一个数组。如果传入的是数组，则此方法将返回 true。

让我们将此方法添加到示例中。

如何使用 Array.isArray() 方法

小结

在本文中，我们了解到可以在 JavaScript 中以各种方式使用 length 属性来检查数组是否为空。length 属性返回数组中的元素数量。

我们还了解到，最好在使用 length 属性时也使用 Array.isArray 方法，以检查传递的值是否是你所期望的数组。

原文：How to Check if a JavaScript Array is Empty or Not with .length，作者：Madison Kanna