ES6简单了解

ES6初步学习

---

let和const

let

用来声明变量，但是所声明的变量只在let命令所在的代码块内有效

let不像var那样会发生变量提升，所以一定要先声明后使用。

console.log(foo); //undefined
console.log(bar); //报错ReferenceError
var foo = 2;
let bar = 3;

块级作用域

ES6明确允许在块级作用域中声明函数。但是尽量避免在块级作用域内声明函数，如果需要也要写成函数表达式，而不是函数声明语句。

在ES6中，块级作用域之中，函数声明的语句的行为类似let，在块级作用域之外不能被引用。

• let实际上为javascript新增了块级作用域

• 外层作用域无法读取内层作用域的变量

• 内层作用域可以定义外层作用域的同名变量

• 块级作用域实际上使得广泛运用的立即执行函数变得不再必要了。

function f1() {
    let n =5;
    if(rue) {let n = 10;}
    console.log(n); //5，注意只能在f1这个作用域使用
}

javascript没有块级作用域，但是用let声明的变量可以绑定到所在的任意作用域中，换句话说let为其声明的变量隐式的劫持了所在的块作用域{...}

var foo = true;
if(foo) {
    let bar = foo * 2;
    bar = something(bar);
    console.log(bar); //bar只在foo作用域中有效
}
console.log(bar); //ReferenceError

不太明显的“死区”

有兴趣的可以自行搜索了解一下TDZ（暂存死区），记得当时还是看到阮大神的微博知道的~~

function bar(x = y; y = 2) {
    return [x, y];
}

bar(); //报错，此时相当于y未声明的情况下

let不允许在相同作用域内重复声明同一个变量，不能在函数内部重新声明参数。const也是这样。

function(arg) {let arg; //报错}

const

const同样可以创建块作用域变量，同样只在声明所在的块级作用域中有效。但其值是固定的，不可更改，只读。

一旦声明变量，就必须立即初始化，不能留到以后赋值。

//只声明不赋值就会报错
const foo; //SyntaxError:

const声明的变量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。

if(true) {
    console.log(MAX); //ReferenceError
    const MAX = 5;
}

对于复合类型的变量，变量名不指向数据，而是指向数据所在的地址。const只保证变量名指向的地址不变，不保证该地址的数据保持不变。不能把foo指向另一个地址。

const foo = {};
foo.prop = 123;
foo.prop; //123
foo = {}; //TypeError:"foo" is read-only

顶层对象的属性

浏览器环境指的是window对象 Node中指的是global对象

ES6中，var命令和function命令声明的全局变量依旧是顶层对象的属性，但是let和const以及class声明的全局变量不属于顶层对象的属性。

var a = 1; 
window.a; //1

let b = 1;
window.b; //undefined

异常

严格模式下LHS查询失败时，并不会创建并返回一个全局变量，引擎会抛出同RHS查询失败时类似的ReferenceError异常

如果RHS查询到一个变量，尝试对这个变量的值进行不合理的操作时，比如对一个非函数类型的值进行函数调用，或者引用null或undefined类型的值中的属性，引擎会抛出另外一中的异常TypeError

ReferenceError同作用域的判别失败有关，TypeError则表示作用域判别成功了，但是对结果的操作是非法的或者不合理的。

查找的目的是对变量进行赋值，那么就会使用LHS查询，如果目的是获取变量的值，那么就会使用RHS查询。

像var a = 2这样的会被分解两个步骤：（1）var a 会在作用域中声明新变量，代码执行前进行（2）a = 2 会查询(LHS)变量a并对其进行赋值。

闭包

• 循环和闭包

每次迭代都生成一个新的作用域，使得延迟函数的回调可以将新的作用域封闭在每个迭代内部。

for(var i = 0; i <= 5; i++) {
    (functiong(j) {
        setTimeout(function timer() {
            console.log(a);
        }, 1000);
    })(i);
}

var的循环，每一次循环都是新的i值覆盖旧的i值，只有一个i，所以只输出最后一个。

let的循环 每次循环都是一个新的变量i，多个i，所以会每个都输出，每次迭代都进行重新绑定，与闭包有关

Generator函数

异步
最大的特点就是可以交出函数的执行权（即暂停执行）
函数名之前加星号.yield表示执行到此处，执行权将交给其他协程。

function* gen(x) {
    var y = yield x + 2;
    return y;
}

var g = gen(1);
g.next() //{value:3,done:false}
//value是yield语句后面表达式的值，表示当前阶段的值，done表示函数是否执行完毕，是否还有下一个阶段。
g.next() //{value:undefined,done:true}

调用generator函数会返回一个内部指针g，执行它不会返回结果返回的是指针对象。调用指针的g的next方法，会移动内部指针，指向第一个遇到的yield语句即x+2处。

Set数据结构

类似于数组但是成员的值都是唯一的，没有重复的值。

var s = new Set([1,2,3,4,4]);
[...s] //[1,2,3,4]

Set实例的方法
操作方法和遍历方法

操作数据

（1） 操作方法

• add:添加某个值，放回set结构本身

• delete:删除某个值返回一个布尔值，表示删除是否成功

• has(value):返回一个布尔值，表示该值是否为set的成员

• clear:清除所有成员，没有返回值

s.add(2).add(3).add(2);
s.size //2
s.has(1) //false
s.has(2) //true
s.has(3) //true
s.delete(2);
s.has(2) //false

（2） Array.from方法可以将set数据结构转为数组

var items = new Set([1,2,3,4,5]);
var array = Array.from(items);

（3） 扩展运算符...也可以将某些数据结构转换一个数组

function foo() {
    var args = [...arguments];
}

[...document.querySelectorAll("div")]

（4）数组去重的另一种方法

function dedupe(array) {
    return Array.from(new Set(array));
}
dedupe([1,1,2,3]) //[1,2,3]

遍历操作

• keys:返回键名的遍历器

• values:返回键值的遍历器

• entries:返回键值对的遍历器

• forEach:使用回掉函数遍历每个成员

附录（易错点）：

• 隐式的强制转换

3 + true; //4
NaN !== NaN; //true
Null == undefined; //true

• 浮点数

0.1 + 0.2; //0.300000004
(8).toString(2); //"1000"
parseInt("1001", 2); //9

• 数据类型

typeof null; //"object"

typeof "hello"; //"string"

var s = new String("hello");
typeof s; //"object"

var s1 = new String("hello");
var s2 = new String("hello");
s1 === s2; //false
s1 == s2; //false

NaN !==NaN