Longstick的学习周记——ES6新特性
前言ES6新特性1. let 和 constlet关键字const 关键字 2. 模块字符串\` \`3. 解构4. 函数的参数默认值5. Spread / Rest操作符`...`6. 箭头函数7. for of8. Promise 对象9. Class前言
这周感觉是非常的水逆，基本没有一件顺心的事情。考试非常糟糕、事情都没做好、工作也没找到，甚至连保底的offer都告诉我【心理测评不合格】。但是人不能就此倒地，赶紧继续向前跑，希望下周开始能有好运气，pls。
ES6新特性
面csig的时候被问到了，我竟然说不出个所以然，确实是因为之前做项目的时候其实就只查到了箭头函数属于新特性，其他的。。。。看到很多企业要求都需要了解es6，记录一下。
1. let 和 const
es6中新增了let和const关键字，在es6之前JS是没有块级作用域这种概念的，自从es6出现了let和const，JS就出现了代码块概念。
let关键字
let声明的变量只在代码块中有效，var是在全局中有效。{let a = 0var b = 1console.log(a) //0console.log(b) //1}console.log(a) //a is not definedconsole.log(b) //1
let只能声明一次，var可以重复声明。
{let a = 0let a = 1var b = 2var b = 3a //Identifier 'a' has already been declaredb //3}
let没有变量提升
console.log(a); //ReferenceError: a is not definedlet a = "apple";console.log(b); //undefinedvar b = "banana";//变量提升：//var b;//console.log(b) undefined//var b = "banana";
变量 b 用 var 声明存在变量提升，所以当脚本开始运行的时候，b 已经存在了，但是还没有赋值，所以会输出 undefined。
变量 a 用 let 声明不存在变量提升，在声明变量 a 之前，a 不存在，所以会报错。
变量提升
所有的声明都会提升到作用域的最顶上去。同一个变量只会声明一次，其他的会被忽略掉或者覆盖掉。函数声明的优先级高于变量声明的优先级，并且函数声明和函数定义的部分一起被提升。
const 关键字
const 声明一个只读变量，声明之后不允许改变。意味着，一旦声明必须初始化，否则会报错。const PI = "abc";PI // abcconst NO; // Missing initializer in const declaration
暂时性死区
暂时性死区，所声明的变量或者常量会绑定到该区块，不再受外部影响。
//暂时性死区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}
const同样没有变量提升
console.log(a); //ReferenceError: a is not definedconst a = 1;
2. 模块字符串` `
在es6之前，字符串拼接只能用+或一些字符串方法，书写起来不太方便，在es6中加了反引号，可以直接输出有嵌入变量的字符串和多行字符串。
let name = hhxlet 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 3console.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值//es5var fun=function (a,b){return a+b;}//es6var 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 codeif (/* 异步操作成功 */){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); // functionlet stu = new Student(); // "I'm a student."stu.study(); // "study!"stu.read(); // "Reading Now."
参考文章：
ES6新特性总结
ECMAScript 6 入门
如果觉得《Longstick的学习周记——ES6新特性》对你有帮助，请点赞、收藏，并留下你的观点哦！
