ES6有哪些新特性

1.背景介绍

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。 它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

2.知识剖析

下面是介绍几个ES6的新特性

箭头函数

ES6很有意思的一部分就是函数的快捷写法。也就是箭头函数。箭头函数最直观的三个特点。 不需要 function 关键字来创建函数, 有时可以省略 return 关键字, 继承当前上下文的 this 关键字。

                    var f = v => v;
                    f();
                    console.log('f()', f());
                    
                    var g = function (v) {
                        return v;
                        console.log('v', v);
                    }
                    g();
                    console.log('g()', g());

当你的函数有且仅有一个参数的时候，是可以省略掉括号的。 当你函数返回有且仅有一个表达式的时候可以省略{} 和 RETURN；例如:

                    var h = () => 5;
                    h();
                    console.log('h()', h());
                    
                    var i = function () {
                        return 5;
                    }
                    i();
                    console.log('i()', i());

解构赋值

ES5我们提取对象中的信息形式如下：

                       let [a,b,c]=[1,[2,3],[4]];
                        console.log(a,b,c);
                        const people = {
                            name: 'lux',
                            age: 20
                        }
                        const name = people.name
                        const age = people.age

使用ES6

现在，解构能让我们从对象或者数组里取出数据存为变量，例如

                        var l = [1, 2, 3].map(function (x) {
                            return x * x;
                        })
                        console.log('l', l);
                        let n = [1, 2, 3].map(x => x * x);
                        console.log('n', n);

函数参数默认值

不使用ES6 为函数的参数设置默认值

function foo(height, color)
{
    var height = height || 50;
    var color = color || 'red';
    //...
}

但是，当参数的布尔值为false时，是会出事情的！比如，我们这样调用foo函数： foo(0, "")

因为0的布尔值为false，这样height的取值将是50。同理color的取值为‘red’。

3.常见问题

Spread Operator展开运算符有什么用途?

4.解决方案

5.编码实战

ES6中另外一个好玩的特性就是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"

有时候我们想获取数组或者对象除了前几项或者除了某几项的其他项

    //数组
    const number = [1,2,3,4,5]
    const [first, ...rest] = number
    console.log(rest) //2,3,4,5
    //对象
    const user = {
        username: 'lux',
        gender: 'female',
        age: 19,
        address: 'peking'
    }
    const { username, ...rest } = user
    console.log(rest) //{"address": "peking", "age": 19, "gender": "female"

es6的升序降序

                    // 排序
                    // 常规升序排序
                    arr = [1, 4, 5, 3, 2, 6];
                    var o = arr.sort(function (a, b) {
                        return a - b;
                    });
                    console.log('o', o, "//常规升序排序");
                    //es6降序
                    var p = arr.sort((a, b) => b - a);
                    console.log('p', p, "//es6降序");

对于 Object 而言，还可以用于组合成新的 Object 。 (ES2017 stage-2 proposal) 当然如果有重复的属性名，右边覆盖左边

        const first = {
        a: 1,
        b: 2,
        c: 6,
        }
    const second = {
        c: 3,
        d: 4
    }
    const total = { ...first, ...second }
    console.log(total) // { a: 1, b: 2, c: 3, d: 4 }

6.扩展思考

1、Spread Operator展开运算符有什么用途?
组装对象或者数组

2、es6的升序降序？

 var p = arr.sort((a, b) => b - a);

3、ES5和ES6的区别？

ES5对字符的处理有限，无法很好地处理码点大于0xFFFF的字符。
ES6在string原生方法中支持码点大于0xFFFF的字符，取得码点或是遍历，都可以直接操作；并且对字符不同的表示方法做了统一化。
在正则表达式里新增\u \s修饰符，使得正则对特殊字符的匹配不需要开发者额外处理。

7.参考文献

10个最佳ES6特性

ES6这些就够了

ECMAScript 6 入门