ZiMingの宝藏之地
首页项目归档笔记照片墙音乐灵境说说杂谈友链关于
知识库
138 篇文档 / 65 个目录
目录菜单
主页知识库
飞书飞书知识库/前端/面试/JS/js 进阶/数组有哪些原生方法?

数组有哪些原生方法?

同步时间:2026-05-26T15:20:18

方法

  • 数组和字符串的转换方法:toString()、toLocalString()、join() 其中 join() 方法可以指定转换为字符串时的分隔符。

  • 数组尾部操作的方法 pop() 和 push(),push 方法可以传入多个参数。

  • 数组首部操作的方法 shift() 和 unshift()

  • 重排序的方法 reverse() 和 sort(),sort() 方法可以传入一个函数来进行比较,传入前后两个值,如果返回值为正数,则交换两个参数的位置。

  • 数组连接的方法 concat() ,返回的是拼接好的数组,不影响原数组。

  • 数组截取办法 slice(),用于截取数组中的一部分返回,不影响原数组。

  • 数组插入方法 splice(),

  • 影响原数组查找特定项的索引的方法,indexOf() 和 lastIndexOf()

  • **迭代(遍历)**方法 **every()、some()、filter()、map() 和 forEach() **方法

  • 数组归并方法 **reduce() 和 reduceRight() **方法

拓展

数组和字符串的转换方法

在 JavaScript 中,toString()、toLocaleString() 和 join() 是用于将数组或字符串转换的几种方法,它们各自有不同的用途和行为:

  1. toString():
  • 对于数组,toString() 方法会将数组中的所有元素转换成字符串,然后将它们拼接成一个以逗号为分隔符的单一字符串。

  • 对于字符串,toString() 是一个实例方法,返回调用它的字符串的字符串表示。

  • 通常,数组的 toString() 方法用于快速查看数组内容,但不是用于构建数组元素的自定义分隔符。

  1. toLocaleString():
  • toLocaleString() 方法用于数组,它返回一个字符串,其中包含了数组中的每个元素,这些元素被转换成了本地格式的字符串,并且使用本地语言环境的分隔符进行分隔。

  • 该方法考虑了本地化,例如在不同的语言环境中,数组元素的分隔符可能会不同(例如,某些地区可能使用分号而不是逗号)。

  • 如果数组元素本身也是数组或对象,则需要为这些元素提供本地化支持,否则它们将以其默认的 toString() 方法结果出现。

  1. join():
  • join() 方法是数组的一个实例方法,用于将数组中的所有元素连接成一个字符串。

  • 与 toString() 不同,join() 允许你指定一个自定义的分隔符,而不是默认的逗号。这使得 join() 在需要使用特定分隔符时非常有用。

  • 如果数组为空,join() 将返回空字符串。

以下是一些示例来说明这些方法的区别:

let array = [1, 'a', 3, 'b'];

// 使用 toString()
console.log(array.toString()); // 输出 "1,a,3,b"

// 使用 toLocaleString()
console.log(array.toLocaleString()); // 输出可能因地区而异,例如 "1,a,3,b"

// 使用 join() 指定自定义分隔符
console.log(array.join('-')); // 输出 "1-a-3-b"

对于字符串,toString() 方法通常不用于字符串本身,因为字符串本身就是字符串类型,不需要转换。但是,如果你调用了字符串的 toString() 方法,它将简单地返回该字符串。

let str = 'Hello, World!';

// 字符串的 toString() 方法返回自身
console.log(str.toString()); // 输出 "Hello, World!"

toLocaleString() 方法对于字符串来说,通常用于日期对象,它能够根据本地环境格式化日期。

let date = new Date();

// 对于日期对象,toLocaleString() 会根据本地环境格式化日期
console.log(date.toLocaleString());
// 输出可能因地区而异,例如 "8/23/2024, 12:00:00 PM"

总结来说,toString() 用于简单的默认逗号分隔符转换,toLocaleString() 用于本地化转换(特别是数组和日期),而 join() 用于数组并允许自定义分隔符。

数组尾部操作的方法 pop() 和 push()

pop() 和 push() 是 JavaScript 数组的两个内置方法,用于在数组的尾部进行操作。

pop() 方法

pop() 方法用于移除数组的最后一个元素,并返回被移除的元素。如果数组为空,则返回 undefined 并保持数组不变。

示例:

