第十四章 深度数组讲解

连接数组和数组

我们可以使用 Array 对象的 concat 方法将一个数组与另一个数组连接起来。在这里，我将解释如何在 JavaScript 中将一个数组与另一个数组组合。

目录

14-1 使用 concat 方法连接数组
14-2 查找与给定值匹配的数组元素(indexOf, lastIndexOf)
14-3 查找符合条件的数组元素(findIndex, find, some, every)
14-4 通过从数组中复制指定范围的元素来创建一个新数组(slice)
14-5 获取通过连接数组的所有元素创建的字符串(join, toString)
14-6 排序数组元素(reverse, sort)
14-7 按顺序对数组的所有元素执行相同的操作(map)
14-8 通过只收集数组元素中满足条件的元素来创建一个新数组(filter)
14-9 获取数组中所有元素的值之和(reduce)

14-1 使用 concat 方法连接数组

使用 concat 方法连接数组

可以使用 Array 对象的 concat 方法将一个数组与另一个数组连接起来，从而获得一个新数组。格式如下。

数组名.concat(数组)
数组名.concat(数组, 数组, ...)
数组名.concat(值, 值, ...)

返回一个新数组，该数组将参数中指定的数组连接到数组末尾。参数可以省略，指定要组合的数组或值，当要组合多个数组时，写在逗号（，）之后。

看看下面的示例。

let fruit = ['Apple', 'Melon', 'Orange'];
let fruitAll = fruit.concat(['Peach', 'Grapes']);

console.log(fruit);
>> ["Apple", "Melon", "Orange"]

console.log(fruitAll);
>> ["Apple", "Melon", "Orange", "Peach", "Grapes"]

通过将指定为参数的数组连接到原始数组来获得一个新数组。运行 concat 方法对原始数组没有任何作用。

除了数组之外，还可以将值指定为 concat 方法的参数。请看下面的示例。

let fruit = ['Apple', 'Melon', 'Orange'];
let fruitAll = fruit.concat('Peach', ['Grapes', 'Strawberry']);

console.log(fruitAll);
>> ["Apple", "Melon", "Orange", "Peach", "Grapes", "Strawberry"]

如果为参数指定一个值，它将作为一个新元素添加到原始数组中。

使用 concat 方法复制数组

如果省略 concat 方法的参数，则返回原始数组的副本作为返回值。

看看下面的示例。

let fruit = ['Apple', 'Melon', 'Orange'];
let copyFruit = fruit.concat();

console.log(fruit);
>> ["Apple", "Melon", "Orange"]

console.log(copyFruit);
>> ["Apple", "Melon", "Orange"]

克隆的数组将是与原始数组不同的数组对象。所以对克隆数组的任何更改都不会影响原始数组（反之亦然）。

let fruit = ['Apple', 'Melon', 'Orange'];
let copyFruit = fruit.concat();

copyFruit[1] = 'Grapes';
console.log(copyFruit);
>> ["Apple", "Grapes", "Orange"]

console.log(fruit);
>> ["Apple", "Melon", "Orange"]

但是，concata 方法最多可复制一维元素。如果一个数组存储为原始数组元素的值，则该元素引用的数组也将引用与克隆数组的元素相同的数组。

看看下面的示例。

let result = [[78, 92], [68,76]];
let copyResult = result.concat();

copyResult[0][1] = 84;
console.log(copyResult[0]);
>> [78, 84]

console.log(result[0]);
>> [78, 84]

我使用 concat 方法复制一个数组，但原始数组的元素引用另一个数组，而另一个数组又引用同一个数组。因此，对任一数组中的元素引用的数组的任何更改都会影响另一个数组中同一数组的元素。

14-2 查找与给定值匹配的数组元素(indexOf, lastIndexOf)

您可以在数组中搜索包含与指定值相同的值的元素并获取该元素的索引。在这里，我将解释如何在 JavaScript 中搜索与指定值匹配的数组元素。

可以使用 Array 对象的 indexOf 方法在数组的开头搜索具有指定值的元素。格式如下。

