Longstick的学习周记——ES6新特性

前言

这周感觉是非常的水逆，基本没有一件顺心的事情。考试非常糟糕、事情都没做好、工作也没找到，甚至连保底的offer都告诉我【心理测评不合格】。但是人不能就此倒地，赶紧继续向前跑，希望下周开始能有好运气，pls。

---

ES6新特性

面csig的时候被问到了，我竟然说不出个所以然，确实是因为之前做项目的时候其实就只查到了箭头函数属于新特性，其他的。。。。看到很多企业要求都需要了解es6，记录一下。

1. let 和 const

es6中新增了let和const关键字，在es6之前JS是没有块级作用域这种概念的，自从es6出现了let和const，JS就出现了代码块概念。

let关键字

1. let声明的变量只在代码块中有效，var是在全局中有效。

{
	let a = 0
	var b = 1
	console.log(a)  //0
	console.log(b)  //1
}
console.log(a)  //a is not defined
console.log(b)  //1

2. let只能声明一次，var可以重复声明。

{
	let a = 0
	let a = 1
	var b = 2
	var b = 3
	a //Identifier 'a' has already been declared
	b //3
}

3. let没有变量提升

console.log(a);  //ReferenceError: a is not defined
let a = "apple";
 
console.log(b);  //undefined
var b = "banana";
//变量提升：
//var b;
//console.log(b) undefined
//var b = "banana";

变量 b 用 var 声明存在变量提升，所以当脚本开始运行的时候，b 已经存在了，但是还没有赋值，所以会输出 undefined。
变量 a 用 let 声明不存在变量提升，在声明变量 a 之前，a 不存在，所以会报错。

变量提升

• 所有的声明都会提升到作用域的最顶上去。
• 同一个变量只会声明一次，其他的会被忽略掉或者覆盖掉。
• 函数声明的优先级高于变量声明的优先级，并且函数声明和函数定义的部分一起被提升。

const 关键字

1. const 声明一个只读变量，声明之后不允许改变。意味着，一旦声明必须初始化，否则会报错。

const PI = "abc";
PI  // abc

const NO;  // Missing initializer in const declaration

2. 暂时性死区
   暂时性死区，所声明的变量或者常量会绑定到该区块，不再受外部影响。

//暂时性死区
var a=0;
for(let i=0;i<2;i++){
    console.log(a)//ReferenceError:
    const a=0
}

var b=0;
for(let i=0;i<2;i++){
    console.log(b)//ReferenceError:
    let b=0
}

3. const同样没有变量提升

console.log(a); //ReferenceError: a is not defined
const a = 1; 

2. 模块字符串` `

在es6之前，字符串拼接只能用+或一些字符串方法，书写起来不太方便，在es6中加了反引号，可以直接输出有嵌入变量的字符串和多行字符串。

let name = hhx
let string =`Hi ${name},
	<div>what are u doing?</div>`
//Hi,
//what are u doing?

3. 解构

可以使用 {} 来对数组和对象进行解构。ES6允许按照一定的模式，从数组和对象中提取值，对变量进行赋值，称为解构。

以前变量赋值只能直接指定值

let a = 1;
let b = 2;
let c = 3;

ES6允许写成

let[a,b,c] = [1,2,3]; //

有点类似于python的写法，可以直接进行赋值，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

4. 函数的参数默认值

函数传参可以有默认值。

function printT(text='default'){
	console.log(text);
}

5. Spread / Rest操作符...

扩展运算符（spread）是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

console.log(...[1, 2, 3])
// 1 2 3

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]

该运算符主要用于函数调用。

function push(array, ...items) {
  array.push(...items);
}

function add(x, y) {
  return x + y;
}

const numbers = [4, 38];
add(...numbers) // 42

6. 箭头函数

• 不需要function关键字
• 省略return关键字
• this始终指向函数申明时所在作用域下的this值

//es5
var fun=function (a,b){
	return a+b;
}

//es6
var function=(a,b)=>a+b;

由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。（这个在项目的时候遇到过。）

// 报错
let getTempItem = id => { id: id, name: "Temp" };

// 不报错
let getTempItem = id => ({ id: id, name: "Temp" });

7. for of

ES6 借鉴 C++、Java、C# 和 Python 语言，引入了for...of循环，作为遍历所有数据结构的统一的方法。

一个数据结构只要部署了Symbol.iterator属性，就被视为具有 iterator 接口，就可以用for...of循环遍历它的成员。也就是说，for...of循环内部调用的是数据结构的Symbol.iterator方法。

for...of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象（比如arguments对象、DOM NodeList 对象）、后文的 Generator 对象，以及字符串。

• for of 遍历的是键值对中的值
• for in 遍历的是键值对中的键

8. Promise 对象

Promise用于更优雅的处理异步请求。

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

const promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

• resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；
• reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

then方法可以接受两个回调函数作为参数。
第一个回调函数是Promise对象的状态变为resolved时调用。第二个回调函数是Promise对象的状态变为rejected时调用。这两个函数都是可选的，不一定要提供。它们都接受Promise对象传出的值作为参数。

9. Class

类似于C++、Java等面向对象语言，ES6 中支持 class 语法，不过，ES6的class不是新的对象继承模型，它只是原型链的语法糖表现形式。

class Student {
  constructor() {
    console.log("I'm a student.");
  }
 
  study() {
    console.log('study!');
  }
 
  static read() {
    console.log("Reading Now.");
  }
}
 
console.log(typeof Student); // function
let stu = new Student(); // "I'm a student."
stu.study(); // "study!"
stu.read(); // "Reading Now."

参考文章：
ES6新特性总结
ECMAScript 6 入门