• 深入理解ES6 阅读笔记


    分享深入理解ES6阅读笔记

    一. var   vs   let & const

    var:

    先看以下代码:

    function test(fev){
        if(fev){
            var a = 1;
            return a;
          }else{
          // do something } console.log(a);
    }
    test(
    0);

    如果这段代码执行, 会发生什么?  不太熟悉JS的会认为报错

    可是呢, 执行结果是这个:

    undefined;

    熟悉JS的知道这是预编译的问题, 代码执行前已经被修改为这个样子:

    function test(fev){
        var a;
        if(fev){
            a = 1;
            return a;
          }else{
          // do something
          }
         console.log(a);
    }
    test(0);

    但是,在ES6里面弥补了这一点: 出现了另外一对声明语句: let和const

    ------------------------------------------------------------------------------------------------------------------------------------------------

    let:

    let是块级变量声明语句:也就是说在以下代码是会报错的;

    {
    let a = 1;
    }
    console.log(a);

    再也不是以前那个马大哈var了

    而且, let不能重复赋值:

    var a = 1;
    let a = 2;

    这样也会报错...........

    没有变量提升

    不能重复赋值

    拥有块级作用域

    -----------------------------------------------------------------------------------------------------------------------

    const:

    对于const是常量声明语句, 也就是说变量一旦声明就无法修改(修改就报错..)

    与let一样是块级作用域   ,   在块级JS代码中, 执行完直接销毁.

    而且, const必需初始化, 这意味着以下代码会报错:

    const a = 1;   // 正确的用法
    const b;   // 报语法错误

    const不能覆盖不论var还是let声明的变量

    对于对象: const声明的对象可以修改对象的值, 但是不能修改变量值的引用

    const a = [1, 2, 3];
    a.pop();
    // 这可以正常执行
    // 但是这样会报错 a = {'a': 'a'};

    对于  '  兼容性  '  特别好的typeof( )函数呢?

    const和let的区别:

    let声明的变量可以修改, 不论类型还是值, const不行, 如果const声明变量为对象, 则该变量引用不可变, 对象的值可变

    还有一个有趣的现象--------有以下代码:

    typeof(a);
    
    // 大家都知道这样写不会报错, 会返回undefined  ES6里面也是这样
    // 但是如果type操作符下面有了const或者let语句,那么!!!!会报错!!!! typeof(a); // 如果有了const a = 0;或者 let a = 0; 均会报错

    上面的情况被称为临时死区

    JS预编译时, 会提升变量(遇到var语句), 但是遇见了let或者const语句, 会把他们放在TDZ(临时死区), 外界代码如果在let或者const语句访问TDZ里面的变量, 就会报错. 

     最后一个区别就是当用var声明全局变量时, 该变量会成为一个全局window的属性比如:

    var test = 1;
    console.log(window.a)     // 1

    但是let和const不会,

    let a = 1;
    console.log(a == window.a)    // false

    let和const完全可以取代var

    但是如果真的想在全局作用域下声明变量, 仍然可以使用var , 这种情况常见于浏览器里面跨window或者跨frame访问代码

    ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------

    二  .  函数

     在ES5以前, JS的函数一直没有太大变化, 遗留了很多问题和隐晦的做法

    先谈参数: 在ES5里面的函数, 对于参数都是没有要求的, " 多退少补 "  原则嘛, 但是对于ES5函数默认值呢  ?  你可能会这样写:

    function test(a, b, c){
        a = a || 200;    // 利用布尔操作符的短路特性
        b = b || true;
        c = c || false;
       // do something; }

    到了ES6   -----   有了新特性, 可以写类似于Python那样的默认值了, 有了ES6 , 以上函数可以改为这样:

    function test(a = 200, b = true, c = false){
        // do something;
    }

    看, 是不是比ES5有简洁, 易读等优点    0  .  0 

    块级函数:

    在ES5里面,块级函数是报错的:

    if(......){
        function test(){}
    };

    但是在ES6里面不会报错(包括严格模式内)

    箭头函数是ES6里面的新语法规定

    它的语法类似于这样:

    let test = ( sum1 + sum2 ) => num1 + num2;
    //和以下代码功能一样:
    function test1(num1, num2){
        return num1 + num2;
    }
    // 箭头函数公式: 变量声明关键字 变量名 = (参数1, 参数2, ...) => {函数表达式;}

    箭头函数的特性:

    不能new

    没有绑定argument

    没有this绑定

    函数内容除了以上大改进以外, 还有一些小改进, 让函数更易用

     三.对象的扩展

    1.对象字面量的语法扩展

    之前的

    function Person () {
        return {
            name: name,
            age: age  
        }
    }

    可以简写成以下格式

    function Person () {
        return {
            name,
            age  
        }
    } 
    // 对象的方法也有类似的写法:
    var person = {
        say() {
        //
        }
    }

    除此之外,ES6还添加了对象方法, 加强原型对象等

    四  .  解构赋值

    如果了解过Python这种语言, 那么理解ES6的解构就是小菜一碟:

    之前我们是怎么把两个变量的值互换的, 这是最容易想到的方法吧

    var a = 1,
        b = 2,
        c;
    c = a;
    a = b;
    b = c;

    现在更简单了

    var a = 1,
        b = 2;
    [a, b] = [b, a];

    诺, 就这样就行了

    五 . Symbol和Symbol属性

    未完待续.......

  • 相关阅读:
    HDU 5883 欧拉回路
    HDU 5889 Barricade (Dijkstra+Dinic)
    网络流Dinic算法模板 POJ1273
    216. Combination Sum III
    211. Add and Search Word
    973. K Closest Points to Origin
    932. Beautiful Array
    903. Valid Permutations for DI Sequence
    514. Freedom Trail
    312. Burst Balloons
  • 原文地址:https://www.cnblogs.com/jedenzhan/p/8830732.html
Copyright © 2020-2023  润新知