潜聊ES6新特性--解构【干货】

前言

今天，我们来学习干货！！JavaScript中的解构

正文

JavaScript中的解构

在JavaScript中，解构赋值是一种非常方便的语法，它允许我们从数组或对象中提取数据并赋值给新的变量。通过解构赋值，我们可以更轻松地操作和处理数据。

一、解构赋值的基本语法 解构赋值可以从数组或对象中提取值，并将其赋给变量。

1. 数组解构赋值：

let [变量1, 变量2, ...] = 数组;

我们从这一个案例出发：

let arr = ['a', 'b', 'c', 'd', 'e', 'f']
// 这种赋值是一一对应原则，后面的'd','e'没有对应变量指定
let [x,y,z]=[ 'a', 'b', 'c', 'd', 'e']
console.log(x,y,z);

输出:
a b c

我们可以从这个案例中看到,这种赋值方式let [x,y,z]=[ 'a', 'b', 'c', 'd', 'e']会从数组当中取对应的值！

看完这个案例，我们再来看看这个案例！！

let arr =[1,2,3,4,5,6,7,8,9]
let newArr=[0]
//assign对象拼接
// console.log(...arr);//解构数组
console.log([...newArr, ...arr]);

有人会提问了？...arr这种书写方式是允许的吗？当然！这正是我们今天要讲的解构方法其中的第一个！4

我们来看看输出结果：

输出：
[
  0, 1, 2, 3, 4,
  5, 6, 7, 8, 9
]

我们可以看到，上述案例通过解构数组，利用[...newArr, ...arr]讲两个解构数组又重新结合成了一个新的数组！

2. 对象解构赋值：

我们先来学习一下基本语法：

let {属性1, 属性2, ...} = 对象;

我们再来看看一个案例！

// 对象解构，自己声明的key要与要解构的对象的key值相同，name(name = name一一呼应):name(name='小花')
var {name:name,age:age} = {name:'小花',age:19}
console.log(name,age);
var {name,age} = {name:'小花',age:19}
console.log(name,age);

输出:
小花 19
小花 19

也就是说，我们存在一个这样的语法，我们可以通过自己声明一个对象，保证我们自己声明的key值与我们要解构的对象的key值相同，我们就可以拿着我们声明的key值直接进行输出了！

同时，我们也可以通过这样的语法完成解构：var {name,age} = {name:'小花',age:19},因为是重名的，所以我们的解构语法可以直接写成{name,age}。

还有一个案例：

// 小明为默认值，如果解构找不到name一个新的值，就会采用默认值，找到了就用新值顶替掉
let {name = '小明',age:age} = {name:'小花',age:19}
console.log(name,age);//小花,19

其中小明为默认值，如果解构找不到name一个新的值，就会采用默认值，找到了就用新值顶替掉

二、解构赋值的常见用法

1. 交换变量的值 使用解构赋值可以轻松地交换两个变量的值，而无需借助第三个变量：

   let a = 1;
   let b = 2;
   [a, b] = [b, a]; // a=2, b=1

2. 函数参数的解构赋值 解构赋值可以方便地提取函数参数中的值，使得函数调用更加简洁：

   function greet({name, age}) {
     console.log(`Hello, ${name}! You are ${age} years old.`);
   }
   greet({name: '小明', age: 20}); // 输出：Hello, 小明! You are 20 years old.

3. 提取数组或对象中的部分值 解构赋值可以只提取数组或对象中的部分值，而无需关心其他值：

   let [a, , c] = [1, 2, 3]; // 只提取数组中的第一个和第三个值
   console.log(a, c); // 输出：1 3
   
   let {name, ...rest} = {name: '小明', age: 20, gender: '男'}; // 只提取对象中的name属性，将其余属性放入rest对象中
   console.log(name, rest); // 输出：小明 {age: 20, gender: '男'}

三、解构赋值的一些技巧

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

   let [a = 1, b = 2] = [3]; // a=3, b=2

2. 嵌套解构 解构赋值可以嵌套使用，提取更复杂的数据结构：

   let {name, skills: {frontend, backend}} = {name: '小明', skills: {frontend: 'JavaScript', backend: 'Node.js'}};
   console.log(name, frontend, backend); // 输出：小明 JavaScript Node.js

3. 函数返回值的解构赋值 解构赋值可以方便地从函数返回值中提取需要的值：

   javascript复制function getPerson() {
     return {name: '小明', age: 20};
   }
   let {name, age} = getPerson();
   console.log(name, age); // 输出：小明 20

四、解构赋值的注意事项

1. 解构赋值必须对应正确的数据结构，否则会报错。
2. 解构赋值可以嵌套使用，但要注意保持结构的一致性。
3. 解构赋值可以与rest参数结合使用，提取剩余的数组或对象。

五、解构赋值的进阶用法

1. 函数参数的默认值和解构赋值结合使用 在函数参数中可以使用解构赋值并设置默认值，使函数调用更加灵活：

   function greet({name = '小明', age = 20} = {}) {
     console.log(`Hello, ${name}! You are ${age} years old.`);
   }
   greet(); // 输出：Hello, 小明! You are 20 years old.
   greet({name: '小红'}); // 输出：Hello, 小红! You are 20 years old.

2. 解构赋值的别名 可以使用冒号指定变量的别名，方便地将提取的值赋给指定的变量：

   let {name: n, age: a} = {name: '小明', age: 20};
   console.log(n, a); // 输出：小明 20

3. 解构赋值的嵌套和默认值结合使用 解构赋值可以在嵌套的数据结构中设置默认值，以处理更复杂的情况：

   let {name, skills: {frontend = 'JavaScript', backend = 'Node.js'} = {}} = {name: '小明'};
   console.log(name, frontend, backend); // 输出：小明 JavaScript Node.js

六、解构赋值的适用场景

1. 提取函数返回值中的特定属性/值。
2. 简化复杂数据结构的处理，如从嵌套的对象或数组中提取所需值。
3. 函数参数的解构赋值可以提高代码可读性和灵活性。
4. 交换变量值、数组元素的互换等常见操作。

总结：

JavaScript中的解构赋值是一项强大而灵活的特性，可以简化代码、提高可读性，并且适用于各种场景。通过掌握其基本语法、常见用法和一些高级技巧，我们能够更好地利用解构赋值来处理复杂的数据结构，提高开发效率。在实际开发中，根据具体需求，灵活运用解构赋值可以让代码更加简洁、易读，提高开发效率。

好啦！我们今天的学习就到这里啦！

欢迎大家评论留言！虚心接受!

点个赞鼓励支持一下吧！🌹🌹🌹