es6 数据结构处理数组常用方法

Mzgirl

已于 2024-06-14 16:58:04 修改

阅读量141

点赞数 2

于 2024-05-27 11:12:50 首次发布

本文链接：https://blog.csdn.net/DY13205/article/details/139232746

版权

深入理解JavaScript数组的reduce方法

介绍

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

语法

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

•	callback：执行的函数，接收四个参数：
•	accumulator：累积器累计回调的返回值；它是上一次调用回调时返回的累积值，或者是初始值(initialValue)。
•	currentValue：当前正在处理的元素。
•	index：可选，当前元素的索引。
•	array：可选，调用了reduce()方法的数组。
•	initialValue：可选，作为累积器的初始值。

代码示例：求和

让我们从一个简单的例子开始，使用reduce()来计算一个数字数组的总和

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

// 使用reduce求和
const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0); // 初始值设为0

console.log(sum); // 输出: 15

在这个例子中，reduce()遍历numbers数组，每次迭代都将当前元素currentValue加到累积器accumulator上。初始值设为0，确保了累加是从0开始的

进阶应用：对象属性汇总

reduce()不仅限于数值计算，还能用于复杂的数据处理，比如汇总对象数组中的某些属性值。

代码示例：汇总对象数组中的年龄

const people = [
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 25 },
  { name: 'Charlie', age: 35 }
];

// 使用reduce汇总所有人的年龄
const totalAge = people.reduce((accumulator, person) => {
  return accumulator + person.age;
}, 0);

console.log(totalAge); // 输出: 90
// 这里，我们将每个人(person)的age属性值累加到accumulator上，最终得到所有人的总年龄

Object.assign() 方法及使用

Object.assign() 是ECMAScript 2015（ES6）中引入的一个静态方法，用于将一个或多个源对象的所有可枚举自有属性的值复制到目标对象中。此方法会返回目标对象，而且如果源对象有相同的属性，则目标对象上的属性会被源对象中的属性覆盖。这常用于合并对象或者克隆对象。

object.assign() 语法

Object.assign(target, ...sources)

target：必需，接收新属性的对象，即目标对象。
…sources：可选，一个或多个源对象，其属性将被复制到target中。

特点

浅拷贝：对于对象的属性如果是基本类型，则是深拷贝；如果属性是引用类型（如对象、数组），则只拷贝其引用地址，不进行深度复制。
可枚举属性：仅复制源对象自身的可枚举属性，不会复制继承自原型的属性。
返回目标对象：该方法会改变目标对象，并返回修改后的目标对象。

使用示例

合并对象

const target = { a: 1, b: 2 };
const source1 = { b: 3, c: 4 };
const source2 = { d: 5 };

const result = Object.assign(target, source1, source2);
console.log(result); // 输出：{ a: 1, b: 3, c: 4, d: 5 }
// 注意：source1 中的 b 属性覆盖了 target 中的 b 属性。

克隆对象

// 虽然Object.assign()不是严格意义上的深拷贝，但可以用来实现浅层克隆。
const original = { a: 1, b: { x: 2 } };
const clone = Object.assign({}, original);
console.log(clone); // 输出：{ a: 1, b: { x: 2 } }

// 注意：虽然 clone 是 original 的浅拷贝，但嵌套的对象仍然是共享引用。
original.b.x = 3;
console.log(clone.b.x); // 输出：3，说明是浅拷贝