数组名.indexOf(值)
数组名.indexOf(值, 起始索引)

从数组的开头搜索具有参数中指定值的元素，如果找到匹配则返回索引。如果找不到则返回 -1。使用 === 运算符进行匹配。

看看下面的示例。

let week = ['Mon', 'Sat', 'San', 'Sat', 'Fri'];

let indexSat = week.indexOf('Sat');
console.log(indexSat);
>> 1

let indexTue = week.indexOf('Tue');
console.log(indexTue);
>> -1

indexOf 方法从数组的开头搜索元素。如果有多个元素与参数中指定的值匹配，则从头开始搜索并返回第一个找到的元素的索引。

可选的第二个参数允许您指定开始搜索的索引。看看下面的示例。

let week = ['Mon', 'Sat', 'San', 'Sat', 'Fri'];

let indexSat = week.indexOf('Sat', 2);
console.log(indexSat);
>> 3

参数中指定的值存储在索引为 1 的元素中，但由于索引 2 被指定为搜索开始位置，因此返回索引 2 之后的元素中存储参数中指定的值的元素的索引。我是.

从数组末尾开始搜索（lastIndexOf 方法）

可以使用 Array 对象的 lastIndexOf 方法从数组末尾查找具有指定值的元素。格式如下。

数组名.lastIndexOf(值)
数组名.lastIndexOf(值, 起始索引)

从数组末尾开始搜索具有参数中指定值的元素，如果找到匹配则返回索引。如果找不到则返回 -1。使用 === 运算符进行匹配。

看看下面的示例。

let week = ['Mon', 'Sat', 'San', 'Sat', 'Fri'];

let indexSat = week.lastIndexOf('Sat');
console.log(indexSat);
>> 3

let indexTue = week.lastIndexOf('Tue');
console.log(indexTue);
>> -1

lastIndexOf 方法从数组末尾搜索元素。如果有多个元素与参数中指定的值匹配，则从末尾搜索并返回第一个找到的元素的索引。

可选的第二个参数允许您指定开始搜索的索引。看看下面的示例。

let week = ['Mon', 'Sat', 'San', 'Sat', 'Fri'];

let indexSat = week.lastIndexOf('Sat', 2);
console.log(indexSat);
>> 1

参数中指定的值存储在索引为 3 的元素中，但由于索引 2 被指定为搜索开始位置，因此返回索引 2 之前的元素中存储参数中指定的值的元素的索引。曾是。

14-3 查找符合条件的数组元素(findIndex, find, some, every)

可以在数组中搜索与指定条件匹配的元素，并检索元素的索引或值。在这里，我将解释如何在 JavaScript 中搜索符合条件的数组元素。

获取符合条件的索引（findIndex方法）

通过使用 Array 对象的 findIndex 方法，您可以从数组的开头搜索满足指定为参数的回调函数中定义的条件表达式的元素。格式如下。

数组名.findIndex(回调函数(元素值))
数组名.findIndex(回调函数(元素值,元素索引))
数组名.findIndex(回调函数(元素值,元素索引,数组))

findIndex 方法从头开始按顺序检索数组中包含的元素并调用回调函数。使用当前获取的元素的值、元素的索引和数组本身调用回调函数。在回调函数中写一个条件表达式，findIndex方法在函数返回true时返回元素的索引作为返回值。

看看下面的示例。

let result = [75, 68, 92, 84, 90];

let passIndex = result.findIndex(function(element){
  return element > 85;
});

console.log(passIndex);
>> 2

本例中，回调函数比较元素值是否大于85，返回true或false。当返回 true 作为方法的返回值时返回索引。

findIndex 方法从数组的开头检索元素并调用回调函数，因此如果数组中有多个元素满足条件，则返回第一个找到的元素的索引。

let result = [75, 68, 92, 84, 90];

let passIndex = result.findIndex(element => element > 85);
console.log(passIndex);
>> 2

获取符合条件的元素的值（find方法）

