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

最新推荐文章于 2022-07-09 11:35:38 发布

置顶拎着蜗牛跑的壳儿

最新推荐文章于 2022-07-09 11:35:38 发布

阅读量1.9w

点赞数 3

分类专栏： ES6 文章标签： ES6中的解构赋值的深入理解解构赋值 ES6 语法糖

本文链接：https://blog.csdn.net/azxqwe123/article/details/103296603

版权

ES6 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

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

在这里插入图片描述

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

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

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

1.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>

1.2.3 - 数组的解构赋值

  // 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

1.2.4 - 函数的解构赋值

    // 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);

『传送门』☛ES6的解构赋值的用途总结

拎着蜗牛跑的壳儿

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
ES6中的解构赋值的深入理解

一 - ES6中的解构赋值的深入理解1.1- 解构赋值及语法糖的引入：虽然我们写是这么写，但是最终我们浏览器还是会以上面那样解析，像这种简化语法的写法，就叫做语法糖。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>变量的解构赋值&...
复制链接

扫一扫