es6面试题与总结

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

---

1、什么是es6？

是 ECMAScript 的第六个版本 在 es5 的基础上新增加了一些语法
js 分成三部分 dom（文档对象模型） bom（浏览器对象模型） ECMAScript（js 语法）

2 、promise

promise 是 es6 提供的一种异步解决方案，在我的理解中 promise 就是把异步操作换了一种写法
从之前的嵌套回调函数 变成了链式的写法
promise 本身其实就是一个容器 里面放异步的代码 这样就可以让这个异步的代码执行.then .catch 的操作

2.1 说⼀下你对 promise 的理解?(必问)

promise 是 es6 提供的一种异步解决方案，在我的理解中 promise 就是把异步操作换了一种写法
从之前的嵌套回调函数 变成了链式的写法

2.2 什么是 promise?通过 promise 能够解决什么问题?

promise 是 es6 提供的一种异步解决方案，promise 可以解决回调地狱的问题
回调地狱就是拿到 a 接口的数据后才能根据 a 返回的数据请求 b 接口
这样回调函数嵌套回调函数的写法就叫回调地狱
这种写法会让代码臃肿 并且后期难以维护

2.3 说⼀下 promise 的特点?也就是三种状态?

promise ⼀共有三个状态pending 初始状态，fulfilled 成功状态，rejected 失败状态如果成功的话可以通过 resolve ⽅法将正确结果返回出去,通过.then 的⽅式进⾏接受,失败的话可以通过 reject 的⽅式将失败的结果返回出去,通 过.catch 的⽅式进⾏接受,pending 状态是进⾏中,⼀旦进⾏之后,他的状态是不可逆的

2.4 说⼀下 promise 怎么⽤?

如果要使⽤ promise,我们需要对 promise 进⾏实例化,在实例化的构造函数⾥⾯有⼀个回调函数,这个
回调函数⾥⾯有两个参数,分别是 resolve 和 reject,我们可以通过 promise 的实例化对象调⽤.then 或 者.catch ⽅式接受结果

2.5 我们之前遇到的哪些东西本身就是一个 promise 对象？

jq 的 ajax 请求本身就是一个 promise 对象 所以可以直接用.then
axios 也是一个 promise 对象

原生的 ajax 以及 小程序的 wx.request 请求都不是 promise 对象 不能用。then 的写法，如果想用链式写法 就要自己封装一个 promise

       let xhr = new XMLHttpRequest();
        //第一步创建xhr对象
        xhr.open("get", "./data.json", true);
        //xhr.open("post","http://localhost/web/xxx"); 
        //xhr.setRequestHeader("content-type","application/x-www-form-urlencoded") 如果是post的话就要设置请求头
        //第二步：设置请求的基本信息 如果是post请求在这里要设置一个头信息
        // get方式传参是在路径后面？ 拼接 而post是在send里传
        // 第三个参数 可以控制异步同步 true就是异步
        xhr.send();
        //第三步：向服务器发送链接
        // xhr.onreadystatechange = function() {
        //     console.log(xhr.readyState);
        //     if (xhr.readyState == 4 && xhr.status == 200) {
        //         console.log(xhr.responseText);
        //     }
        // };
        // 第四步 在xhr对象和服务器都响应成功的时候拿到数据
        // 可以用onreadystatechange 事件这个事件的意思是 只要xhr的状态发生改变就会触发 需要判断xhr的状态为4 服务器的状态为200 就代表都准备好了 我们就可以拿到数据了
        // 也可以用下面的onload事件代替 onload本身就代表xhr对象已经准备好了 所以我们只需要判断服务器的状态是200就可以拿到数据了
        // responseText就是拿到的数据
        xhr.onload = () => {
            if (xhr.status == 200) {
                // console.log(xhr.responseText);
            } else {}
        };
        //onload事件在js中是加载完成

        // 把上面的原生js请求ajax的普通写法变成promise的写法
          function js_ajax(params) {
            return new Promise((resolve, reject) => {
                let xhr = new XMLHttpRequest();
                xhr.open(params.method, params.url, true);
                xhr.send();
                xhr.onload = () => {
                    if (xhr.status == 200) {
                        let res = JSON.parse(xhr.responseText);
                        resolve(res);
                    } else {
                        reject("请求失败");
                    }
                };
            });
        }
        //把异步请求放进promise容器中 就变成一种promise的写法 then就执行成功的resolve回调cathc就执行失败的reject回调
        js_ajax({
                method: "get",
                url: "./data.json",
            })
            .then((res) => {
                console.log(res);
            })
            .catch((err) => {
                console.log(err);
            });

 // 拿到a的数据后才去请求b，拿到b的数据后再去请求c 这就叫回调地狱
        // 像这种回调嵌套回调的写法就叫回调地狱
        // $.ajax({
        //     method: "get",
        //     url: "data.json",
        //     success(res) {
        //         console.log(res);
        //         $.ajax({
        //             method: "get",
        //             url: "data2.json",
        //             success(res) {
        //                 console.log(res);
        //                 $.ajax({
        //                     method: "get",
        //                     url: "data3.json",
        //                     success(res) {
        //                         console.log(res);
        //                     },
        //                 });
        //             },
        //         });
        //     },
        // });

        //jq的ajax本身就是一个promise对象
        $.ajax({
                method: "get",
                url: "data.json",
            })
            .then((res) => {
                console.log(res);
                return $.ajax({
                    method: "get",
                    url: "data2.json",
                });
            })
            .then((res) => {
                console.log(res);
                return $.ajax({
                    method: "get",
                    url: "data3.json",
                });
            })
            .then((res) => {
                console.log(res);
                console.log("最终拿到的", res);
            });
        //用promise 的方法处理回调地狱

