zoukankan      html  css  js  c++  java
  • ES6参考---解构赋值

    ES6参考---解构赋值

    一、总结

    一句话总结:

    1、解构赋值就是从对象或数组中提取数据, 并赋值给变量(多个)
    2、对象的解构赋值:左边的全局变量放在对象中:let {n, a} = {n:'tom', a:12}
    3、数组的解构赋值:左边的全局变量放在数组中:let [a,b] = [1, 'atguigu']

    1、解构赋值(解构对象实例)?

    依次将对象里面的name属性和age属性的值传递给name和age全局变量:let {name, age} = {name : 'kobe', age : 39};
    let {name, age} = {name : 'kobe', age : 39};
    console.log(name, age);

    2、解构赋值(解构数组实例)?

    依次赋值,可以直接在全局打印a、b的值:let [,,a,b] = ['abc', 23, true,12];
    let arr = ['abc', 23, true];
    let [a, b, c, d] = arr;
    console.log(a, b, c, d);

    3、解构赋值(解构数组实例) 的时候 接收后面的参数?

    可以用逗号占位:let [,,a,b] = ['abc', 23, true,12];
    let arr = ['abc', 23, true,12];
    let [,,a,b] = arr;

    4、解构赋值(解构对象) 在函数传递时的实例?

    直接将实参obj对象传递给形参{name, age}:function person1({name, age}) {} person1(obj);
    let obj = {name : 'kobe', age : 39};
    function person1({name, age}) {
     console.log(name, age);
    }
    person1(obj);

    二、解构赋值

    博客对应课程的视频位置:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4   <meta charset="UTF-8">
     5   <title>03_变量的解构赋值</title>
     6 </head>
     7 <body>
     8 <!--
     9 1. 理解:
    10   * 从对象或数组中提取数据, 并赋值给变量(多个)
    11 2. 对象的解构赋值
    12   let {n, a} = {n:'tom', a:12}
    13 3. 数组的解构赋值
    14   let [a,b] = [1, 'atguigu'];
    15 4. 用途
    16   * 给多个形参赋值
    17 -->
    18 <script type="text/javascript">
    19     let obj = {name : 'kobe', age : 39};
    20 //    let name = obj.name;
    21 //    let age = obj.age;
    22 //    console.log(name, age);
    23     //对象的解构赋值
    24     let {age} = obj;
    25     console.log(age);
    26 //    let {name, age} = {name : 'kobe', age : 39};
    27 //    console.log(name, age);
    28 
    29     //3. 数组的解构赋值  不经常用
    30     let arr = ['abc', 23, true];
    31     let [a, b, c, d] = arr;
    32     console.log(a, b, c, d);
    33     //console.log(e);
    34     function person(p) {//不用解构赋值
    35         console.log(p.name, p.age);
    36     }
    37     person(obj);
    38 
    39     function person1({name, age}) {
    40      console.log(name, age);
    41     }
    42     person1(obj);
    43 
    44 
    45 </script>
    46 </body>
    47 </html>
     
  • 相关阅读:
    How to configure security of ActiveMQ ?
    CentOS 搭建 nginx + tomcat
    25个 Git 进阶技巧
    写给Git初学者的7个建议
    my links
    Shell scripts to Create a local dir base on the time.
    81For全栈技术网
    一款可视化的在线制作H5
    在线制作h5
    在线制作h5——上帝的礼物
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/12556089.html
Copyright © 2011-2022 走看看