let array = [1, 2, 3];
let lastElement = array.pop(); // 返回 3, 并更新数组为 [1, 2]
console.log(lastElement); // 3
console.log(array); // [1, 2]

push() 方法

push() 方法用于将一个或多个元素添加到数组的末尾,并返回新的数组长度。

示例:

let array = [1, 2];
array.push(3); // [1, 2, 3], 返回新的数组长度 3
console.log(array); // [1, 2, 3]

// 可以一次添加多个元素
array.push(4, 5); // [1, 2, 3, 4, 5], 返回新的数组长度 5
console.log(array); // [1, 2, 3, 4, 5]

push() 方法非常有用,因为它允许你快速地向数组添加多个元素,而不需要使用循环或多个方法调用。这在处理多个值时可以简化代码并提高效率。

案例介绍

假设你正在开发一个简单的待办事项应用,用户可以添加和删除任务。你可以使用 push() 和 pop() 方法来管理任务列表:

let todos = []; // 初始空的任务列表

// 用户添加任务
function addTodo(task) {
  todos.push(task); // 将新任务添加到列表末尾
  console.log('Added:', task);
  console.log('Updated todos:', todos);
}

// 用户完成并删除任务
function removeTodo() {
  if (todos.length > 0) {
    let completed = todos.pop(); // 移除并返回最后一个任务
    console.log('Removed:', completed);
    console.log('Updated todos:', todos);
  } else {
    console.log('No todos left!');
  }
}

// 示例:添加和删除任务
addTodo('Learn JavaScript');
addTodo('Build a Vue app');
removeTodo(); // 删除一个任务

在这个案例中,push() 和 pop() 方法提供了一种简单直观的方式来管理动态数组内容,非常适合用于待办事项列表或任何需要添加和删除项目的场景。

数组首部操作的方法 shift()-(删除) 和 unshift() -(增加)

shift() 和 unshift() 是 JavaScript 数组的两个内置方法,分别用于在数组的首部进行移除和添加元素的操作。

shift() 方法

shift() 方法用于移除数组的第一个元素,并返回被移除的元素。如果数组为空,则返回 undefined 并保持数组不变。

unshift() 方法

unshift() 方法用于将一个或多个元素添加到数组的开头,并返回新的数组长度。

案例介绍

假设你正在开发一个网页版的在线聊天应用,用户可以发送消息到聊天室,并且新消息总是显示在聊天窗口的最上方。你可以使用 unshift() 方法来将新消息添加到数组的开头,使其立即显示。同时,如果需要从聊天历史中移除最早的消息(例如,实现一个简单的滚动机制),你可以使用 shift() 方法。

let chatHistory = [
  'User1: Hello!',
  'User2: Hi! How are you?'
];

// 用户发送新消息
function sendMessage(message) {
  chatHistory.unshift(message); // 将新消息添加到聊天历史的开头
  console.log('New message:', message);
  console.log('Updated chat history:', chatHistory);
  // 模拟消息滚动效果,移除最早的消息
  if (chatHistory.length > 5) {
    chatHistory.shift(); // 如果消息超过5条,移除第一条
    console.log('Oldest message removed:', chatHistory);
  }
}

// 示例:用户发送消息
sendMessage('User1: I am fine, thanks!');
sendMessage('User2: What are you up to today?');

在这个案例中,每次用户发送消息时,unshift() 方法都会将新消息立即添加到聊天历史的最上方,使得新消息始终可见。同时,通过检查 chatHistory 数组的长度并在必要时调用 shift() 方法,实现了一个简单的聊天窗口滚动效果,确保用户不会一次性看到过多的消息,保持聊天界面的整洁。

使用 unshift() 和 shift() 的这种方式非常适合于需要维护特定顺序或实现先进先出(FIFO)队列的场景。

重排序的方法 reverse() 和 sort()

reverse() 和 sort() 是 JavaScript 数组的两个内置方法,它们用于重排序数组元素。

reverse() 方法

reverse() 方法将数组中的元素位置颠倒,即第一个元素和最后一个元素交换位置,第二个元素和倒数第二个元素交换位置,依此类推。这个方法会改变原数组。

示例:

let array = [1, 2, 3, 4, 5];
array.reverse(); // [5, 4, 3, 2, 1]
console.log(array); // [5, 4, 3, 2, 1]

sort() 方法

sort() 方法用于对数组元素进行排序。默认情况下,sort() 方法会按照字符串的Unicode码点顺序对元素进行排序,这对于数字排序不是一个好的选择。

