ES6是如何发展并为现代的JavaScript带来新特性的

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

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

让我们来比较传统箭头函数和箭头函数的示例。

Javascript

<script>
 
    // 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));
 
</script>

输出:

81
81

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

类声明：

Javascript

<script>
 
    // 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)
</script>

输出:

10 20

3. 加强型（新的）对象字面量： 它被扩展以支持在构造时设置原型，对于极客而言是一种简便的赋值方式，也用于定义方法、创建超类，并且最后还可以使用表达式计算属性名称。

Javascript

<script>
 
    // 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();
</script>

输出：

Vivekananda School was established in 1971 at Delhi

4. Promises: 你猜对了，这是 ECMAScript 版本引入 Promise 到 Javascript 世界的版本，其余的就是历史了，Promise 是一个广泛使用于 Javascript 中的异步编程库。Promise 也是一个表示未来可能可用的值的一等公民，现在我们用一个示例来解释一下。

示例: 假设我们在一个购物网站上请求一个缺货的物品，我们可以选择提醒我当有货的时候的选项，然后离开网站，以后的某一天，我们可能会收到一封提醒邮件，这就是 Promise，它承诺我们在某个时间收到我们所请求的物品。

让我们来看一个真实世界的程序来理解这个概念

Javascript

<script>
    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.");
    })
</script>

输出：

GeeksforGeeks is a Portal for Geeks Ofc it is.

有一个被称为chained promises的概念，其中使用.then()方法。简单来说，这些用于将进一步的操作与已解决的promise关联起来。还有其他方法，如promise.catch()和promise.finally()，它们也返回一个新生成的promise对象。您可以在这里阅读更多关于这些方法的信息。

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

Javascript

<script>
 
    // 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!`);
</script>

输出:

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

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

Javascript

<script>
    // 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);
</script>

输出：

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

7. REST和SPREAD: rest参数允许函数将不确定数量的参数作为数组接受。扩展允许可迭代的对象（如数组或字符串）在需要零个或多个参数的位置扩展，还有选项可以在需要零个或多个键值对的位置扩展对象表达式。

Javascript

<script>
 
    // 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]));
</script>

输出：

Function fun output: 6
Output for function a: 6000

8: let + const: let语句声明了块级作用域的局部变量，不同于var关键字，它在使用时全局或局部声明一个变量，不考虑块级作用域。另一方面，const声明创建对已定义变量的只读引用。变量标识符不能重新赋值。

Javascript

<script>
 
    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);
</script>

输出:

javascript coder

9. Map，set，weakSet 和 weakMap： Map 对象按照键的原始插入顺序保存键值对。

Javascript

<script>
    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
</script>

输出：

{type: "interpreted lang"}

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

Javascript

<script>
    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);
</script>

输出：

true
{"geeksforgeeks", "coder"}

weakSet和weakMap：

weakMap对象是一个(键, 值)对的集合，而在weakMap的情况下，键使用的是弱引用，weakMap中的键的类型是对象。

weakSet对象允许我们将弱引用的对象存储在集合中。与weakMap类似，它也是一个对象的集合，不同之处在于weakSet是弱引用的唯一对象集合，也就是说对对象的引用是弱引用的，因此如果在weakSet中没有引用指向某个对象的存在，则这些对象可以被垃圾回收器回收。

Javascript

<script>
    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);
</script>

输出结果：

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

10. Symbol： 这为访问对象状态的访问控制提供了途径。它还允许将属性与字符串关联。它是一种原始数据类型，要创建一个新的原始符号，我们可以使用以下代码：

JavaScript

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

输出：