ECMAScript 6(简称ES6)是于2015年6月正式发布的JavaScript语言的标准。鉴于其新增内容之多,个人总结了部分实用且常用的ES6特性,可以学习用以入门 ### let/const `let`命令用来声明变量。它的用法类似于`var`,但是所声明的变量,只在let命令所在的代码块内有效。`const`命令用来声明常量,一旦声明,常量的值就不能改变,且声明时必须立即初始化,不能留到以后赋值。这个语法有效地弥补`var`关键字的缺陷(变量提升,污染全局变量等) | 声明 | 作用域 | 初始化 | | :---: | :--------------: | :----: | | let | 代码块内 | 否 | | const | 代码块内 | 是 | | var | 代码块外也可访问 | 否 | 下面代码在代码块之中,分别用`let`和`var`声明了两个变量。然后在代码块之外调用这两个变量,结果`let`声明的变量报错,`var`声明的变量返回了正确的值。 ``` { let x = 0; var y = 0; const i; // 未初始化报错 } console.log(x); // 报错 console.log(y); // 正确的值 ``` ### 模板字符串 如果你也经历过拼接HTML的时候,一个个引号和加号的麻烦过程。那么,模板字符串可以很好解决这个问题,只需要使用反单引号`加上${xxx}就可以直接拼接变量 ``` const template = `<div> <span>${text}</span> </div>` ``` ### 箭头函数 ES6 允许使用箭头(=>)定义函数 ``` const test = ()=> {} ``` 箭头函数对于使用传统function关键字创建的函数有以下特点: - 不需要function关键字来创建函数 - 省略return关键字 - 继承当前上下文的this关键字 ### 变量的解构赋值方法 ##### 数组 `let a = 1;let b = 2;let c = 3;` 等价于 `let [a, b, c] = [1, 2, 3];` 前提是两边的结构要相同,不相同则无法完全解构 `let [a = 1] = [];` 解构赋值也可指定默认值,当需要解构的值 `=== undefined` 时 ##### 对象 `let { a, b } = { a: 1, b: 2 };` 和数组结构类似 这个常用在获取一个对象的某几个具体的方法上,如 `let { log, sin, cos } = Math;` 如果想在解构之后换变量名则 `var { a: newName } = { a: 'aaa', b: 'bbb' };` 冒号 ":" 表示在 "=" 后面的对象里(不是对象则转化为对象) 寻找 ":" 前的对象值赋给 ":" 的变量 ##### 字符串 ``` let [a, b, c, d, e] = 'hello'; a="h" b="e" c="l" d="l" e="o" ``` ##### 函数参数 可用于函数的参数赋值 ``` function add([x, y]){ return x + y; } add([1, 2]); // 3 ``` 也可以设定默认值 ``` function move({x = 0, y = 0} = {}) { return [x, y]; } move({x: 3, y: 8}); // [3, 8] move({x: 3}); // [3, 0] move({}); // [0, 0] move(); // [0, 0] ``` ##### 用途 - 交换变量的值 `let x = 1; let y = 2; [x, y] = [y, x];` - 函数参数的定义 ,尤其是使用默认值的情况下,就可以减少 `var a = x || 0;` 这种语句 ``` function test({x, y, z}) { ... } test({z: 3, y: 2, x: 1}); ``` - 局部引用模块 `const { SourceMapConsumer, SourceNode } = require("source-map");` ### 优化异步代码的Promise ES6对于异步方案的大杀器,原来传统的异步回调方式随着大WEB时代越来越沉重,出现了回调地狱,编码和观看上极不优雅。 通过创建一个参数为函数Promise对象,函数参数规范是`resolve`和`reject`,这两个函数一旦执行,Promise就会从`pedding`状态转变,并调用至链式回调`then`或`catch`中。 ``` new Promise((resolve, reject)=> { setTimeout(()=> { resolve(111); }, 1000); }) .then(res=> { console.log(res); }) .catch(()=> {}) ``` 如果在`then`或`catch`中return一个新的Promise,那么就可以实现无限长的链式回调解决回调地狱。 ``` new Promise((resolve, reject)=> { setTimeout(()=> { resolve(); }, 1000); }) .then(()=> { return new Promise((resolve, reject)=>{ resolve(111) }) }) .then(res=> { console.log(res); }) ``` 除了解决回调问题,还提供了`Promise.all`和`Promise.race`的方法,对于并发请求的处理提供了高效的方案。如果比作是田径比赛,all是等全部人都冲过重点才公布成绩,而race则是第一名冲过的瞬间马上公布成绩。 `Promise.all()`方法接收一个Promise多项数组,最终返回一个Promise对象。当这个数组内的Promise全部从`pedding`状态改变,那么返回的Promise对象才会被`resolve`或者`reject`。意味着我们可以从返回Promise对象中使用`then`和`catch`捕捉。 ``` Promise.all([p1,p2,p3]).then(res=> { console.log(res); }) ``` `Promise.race()`方法同样接收一个Promise多项数组,最终返回一个Promise对象。当这个数组内的Promise一旦有一个从`pedding`状态改变时,那么返回的Promise对象立马会被`resolve`或者`reject`。 ``` Promise.race([p1,p2,p3]).then(res=> { console.log(res); }) ```

ES6 简单入门

956 67 前端 2019-02-27