通过使用 Array 对象的 find 方法，您可以从数组的开头搜索满足指定为参数的回调函数中定义的条件表达式的元素。类似于 findIndex 方法，只是 findIndex 方法返回找到的元素的索引，而 fine 方法返回找到的元素的值。格式如下。

数组名.find(回调函数(元素值))
数组名.find(回调函数(元素值,元素索引))
数组名.find(回调函数(元素值,元素索引,数组))

find 方法从头开始按顺序检索数组中包含的元素，并调用回调函数。使用当前获取的元素的值、元素的索引和数组本身调用回调函数。在回调函数中写条件表达式，当函数返回true作为返回值时，find方法返回该元素的值。

看看下面的示例。

let result = [75, 68, 92, 84, 90];

let passValue = result.find(function(element){
  return element > 85;
});

console.log(passValue);
>> 92

本例中，回调函数比较元素值是否大于85，返回true或false。当返回 true 作为方法的返回值时，返回元素的值。

find 方法从数组的开头获取元素并调用回调函数，因此如果数组中有多个元素满足条件，则返回第一个找到的元素的值。

请注意，回调函数也可以使用箭头函数表达式编写，如下所示：

let result = [75, 68, 92, 84, 90];

let passValue = result.find(element => element > 85);
console.log(passValue);
>> 92

是否至少有一个元素匹配条件(some方法)

使用 Array 对象的 some 方法检查数组中是否有一个元素满足参数指定的回调函数中定义的条件表达式。格式如下。

数组名.some(回调函数(元素值))
数组名.some(回调函数(元素值, 元素索引) )
数组名.some(回调函数(元素值, 元素索引, 数组) )

some方法从头开始依次取出数组中包含的元素，并调用回调函数。使用当前获取的元素的值、元素的索引和数组本身调用回调函数。如果甚至有一个元素满足回调函数中描述的条件，则返回 true。如果没有找到满足条件的元素或目标数组为空，则返回 false。

看看下面的示例。

let result = [75, 68, 92, 84, 90];

let checkOver85 = result.some(function(element){
  return element > 85;
});

console.log(checkOver85);
>> true

let checkUnder60 = result.some(function(element){
  return element < 60;
});

console.log(checkUnder60);
>> false

在这个例子中，第一个回调函数比较元素的值是否大于85，因为找到了满足条件的元素，所以返回true作为返回值。另外，在第二个回调函数中，我们比较元素的值是否小于60，返回false，因为没有找到满足条件的元素。

请注意，回调函数也可以使用箭头函数表达式编写，如下所示：

let result = [75, 68, 92, 84, 90];

let checkOver85 = result.some(element => element > 85);
console.log(checkOver85);
>> true

let checkUnder60 = result.some(element => element < 60);
console.log(checkUnder60);
>> false

是否所有元素都位于条件中(every方法)

Array 对象的 every 方法用于检查数组的所有元素是否满足指定为参数的回调函数中定义的条件表达式。格式如下。

数组名.every(回调函数(元素值))
数组名.every(回调函数(元素值, 元素索引) )
数组名.every(回调函数(元素值,元素索引,数组))

every 方法从头开始检索数组中包含的元素并调用回调函数。使用当前获取的元素的值、元素的索引和数组本身调用回调函数。如果所有元素都满足回调函数中描述的条件，则返回 true。如果至少有一个元素不满足条件，则返回 false。如果数组为空，则返回 true。

看看下面的示例。

let result = [75, 68, 92, 84, 90];

let checkOver60 = result.every(function(element){
  return element > 60;
});

console.log(checkOver60);
>> true

let checkUnder90 = result.every(function(element){
  return element < 90;
});

console.log(checkUnder90);
>> false

在这个例子中，第一个回调函数比较元素值是否大于60，因为所有元素都满足条件，所以返回true作为返回值。同样在第二个回调函数中，我们比较元素值是否小于 90 并返回 false，因为我们发现至少有一个元素不满足条件。

请注意，回调函数也可以使用箭头函数表达式编写，如下所示：

