前端面试题之ES6

一简答题

1.ES6中的let关键字和var关键字声明变量的区别？

        var关键字是原生JS中声明变量的关键字，let关键字是ES6语法中新增关键字
        let关键字声明的变量不能重复声明，var关键字可以重复声明变量
        let关键字解析变量时没有预解析，var关键字声明的变量包含预解析过程
        let关键字提供了块级作用域，var关键字没有块作用域只有局部/全部作用域

2.简述模板字符串的使用优势？

        常规字符串中如果需要进行字符串和变量数据的拼接，需要通过连接符号+进行拼接，如果字符串和拼接的变量数量较多，拼接过程非常繁琐，代码阅读非常不便利

        模板字符串是ES6新增的语法，使用反引号包含一串字符，变量可以通过固定语法${}的形式在字符串内部直接使用和操作，相当于提升了操作效率

3.ES6新语法中对数组进行了那些改进？

ES6语法中针对数组的创建和其他类数组的转换提供了两个常用的函数

        Array.of()用于新建数组对象
        Array.from()用于将其他类数组转换成数组

4. 简述ES6中数组解构赋值都有哪几种操作方式？

解构赋值的操作，数组的解构主要包含如下几种

• 完全解构

• 不完全解构

• 解构失败 | 过度解构

• 解构默认值

• 缺省解构

5.简述你对ES6中对象解构赋值的认识？

ES6中提供的对象解构语法包含如下几种

• 完全解构

• 简洁语法解构

• 不完全解构，是代码中使用最频繁的操作

6. let {toString: f} = 100,请描述f的值是什么？为什么？

f打印出来是一个函数
100是一个数值类型，本质上是一个Number对象，对象包含toString()函数用于输出数据，解构赋值中将Number对象中的toString进行了解构，所以解构中赋值的变量f中存储的就是一个toString函数声明

二、实操题

1. 将数组[100, 200, [101, 201], [301, 302]]的值，赋值给变量

let arr = [100, 200, [101, 201], [301, 302]]
let [a, b, [c, d], [e, f]] = arr
// a=100, b=200, c=101, d=201, e=301, f=302

2.观察代码说明输出结果

let obj = {a: 1, b: 2, c: {d: {e: 5}}}
let {a, b, c: {d}} = obj
console.log(d) // ① ? {e: 5}   注意这里按照数据的结构进行取值，展示d变量中的数据

/** 解构默认值 **/
let {a = 10, b = 5} = {a: 3};
console.log(a, b) // ② ?   
// a-3  b-5  解构默认值~如果解构得到数据就直接使用，没有数据使用默认值数据

let {a: aa = 10, b: bb = 5} = {a: 3};
console.log(aa, bb) // ③ ? aa-3 bb-5  解构默认值操作原理

let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;
console.log(x, y) // ④ ?  undefined   world

注：json结构和键名要一 一对应才能进行正确解构赋值
对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

3. 观察代码，说明输出结果

const userStr = "zhangsan,lisi,wangwu,zhaoliu";
const { 1: a, 3: b } = userStr.split(',');

console.log(a, b)    // ?  list   zhaoliu

上述代码中，通过split()函数将字符串拆分成了数组
然后通过解构赋值的方式进行了数据的提取，通过对象的结构提取数组中的数据
上述代码中如果不会出现错误的情况下，可以按照索引进行解构
a中解构的数据lisi，b中解构的数据zhaoliu