前端面试题整理—ES6篇

时间 2019-11-12

标签端面试题整理 es6 栏目 JavaScript 繁體版

原文原文链接

一、es5和es6的区别，说一下你所知道的es6es6

　　ECMAScript5，即ES5，是ECMAScript的第五次修订，于2009年完成标准化web

　　ECMAScript6，即ES6，是ECMAScript的第六次修订，于2015年完成，也称ES2015编程

　　ES6是继ES5以后的一次改进，相对于ES5更加简洁，提升了开发效率json

　　ES6新增的一些特性：数组

　　1）let声明变量和const声明常量，两个都有块级做用域
　　ES5中是没有块级做用域的，而且var有变量提高，在let中，使用的变量必定要进行声明promise

　　2）箭头函数
　　ES6中的函数定义再也不使用关键字function()，而是利用了()=>来进行定义网络

　　3）模板字符串
　　模板字符串是加强版的字符串，用反引号（`）标识，能够看成普通字符串使用，也能够用来定义多行字符串数据结构

　　4）解构赋值
　　ES6 容许按照必定模式，从数组和对象中提取值，对变量进行赋值异步

　　5）for of循环
　　for...of循环能够遍历数组、Set和Map结构、某些相似数组的对象、对象，以及字符串async

　　6）import、export导入导出
　　ES6标准中，Js原生支持模块(module)。将JS代码分割成不一样功能的小块进行模块化，将不一样功能的代码分别写在不一样文件中，各模块只需导出公共接口部分，而后经过模块的导入的方式能够在其余地方使用

　　7）set数据结构
　　Set数据结构，相似数组。全部的数据都是惟一的，没有重复的值。它自己是一个构造函数

　　8）... 展开运算符
　　能够将数组或对象里面的值展开；还能够将多个值收集为一个变量

　　9）修饰器 @
　　decorator是一个函数，用来修改类甚至因而方法的行为。修饰器本质就是编译时执行的函数

　　10）class 类的继承
　　ES6中再也不像ES5同样使用原型链实现继承，而是引入Class这个概念

　　11）async、await
　　使用 async/await, 搭配promise,能够经过编写形似同步的代码来处理异步流程, 提升代码的简洁性和可读性
　　async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成

　　12）promise
　　Promise是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理、强大

　　13）Symbol
　　Symbol是一种基本类型。Symbol 经过调用symbol函数产生，它接收一个可选的名字参数，该函数返回的symbol是惟一的

　　14）Proxy代理
　　使用代理（Proxy）监听对象的操做，而后能够作一些相应事情

二、var、let、const之间的区别

　　var声明变量能够重复声明，而let不能够重复声明

　　var是不受限于块级的，而let是受限于块级

　　var会与window相映射（会挂一个属性），而let不与window相映射

　　var能够在声明的上面访问变量，而let有暂存死区，在声明的上面访问变量会报错

　　const声明以后必须赋值，不然会报错

　　const定义不可变的量，改变了就会报错

　　const和let同样不会与window相映射、支持块级做用域、在声明的上面访问变量会报错

三、使用箭头函数应注意什么？

　　（1）用了箭头函数，this就不是指向window，而是父级（指向是可变的）

　　（2）不可以使用arguments对象

　　（3）不能用做构造函数，这就是说不可以使用new命令，不然会抛出一个错误

　　（4）不可使用yield命令，所以箭头函数不能用做 Generator 函数

四、ES6的模板字符串有哪些新特性？并实现一个类模板字符串的功能

　　基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定

　　在ES5时咱们经过反斜杠()来作多行字符串或者字符串一行行拼接。ES6反引号(``)就能解决

类模板字符串的功能

        let name = 'web';
        let age = 10;
        let str = '你好，${name} 已经 ${age}岁了'
        str = str.replace(/\$\{([^}]*)\}/g,function(){
            return eval(arguments[1]);
        })
        console.log(str);//你好，web 已经 10岁了

五、介绍下 Set、Map的区别？

　　应用场景Set用于数据重组，Map用于数据储存

　　Set：　

　　（1）成员不能重复
　　（2）只有键值没有键名，相似数组
　　（3）能够遍历，方法有add, delete,has

　　Map:

　　（1）本质上是健值对的集合，相似集合
　　（2）能够遍历，能够跟各类数据格式转换

六、ECMAScript 6 怎么写 class ，为什么会出现 class？

　　ES6的class能够看做是一个语法糖，它的绝大部分功能ES5均可以作到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法

//定义类
class Point { 
  constructor(x,y) { 
      //构造方法
       this.x = x; //this关键字表明实例对象
       this.y = y; 
  } toString() {
       return '(' + this.x + ',' + this.y + ')'; 
  }
}

七、Promise构造函数是同步执行仍是异步执行，那么 then 方法呢？

　　promise构造函数是同步执行的，then方法是异步执行的

八、setTimeout、Promise、Async/Await 的区别

　　事件循环中分为宏任务队列和微任务队列

　　其中setTimeout的回调函数放到宏任务队列里，等到执行栈清空之后执行

　　promise.then里的回调函数会放到相应宏任务的微任务队列里，等宏任务里面的同步代码执行完再执行

　　async函数表示函数里面可能会有异步方法，await后面跟一个表达式

　　async方法执行时，遇到await会当即执行表达式，而后把表达式后面的代码放到微任务队列里，让出执行栈让同步代码先执行

九、promise有几种状态，何时会进入catch？

　　三个状态：pending、fulfilled、reject

　　两个过程：padding -> fulfilled、padding -> rejected

　　当pending为rejectd时，会进入catch

十、下面的输出结果是多少

const promise = new Promise((resolve, reject) => {
    console.log(1);
    resolve();
    console.log(2);
})

promise.then(() => {
    console.log(3);
})

console.log(4);

1 2 4 3

Promise 新建后当即执行，因此会先输出 1，2，而 Promise.then() 内部的代码在当次事件循环的结尾马上执行，因此会继续输出4，最后输出3

十一、使用结构赋值，实现两个变量的值的交换

let a = 1;let b = 2;
[a,b] = [b,a];

十二、设计一个对象，键名的类型至少包含一个symbol类型，而且实现遍历全部key

 let name = Symbol('name');
 let product = {
    [name]:"洗衣机",    
    "price":799
  };
  Reflect.ownKeys(product);

1三、下面Set结构，打印出的size值是多少

let s = new Set();
s.add([1]);
s.add([1]);console.log(s.size);

答案：2

两个数组[1]并非同一个值，它们分别定义的数组，在内存中分别对应着不一样的存储地址，所以并非相同的值

都能存储到Set结构中，因此size为2

1四、Promise 中reject 和 catch 处理上有什么区别

　　reject 是用来抛出异常，catch 是用来处理异常

　　reject 是 Promise 的方法，而 catch 是 Promise 实例的方法

　　reject后的东西，必定会进入then中的第二个回调，若是then中没有写第二个回调，则进入catch

　　网络异常（好比断网），会直接进入catch而不会进入then的第二个回调

1五、使用class 手写一个promise

  //建立一个Promise的类
  class Promise{
    constructor(executer){//构造函数constructor里面是个执行器
      this.status = 'pending';//默认的状态 pending
      this.value = undefined//成功的值默认undefined
      this.reason = undefined//失败的值默认undefined
      //状态只有在pending时候才能改变
      let resolveFn = value =>{
        //判断只有等待时才能resolve成功
        if(this.status == pending){
          this.status = 'resolve';
          this.value = value;
        }
      }
      //判断只有等待时才能reject失败
      let rejectFn = reason =>{
        if(this.status == pending){
          this.status = 'reject';
          this.reason = reason;
        }
      }    
      try{
        //把resolve和reject两个函数传给执行器executer
        executer(resolve,reject);
      }catch(e){
        reject(e);//失败的话进catch
      }
    }
    then(onFufilled,onReject){
      //若是状态成功调用onFufilled
      if(this.status = 'resolve'){
        onFufilled(this.value);
      }
      //若是状态失败调用onReject
      if(this.status = 'reject'){
        onReject(this.reason);
      }
    }
  }

1六、如何使用Set去重

let arr = [12,43,23,43,68,12];
let item = [...new Set(arr)];
console.log(item);//[12, 43, 23, 68]

1七、将下面for循环改为for of形式

let arr = [11,22,33,44,55];
let sum = 0;
for(let i=0;i<arr.length;i++){
    sum += arr[i];
}

答案：

let arr = [11,22,33,44,55];
let sum = 0;
for(value of arr){
    sum += value;
}

1八、理解 async/await以及对Generator的优点

　　 async await 是用来解决异步的，async函数是Generator函数的语法糖

　　使用关键字async来表示，在函数内部使用 await 来表示异步

　　async函数返回一个 Promise 对象，可使用then方法添加回调函数

　　当函数执行的时候，一旦遇到await就会先返回，等到异步操做完成，再接着执行函数体内后面的语句

　　async较Generator的优点：

　　（1）内置执行器。Generator 函数的执行必须依靠执行器，而 Aysnc 函数自带执行器，调用方式跟普通函数的调用同样

　　（2）更好的语义。async 和 await 相较于 * 和 yield 更加语义化　　

　　（3）更广的适用性。yield命令后面只能是 Thunk 函数或 Promise对象，async函数的await后面能够是Promise也能够是原始类型的值

　　（4）返回值是 Promise。async 函数返回的是 Promise 对象，比Generator函数返回的Iterator对象方便，能够直接使用 then() 方法进行调用

1九、forEach、for in、for of三者区别

　　forEach更多的用来遍历数组

　　for in 通常经常使用来遍历对象或json

　　for of数组对象均可以遍历，遍历对象须要经过和Object.keys()

　　for in循环出的是key，for of循环出的是value

20、说一下es6的导入导出模块

　　导入经过import关键字

// 只导入一个
import {sum} from "./example.js"

// 导入多个
import {sum,multiply,time} from "./exportExample.js"

// 导入一整个模块
import * as example from "./exportExample.js"

　　导出经过export关键字

//能够将export放在任何变量,函数或类声明的前面
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

//也可使用大括号指定所要输出的一组变量
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};

//使用export default时，对应的import语句不须要使用大括号
let bosh = function crs(){}
export default bosh;
import crc from 'crc';

//不使用export default时，对应的import语句须要使用大括号
let bosh = function crs(){}
export bosh;
import {crc} from 'crc';