let result = [75, 68, 92, 84, 90];

let checkOver85 = result.every(element => element > 60);
console.log(checkOver85);
>> true

let checkUnder60 = result.every(element => element < 90);
console.log(checkUnder60);
>> false

14-4 通过从数组中复制指定范围的元素来创建一个新数组(slice)

您可以复制数组中指定范围的元素并将其作为新数组获取。您还可以通过将索引 0 指定到最后一个元素来创建一个作为原始数组副本的数组。在这里，我将解释如何在 JavaScript 中通过复制数组指定范围内的元素来创建一个新数组。

创建具有指定范围元素的新数组(slice方法)

Array 对象的 slice 方法使用参数中指定的元素范围创建一个新数组。格式如下。

数组名.slice()
数组名.slice(起始索引)
数组名.slice(起始索引，结束索引)

返回从起始索引指定的元素到紧接在结束索引处的元素之前的元素的新数组。如果省略起始索引，则指定 0（数组的第一个元素），如果省略结束索引，则指定数组名称.长度（直到数组的最后一个元素作为结果）。

看看下面的示例。

let result = [75, 68, 92, 84, 90];

let newResult = result.slice(1, 3);
console.log(newResult);
>> [68, 92]

在这个示例中，起始索引为 1，结束索引为 3，因此新获取的数组将是索引为 1 到 2 的元素的数组。

请看另一个例子。

let result = [75, 68, 92, 84, 90];

let newResult = result.slice();
console.log(newResult);
>> [75, 68, 92, 84, 90]

本例中省略了起始索引和结束索引，所以新得到的数组是索引为0到4的元素的数组（因为array.length是数组最后一个元素的索引+1）。结果是原始数组的副本。

请注意，虽然数组是使用相同的元素创建的，但每个数组都是单独存在的，因此更改任一数组中的值不会影响另一个数组。但是，slice 方法只复制一维的元素。如果一个数组存储为原始数组元素的值，则该元素引用的数组也将引用与克隆数组的元素相同的数组。

let result = [['Yuhua', 75], ['Jiangming', 68]];
let newResult = result.slice(0, 1);

newResult[0][1] = 84;
console.log(newResult[0]);
>> ["Yuhua", 84]

console.log(result[0]);
>> ["Yuhua", 84]

用slice方法创建了一个新数组，元素在指定范围的数组中，但是原数组的元素引用了另一个数组，这意味着复制数组的元素也引用了同一个数组。增加了。因此，对任一数组中的元素引用的数组的任何更改都会影响另一个数组中同一数组的元素。

14-5 获取通过连接数组的所有元素创建的字符串(join, toString)

通过使用 Array 对象中包含的 join 方法，您可以获得将数组中包含的所有元素按顺序转换为字符串并连接它们而创建的字符串。连接时，使用参数中指定的定界符连接。在这里，我们将解释如何在 JavaScript 中获取通过连接数组的所有元素创建的字符串。

获取通过连接元素创建的字符串(join方法)

您可以使用 Array 对象的 join 方法来获取通过连接元素创建的字符串。格式如下。

数组名.join()
数组名.join(分隔符)

返回一个字符串，该字符串将每个元素的值与参数中指定的分隔符连接起来。元素值首先被转换为字符串，然后进行拼接。如果省略定界符，则视为指定了逗号 (,)。

看看下面的示例。

let fruit = ['Apple', 120, 'Grapes', 80];

console.log(fruit.join());
>> Apple,120,Grapes,80

console.log(fruit.join(' + '));
>> Apple + 120 + Grapes + 80

console.log(fruit.join(''));
>> Apple120Grapes80

在这个示例中，我尝试了省略参数的情况和指定参数定界符的情况。如果要连接没有分隔符的元素，请指定一个空字符串 ” 作为参数。

请看另一个例子。

let fruit = [['Apple', 120], ['Grapes', 80]];

console.log(fruit.join(' + '));
>> Apple,120 + Grapes,80

