ES6之解构赋值的深入理解

ES6中的解构赋值的深入理解

引言

解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。 —摘自MDN

1-解构赋值及语法糖的引入：

在这里插入图片描述
虽然我们写是这么写，但是最终我们浏览器还是会以上面那样解析，
像这种简化语法的写法，就叫做语法糖。

2- 变量的解构赋值小结：

理解:
从对象或数组中提取数据, 并赋值给变量(多个)
对象的解构赋值
let {n, a} = {n:'tom', a:12}
数组的解构赋值
let [a,b] = [1, 'atguigu'];
用途
给多个形参赋值

2.1-对象的解构赋值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>变量的解构赋值</title>
</head>
  <script type="text/javascript">
    const person = {
      // 假设这个对象里有很多很多的属性：
      name: 'jack',
      age: 18,
      sex: '男'
    };

    // 我们往往要操作对象的时候，都会把这些属性从对象中给提取出来
    const name = person.name;
    const age = person.age;
    const sex = person.sex;
    const a = person.a;   //读取对象中不存在的属性，值就是undefind
    // 像上面这样一个一个的提取出来，要是有20个属性，就要写20条把属性给提取出来，
    // 这样的代码太繁琐和太多了。

    // 所以就出现了一个简写方式----叫做对象的结构赋值：
    // 可以用一句话，就能做到上面的4条语句的代码：
    // 1 - 对象的解构赋值: 可以提取对象的同名属性赋值，并且将值提取给对应同名变量
    // { } 里面的name，age，sex，a是变量，他们的值等于person.name  person.age  person.sex  person.a
    const { name, age, sex, a } = person;  //虽然我们写是这么写，但是最终我们还是会以上面那样解析
    console.log(name, age, sex, a);  //jack 18 男  undefined
    // 这个就是语法，我们不需要去研究这些语法是怎么实现的，这样就没有意义了。
    // 语法就是告诉我们这样用，就是这样用。不要给你一个for循环，你就去深究for循环是怎么具体的实现的。
  </script>
</body>
</html>

2.2-数组的解构赋值

 	// 数组的解构赋值：按照位置提取数组的值
    // 这种方法用的很少，一般我们都是通过遍历来取数组的值的
    const arr = [3, 2, 4, 1];
    const [a, b, c, d] = arr
    console.log(a, b, c, d);   //3 2 4 1

    // 即使你只想要对应其中的两位：也必须按照位置来，你不想要的就空着，
    const [a, , , b] = arr;
    console.log(a, b);   //3 1

2.3函数的解构赋值

 	// 函数的解构赋值：对函数的第一个参数进行解构赋值
    // 这里还是先定义一个对象：
    const person = {
      name: 'jack',
      age: 18,
      sex: '男'
    };
    function fn(obj) { //在这里传入一个obj对象进去
      console.log(obj);  //所以这里就会打印出来person  {name: "jack",age:18,sex:"男"}
    }
    fn(person); //在这里调用了一个fn函数，传入一个person对象

    // 但是我们想要打印的是里面的name，age，sex
    // 所以我们就这样写：
    function fn(obj) {
      const { name, age, sex } = obj;  //将这个对象进行解构赋值
      console.log(name, age, sex);  //jack 18 男
    }

    // 我们还可以直接写成下面这样：更简洁些：
    // 就达到了我们的最终目的---对函数的第一个参数进行解构赋值
    // { name, age, sex }  仅仅是一个参数，用大括号包着。
    function fn({ name, age, sex }) {
      console.log(name, age, sex);  //jack 18 男
    }
    fn(person);

3-ES6解构赋值的用途

交换变量的值
```
let a = 1;
let b = 2;
[a, b] = [b, a];
```
上面代码交换变量a和b的值，这样的写法不仅简洁，而且易读，语义非常清晰。
输入模块的指定方法☞(这个是重点)
在加载模块时，往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰
```
const { SourceMapConsumer, SourceNode } = require("source-map");
```
注意:
☛在React和Vue项目中常用，一般用在调用接口文件，解构其内部方法在组件中使用。

从函数返回多个值
函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。

// 返回一个数组
function example() {
return [1, 2, 3];
}
let [a, b, c] = example();

// 返回一个对象
function example() {
 return {
   foo: 1,
	bar: 2
 };
}
let { foo, bar } = example();

函数参数的定义
解构赋值可以方便地将一组参数与变量名对应起来。

// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);

// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});

提取 JSON 数据
解构赋值对提取 JSON 对象中的数据，尤其有用。

let jsonData = {
	id: 42,
	status: "OK",
	data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]

上面代码可以快速提取 JSON 数据的值。

遍历 Map 结构
任何部署了 Iterator 接口的对象，都可以用for…of循环遍历。Map 结构原生支持 Iterator 接口，配合变量的解构赋值，获取键名和键值就非常方便。

const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
	 console.log(key + " is " + value);
}
// first is hello
// second is world

如果只想获取键名，或者只想获取键值，可以写成下面这样。

// 获取键名
for (let [key] of map) {
  // ...
}

// 获取键值
for (let [,value] of map) {
  // ...
}

4-总结

ES6提供的这个赋值的语法其实就是像上面说的是一种语法糖，吃起来很甜，用起来很爽，像这样子的语法糖ES6-10中还有很多，尤其是到了后面框架中的使用，很爽，很有用。
愿你在这个代码繁杂、头发渐秃的编码世界里，可以温暖自己，坚持不懈。

人表达的永远不是他所说的内容，而是渴望被理解的心情。——苏更生

拎壳儿跑的蜗牛

发布了27 篇原创文章 · 获赞 44 · 访问量 7万+

私信关注