欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ES6之解构赋值的深入理解

程序员文章站 2024-03-01 18:37:04
...

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

引言

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

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

ES6之解构赋值的深入理解
虽然我们写是这么写,但是最终我们浏览器还是会以上面那样解析,
像这种简化语法的写法,就叫做语法糖。

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

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

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解构赋值的用途

  1. 交换变量的值
    let a = 1;
    let b = 2;
    [a, b] = [b, a];
    
    上面代码交换变量a和b的值,这样的写法不仅简洁,而且易读,语义非常清晰。
  2. 输入模块的指定方法☞(这个是重点)

    在加载模块时,往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰
    const { SourceMapConsumer, SourceNode } = require("source-map");
    
    注意:
    ☛在React和Vue项目中常用,一般用在调用接口文件,解构其内部方法在组件中使用。
  3. 从函数返回多个值
    函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。有了解构赋值,取出这些值就非常方便。
    // 返回一个数组
    function example() {
    return [1, 2, 3];
    }
    let [a, b, c] = example();
    
    // 返回一个对象
    function example() {
     return {
       foo: 1,
    	bar: 2
     };
    }
    let { foo, bar } = example();
    
  4. 函数参数的定义
    解构赋值可以方便地将一组参数与变量名对应起来。
    // 参数是一组有次序的值
    function f([x, y, z]) { ... }
    f([1, 2, 3]);
    
    // 参数是一组无次序的值
    function f({x, y, z}) { ... }
    f({z: 3, y: 2, x: 1});
    
  5. 提取 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 数据的值。
  6. 遍历 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中还有很多,尤其是到了后面框架中的使用,很爽,很有用。
愿你在这个代码繁杂、头发渐秃的编码世界里,可以温暖自己,坚持不懈。

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

相关标签: ES6详解解构赋值