精解 ES6解构赋值

🐱 个人主页：TechCodeAI启航，公众号：SHOW科技

🙋‍♂️ 作者简介：2020参加工作，专注于前端各领域技术，共同学习共同进步，一起加油呀！

💫 优质专栏：前端主流技术分享

📢 资料领取：前端进阶资料可以找我免费领取

🔥 摸鱼学习交流：我们的宗旨是在「工作中摸鱼，摸鱼中进步」，期待大佬一起来摸鱼！

ES6解构赋值是一种方便的方式，可以从数组或对象中提取值，并将其赋给一组变量。

1. 数组解构赋值：

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

   这里将数组的第一个元素赋给变量a，第二个元素赋给变量b，第三个元素赋给变量c。

2. 对象解构赋值：

   const person = { name: 'John', age: 25 };
   const { name, age } = person;
   console.log(name); // 'John'
   console.log(age); // 25
   

   这里将对象的name属性赋给变量name，age属性赋给变量age。

3. 默认值： 在解构赋值中，可以为变量设置默认值，当提取的值为undefined时，将使用默认值。

   const { name = 'Anonymous', age = 0 } = person;
   console.log(name); // 'John'
   console.log(age); // 25
   

   这里如果person对象中没有name属性或age属性，将使用默认值。

4. 嵌套解构赋值： 可以在解构赋值中使用嵌套结构，以提取嵌套对象或数组中的值。

   const person = {
     name: 'John',
     age: 25,
     address: {
       street: '123 Main St',
       city: 'New York'
     }
   };
   
   const { name, age, address: { city } } = person;
   
   console.log(name); // 'John'
   console.log(age); // 25
   console.log(city); // 'New York'
   

   这里将嵌套对象person.address中的city属性的值赋给变量city。

5. 用于函数参数的解构赋值： 解构赋值也可用于函数参数中，方便提取函数参数对象的属性值。

   function greet({ name, age }) {
     console.log(`Hello, ${name}! You are ${age} years old.`);
   }
   
   greet(person); // Hello, John! You are 25 years old.
   

   这里定义了一个接受一个对象参数的函数greet，并使用解构赋值提取参数对象的name和age属性值。

总结：ES6解构赋值是一种方便的语法，可以从数组或对象中提取值，并将其赋给一组变量，从而简化了代码的编写。它可以用于数组、对象、默认值、嵌套解构以及函数参数等场景。