ES6——ES6相关面试题分享

---

前言

前文我们介绍了ES6的相关知识点，关于ES6的学习也就要告一段落了，本人整理了一些相关面试题在这里分享给大家。

---

一、什么是ES6，以及引入ES6的原因

   ES6   

ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。

ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等，而 ES2015 则是正式名称，特指该年发布的正式版本的语言标准。

   引入ES6的原因   

每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的地方。

- 变量提升特性增加了程序运行时的不可预测性

- 语法过于松散，实现相同的功能，不同的人可能会写出不同的代码

---

二、let，var，const三者的区别。

    不同点     

•  let   const 具有块级作用域（所谓块级作用域，简单来说，花括号内的区域就可以看作是块级作用域），也不会有变量提升，
•  let  和 const 不可以重复赋值，也不可以未赋值先使用。（会造成暂时性死区）
• 作用域链，并不影响
• var 有变量提升的情况，可以未赋值先使用。用var声明的变量具有顶级属性（所谓顶级属性，例如var声明的变量是全局的也就是在window中的，此时这个变量就是一个顶级属性），而let const是没有的。

三、运用ES6如何合并两个对象？

 // 声明一个名为student的对象
         const student ={
            name:'Tom',
            age: 18,
            height: 170
        }
 
 // 声明一个名为person的对象
        const person = {
            name: 'Tom',
            age: 18,
            [key]: 180
        }

  方法一  使用Object.assign 的方法

let result = Object.assign(person,student);

    

   运行结果   

 

  方法二   使用三点运算符

let result = {...person,...student};

   运行结果   

四、for...in 和for...of有什么区别。

   不同点   

for…in 遍历的是key也就是属性名,for…of 遍历的是值，for…in…多用于遍历可枚举(所谓可枚举就是可列举的意思)的数据类型，for…of…多用于遍历拥有iterator接口的数据

五、 箭头函数的this和普通函数的this的区别。

   不同点   

普通函数的this，是根据调用者来确定的。

箭头函数的this，是根据作用域的上下文来确定的，且是静态不可更改的。

   扩展——不同情况下的this指向问题   

1. 声明在全局的函数，this指代的是 window

2. 声明在对象当中的函数也就是这个函数的方法，this 是调用调用这个方法的对象

3. 构造函数中的this，因为构造函数的使用需要 new 关键字，所以构造函数中的 this 指代的是 new 出来的实例对象

 4. 箭头函数中的this，当前声明箭头函数的作用域中的this指代的是谁，箭头函数的this就是谁。

六、Es6中如何定义模板字符串，有什么好处。

   定义模板字符串的方法   

模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

   优点   

多行字符串:

let string1 = `Hey, can you stop angry now?`;

字符串插入变量和表达式。

变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。

字符串中调用函数

function f(){ return "have fun!"; } let string2= `Game start,${f()}`;

七、Array的扩展方法map和filter相同点与区别。

    相同点   

不会对空数组进行检测，不会更改原始数组，都会返回一个新的数组。

    不同点   

Map 用于对原始数组的元素进行操作，filter 主要是针对需要通过筛选条件的元素。

八、 Promise中的then是同步的还是异步，简单描述下执行机制。

Promise中的then 是异步的

    执行机制   

then 是promise 中的一个方法，也就说是一个函数，有两个参数，分别是成功的回调，失败的回调，具体执行哪一个要看 new Promise中执行的是成功还是失败的回调，从此也可以看出，then 是异步执行的。

    扩展   setTimeout 是异步执行的吗？

Promise 在使用new关键字之后就是异步的，也就是说其中的then 方法也是异步执行的，SetTimeout 是同步的，setTimeout 工作的本质只是通过时间延迟将所要执行事件放在了事件队列最后面，给人是异步执行的感觉，但本质上还是同步执行的。

九、 Symbol是什么，有什么作用。

    Symbol   

ES6引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是JavaScript语言的第七种数据类型，是一种类似于字符串的数据类型。

    Symbol特性   

• Symbol 数据类型不能与其他数据类型运算
• Symbol定义的对象属性不能使用for…in循环遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名。(包括symbol类型的键)

十、 数组中reduce方法有什么作用。

   作用   

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

参数一： total 是初始值也是返回值

参数二： current 是当前值

参数三： 也可以自定义初始值。（在语句块的最后也可以自定义初始值）

十一、class类中super，get，set有什么作用。

   super   

Super的使用多用于在子类继承父类的相关属性时必须要使用super 关键字，否则会报错，且必须在this之前,

   get 和  set   

get set 用来封装属性的，当获取数据时，get方法就会被调用， 当设置数据时set方法就会被调用

十二、async/await优缺点。

   async/await 的作用   

可以让异步代码看起来像同步一样

   优点   

async 和 await 相比直接使用 Promise 来讲，优点在于处理 then 的调用链，可以更清晰准确的写出代码。

  缺点   

缺点在于滥用 await 可能会致使性能问题，由于 await 会阻塞代码，也许以后的异步代码并不依赖于前者，但仍然须要等待前者完成，致使代码失去了并发性。

十三、iterator的作用是什么，如何添加iterator接口。

   iterator的作用   

 为各种不同的数据结构提供统一的访问机制

   添加iterator接口的方法   

模仿数组的iterator形式给对象 添加iterator接口,使得访问对象中的数组时，可以直接遍历对象

 const person = {
            title: 'whatever',
            name: ['Jack', 'Tom', 'Lucy'],
            [Symbol.iterator]() {
                let i = 0;
                return {
                    next: () => {
                        if (i < this.name.length) {
                            const obj = { value: this.name[i], done: false };
                            i++;
                            return obj;
                        } else {
                            return { vlaue: undefined, done: true };
                        }
                    }
                }
            }
        }
 
        let my = person[Symbol.iterator]();
        console.log(my.next());
        console.log(my.next());
        console.log(my.next());
        console.log(my.next());
 
        for (let i of person) {
            console.log(i);
        }

十四、本地存储有哪些方式，他们有什么区别。

   localStorage   

浏览器关闭，数据不会丢失，除非手动清除，多个窗口可共享数据

  sessionStorage   

浏览器一旦关闭，数据立马丢失，而sessionStorage只能是当前窗口查看数据。

十五、 简述下数组中find()和findindex()方法是干什么的。

find( ) findIndex( ) 是ES6中数组的内置方法，

  find( )  

find( ) 用于查找数组中符合条件的第一个元素值

  findIndex( )  

findIndex( ) 用于查找数组中符合条件的第一个元素的位置，若无返回-1

十六、ES6中对象如何添加一个变量作为key值。

ES6中可以使用预先定义好的变量作为对象的属性名。使用 【 】的形式在对象中直接添加预先定义好的变量

  举例

 let key = 'height';

        const person = {

            name: 'Tom',

            age: 18,

            [key]: 180

        }

十七、 什么是Json数据。

• JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
• JSON 是轻量级的文本数据交换格式
• JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。
• JSON 具有自我描述性，更易理解

---

总结

就此停笔，如果是在准备面试的小伙伴看到了这篇文章，祝你好运哦~最后，依旧诚挚祝福屏幕前的你健康喜乐、平安喜乐。