ES6新語法詳解

一、es6新語法面試題

1、箭頭函數和普通函數有什麼不同？

    //普通函數
    function sum(a, b) {
        return a + b;
    }
    //箭頭函數
    const sum = (a, b) => {
        return a + b;
    }
    //箭頭函數簡寫
    const sum = (a, b) => a + b;

箭頭函數是es6新增的一種函數形式，簡化了函數書寫的形式，語法比普通函數更為簡潔，因為在箭頭函數中this和arguments指向定義它時所在的作用域，而不是調用它時所在的作用域。因此涉及到this時須謹慎。

2、let和const有什麼不同？

    let a = 'js';
    const b = 'es6';

let和const都是es6新增的定義變量的關鍵字，其中let定義的變量可以被重新賦值，而const定義的變量不能被重新賦值，所以常用來定義常量。另外，let定義的變量只在塊級作用域中有效。

3、如何定義默認參數？

    function sayHi(name = 'world') {
        console.log(`hello ${name}`);
    }
    sayHi(); //hello world
    sayHi('es6'); //hello es6

在es6中，定義默認函數參數非常簡單，只需要簡單地指定參數值即可。

二、es6語法糖

1、對象解構賦值

    const person = {
        name: 'Tom',
        age: 18
    }
    const { name, age } = person;
    console.log(name, age);

對象解構賦值是ES6新增特性之一，它可以讓我們從對象中取出一些需要的值，賦給新變量，簡化代碼寫法，提高開發效率。

2、模板字符串

    const name = 'Tom';
    const greeting = `hello, ${name}!`;
    console.log(greeting);

模板字符串可以嵌入變量，使用${}包含變量名，從而讓字符串的拼接看起來更加簡潔直觀。

3、展開運算符

    const arr1 = [1, 2, 3];
    const arr2 = [4, 5, 6];
    const arr = [...arr1, ...arr2];

展開運算符可以將一個數組中的每個元素拆開，使其成為函數參數，也可以將兩個數組連接起來，相當於調用Array.concat()方法。

三、es6新增特性

1、Promise對象

    const promise = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('success');
            //reject('error');
        }, 1000);
    });
    promise.then(result => {
        console.log(result);
    }).catch(error => {
        console.log(error);
    });

Promise是es6中一個用於處理異步操作的對象，它可以避免回調地獄的出現，可讀性更好，使用上更為靈活的處理異步編程。

2、模塊化

    //export.js
    export function add(a, b) {
        return a + b;
    }
    //import.js
    import { add } from './export.js';
    console.log(add(1, 2));

es6中引入了模塊化的概念，可以使用export將模塊中的某些方法或變量暴露出來，再使用import引入需要使用的方法或變量。

3、class類

    class Animal {
        constructor(name, age) {
            this.name = name;
            this.age = age;
        }
        eat(food) {
            console.log(`${this.name} is eating ${food}`);
        }
    }
    const dog = new Animal('Tom', 3);
    console.log(dog.name);
    dog.eat('bone');

class是es6中新增的一個面向對象編程語言特性，可以用來定義類。class中的方法也可以使用extends關鍵字進行繼承。

四、es6常用語法

1、Array.map()

    const arr1 = [1, 2, 3];
    const arr2 = arr1.map(item => item * 2);
    console.log(arr2); //[2, 4, 6]

Array.map()是es6中一個常用的數組操作方法，可以遍曆數組中的每個元素並對其進行操作，返回操作後的新數組。

2、Array.filter()

    const arr1 = [1, 2, 3];
    const arr2 = arr1.filter(item => item > 1);
    console.log(arr2); //[2, 3]

Array.filter()是es6中一個常用的數組操作方法，可以篩選出符合條件的元素組成新的數組並返回。

3、Array.reduce()

    const arr1 = [1, 2, 3];
    const sum = arr1.reduce((prev, curr) => prev + curr, 0);
    console.log(sum); //6

Array.reduce()是es6中一個常用的數組操作方法，可以對數組中的所有元素執行一個函數，將其輸出到累加器中，最終返回一個累加器的值。

五、es6語法規範

1、代碼塊

    if (true) {
        console.log('true');
    } else {
        console.log('false');
    }

在使用代碼塊時應注意代碼縮進的規範性，特別是在多重代碼嵌套時，要注意使用縮進，符合代碼閱讀規範。

2、命名規範

    //變量名的寫法
    const personName = 'Tom';
    //常量名的寫法
    const PI = 3.14;
    //方法名的寫法
    function getUserName() {}
    //類名的寫法
    class Animal {}

在命名時，應注意符合規範，具有可讀性，建議使用駝峰命名法。

3、注釋規範

    //單行注釋
    /*多行
      注釋*/

在編寫代碼時，應注意添加註釋，有助於他人對代碼的理解和維護。