经常使用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标准入门》——阮一峰