ES6 在日常工作中的运用-白红宇

ES6实战

const let,模板字符串比较简单

函数

函数默认值

// ES5function action(num) {        num = num || 200 // ?? num传入为0的时候就是false， 此时num = 200         //当传入num时，num为传入的值        //当没传入参数时，num即有了默认值200        return num}// ES6 function action(num = 200) {    console.log(num) } action() //200 action(300) //300复制代码

箭头函数(函数表达式 --> 箭头函数)

当前 ES5 代码中，在使用了函数表达式的时候，你必须小心处理 this。我会在下面的示例中创建一个 _this(A 行) 作为辅助变量，这样在 B 行才可能访问到指向 UiComponent 对象的 this。// ES5function UiComponent() {    var _this = this; // (A)    var button = document.getElementById('myButton');    button.addEventListener('click', function () {        console.log('CLICK');        _this.handleClick(); // (B)    });}UiComponent.prototype.handleClick = function () {    ···};// ES6function UiComponent() {    var button = document.getElementById('myButton');    button.addEventListener('click', () => {        console.log('CLICK');        this.handleClick(); // (A)    });}处理只返回某个表达式的简短回调// ES5var arr = [1, 2, 3];var squares = arr.map(function (x) { return x * x });// ES6const arr = [1, 2, 3];const squares = arr.map(x => x * x);在定义参数的时候，如果只有一个参数，你可以省略掉括号。像 (x) => x * x 和 x => x * x 都可以。复制代码

处理多个返回值 (解构)

有一些函数或者方便会通过数组或对象返回多个值。在 ES5 中，你需要创建一个临时变量来访问那些值。但在 ES6 中你可以使用解构。// ES5var matchObj =    /^(\d\d\d\d)-(\d\d)-(\d\d)$/    .exec('2999-12-31');var year = matchObj[1];var month = matchObj[2];var day = matchObj[3];// ES6const [, year, month, day] =    /^(\d\d\d\d)-(\d\d)-(\d\d)$/    .exec('2999-12-31');数组样板最开始空了一个位置，这是用来跳过第 0 个数组元素的。复制代码

从 arguments 到剩余参数

// ES5function logAllArguments() {    for (var i=0; i < arguments.length; i++) {        console.log(arguments[i]);    }}// ES6function logAllArguments(...args) {    for (const arg of args) {        console.log(arg);    }}// 有一部分固定参数，有一部分剩余参数function format(pattern, ...args) {    ···}复制代码

拓展的对象功能

对象初始化简写ES5我们对于对象都是以键值对的形式书写，是有可能出现key/value对重名的。例如：function people(name, age) {    return {        name: name,        age: age    };}// ES6 可以这样写function people(name, age) {    return {        name,        age    };}对象字面量方法的赋值ES6 同样改进了为对象字面量方法赋值的语法。// ES5为对象添加方法：const people = {    name: 'lux',    getName: function() {        console.log(this.name)    }}// ES6const people = { name: 'lux', getName () {     console.log(this.name) }}复制代码

Spread Operator 展开运算符就是 ...三个点运算符

连接合并数组和对象//数组const color = ['red', 'yellow']const colorful = [...color, 'green', 'pink']console.log(colorful) //[red, yellow, green, pink]//对象const alp = { fist: 'a', second: 'b'}const alphabets = { ...alp, third: 'c' }console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"// Rest运算 （获取数组 or 对象 除了某项的其它项）const number = [1,2,3,4,5]const [first, ...rest] = numberconsole.log(rest) //2,3,4,5// 对象const user = {    username: 'lux',    gender: 'female',    age: 19,    address: 'peking'}const { username, ...rest } = userconsole.log(rest) //{
   "address": "peking", "age": 19, "gender": "female"拷贝数组拷贝数组是个常见的任务，过去我们使用  Array.prototype.slice来完成，但现在我们可以通过展开运算符得到数组的副本：var arr = [1,2,3];var arr2 = [...arr]; // 等同于 arr.slice()arr2.push(4)对象解构解构操作在变量批量赋值上非常方便，省去了繁琐的声明和赋值操作。配合使用展开运算符，进一步简化操作：let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };console.log(x); // 1console.log(y); // 2console.log(z); // { a: 3, b: 4 }复制代码

ES6实战

const let,模板字符串比较简单

函数

参考