zoukankan      html  css  js  c++  java
  • Es6 变量的解构赋值

    ES6解构:es6允许按照一定模式匹配,从数组和对象中提取值,对变量进行赋值,这被称之为解构

       1. 解构一般有三种情况,完全解构,不完全解构,解构不成功

    <script>
            //完全解构
            var [a,b,c] = [1,2,3];
            console.log(a+b+c); //6
    //不完全解构 let [x,y] = [1,2,3]; console.log(y);//2 //解构不成功 let [bar, foo] = [1]; console.log(foo); //undefined </script>

     2 .对象的解构赋值

      1. 对象的解构与数组有一个重要的不同,数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

       2. 对象的解构赋值的内部机制,是先找到同名属性,然后再赋值给对应的变量,真正被赋值的是后者,而不是前者。

       3.解构也可以用于嵌套结构的对象 ,注意模式和变量的区别。

    //对象的解构
            let { foo, bar } = { foo: "aaa", bar: "bbb" };
            console.log(foo);   //aaa
            console.log(bar);   //bbb
    
            let { fo: ba } = { fo: 'aaa', bar: 'bbb' };
            console.log(ba);  //aaa
            console.log(fo); ///报错,fo is not defined
    例子1:
    let obj = { p: [ 'Hello', { y: 'World' } ] }; let { p: [x, { y }] } = obj; x // "Hello" y // "World"
    注意,这时p是模式,不是变量,因此不会被赋值。如果p也要作为变量赋值,可以写成下面这样。
    例子2:
    let obj = {
      p: [
        'Hello',
        { y: 'World' }
      ]
    };
    
    let { p, p: [x, { y }] } = obj;
    x // "Hello"
    y // "World"
    p // ["Hello", {y: "World"}]
     
    例子3:
     
    const node = {
      loc: {
        start: {
          line: 1,
          column: 5
        }
      }
    };
    
    let { loc, loc: { start }, loc: { start: { line }} } = node;
    line // 1
    loc  // Object {start: Object}
    start // Object {line: 1, column: 5}

    上面代码有三次解构赋值,分别是对locstartline三个属性的解构赋值。注意,最后一次对line属性的解构赋值之中,只有line是变量,locstart都是模式,不是变量。
     
  • 相关阅读:
    Xamarin.Forms移动开发系列1:介绍和安装
    网络协议 1
    07 MySQL之索引原理
    06 Navicat安装及简单使用
    05 Mysql之多表查询
    04 Mysql之单表查询
    03 Mysql数据库之(行记录)详细操作
    02 Mysql之库表简易操作
    01 Mysql数据库初识
    07 Python之协程
  • 原文地址:https://www.cnblogs.com/gshao/p/10111635.html
Copyright © 2011-2022 走看看