如果数组的元素包含另一个数组，则元素数组首先转换为字符串。当数组转换为字符串时，它变成了一个字符串，每个元素都用逗号 (,) 连接，因此它随后与 join 方法的参数指定的分隔符连接。因此，结果如上。

下面的例子是当数组中有一个不存在的元素时。

let no = [10, 15, , 24];

console.log(no.join(','));
>> 10,15,,24

如果元素未定义或为 null，它将被连接为一个空字符串 ”。

将数组转换为字符串（toString 方法）

toString 方法用于将数组转换为字符串，例如当使用 join 方法将数组存储在元素中时。格式如下。

数组名.toString()

在数组上使用 toString 方法返回一个字符串，数组的每个元素都用逗号 (,) 连接。

请看下面的示例。

let fruit = ['Apple', 'Grapes', 'Orange'];

console.log(fruit.toString());
>> Apple,Grapes,Orange

数组中包含的每个元素都被转换为字符串，然后通过逗号 (,) 连接返回该字符串。

14-6 排序数组元素(reverse, sort)

可以按相反顺序或根据指定条件对数组中的元素进行排序。在这里，我将解释如何在 JavaScript 中对数组元素进行排序。

对元素进行倒序排序（reverse 方法）

使用 Array 对象的 reverse 方法反转数组元素的顺序。格式如下。

数组名.reverse()

目标数组本身的元素以相反的顺序排序。排序后的数组也作为返回值返回。

看看下面的示例。

let fruit = ['Apple', 'Grapes', 'Melon', 'Orange'];
let newfruit = fruit;

fruit.reverse();

console.log(fruit);
>> ["Orange", "Melon", "Grapes", "Apple"]

console.log(newfruit);
>> ["Orange", "Melon", "Grapes", "Apple"]

reverse 方法反转目标数组中元素的顺序。我们没有返回一个新的反向数组，而是更改了目标数组本身，因此引用同一数组的其他变量也会受到影响。

按照字符串的顺序对元素进行排序（sort方法）

Array 对象的 sort 方法按字符串顺序或指定顺序对数组的元素进行排序。格式如下。

数组名.sort()
数组名.sort(回调函数(第一个元素,第二个元素))

如果未指定参数，则将数组的每个元素转换为字符串，然后按字符串的顺序（升序）排序。在 sort 方法的情况下，目标数组元素本身被排序。如果将回调函数指定为参数，请定义如何在回调函数中排序。稍后我将解释如何使用回调函数。

请看下面的示例。

let fruit = ['Orange', 'Apple', 'Grapes'];
let newfruit = fruit;

fruit.sort();

console.log(fruit.sort());
>> ["Apple", "Grapes", "Orange"]

console.log(newfruit);
>> ["Apple", "Grapes", "Orange"]

将数组中包含的每个元素转换为字符串后，按照字符串的顺序进行排序。目标数组本身发生了变化，而不是返回一个新的排序数组，因此引用同一数组的其他变量也会受到影响。

如果元素是字符串，那很好，但如果元素包含数字，则要小心。看看下面的示例。

let no = [5, 27, 12, 41];

console.log(no.sort());
>> [12, 27, 41, 5]

即使元素中存储的值是数字，也不是按照数字的大小排序，而是将数字转换成字符串后按字符串排序。所以排序是按第一个字符在前，所以结果和之前一样。要比较数字的大小并对其进行排序，请使用稍后介绍的回调函数方法。

使用比较元素的函数进行排序(sort方法)

我们将使用与以前相同的排序方法，但我们将自己定义如何比较指定为参数的回调函数中的元素。

数组名.sort(回调函数(第一个元素,第二个元素))

回调函数以两个元素值作为参数。然后按照以下规则排序：

・如果回调函数返回一个小于 0 的值（例如 -1 ），将第一个元素设置为比第二个元素低的索引 
・如果回调函数返回 0，保持原样 
・如果回调函数返回一个值大于 0（例如 1），索引第二个元素小于第一个

请看下面的示例。

