zoukankan      html  css  js  c++  java
  • ES6必知必会 (一)—— 变量声明和结构赋值

    本文章属于个人对es6一些比较常用的语法的总结归纳,其主要参考阮一峰大神的<a href="http://es6.ruanyifeng.com//">ECMAScript6入门</a> ,如有哪里理解不对或者不透彻的地方,还请批评指正~

    ps:推荐使用es6在线调试

    <b>let 和 const</b>

    1.let声明的变量只有在当前代码块成效,而且不具备变量提升(即代码块中有let声明的变量提前使用会报错);

    {
       console.log(a)    // a is not defined
       console.log(b)   //  2
       let a = 1;
       var b = 2;
    }
    

    2.let同一作用域内不允许重复声明;

    3.const声明一个只读常量,一旦声明,无法更改;

    4.const声明一个变量的时候,必须初始化,而且该变量只能在当前作用域有效;

    5.const声明一个符合类型的数据时(主要是对象和数组),保存的是变量的内存地址,只能保证这个地址固定,不能保证数据结构不变;

    const o = {};
    o.name = 'hello';    //可以给对象添加属性
    console.log(o);      // { "name" : "hello" }
      
    o = {};             //报错,因为o的内存地址不能改变
    

    6.可以使用 Object.freeze()方法来冻结一个对象或者对象的某个属性;

    7.ES5声明变量的方式有两种 : var 和 function; ES6声明变量的方式有六种 : var let const function import class;

    <b>变量的解构赋值 </b>

    1.ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值;

    2.如果变量解构不成功就会返回 undefined;

    3.只要某种数据结构具有 Iterator 接口,都可以采用数组形式的解构赋值;

    4.解构赋值时可以指定默认值 ( let [ foo = true ] = [] );

    5.如果数组的某个成员不严格等于( === ) undefined , 默认值就不会生效;

    let [x, y = 'b'] = ['a']; // x='a', y='b'
    let [x, y = 'b'] = ['a', 'undefined'];  // x = 'a' , y = 'undefined' 
    

    6.如果指定的默认值是一个表达式,那么该表达式是惰性求值(即只有在使用到的时候才去求值);

    7.默认值可以引用解构赋值的其他变量,但该变量必须已经声明;

    8.对象的解构中,变量必须与属性同名,才能取到正确的值,如果变量没有对应的同名属性,则会导致取不到值,最后等于undefined;

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

    let { foo: baz , bar } = { foo: "aaa", bar: "bbb" }; 
    foo // foo is not defined
    baz // 'aaa'
    bar // 'bbb'
    

    上述例子中 foo 是匹配的模式,baz才是变量。真正被赋值的是变量baz,而不是模式foo , bar之所以能匹配,是因为对象的解构赋值是下面形式的简写

    let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" }
    

    10.变量的解构赋值通常用于交换变量,函数参数定义,参数指定默认值等,虽然解构赋值虽然很方便,但是解析起来并不容易,如果使用不当就会产生与预期值不同的问题~




  • 相关阅读:
    课堂作业
    Visual Studio Code for mac 设置中文
    git分支与主干合并操作
    git常用命令
    js事件冒泡和事件委托
    JS中的三种弹出式消息提醒(警告窗口、确认窗口、信息输入窗口)的命令是什么?
    常见的解决浏览器兼容性问题的方式有哪些
    vue问题大全
    浅析前端工程化
    前端中常见的数据结构小结
  • 原文地址:https://www.cnblogs.com/wntd/p/9013263.html
Copyright © 2011-2022 走看看