常用ES6总结

什么!!!已经9102年了，你还不知道ES6是什么？

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。
一个常见的问题是，ECMAScript 和 JavaScript 到底是什么关系？
要讲清楚这个问题，需要回顾历史。1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织 ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。
该标准从一开始就是针对 JavaScript 语言制定的，但是之所以不叫 JavaScript，有两个原因。一是商标，Java 是 Sun 公司的商标，根据授权协议，只有 Netscape 公司可以合法地使用 JavaScript 这个名字，且 JavaScript 本身也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA，不是 Netscape，这样有利于保证这门语言的开放性和中立性。
因此，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 JScript 和 ActionScript）。日常场合，这两个词是可以互换的。
——<<ES6 标准入门>>

罗列下我常用的ES6

1.赋值

let
const

let和const的出现打破了var的垄断，并且避免了var可提升变量的弊端；
let和const为块级作用域，上级不能访问

let a // a后续可再次赋值
const b = 1 // b的值不能更改，更改报错

2.解构&&赋值

非常推荐使用，可以减少代码，直接看用法

赋值：

before

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

now

let [a, b, c] = [1, 2, 3]; // 数组
let {a, b, c} = {1, 2, 3}; // 对象

解构：

before

var obj = {
    a: 1,
    b: 2,
    c: {
        d: 3
    }
}
var a = obj.a
var b = obj.b
var d = obj.c.d

now

const obj = {
    a: 1,
    b: 2,
    c: {
        d: 3
    }
}
const { 
        a,  // a = 1
        b: newB, // 解构出b的值为newB newB=2 
        c:{
           d  // 多级解构直接取到d d=3
        },
        e // 如果不存在 e = undefined
} = obj

3.字符串扩展

以前的字符串扩展要写n个'，有了字符串扩展方便易读
要拼接 hi, wang,hello world

before

var name = 'wang'
var str = 'hi, '+name+'hello world'

now

const name = 'wang'
const str = `hi, ${name},hello world`

4.函数默认值

在写函数时，经常会传参,而没有传参会出现undefined，现在有了默认值，在参数使用时就会有了兜底

before

function say(name, something) {
    console.log(name+' say:'+something)
}
say('wang', 'hi') // wang say:hi
say('wang') // wang say:undefined
say() // undefined say:undefined

now

function say(name='wang', something='nothing'){
     console.log(`${name} say:${something}`)
}
say('he', 'hi') // he say:hi
say('he') // he say:nothing
say() // wang say:nothing

5.扩展运算符 ...

如果要拷贝一个数组或者一个对象，往往需要遍历来实现

before

// 数组
var arr = [1, 2, 3]
var copyArr = []
for (var i = 0; i < arr.length; i++) {
    copyArr.push(arr[i])
}
console.log(copyArr)  // [1, 2, 3]
// 对象
var obj = {
    a: 1,
    b: 2,
    c: {
        d:3
    }
}
// 太多了，偷懒不写了

now

// 数组
const arr = [1, 2, 3]
const copyArr = [...arr]
console.log(copyArr)  // [1, 2, 3] 
// 对象
const obj = {
    a: 1,
    b: 2,
    c: {
        d:3
    }
}
const copyObj = {
    ...obj
}

是不是很爽
函数的传参也可以使用扩展运算符，可以应对传参不确定个数的情况

6.箭头函数

在定义和使用函数时常常会使用this，经常会出现如下情况

before

const self = this
const boundMethod = function(...params) {
    return method.apply(self, params)
}
// 或者
const boundMethod = method.bind(this)

now

const boundMethod = (...params) => method.apply(this, params) //简化函数定义，同时不用再对this另存为

箭头函数this对象为定义时所在的对象，不可更改

7.Promise

在调用接口的时候经常会用回调，回调地狱异常恐怖

const firtFunc = () => {
    return new Promise((resolve, reject) => {
        if(success){
            resolve('success')
        }else{
            reject('fail')
        }
    })
}
firstFunc()
    .then(res => {
        console.log(res) // success
        secondFunc()
    })
    .then(res => {
    
    })
    .catch(res => {
        console.log(res) // fail
    })

8. async await

上面promise的写法虽然能暂时解决回调地狱的问题，但是代码还是不好看，不要紧，还有语法糖async、await

const firtFunc = async () => {
    return new Promise((resolve, reject) => {
        if(success){
            resolve('success')
        }else{
            reject('fail')
        }
    })
}
try{
    await firtFunc()
    await secondFunc() // 返回resolve才会执行
}catch(err){
// reject走到这里
}

本期总结了我常用的一些ES6语法，掌握了这些可以大大减少代码量；当然，ES6还有很多内容，其他再以后会慢慢展示其用法。

强烈推荐《ES6标准入门》——阮一峰