如果要对数字进行排序,或者需要自定义排序逻辑,可以传入一个比较函数。比较函数接受两个参数(通常表示为 a 和 b),并返回一个用于决定排序的值:

  • 如果返回值小于 0,则将 a 排序到 b 之前。

  • 如果返回值大于 0,则将 b 排序到 a 之前。

  • 如果返回值等于 0,则 a 和 b 的顺序不变。

示例:

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

// 默认排序(字符串顺序)
numbers.sort(); // ["1", "2", "3", "4", "5"]
console.log(numbers); // ["1", "2", "3", "4", "5"]

// 数字升序排序
numbers.sort((a, b) => a - b); // [1, 2, 3, 4, 5]
console.log(numbers); // [1, 2, 3, 4, 5]

// 数字降序排序
numbers.sort((a, b) => b - a); // [5, 4, 3, 2, 1]
console.log(numbers); // [5, 4, 3, 2, 1]

// 自定义排序逻辑,例如按照对象的年龄排序
let users = [
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 22 },
  { name: 'Cathy', age: 25 }
];

users.sort((a, b) => a.age - b.age); // 按照年龄升序排序
console.log(users);
// [
//   { name: 'Bob', age: 22 },
//   { name: 'Cathy', age: 25 },
//   { name: 'Alice', age: 30 }
// ]

案例介绍

假设你正在开发一个电子商务网站,用户可以对产品列表按照价格或名称进行排序。你可以使用 sort() 方法来实现这个功能:

let products = [
  { name: 'Laptop', price: 1200 },
  { name: 'Smartphone', price: 800 },
  { name: 'Tablet', price: 500 }
];

// 按价格升序排序
function sortProductsByPriceAsc() {
  products.sort((a, b) => a.price - b.price);
  console.log('Sorted by price (asc):', products);
}

// 按名称排序
function sortProductsByName() {
  products.sort((a, b) => a.name.localeCompare(b.name));
  console.log('Sorted by name:', products);
}

// 示例:调用排序函数
sortProductsByPriceAsc(); // 按价格升序排序
sortProductsByName(); // 按名称排序

在这个案例中,sort() 方法通过传入不同的比较函数,允许用户按照不同的标准对产品列表进行排序,提高了用户体验的灵活性。

数组连接的方法 concat()

concat() 方法用于合并两个或多个数组。此方法不会改变现有的数组,而是返回一个包含多个数组元素的新数组。

concat() 方法的基本用法

语法:

array.concat(value0, [value1], ..., [valueN])
  • valueN 可以是任意值,concat() 方法会复制每个值到新数组中。

  • 如果 valueN 是数组,concat() 方法会将这个数组中的元素添加到结果数组中,而不是数组本身。

示例:

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];
let combinedArray = array1.concat(array2); // [1, 2, 3, 4, 5, 6]

console.log(combinedArray);

在这个示例中,array1 和 array2 被合并成了 combinedArray。

合并非数组元素:

let array1 = [1, 2, 3];
let array2 = 'a'; // 注意:array2 是字符串,不是数组
let combinedArray = array1.concat(array2); // [1, 2, 3, 'a']

console.log(combinedArray);

在这个示例中,字符串 'a' 被添加到了 array1 的末尾。

合并多个数组和值:

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];
let array3 = [7, 8, 9];
let combinedArray = array1.concat(array2, array3); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

console.log(combinedArray);

在这个示例中,array1、array2 和 array3 被合并成了 combinedArray。

案例介绍

假设你正在开发一个图片库应用,用户可以选择多个相册中的照片来创建一个幻灯片。你可以使用 concat() 方法来合并不同相册中的照片数组:

let album1 = ['photo1.jpg', 'photo2.jpg'];
let album2 = ['photo3.jpg', 'photo4.jpg'];
let album3 = ['photo5.jpg', 'photo6.jpg'];

// 创建幻灯片
function createSlideshow(...albums) {
  let slideshow = albums.concat(); // 合并所有相册中的照片
  return slideshow;
}

// 示例:创建包含多个相册照片的幻灯片
let slideshowPhotos = createSlideshow(album1, album2, album3);
console.log('Slideshow Photos:', slideshowPhotos);

在这个案例中,concat() 方法被用来合并三个不同相册中的照片数组,创建了一个包含所有照片的幻灯片数组。这种方法非常适合用于组合来自不同源的数据集合。

