zoukankan      html  css  js  c++  java
  • ES6-小记

    *let 主要有下面三点优点:

    1、作用域更加清晰

    不存在变量作用域自动提升的问题造成变量值被覆盖的问题,例如:
    let a = 1;
    var b = 1;
    if (true) {
      let a = 2;
      var b = 2;
    }
    console.log(a) // a is 1
    console.log(b) // b is 2

    2、作用域更容易控制
    let 的作用域是根据代码块(enclosing block)来判定的,而 var 的作用域是根据函数块(function block)来判定的。这样的话,如果我们的变量都使用 let/const 来声明,那么以前的立即执行函数就不需要了,我们只要加一个代码块就好了,例如:
    {
      let a = 1;
    }
    console.log(a) //  a is not defined

    3、Runtime自动检查重复声明的函数并报错
    在同一个作用域内不允许重复声明变量,例如:
    if (true) {
      let a = 1;
      let a = 2;
    }
    

    Runtime会报错:Uncaught SyntaxError: Identifier 'a' has already been declared

    有了更加清晰的作用域,我们的代码就能够更好被预测,也更好维护。
    有了更容易控制的作用域可以让我们减少很多立即执行的函数。
    Runtime的自动检查可以避免不必要,甚至是错误的代码声明。
    所以既然所有的不同都是 let 的优点,那确实很难找到 var 更优的使用场景了

    *ES6(新版 JavaScript 语言规范)新增了箭头函数语法,用来简化函数书写:

    let add = function(a, b) {
      return a + b;
    };
    
    等同于
    
    let add = (a, b) => {
      return a + b;
    };
    
    循环语句中也非常直观方便:
    
    list.forEach((a, b) => {
      console.log(a + b);
    });

    箭头函数有个重要的特点就是自动绑定了当前的作用域,作用域的概念,JavaScript 和 Java 的一样,JavaScript 中可以使用 bind、call、apply 三个方法改变函数执行的作用域,简单区别如下:

    • bind 方法,创建一个新的函数的引用并绑定到一个作用域特定作用域上面,同时支持传参。bind(作用域对象, 参数1, 参数2)

    • apply、call 方法,直接调用执行该函数,在执行的时候将函数内部的作用域绑定到参数指定的作用域。call(作用域)

    这几个方法详情请见:http://www.jianshu.com/p/56a9c2d11adc 。通常可能会在 JavaScript 的作用域上产生疑惑。

    箭头函数声明和特性:http://es6.ruanyifeng.com/#docs/function#箭头函数

    函数作用域:http://es6.ruanyifeng.com/#docs/function#作用域 和 http://www.w3school.com.cn/js/pro_js_object_scope.asp

    设置函数参数的默认值:http://es6.ruanyifeng.com/#docs/function#参数默认值的位置

    *== 和 === 的区别

    JS 是弱类型语言,=== 表示全等判断,会把类型也进行比较:

    2 == '2' // -> true
    2 === '2' // -> false

    + 运算符会改变数据类型

    运算符会导致数据类型的改变,这是因为运算符同时表示多种含义导致。+ 运算符既可以链接字符串,也可以计算数字,使用时需要注意:

    2 + 2 // -> 4 number
    2 + '2' // -> '22' string

    *ES6 新版语法增强功能

    ES6 是新一代 JavaScript 语法规范,里面新增了非常多的语法和功能,而且往 Java 等传统语言靠拢。比如 class 类定义、箭头函数、真正的 Set、Map 数据类型等。下面仅列出比较推荐的用法,有一些用法由于不太稳定暂时不推荐使用。

    code...obj

    object 的赋值需要遍历相关字段,比如:

    let bb = {
      age: 18,
      sex: 'male',
    };
    let aa = {
      name: '浩睿',
    };
    // 在 aa 上面新增 bb 的属性需要
    aa.age = bb.age;
    aa.sex = bb.sex;

    这样就比较麻烦,你必须知道所有 key 而且每次新增都需要改动相关字段。为此,ES6 规范将扩展运算符(...)引入对象。就上面的例子,可以这样写:

    let bb = {
      age: 18,
      sex: 'male',
      name: '后面的同 key 内容会覆盖前面的'
    };
    let aa = {
      name: '浩睿',
      ...bb,
    };

    相当于把某个对象拆开分别赋值,遇到同样的 key 后面内容会覆盖前面的。详情请看:http://es6.ruanyifeng.com/#docs/object#对象的扩展运算符

     
     
  • 相关阅读:
    Eclipse配置方法注释模板
    彻底清除Github上某个文件以及历史
    eclipse快捷键
    Hibernate执行原生SQL
    API接口规范
    eclipse配置google代码风格
    eclipse format xml
    git撤销commit
    使用postman测试文件上传
    centos7下部署elasticSearch集群
  • 原文地址:https://www.cnblogs.com/sylvia-Camellia/p/10649312.html
Copyright © 2011-2022 走看看