分享深入理解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属性
未完待续.......