数组截取办法 slice()

slice() 方法用于提取数组的一部分,并以新的数组返回被提取的部分,不改变原数组。

slice() 方法的基本用法

语法:

array.slice([begin[, end]])
  • begin 为开始提取的起始位置(包含该位置),如果省略或为负数,则从数组末尾开始计数。

  • end 为结束提取的位置(不包含该位置),如果省略或为负数,则提取到数组末尾。如果 end 大于数组的长度,则实际以数组末尾为结束位置。

示例:

let array = [5, 10, 15, 20, 25];

// 提取从索引 1 开始到索引 3 结束的元素(包含索引 1 的元素,不包含索引 4 的元素)
let part1 = array.slice(1, 3); // [10, 15]

// 提取从索引 2 开始到数组末尾的元素
let part2 = array.slice(2); // [15, 20, 25]

// 从数组末尾开始提取,-2 表示从倒数第二个元素开始
let part3 = array.slice(-2); // [20, 25]

// 提取从索引 1 开始到数组末尾的所有元素
let part4 = array.slice(1); // [10, 15, 20, 25]

console.log(part1);
console.log(part2);
console.log(part3);
console.log(part4);

案例介绍

假设你正在开发一个视频播放应用,用户可以跳转到视频的任意部分进行播放。你可以使用 slice() 方法来模拟视频的截取操作:

let videoTimeline = ['intro', 'scene1', 'scene2', 'scene3', 'outro'];

// 用户跳转到视频的特定部分
function skipTo(partIndex) {
  // 计算跳转后的剩余部分
  let remainingVideo = videoTimeline.slice(partIndex + 1);
  console.log('Skipping to:', remainingVideo);
  // 播放剩余部分...
}

// 示例:用户跳转到第二个场景
skipTo(1); // 应输出 ['scene2', 'scene3', 'outro']

在这个案例中,slice() 方法被用来截取视频播放的时间线数组,从用户选择的部分继续播放剩余的视频内容。这种方法非常适合用于模拟数组的截取或分割操作。

数组插入方法 splice()

splice() 方法的基本用法

语法:

array.splice(start, deleteCount, item1, item2, ..., itemN)
  • start:必需。整数,指定修改的开始位置(从零开始)。如果超出了数组的边界,则从数组的末尾开始添加或删除元素。

  • deleteCount:可选。整数,要删除的元素数量。如果省略或设置为 0,则不删除元素。如果数值为负数或大于 start 之后元素的数量,则会删除从 start 到数组末尾的所有元素。

  • item1, item2, ..., itemN:可选。要添加到数组中的元素。

返回值:

返回一个包含被删除元素的数组。如果没有删除元素,则返回一个空数组。

示例:

let array = [1, 2, 3, 4];

// 删除索引 1 处的元素,并替换为 10 和 20
array.splice(1, 1, 10, 20); // [1, 10, 20, 3, 4]
console.log(array);

// 在索引 2 处添加一个元素 5,不删除任何元素
array.splice(2, 0, 5); // [1, 10, 5, 20, 3, 4]
console.log(array);

// 删除从索引 2 到索引 4 的所有元素
array.splice(2, 3); // [1, 10]
console.log(array);

案例介绍

假设你正在开发一个在线文档编辑器,用户可以对文档中的段落进行添加、删除或替换操作。你可以使用 splice() 方法来实现这些功能:

let documentParagraphs = ['Introduction', 'Body', 'Conclusion'];

// 用户删除文档中的第二个段落
function removeParagraph(index) {
  documentParagraphs.splice(index, 1);
  console.log('Updated document:', documentParagraphs);
}

// 用户在文档中间添加一个新段落
function addParagraph(index, paragraphText) {
  documentParagraphs.splice(index, 0, paragraphText);
  console.log('Updated document:', documentParagraphs);
}

// 示例:用户删除第二个段落
removeParagraph(1); // ['Introduction', 'Conclusion']

// 示例:用户在文档中间添加一个新段落 'Analysis'
addParagraph(1, 'Analysis'); // ['Introduction', 'Analysis', 'Conclusion']

在这个案例中,splice() 方法被用来修改文档的段落数组,允许用户删除不需要的段落或在特定位置添加新段落。这种方法非常适合用于需要动态修改数组内容的场景。

splice() 方法用于对数组进行添加、删除或者替换元素的操作。这个方法会改变原数组。

