ES6有哪些新特性

最新推荐文章于 2025-01-20 21:00:12 发布

原创最新推荐文章于 2025-01-20 21:00:12 发布 · 298 阅读

CC 4.0 BY-SA版权

本文介绍了ES6（ECMAScript 6）的一些关键特性，包括箭头函数、解构赋值及函数参数默认值等。此外，还详细探讨了Spread Operator（展开运算符）的应用场景，如数组和对象的组装、获取除某些项外的其他项，以及如何使用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 }