ES6新特性-前端面试问题

目录

（1）变量声明

（2）lES6 引入块级作用域，块级作用域在如下情况被创建：

（3）ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。

（4）解构赋值

（5）扩展运算符

（6）rest 运算符

（7）模板字符串（template string）

（8）ES6 提供了新的语法规则来定义函数 —— 箭头函数

（9）对象简洁表示法

（10）数据结构Set

（11）数据结构 Map

（12）for...of 循环

（13）Promise对象

（14）async/await

---

（1）变量声明

【1】ES6 新增了 let 命令，用于声明变量，用法与 var 类似；但禁止重复声明，let 不允许在相同作用域内，重复声明同一个变量。不存在变量提升（使用前，先声明）； 暂时性死区，只要块级作用域内存在 let 命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。与 var 的不同在于，用 let 声明的变量只在 let 命令所在的代码块 { }内有效。

【2】 const 命令， 定义一个只读的常量。常量的值不能改变（声明时进行初始化）；禁止重复声明；不存在变量提升（养成良好习惯，先定义，后使用）； 暂时性死区；变量不可修改，基本类型的话，值不可修改。引用类型的话，引用不可修改，引用的对象的属性可以修改； 声明后必须立刻赋值，否则会报错。

使用 let、const 创建一个新的全局变量，不会在全局对象上创建属性。

（2）lES6 引入块级作用域，块级作用域在如下情况被创建：

【1】 在一个函数内部（函数体由花括号包裹）

【2】 在一个代码块（由一对花括号包裹）内部

{
      let a  = 30;
    }
console.log(a);// ReferenceError: a is not defined
{
      var b = 30;
    }
console.log(b);// 30

（3）ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。
（4）解构赋值

解构赋值按照一定模式，将属性/值从对象/数组中取出，赋值给其他变量解构赋值属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。有以下几种：

【1】对象解构赋值

对象的解构赋值的机制是：先找到同名属性，然后再赋给对应的变量

 let url = { username: "小红", password: "123455" };

    let { username, password } = url;

    console.log(username); //"小红"
    console.log(password); //"123455"

【2】数组解构赋值

 对象的属性没有次序，变量名与属性同名，就能取到正确的值。 数组的元素是按次序排列的，变量的取值由它的位置决定

let [, , third] = ["foo", "bar", "baz"];
    third // "baz"

【3】函数参数的解构赋值

function move({x = 0, y = 0 } = {}) {
            return [x, y];
        }
        move({ x: 3, y: 8}); // [3, 8]
        move({ x: 3 }); // [3, 0]
        move({}); // [0, 0]
        move(); // [0, 0]

【4】混合解构

对象与数组解构能被用在一起，以创建更复杂的解构表达式。

（5）扩展运算符

用三个点号表示，功能是把数组或类数组对象展开成一系列用逗号隔开的散列值。

console.log(...[1,2,3]);//1 2 3

（6）rest 运算符

也是三个点号（形式为...变量名），不过其功能与扩展运算符恰好相反，把逗号隔开的散列组合成一个数组，用于获取函数的多余参数，这样就不需要使用 arguments 对象。

 function fun(a, b, ...values) {
      console.log(a); //1
      console.log(b); //2
      console.log(values); //[3, 4, 5, 6]
    }
    fun(1, 2, 3, 4, 5, 6);

（7）模板字符串（template string）

是增强版的字符串，用反引号（` `）标识；可以当作普通字符串使用，也可以用来定义多行字符串； 可以在字符串中嵌入变量，需要将变量名写在${expression}之中。

let name = "小白";
    let age = 20;

    //ES5
    let html1 = "我的名字是" + name + ", 我今年" + age + "岁。";
    //ES6
    let html2 = `我的名字是${name}, 我今年${age}岁。`;

（8）ES6 提供了新的语法规则来定义函数 —— 箭头函数

有简洁的语法，不绑定 this，从作用域链的上一层继承 this，不可以当作构造函数；没有 arguments 对象，用 rest 参数代替。适合没有动态上下文的函数，不适合有动态上下文的函数（对象字面量方法、对象原型方法、构造器方法），无法使用 call（）或 apply（）来改变其运行的作用域，不能用于构造函数。它是匿名函数，适合匿名回调函数（map、reduce、filter），不适合深层的调用链（非常糟糕的堆栈跟踪）。

let fn = function () {
      return 123;
    };
    let fn = () => 123;

（9）对象简洁表示法

属性简写

function f(x, y){
return{x, y};
}

方法简写

const o ={
  method(){
return"Hello!";
}
};

（10）数据结构Set

Set 是一个构造函数，通过 new 生成 Set 数据结构实例。 类似于数组，但是成员的值都是唯一的，没有重复的值。

（11）数据结构 Map

 Map 是一个构造函数，通过 new 生成 Map 数据结构实例。 类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应。

（12）for...of 循环

可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象（比如 arguments对象、DOM NodeList 对象）、字符串。 for...of 不能遍历普通 Object 对象。 for...in 循环，只能获得对象的键名，不能直接获取属性值。 for...of 循环，允许遍历获得属性值。

（13）Promise对象

用于异步操作，它表示一个尚未完成且预计在未来完成的异步操作。将异步操作以同步操作的流程表示出来，利于阅读和维护。将数据请求和数据处理明确区分开，掌握控制权

（14）async/await

async 也是处理异步的，它是对 Promise 的一种扩展，让异步更加方便

 async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。当函数执行的时候，一旦遇到 await 就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。