3.说⼀下 async 和 await、以及他们和 promise 的区别?

⾸先 async 和 await 是解决异步的终极⽅案,async 和 await ⼀般配和使⽤,当我
们给函数前⾯加上关键字 async,这个时候,这个函数的返回值就是⼀个 promise. ⽽ await 是⼀个同步
的操作,await 只能配合 async ,不然会报错,await 后⾯可以是表达式,也可以是⼀个 promise,在
await 下⾯的代码必须得等待 await 执⾏完之后才能在执⾏
他们和 promise 的区别就是在写法上更加的简洁.
以上就是我对 async 和 await 的理解.

4.generator 函数

generator 函数也是 es6 的处理异步回调的一种写法 但是这种写法现在被 async 取代了
generator 函数 用*表示 跟 yield 搭配使用

5.promise 的 all 和 race 方法

promise 还给我们提供了.all 和 race, 其中 all ⽅法的作⽤是将多个请求合并成⼀个请求, ⽐如当⾸⻚
要请求 10 个接⼝,我们可以 promise.all 进⾏合并,.race 的作⽤也可以将多个请求合并成⼀个请求,不过
是谁先请求成功就先返回谁.

6.说⼀下 var 、let、const 之间的区别

1. let var 是声明变量的 const 是声明常量的
2. var 声明的变量会声明提升 但是 const 和 let 不会 （声明提升就是声明的变量会把声明语句提到作用域的顶端 但是赋值语句留在原地）
3. var 在全局作⽤域下声明变量会导致变量挂载在 window 上，其他两者不会
4. let 和 const 声明的是块级作用域 var 声明的是函数作用域

块级作用域：只要是大括号就能区分作用域
函数作用域： 只有函数才能区分作用域

7 说⼀下箭头函数与普通函数的区别?

在es6中，提供了⼀种简洁的函数写法，我们称作“箭头函数”。
写法：函数名=(形参)=>{……} 当函数体中只有⼀个表达式时，{}和return可以省略，当函数体中形
参只有⼀个时，()可以省略。
特点：箭头函数中的this始终指向箭头函数定义时的离this最近的⼀个函数，如果没有最近的函数
就指向window。
区别:

1. 箭头函数不能⽤于构造函数，不能使⽤new** ⽽普通函数可以
2. 在普通函数中，this总是指向调⽤它的对象，如果⽤作构造函数，this指向创建的对象实例,
   ⽽箭头函数指向箭头函数定义时的离this最近的⼀个函数，如果没有最近的函数就指向
   window。

8 说⼀下for in 与for of的区别?

For in可以遍历对象 ⽽ for of遍历对象会报错
for in 遍历数组得到的数组的下表 ⽽for of遍历得到的时候数组⾥⾯的每⼀个元素

9 说⼀下es6如何实现类以及如何实现类的继承?

es6提供了类的这个概念,在es5中是没有类的这个概念,如果想在es5中实现⼀个类型,我们只能构造
函数的⽅式去创建⼀个类,⽽es6给我们提供⼀个更⽅便 的⽅.法,那就是class,这个class理解为是构造
函数的语法糖.
我们创建⼀个类只需要⽤过关键词class去声明就可以了 , 他的调⽤⽅式和构造函数的调⽤⽅式是
⼀样的
通过es6的类还给我们提供⼀个extends这样的⼀个关键字,来实现继承
以上就是我对类的理解

10 说⼀下数组去重的⽅法有哪些?es6如何实现数组去重?

indexof
双层for循环
set⽅法

11 说⼀下如何检测对象⾥⾯有没有属性(或者如何检测⼀个对象是否为空)?以及如何获取对象⾥⾯所有的属性名?

通过object.keys⽅法, 返回值数组,数组⾥⾯包含的是所有属性名
Object.hasOwnProperty()
使⽤for in的⽅式

12 如何将多个数组合并成为⼀个数组?

es5 :
concat
for循环
Es6:
扩展运算符
map⽅法

13 说⼀下forEach、map、filter、reduce、some、every等⽅法的作⽤?

reduce 遍历数据求和。
some 遍历数组每⼀项，有⼀项返回true,则停⽌遍历，结果返回true。不改变原数组
遍历数组每⼀项，每⼀项返回true,则最终结果为true。当任何⼀项返回false时，停⽌遍历，返回
false。不改变原数组
forEach() ⽅法: 循环原来的数组
map() ⽅法： 循环原数组并映射⼀个新数组出来
filter() ⽅法： 过滤不需要的数组元素