ES6 简单入门

3684 67 技术 2019-02-27

ECMAScript 6(简称ES6)是于2015年6月正式发布的JavaScript语言的标准。鉴于其新增内容之多,个人总结了部分实用且常用的ES6特性,可以学习用以入门

let/const

let命令用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。const命令用来声明常量,一旦声明,常量的值就不能改变,且声明时必须立即初始化,不能留到以后赋值。这个语法有效地弥补var关键字的缺陷(变量提升,污染全局变量等)

声明 作用域 初始化
let 代码块内
const 代码块内
var 代码块外也可访问

下面代码在代码块之中,分别用letvar声明了两个变量。然后在代码块之外调用这两个变量,结果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对象,函数参数规范是resolvereject,这两个函数一旦执行,Promise就会从pedding状态转变,并调用至链式回调thencatch中。

new Promise((resolve, reject)=> {
    setTimeout(()=> {
        resolve(111);
    }, 1000);
})
.then(res=> {
    console.log(res);
})
.catch(()=> {})

如果在thencatch中return一个新的Promise,那么就可以实现无限长的链式回调解决回调地狱。

new Promise((resolve, reject)=> {
    setTimeout(()=> {
        resolve();
    }, 1000);
})
.then(()=> {
    return new Promise((resolve, reject)=>{
        resolve(111)
    })
})
.then(res=> {
    console.log(res);
})

除了解决回调问题,还提供了Promise.allPromise.race的方法,对于并发请求的处理提供了高效的方案。如果比作是田径比赛,all是等全部人都冲过重点才公布成绩,而race则是第一名冲过的瞬间马上公布成绩。

Promise.all()方法接收一个Promise多项数组,最终返回一个Promise对象。当这个数组内的Promise全部从pedding状态改变,那么返回的Promise对象才会被resolve或者reject。意味着我们可以从返回Promise对象中使用thencatch捕捉。

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);
})
© 2020 peal.cc 粤ICP备2020133024号