ES6 (ES2015) 是如何演变并为现代 JavaScript 带来新特性的？

在本文中，我们将看到 JavaScript 中的 ECMAScript 6/ES2015 特性。

1.箭头函数：箭头函数使用=>语法作为它的简写。它是传统箭头函数的替代品。

让我们看一个比较传统与箭头函数的示例。

Javascript

 
    // Without using Arrow Function
    let square = function (x) {
        return (x * x);
    };
    console.log(square(9));
 
    // Using Arrow Function
    square = (x) => { return x * x; }
 
    console.log(square(9));
 

输出：

81
81

通过参考这篇GFG 文章了解更多关于箭头函数的信息

2. ES6/ES2015 类：这个特性真的让 javascript 成为现在的语言。您可能知道，类是创建对象的模板。 ES6 类带来了继承、超级调用、类的实例和构造函数（在创建类时初始化）的强大功能。

类声明：

Javascript

 
    // Here class is declared
    class Rectangle {
 
        constructor(a, b) {
            this.a = a;
            this.b = b;
        }
    }
    let rect = new Rectangle(10, 20);
    console.log(rect.a, rect.b)

输出：

10 20

在此处了解有关课程的更多信息

3. 增强的（新的）对象字面量：它被扩展以支持在构造时设置原型，geeks 的简写：geeks assignments，也用于定义方法，创建超类，最后还用于使用表达式计算属性名称。

Javascript

 
    // JavaScript code demonstrating
    // a simple object
    let school = {
        name: 'Vivekananda School',
        location: 'Delhi',
        established: '1971',
        displayInfo: function () {
            console.log(`${school.name}
            was established in
            ${school.established}
            at ${school.location}`);
        }
    }
    school.displayInfo();

输出：

Vivekananda School was established in 1971 at Delhi

在此处了解有关对象的更多信息

4. Promises：你猜对了，这是给 Javascript 世界带来 Promise 的 ECMAScript 版本，剩下的就是历史了，Promises 是一个在 Javascript 中广泛使用的异步编程库。 Promise 也是未来可能提供的值的第一类表示，现在这意味着一个示例。

示例：假设我们在购物网站上请求了一个乱序的商品，那么我们可以做的可能是选择在可用时提醒我的选项，如果它在网站上给出，然后离开该网站，也许几天后我们可能得到一个余数，它承诺我们会在一段时间内得到我们有要求的东西。

让我们通过一个真实世界的程序来理解这一点

Javascript

    let geeksforgeeks = new Promise((resolve, reject) => {
        setTimeout(function () {
            resolve("a Portal for Geeks")
 
        }, 2000);
    })
    geeksforgeeks.then((msg) => {
        console.log("GeeksforGeeks is" + msg + " Ofc it is.");
    })

输出：

GeeksforGeeks is a Portal for Geeks Ofc it is. 

有一个使用 .then() 方法的链式 Promise 的概念。简单来说，这些用于将进一步的操作与已确定的承诺相关联。还有其他方法，例如 promise.catch() 和 promise.finally() 也返回一个新生成的 promise 对象。你在这里阅读更多关于这些的信息。

从此处的 GFG 文章中了解有关承诺的更多信息。

5. 模板字符串：它只是构造字符串的语法糖。 Javascript 的模板字符串特性类似于Python中的插值特性。它还允许嵌入表达式，也可以创建多行字符串。

Javascript

 
    // Without template literal
    console.log('Some text that I want \non two lines!');
     
    // With template literal
    console.log(`Some text that I wanton two lines!`);

输出：

Some text that I want
on two lines!
Some text that I want
on two lines!

在此处了解更多信息

6. 解构：如果你对 Reactjs 有所了解，那么你可能知道解构的重要性，那么让我们来了解它到底是什么。解构允许使用模式匹配进行绑定，并支持匹配数组和对象。或者简单来说，它是一个 javascript 表达式，可以将数组甚至对象中的值解包为不同的变量。

Javascript

    // Array destructuring
    let a, b, rest;
    [a, b, ...rest] = ['g', 'e', 'e', 'k', 's'];
 
    console.log(a, b, rest);
 
    // Object destructuring
    const geeks = {
        name: "maestro",
        logged_in: true
 
    };
    const { name, logged_in } = geeks;
 
    console.log(name, "is logged in?", logged_in);

