【js自学打卡7】Object.assign / Object.values / reduce用法 / rest运算符

Object.assign / Object.values

1. Object.assign用法

是浅拷贝

Object.assign() 是一个用于将所有可枚举属性的值从一个或多个源对象复制到目标对象的方法。它返回目标对象。下面是一些使用 Object.assign() 的例子：

基本用法

let target = { a: 1, b: 2 };
let source = { b: 4, c: 5 };
// 将source对象的所有可枚举属性复制到target对象
Object.assign(target, source);
console.log(target); // 输出：{ a: 1, b: 4, c: 5 }

在这个例子中，target 的 b 属性被 source 中的 b 属性覆盖，并且 target 获得了 source 的 c 属性。

复制一个对象

let obj = { a: 1 };
let copy = Object.assign({}, obj);
console.log(copy); // 输出：{ a: 1 }

这里创建了一个 obj 的浅拷贝。

合并多个对象

let obj1 = { a: 1 };
let obj2 = { b: 2 };
let obj3 = { c: 3 };
let merged = Object.assign({}, obj1, obj2, obj3);
console.log(merged); // 输出：{ a: 1, b: 2, c: 3 }

添加属性到现有对象

let obj = { a: 1 };
Object.assign(obj, { b: 2, c: 3 });
console.log(obj); // 输出：{ a: 1, b: 2, c: 3 }

复制并修改现有对象的属性

let obj = { a: 1, b: 2 };
let objWithChanges = Object.assign({}, obj, { b: 3 });
console.log(objWithChanges); // 输出：{ a: 1, b: 3 }

注意事项

• Object.assign() 执行的是浅拷贝，如果源对象中的属性值是一个对象的引用，那么目标对象拷贝的是这个引用，而不是这个引用指向的对象。
• Object.assign() 不会在那些从原型链上继承到的属性上拷贝属性。
• Object.assign() 不会复制属性的特性（比如 writable、enumerable、configurable），也不会复制访问器属性（getters 和 setters）。
  以下是一个展示 Object.assign() 浅拷贝行为的例子：

let obj1 = { a: 0, b: { c: 0 } };
let obj2 = Object.assign({}, obj1);
console.log(obj2); // 输出：{ a: 0, b: { c: 0 } }
// 改变obj1的b.c会影响obj2，因为它们共享同一个对象引用
obj1.b.c = 3;
console.log(obj2); // 输出：{ a: 0, b: { c: 3 } }

2. Object.values用法

out：数组。包含自身可枚举属性的所有value

在JavaScript中，Object.values() 方法返回一个数组，该数组包含了指定对象自身可枚举属性的所有值，不包括原型链上的属性。以下是 Object.values() 方法的几个用法示例：

基本用法

const obj = { a: 1, b: 2, c: 3 };
const values = Object.values(obj);
console.log(values); // 输出: [1, 2, 3]

遍历对象的所有值

const obj = { x: 10, y: 20, z: 30 };
Object.values(obj).forEach(value => {
  console.log(value); // 分别输出: 10, 20, 30
});

数组解构赋值

const obj = { one: 1, two: 2, three: 3 };
const [one, two, three] = Object.values(obj);
console.log(one, two, three); // 输出: 1 2 3

使用 Object.values() 和 reduce() 进行值的累加

const obj = { a: 1, b: 2, c: 3 };
const sum = Object.values(obj).reduce((acc, value) => acc + value, 0);
console.log(sum); // 输出: 6

在类中获取实例属性值

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
const person = new Person('Alice', 25);
const personValues = Object.values(person);
console.log(personValues); // 输出: ['Alice', 25]

注意事项

• Object.values() 只返回对象自身可枚举的属性值，不会返回原型链上的属性值。
• 如果对象的属性值是一个对象，那么返回的是这个对象的引用，而不是这个对象的副本。
  使用 Object.values() 可以方便地获取对象值的集合，以便进行进一步的处理或操作。

3. reduce用法

应用对象：数组

文章1 - 概述，应用
文章2 - 20个使用技巧

4.关于rest运算符

是浅拷贝

在JavaScript中，扩展运算符（spread operator）用三个点（...）表示，它允许一个表达式在期望多个参数（用于函数调用）或多个元素（用于数组字面量）或多个变量（用于对象字面量）的位置展开。
以下是扩展运算符的一些常见用法：

数组

1. 复制数组：

let arr1 = [1, 2, 3];
let arr2 = [...arr1]; // arr2 现在是 [1, 2, 3] 的副本

2. 合并数组：

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let merged = [...arr1, ...arr2]; // merged 是 [1, 2, 3, 4, 5, 6]

3. 将字符串转为数组：

let str = "hello";
let chars = [...str]; // chars 是 ['h', 'e', 'l', 'l', 'o']

函数调用

扩展运算符可以将一个数组转换为函数的参数。

function sum(x, y, z) {
  return x + y + z;
}
let numbers = [1, 2, 3];
console.log(sum(...numbers)); // 输出 6

对象

在ES2018（ECMAScript 2018）中，扩展运算符也可以用于对象字面量，用于取出对象中所有可枚举的自有属性，并拷贝到新对象中。

let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1, c: 3 }; // obj2 是 { a: 1, b: 2, c: 3 }

需要注意的是，扩展运算符只复制对象的可枚举自有属性，它不会复制原型链上的属性，也不会复制不可枚举的属性。

限制

扩展运算符不能直接用于解构赋值中的对象，但是可以用于数组。
错误的使用方式：

// 这将导致语法错误
let { x, y, ...z } = someObject; // 在ES2018之前是错误的

正确使用数组：

let [a, b, ...rest] = [1, 2, 3, 4, 5];
console.log(a, b, rest); // 输出 1 2 [3, 4, 5]