赋值解构，优雅简洁代码编写之道

2024-01-22 12:41:35

数组的赋值解构

数组的赋值解构允许您将数组中的元素直接赋值给变量。例如，以下代码将数组中的第一个元素赋值给变量a，第二个元素赋值给变量b：

const [a, b] = [1, 2];

您还可以使用赋值解构来交换两个变量的值：

let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1

2. 对象的赋值解构

对象的赋值解构允许您将对象中的属性直接赋值给变量。例如，以下代码将对象中的name属性赋值给变量name，age属性赋值给变量age：

const {name, age} = {name: 'John Doe', age: 30};

您还可以使用对象的赋值解构来交换两个对象的属性值：

let obj1 = {name: 'John Doe', age: 30};
let obj2 = {name: 'Jane Doe', age: 25};
({name: obj1.name, age: obj1.age} = {name: obj2.name, age: obj2.age});
console.log(obj1); // {name: 'Jane Doe', age: 25}
console.log(obj2); // {name: 'John Doe', age: 30}

3. 迭代器的赋值解构

迭代器的赋值解构允许您将迭代器中的元素直接赋值给变量。例如，以下代码将迭代器中的第一个元素赋值给变量a，第二个元素赋值给变量b：

const [a, b] = [1, 2, 3, 4, 5][Symbol.iterator]();

您还可以使用迭代器的赋值解构来交换两个迭代器中的元素：

let iter1 = [1, 2, 3, 4, 5][Symbol.iterator]();
let iter2 = [6, 7, 8, 9, 10][Symbol.iterator]();
([a, b] = [iter2.next().value, iter2.next().value]);
([iter1.next().value, iter1.next().value] = [a, b]);
console.log(iter1.next().value); // 6
console.log(iter2.next().value); // 2

4. 保护内容，只读变量

除了用于变量赋值之外，赋值解构还可以用来保护内容，只允许读取。例如，以下代码将对象中的name属性设置为只读：

const obj = {
  name: 'John Doe',
  age: 30
};

Object.defineProperty(obj, 'name', {
  writable: false
});

obj.name = 'Jane Doe';
console.log(obj.name); // John Doe