let word = ['AA', 'CC', 'BB'];

word.sort(function(first, second){
  if (first > second){
    return -1;
  }else if (first < second){
    return 1;
  }else{
    return 0;
  }
});

console.log(word);
>> ["CC", "BB", "AA"]

在此示例中，回调函数使用两个参数（例如 ‘AA’ 和 ‘CC’ ）调用。比较两个值，如果 ‘AA’ > ‘CC’ 则返回 -1，如果 ‘AA’ < ‘CC’ 则返回 1。如果它们相同则返回 0。事实上，’AA’ < ‘CC’，因此返回 1，因此第二个元素 ( ‘CC’ ) 的索引小于第一个元素 ( ‘AA’ )。

因此，执行 sort 方法将按降序对数组进行排序。

接下来，我们尝试将存储数值的元素按照数值的大小进行排序。请看下面的示例。

let no = [5, 27, 12, 41];

no.sort(function(first, second){
  if (first > second){
    return 1;
  }else if (first < second){
    return -1;
  }else{
    return 0;
  }
});

console.log(no);
>> [5, 12, 27, 41]

在这个示例中，数值是按原样进行比较的，而不是转换成字符串再进行比较，所以是按照数值的大小进行排序的。

另外，在对数字进行排序时，不用像以前那样使用 if 语句，像下面这样写也可以获得相同的结果。

let no = [5, 27, 12, 41];

no.sort(function(first, second){
  return first - second;
});

console.log(no);
>> [5, 12, 27, 41]

如果参数 first 的值大于 second 则返回大于 0 的值，否则返回小于 0 的值。

请注意，回调函数也可以使用箭头函数表达式编写，

let no = [5, 27, 12, 41];

no.sort((first, second) => first - second);

console.log(no);
>> [5, 12, 27, 41]

14-7 按顺序对数组的所有元素执行相同的操作(map)

对于数组中包含的元素，可以将调用回调函数返回的值作为数组的元素，新建一个数组。例如，您可以将所有元素值乘以 10，或者创建一个所有元素值都转换为大写的新数组。在这里，我将解释如何在 JavaScript 中按顺序对数组的所有元素进行相同的处理。

按顺序处理元素(map方法)

通过Array对象的map方法，可以依次调用回调函数对数组中的元素进行处理。格式如下。

数组名.map(回调函数(元素值))
数组名.map(回调函数(元素值,元素索引))
数组名.map(回调函数(元素值,元素索引,数组))

map方法从头开始依次获取数组中包含的元素，并调用回调函数。使用当前获取的元素的值、元素的索引和数组本身调用回调函数。在回调函数中，我们描述了对元素的处理，并返回元素的新值作为返回值。map方法创建一个新数组，其元素是回调函数返回的值，并将其作为返回值返回。

看看下面的示例。

let fruit = ['Apple', 'Grapes', 'Melon', 'Orange'];
let newfruit = fruit.map(function(element){
  return element.toUpperCase();
});

console.log(newfruit);
>> ["APPLE", "GRAPES", "MELON", "ORANGE"]

console.log(fruit);
>> ["Apple", "Grapes", "Melon", "Orange"]

在作为 map 方法的参数描述的回调函数中，作为参数接收的元素的值使用 toUpperCase 方法转换为大写，并作为返回值返回。依次对所有元素做同样的处理后，创建一个以返回值为元素的新数组，作为map方法的返回值返回。

新数组中元素的值是原数组中元素的值，全部大写，但是原数组没有变化，因为map方法对原数组没有做任何操作。

let fruit = ['Apple', 'Grapes', 'Melon', 'Orange'];
let newfruit = fruit.map(element => element.toUpperCase());

console.log(newfruit);
>> ["APPLE", "GRAPES", "MELON", "ORANGE"]

console.log(fruit);
>> ["Apple", "Grapes", "Melon", "Orange"]

14-8 通过只收集数组元素中满足条件的元素来创建一个新数组(filter)