影响原数组查找特定项的索引的方法,indexOf() 和 lastIndexOf()

indexOf() 和 lastIndexOf() 是 JavaScript 数组的两个内置方法,用于查找数组中特定项的索引位置。

indexOf() 方法

indexOf() 方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回 -1。

语法:

array.indexOf(searchElement[, fromIndex])
  • searchElement:要查找的元素。

  • fromIndex(可选):开始搜索的索引。如果该值大于或等于数组长度,则返回 -1。如果它是负数,则将其与数组长度相加后开始搜索。如果 fromIndex 被省略,则整个数组都会被搜索。

lastIndexOf() 方法

lastIndexOf() 方法返回在数组中可以找到一个给定元素的最后一个索引,如果不存在,则返回 -1。

语法:

array.lastIndexOf(searchElement[, fromIndex])
  • searchElement:要查找的元素。

  • fromIndex(可选):开始搜索的索引。如果此参数被省略,搜索从数组末尾开始。

示例:

let array = [1, 2, 3, 2, 4];

// 查找第一个出现的元素 '2' 的索引
let firstIndex = array.indexOf(2); // 1
console.log(firstIndex);

// 查找最后一个出现的元素 '2' 的索引
let lastIndex = array.lastIndexOf(2); // 3
console.log(lastIndex);

// 从索引 2 开始查找元素 '2' 的索引
let fromIndex = array.indexOf(2, 2); //// 3,因为元素 '2' 在索引 3 处出现
console.log(fromIndex);// 输出: 3

案例介绍

假设你正在开发一个图书馆管理系统,需要根据书籍的 ID 查找书籍在书架数组中的位置。

let books = ['The Great Gatsby', '1984', 'To Kill a Mockingbird', 'The Catcher in the Rye'];

// 查找书籍 '1984' 的第一个索引
function findFirstBookIndex(bookId) {
  let index = books.indexOf(bookId);
  console.log(`First occurrence of '${bookId}' is at index:`, index);
}

// 查找书籍 '1984' 的最后一个索引
function findLastBookIndex(bookId) {
  let index = books.lastIndexOf(bookId);
  console.log(`Last occurrence of '${bookId}' is at index:`, index);
}

// 示例:查找书籍 '1984' 的索引
findFirstBookIndex('1984'); // 1
findLastBookIndex('1984'); // 1,因为 '1984' 只出现了一次

在这个案例中,indexOf() 和 lastIndexOf() 方法被用来查找特定书籍在数组中的索引位置。如果书籍在数组中多次出现,indexOf() 将返回第一个出现的位置,而 lastIndexOf() 将返回最后一个出现的位置。如果书籍未出现在数组中,两个方法都将返回 -1。

**迭代(遍历)**方法 every()、some()、filter()、map() 和 forEach()

JavaScript 数组提供了多种迭代(遍历)方法,用于对数组元素进行操作或判断。以下是 every()、some()、filter()、map() 和 forEach() 方法的简要介绍和示例:

every()

every() 方法测试数组的所有元素是否都通过了指定函数的测试。如果没有提供回调函数,则默认所有元素都通过测试。

语法:

array.every(callback(currentValue, index, array)[, thisArg])
  • callback:对每个元素执行的函数,返回一个布尔值。

  • thisArg(可选):执行回调时使用的 this 值。

示例:

let array = [1, 2, 3, 4, 5];
let allOver2 = array.every(function(element) {
  return element > 2;
}); // false

console.log(allOver2);

some()

some() 方法测试数组中是否至少有一个元素通过了指定函数的测试。

语法:

同 every()。

示例:

let someOver5 = array.some(function(element) {
  return element > 5;
}); // false

console.log(someOver5);

filter()

filter() 方法创建一个新数组,包含通过测试的所有元素。

语法:

array.filter(callback(element, index, array)[, thisArg])
  • callback:对每个元素执行的函数,返回一个布尔值,决定元素是否被包含在新数组中。

示例:

let evenNumbers = array.filter(function(element) {
  return element % 2 === 0;
}); // [2, 4]

console.log(evenNumbers);

map()

map() 方法创建一个新数组,其元素是调用 map() 时回调函数的返回值。

语法:

array.map(callback(currentValue, index, array)[, thisArg])
  • callback:对每个元素执行的函数,其返回值构成新数组。

示例:

