深入理解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属性

未完待续.......