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、注释规范

    //单行注释
    /*多行
      注释*/

在编写代码时，应注意添加注释，有助于他人对代码的理解和维护。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/189207.html