可以使用回调函数判断数组中的元素是否满足条件，只收集满足条件的元素来创建新的数组。例如，您可以创建一个仅包含大于或等于指定数字的元素的新数组。在这里，我将解释如何通过在 JavaScript 中仅收集数组元素中满足条件的元素来创建一个新数组。

从满足条件的元素创建一个新数组(filter方法)

Array 对象的 filter 方法允许您创建一个新数组，其中仅包含满足数组中包含的元素的条件的那些元素。格式如下。

数组名.filter(回调函数(元素值))
数组名.filter(回调函数(元素值,元素索引))
数组名.filter(回调函数(元素值,元素索引,数组))

filter 方法从头开始按顺序获取数组中包含的元素，并调用回调函数。使用当前获取的元素的值、元素的索引和数组本身调用回调函数。在回调函数中，对元素进行条件判断，如果回调函数返回true，则添加到新数组中，如果返回false，则不添加到数组中。返回由此创建的新数组作为 filter 方法的返回值。

看看下面的示例。

let result = [48, 75, 92, 61, 54, 83, 76];
let filterResult = result.filter(function(element){
  return element > 70;
});

console.log(filterResult);
>> [75, 92, 83, 76]

console.log(result);
>> [48, 75, 92, 61, 54, 83, 76]

在作为filter方法的参数编写的回调函数中，如果作为参数接收到的元素的值大于70，则返回true，否则返回false。依次为所有元素调用回调函数后，将创建一个包含返回 true 的元素的新数组，并将其作为 filter 方法的返回值返回。

原始数组没有改变，因为 filter 方法对原始数组没有任何作用。

let result = [48, 75, 92, 61, 54, 83, 76];
let filterResult = result.filter(element => element > 70);

console.log(filterResult);
>> [75, 92, 83, 76]

console.log(result);
>> [48, 75, 92, 61, 54, 83, 76]

14-9 获取数组中所有元素的值之和(reduce)

可以将数组中所有元素的值依次相加，最后得到总值。在这里，我将解释如何在 JavaScript 中获取数组中所有元素的总值。。

对元素的值求和（reduce方法）

Array对象的reduce方法对数组中所有元素的值求和并返回总和。格式如下。

数组名.reduce( 回调函数(存储总值、元素值), 初始值 )
数组名.filter( 回调函数( 存储总值、元素值、元素索引), 初始值 )
数组名.filter( 回调函数（用于存储总值、元素值、元素索引、数组）、初始值）

reduce方法从头开始依次取出数组中包含的元素，调用回调函数。回调函数将被调用，参数用于存储总值、当前获取的元素的值、元素的索引和数组本身。在回调函数中，返回值是存储值加当前元素值的总和。最后，reduce 方法返回所有元素的总和作为返回值。

初始值可以省略，但如果省略，则使用数组第一个元素的值作为初始值。如果数组元素只包含数字，两者是相同的，但如果不是，建议指定初始值（例如 0 ）。

看看下面的示例。

let result = [48, 75, 92, 61, 54, 83, 76];
let total = result.reduce(function(sum, element){
  return sum + element;
}, 0);

console.log(total);
>> 489

由于 0 被指定为初始值，因此 0 最初存储在变量 sum 中。之后依次为所有元素调用回调函数，回调函数将元素的值加到变量sum中作为返回值返回。返回值存储在 sum 中。然后为下一个元素调用回调函数。最后返回所有元素的值之和作为reduce方法的返回值。

let result = [48, 75, 92, 61, 54, 83, 76];
let total = result.reduce((sum, element) => sum + element, 0);

console.log(total);
>> 489

请看另一个例子。这次数组元素包含 Object 对象。

let user = [
  { name:'Yuhua', result:75 },
  { name:'Jiangming', result:91 },
  { name:'Wangyan', result:80 }
];

let total = user.reduce(function(sum, element){
  return sum + element.result;
}, 0);

console.log(total);
>> 246

在这种情况下，如果未指定初始值，则初始值将为 Object 对象，即第一个元素的值。