js中的解构赋值

JavaScript的解构赋值语句是一种方便的语法，用于从数组或对象中提取值，并将它们赋给变量。它可以让你以一种简洁的方式从复杂的数据结构中提取数据。

数组的解构赋值

例如，假设有一个数组[1, 2, 3]，你可以使用解构赋值语句将数组中的值分别赋给变量：

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

通过数组的解构赋值，可以实现变量的数据交换：

  var n1 = 10;
  var n2 = 20;
  [n1,n2]=[n2,n1];
  console.log(n1,n2)  //输出:20,10

多维数组的解构赋值：

  [n1,n2,[n3,n4]] = [12,33,[16]];
  console.log(n1,n2,n3,n4);  //输出：12，33，16，undefined

需要注意的是多维数组的解构赋值，赋值号两边数组的层级要对应，否则就会出错。

对象的解构赋值

你也可以使用解构赋值语句从对象中提取值：

  const person = {
      name: 'John',
      age: 30,
      city: 'New York'
    };
    
    const { name:name, age:age, city:address } = person;
    console.log(name); // 输出: 'John'
    console.log(age); // 输出: 30
    console.log(address); // 输出: 'New York'

请注意对象解构赋值的实质是，当赋值号两边对象的key一致的情况下，对对象的value进行赋值。当左边对象的key和value一致的情况直接写出key就可以了：

  const person = {
      name: 'John',
      age: 30,
      city: 'New York'
    };
    
    const { name, age, city:address } = person;
    console.log(name); // 输出: 'John'
    console.log(age); // 输出: 30
    console.log(address); // 输出: 'New York'

文章同时发表在：码农编程网 欢迎访问

本节重点

• 数组的解构赋值
• 对象的解构赋值