let squares = array.map(function(element) {
  return element * element;
}); // [1, 4, 9, 16, 25]

console.log(squares);

forEach()

forEach() 方法对数组的每个元素执行一次提供的函数。

语法:

array.forEach(callback(currentValue, index, array)[, thisArg])
  • callback:为数组中的每个元素执行的函数。

示例:

array.forEach(function(element, index) {
  console.log(`Index ${index}: ${element}`);
});

案例介绍

假设你正在开发一个电子商务网站,需要对商品列表进行不同的处理:

let products = [
  { name: 'Apple', price: 0.75 },
  { name: 'Banana', price: 0.50 },
  { name: 'Orange', price: 1.00 }
];

// 检查所有商品价格是否低于1美元
let allUnderOneDollar = products.every(function(product) {
  return product.price < 1;
}); // true

console.log(allUnderOneDollar);

// 找出所有价格超过0.5美元的商品
let expensiveFruits = products.filter(function(product) {
  return product.price > 0.5;
}); // [{ name: 'Apple', price: 0.75 }, { name: 'Orange', price: 1.00 }]

console.log(expensiveFruits);

// 计算所有商品的总价格
let total = products.reduce(function(sum, product) {
  return sum + product.price;
}, 0); // 2.25

console.log(total);

// 输出每个商品的名称和价格
products.forEach(function(product, index) {
  console.log(`Product ${index + 1}: ${product.name} costs ${product.price}`);
});

在这个案例中,every() 用来检查是否所有商品的价格都低于1美元,filter() 用来找出价格超过0.5美元的商品,reduce() 用来计算总价格(这里使用了 reduce() 方法,它也是数组的一个迭代方法,但未在最初列表中),forEach() 用来遍历并输出每个商品的信息。这些方法使得对数组的元素进行条件检查、筛选、转换和遍历变得非常直观和方便。

数组归并方法 reduce() 和 reduceRight()

reduce() 和 reduceRight() 是 JavaScript 数组的两个内置方法,它们用于将数组元素归并(或“缩减”)为一个单一的值。这两个方法都接受一个回调函数,该函数在数组的每个元素上执行,并返回一个累加值。

reduce() 方法

reduce() 方法从数组的开始到结束,对元素进行累积操作。

语法:

array.reduce(callback(accumulator, currentValue, currentIndex, array)[, initialValue])
  • callback:在每个元素上执行的函数,包含四个参数:累加器(accumulator)、当前值(currentValue)、当前索引(currentIndex)、原数组(array)。

  • initialValue(可选):累加器的初始值。如果没有提供,则使用数组的第一个元素作为初始值,并且回调函数少一个参数。

示例:

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0); // 15
console.log(sum);

reduceRight() 方法

reduceRight() 方法从数组的末尾到开始,对元素进行累积操作。

语法:

同 reduce(),但是累加的方向是从右到左。

示例:

let sumRight = numbers.reduceRight(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0); // 15
console.log(sumRight);

示例比较 reduce() 和 reduceRight()

假设我们有一个数字数组,我们想计算它们的总和:

let array = [1, 2, 3, 4, 5];

// 使用 reduce() 从左到右求和
let sum1 = array.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum1); // 15

// 使用 reduceRight() 从右到左求和
let sum2 = array.reduceRight((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum2); // 15

在这两个示例中,无论是使用 reduce() 还是 reduceRight(),结果都是相同的,因为数组元素是数字,并且操作是可交换的(加法)。但是,如果数组元素是对象或数组,并且操作不可交换(例如,数组的连接),那么 reduce() 和 reduceRight() 将产生不同的结果。

案例介绍

假设你正在开发一个应用,需要从一组对象中提取特定信息并进行归并:

let products = [
  { name: 'Apple', quantity: 2 },
  { name: 'Banana', quantity: 3 },
  { name: 'Orange', quantity: 5 }
];

// 计算所有产品的总数量
let totalQuantity = products.reduce((accumulator, product) => accumulator + product.quantity, 0);
console.log(totalQuantity); // 10

// 从右到左计算总数量(结果相同)
let totalQuantityRight = products.reduceRight((accumulator, product) => accumulator + product.quantity, 0);
console.log(totalQuantityRight); // 10

在这个案例中,reduce() 方法被用来从 products 数组中累加 quantity 属性,计算总数量。使用 reduceRight() 也可以达到相同的结果,因为累加操作不依赖于元素的顺序。

Table of Contents