返回

ES6 核心概念,重塑你的代码风格

前端

ES6 核心概念概述
ES6 是 JavaScript 语言的一个重大更新,它引入了许多新的特性和改进,使得 JavaScript 变得更加强大和灵活。这些特性包括:

    * **变量声明:**  let 和 const 可以用来声明变量,let 声明的变量可以重新赋值,而 const 声明的变量则不能重新赋值。
    * **解构赋值:**  解构赋值可以将一个数组或对象中的元素提取出来,并将其赋给多个变量。
    * **扩展运算符:**  扩展运算符可以将一个数组或对象中的元素展开,并将其添加到另一个数组或对象中。
    * **rest运算符:**  rest运算符可以将一个数组或对象中的剩余元素收集起来,并将其赋给一个变量。
    * **模板字符串:**  模板字符串可以用来创建多行字符串,并可以嵌入变量。
    * **箭头函数:**  箭头函数是一种新的函数语法,它可以简化函数的编写。

    ## let 和 const 关键字
    let 和 const 是两种新的变量声明关键字。let 声明的变量可以重新赋值,而 const 声明的变量则不能重新赋值。

    ```javascript
    let x = 10;
    x = 20; // 允许重新赋值

    const y = 20;
    y = 30; // 报错
    ```

    ## 解构赋值
    解构赋值可以将一个数组或对象中的元素提取出来,并将其赋给多个变量。

    ```javascript
    const arr = [1, 2, 3];
    const [a, b, c] = arr;

    console.log(a); // 1
    console.log(b); // 2
    console.log(c); // 3

    const obj = {
      name: 'John Doe',
      age: 30
    };

    const {name, age} = obj;

    console.log(name); // John Doe
    console.log(age); // 30
    ```

    ## 扩展运算符
    扩展运算符可以将一个数组或对象中的元素展开,并将其添加到另一个数组或对象中。

    ```javascript
    const arr1 = [1, 2, 3];
    const arr2 = [4, 5, 6];

    const newArr = [...arr1, ...arr2];

    console.log(newArr); // [1, 2, 3, 4, 5, 6]

    const obj1 = {
      name: 'John Doe',
      age: 30
    };

    const obj2 = {
      city: 'New York'
    };

    const newObj = {...obj1, ...obj2};

    console.log(newObj); // {name: 'John Doe', age: 30, city: 'New York'}
    ```

    ## rest运算符
    rest运算符可以将一个数组或对象中的剩余元素收集起来,并将其赋给一个变量。

    ```javascript
    const arr = [1, 2, 3, 4, 5];
    const [first, ...rest] = arr;

    console.log(first); // 1
    console.log(rest); // [2, 3, 4, 5]

    const obj = {
      name: 'John Doe',
      age: 30,
      city: 'New York'
    };

    const {name, ...rest} = obj;

    console.log(name); // John Doe
    console.log(rest); // {age: 30, city: 'New York'}
    ```

    ## 模板字符串
    模板字符串可以用来创建多行字符串,并可以嵌入变量。

    ```javascript
    const name = 'John Doe';
    const age = 30;

    const str = `
      My name is ${name} and I am ${age} years old.
    `;

    console.log(str);
    // My name is John Doe and I am 30 years old.
    ```

    ## 箭头函数
    箭头函数是一种新的函数语法,它可以简化函数的编写。

    ```javascript
    const add = (a, b) => a + b;

    console.log(add(1, 2)); // 3
    ```