输出：

g e ["e", "k", "s"]
maestro is logged in? true

通过参考此处的 GFG 文章了解更多信息

7. REST 和 SPREAD： rest 参数允许函数接受不定数量的参数作为数组。 Spread 允许在零个或多个参数的地方扩展诸如数组或字符串之类的可迭代对象，还可以选择使用对象表达式在需要零个或多个键值对的地方扩展。

Javascript

 
    // REST concept
    function fun(a, ...b) {
        return a * b.length
    }
 
    fun(3, "GeeksforGeeks", "hello")
    console.log("Function fun output:",
        fun(3, "GeeksForGeeks", "hello"));
 
    // Spread concept
    function a(x, y, z) {
        return x * y * z;
    }
 
    console.log("Output for function a:",
        a(...[10, 20, 30]));

输出：

Function fun output: 6
Output for function a: 6000

了解有关 REST 的更多信息并在此处传播。

8：let + const： Let语句声明块作用域的局部变量，与var关键字不同，后者在使用时会全局或局部函数声明一个变量，而不考虑块作用域。另一方面， const 声明创建对已定义变量的只读引用。不能重新分配变量标识符。

Javascript

 
    let gfg;
 
    const maestro = "coder";
 
    // Reassigning the above variable
    // will give out an error
 
    // maestro = "developer";  (ERROR)
    gfg = "javascript"; // (VALID)
 
    // Declaring again will not give
    // out an error in case with let
 
    // let gfg = "python";
 
    console.log(gfg, maestro);

输出：

javascript coder

在此处了解有关 let 和 const 的更多信息。

9. Map、set、weakSet、weakMap： Map 对象保存键值对，并考虑到键的原始插入顺序。

Javascript

    let lang = new Map();
 
    // .set() method is used to store data in the map
 
    lang.set("python", { type: "interpreted lang" })
 
    lang.get("python") // Returns python type

输出：

{type: "interpreted lang"}

Set 对象存储任何类型的唯一值（就像数学中的集合一样）。它包含一组值，并且可以在插入时按顺序遍历集合的元素。

Javascript

    let newSet = new Set();
 
    // Add values into the set
    newSet.add("geeksforgeeks");
    newSet.add("coder");
 
    // Checks for existence of values in the set
    console.log(newSet.has("coder"));
 
    console.log(newSet);

输出：

true
{"geeksforgeeks", "coder"}

weakSet 和weakMap： weakmap 对象是一个集合（键，值）对，在这种情况下，weakmap 的键是弱引用的，weakmap 中的键是对象类型。

弱集对象让我们将弱持有的对象存储在集合中。和weakmap一样，它也是一个对象的集合，不同之处在于weakest是唯一的对象集合，而weakset是弱的，这意味着对对象的引用被弱持有，因此如果没有对一个对象的引用存储在弱集中的对象存在，那么这些对象可以由垃圾收集器进行垃圾收集。

Javascript

    let s = new Set()
 
    s.add({ course: "Complete placement guide" });
    console.log(s);
 
    const course = { course: "python fundamentals" };
 
    // weakmap
    var gfg = new WeakMap();
    gfg.set(s, course);
 
 
    // waekset
    var coder = new WeakSet();
    coder.add(course);
 
    console.log(gfg, coder);

输出：

WeakMap{Set(1) => {
    key: {Set{...}}
    value: {course: "python fundamentals"}
}}
WeakSet{{
    0: 
    value: {course: "python fundamentals"}
}}

所有关于上述主题可以在这里学习

10. 符号：这让位于对象状态的访问控制。它还允许使用任一字符串键入属性。它是一种原始数据类型，要创建新的原始符号，我们可以使用以下代码：

Javascript

    let mySymbol1 = Symbol()
 
    // Optional string description can also be given
    let mySymbol2 = Symbol("GeeksforGeeks");
 
    console.log(mySymbol1 === mySymbol2);

输出：

false

注意：创建 Symbol() 时不需要 new 关键字