ES6前端面试题整理

素颜马尾好姑娘i 2022-11-10 14:24 269阅读 0赞

### 文章目录 ###

*  1、说说你了解的ES6新增特性
 *   *   *  let声明变量和const声明常量，两个都有块级作用域
         *  箭头函数
         *  模板字符串
         *  解构赋值
         *  for of循环
         *   *  应用场景
         *  import、export导入导出
         *  set数据结构
         *   *  应用
         *  ... 展开运算符
         *   *  应用
         *  修饰器 @
         *  class 类的继承
         *  async、await
         *  promise
         *  Symbol
         *  Proxy代理
 *  2、var、let、const之间的区别
 *  3、使用箭头函数应注意什么？
 *  4、ES6的模板字符串有哪些新特性？并实现一个类模板字符串的功能
 *  5、介绍下 Set、Map的区别？
 *  6、ECMAScript 6 怎么写 class ，为何会出现 class
 *  7、Promise构造函数是同步执行还是异步执行，那么 then 方法呢？
 *  8、setTimeout、Promise、Async/Await 的区别
 *  9、promise有几种状态，什么时候会进入catch？
 *  10、下面的输出结果是多少
 *  11、设计一个对象，键名的类型至少包含一个symbol类型，并且实现遍历所有key
 *  12、下面Set结构，打印出的size值是多少
 *  13、Promise 中reject 和 catch 处理上有什么区别
 *  14、使用class 手写一个promise
 *  15、如何使用Set去重
 *  16、将下面for循环改成for of形式
 *  17、理解 async/await以及对Generator的优势
 *  18、forEach、for in、for of三者区别
 *  19、说一下es6的导入导出模块

# 1、说说你了解的ES6新增特性 #

### let声明变量和const声明常量，两个都有块级作用域 ###

ES5中是没有块级作用域的，并且var有变量提升，在let中，使用的变量一定要进行声明

### 箭头函数 ###

ES6中的函数定义不再使用关键字function()，而是利用了()=>来进行定义

特点：箭头函数中的this始终指向箭头函数定义时的离this最近的一个函数，如果没有最近的函数就指向window。

### 模板字符串 ###

模板字符串是增强版的字符串，用反引号（\`）标识，可以当作普通字符串使用，也可以用来定义多行字符串

### 解构赋值 ###

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值

### for of循环 ###

for…of循环可以遍历数组、Set和Map结构、某些类似数组的对象、对象，以及字符串

#### 应用场景 ####

//arguments是个类数组对象，通常先要将其转换为数组才能遍历，但for...of可以直接遍历
    function sum() {
        let sum = 0
        for(let num of arguments){
            sum += num
        }
        console.log(sum);        //15
    }
    
    sum(1,2,3,4,5)
    //遍历字符串
    let name = 'Asher';
    for (let char of name){
        console.log(char);         //A s h e r
    }
    //遍历nodelists，效果如下图
    <style type="text/css">
        .completed {
            text-decoration: line-through;
        }
    </style>
    <body>
        <ul>
            <li>yoga</li>
            <li>boxing</li>
            <li>press</li>
        </ul>
    
        <script type="text/javascript">
            const lis = document.querySelectorAll('li');
            for(let li of lis){
                li.addEventListener('click',function(){
                    this.classList.toggle('completed');
                })
            }
        </script>
    </body>

### import、export导入导出 ###

ES6标准中，Js原生支持模块(module)。将JS代码分割成不同功能的小块进行模块化，将不同功能的代码分别写在不同文件中，各模块只需导出公共接口部分，然后通过模块的导入的方式可以在其他地方使用

### set数据结构 ###

Set数据结构，类似数组。所有的数据都是唯一的，没有重复的值。它本身是一个构造函数

#### 应用 ####

1、数组去重
    
    let arr = [3, 5, 2, 2, 5, 5];
    let unique = [...new Set(arr)];
    // [3, 5, 2]
    
    2、并集（Union）、交集（Intersect）和差集（Difference）
    
    let a = new Set([1, 2, 3]);
    let b = new Set([4, 3, 2]);
    
    // 并集
    let union = new Set([...a, ...b]);
    // Set {1, 2, 3, 4}
    
    // 交集
    let intersect = new Set([...a].filter(x => b.has(x)));
    // set {2, 3}
    
    // 差集
    let difference = new Set([...a].filter(x => !b.has(x)));
    // Set {1}

### … 展开运算符 ###

可以将数组或对象里面的值展开；还可以将多个值收集为一个变量

#### 应用 ####

1. 合并数组
    
    arr1.push(...arr2) // 将arr2 追加到数组的末尾
    arr1.unshift(...arr2) // 将arr2 追加到数组的开头
    
    2. 拷贝数组
    
    var arr = [1,2,3];
    var arr2 = [...arr]; // 和arr.slice()差不多
    arr2.push(4)
    //记住：数组中的对象依然是引用值，所以不是任何东西都“拷贝”过去了。
    
    3.将arguments或者NodeList转换为Array
    
    
    var myFn = function(...args) {
    // ...
    }
    
    4. 使用Math函数
    
    let numbers = [9, 4, 7, 1];
    Math.min(...numbers); // 1
    //相当于Math.min.apply(numbers);

### 修饰器 @ ###

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

### class 类的继承 ###

ES6中不再像ES5一样使用原型链实现继承，而是引入Class这个概念

class Person
      {  
            constructor(name, age) {
              this.name = name;
              this.age = age;
            }
     
            sayName(){
                console.log("the name is:"+this.name);
            }
      }
     
      class Worker extends Person{
        constructor(name, age,job) {
             super(name, age);
              this.job = job;
        }
        sayJob(){
          console.log("the job is:"+this.job)
        }
      }
     
      var worker = new Worker('tcy',20,'teacher');
      worker.sayJob();//the job is:teacher
      worker.sayName();//the name is:tcy

### async、await ###

使用 async/await, 搭配promise,可以通过编写形似同步的代码来处理异步流程,提高代码的简洁性和可读性

async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成

// 2s 之后返回双倍的值
    function doubleAfter2seconds(num) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(2 * num)
            }, 2000);
        })
    }
    
    async function testResult () {
        let first = await doubleAfter2seconds(10);
        let second = await doubleAfter2seconds(20);    
        console.log(first + second);
    }

### promise ###

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

new Promise((resolve,reject)=>{
    if('成功') resolve(1);
    if('失败') reject(0);
    }).then(()=>{
        console.log("成功");
    }).catch(()=>{
        console.log("失败");
    })

它有三种状态，分别是pending-进行中、resolved-已完成、rejected-已失败。

Promise 构造函数包含一个参数和一个带有 resolve（解析）和 reject（拒绝）两个参数的回调。在回调中执行一些操作（例如异步），如果一切都正常，则调用 resolve，否则调用 reject。对于已经实例化过的 promise 对象可以调用 promise.then() 方法，传递 resolve 和 reject 方法作为回调。then()方法接收两个参数：onResolve和onReject，分别代表当前 promise 对象在成功或失败时。

promise的执行过程

setTimeout(function() {
        console.log(0);
    }, 0);
    var promise = new Promise((resolve, reject) => {
        console.log(1);
        setTimeout(function () {
            var success = true;
            if (success) {
                resolve('成功');
            } else {
                reject('失败');
            }
        },2000);
    }).then(
        (data) => { console.log(data)},
        (data) => { console.log(data)}
    );
    console.log(promise);	//<pending> 进行中
    setTimeout(function () {
        console.log(promise);	//<resolved> 已完成
    },2500);
    console.log(2);
     
    //1
    //Promise {<pending>}
    //2
    //0
    //成功
    //Promise {<resolved>: undefined}

### Symbol ###

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

let s1 = Symbol()
    let s2 = Symbol('another symbol')
    let s3 = Symbol('another symbol')
    
    s1 === s2 // false
    s2 === s3 // false
    //symbol是唯一的

**应用场景1：使用Symbol来作为对象属性名(key)**

在这之前，我们通常定义或访问对象的属性时都是使用字符串，比如下面的代码：
    
    let obj = {
      abc: 123,
      "hello": "world"
    }
    
    obj["abc"] // 123
    obj["hello"] // 'world'
    而现在，Symbol可同样用于对象属性的定义和访问：
    
    const PROP_NAME = Symbol()
    const PROP_AGE = Symbol()
    
    let obj = {
      [PROP_NAME]: "一斤代码"
    }
    obj[PROP_AGE] = 18
    
    obj[PROP_NAME] // '一斤代码'
    obj[PROP_AGE] // 18
    
    
    随之而来的是另一个非常值得注意的问题：就是当使用了Symbol作为对象的属性key后，在对该对象进行key的枚举时，会有什么不同？在实际应用中，我们经常会需要使用Object.keys()或者for...in来枚举对象的属性名，那在这方面，Symbol类型的key表现的会有什么不同之处呢？来看以下示例代码：
    
    let obj = {
       [Symbol('name')]: '一斤代码',
       age: 18,
       title: 'Engineer'
    }
    
    Object.keys(obj)   // ['age', 'title']
    
    for (let p in obj) {
       console.log(p)   // 分别会输出：'age' 和 'title'
    }
    
    Object.getOwnPropertyNames(obj)   // ['age', 'title']
    由上代码可知，Symbol类型的key是不能通过Object.keys()或者for...in来枚举的，它未被包含在对象自身的属性名集合(property names)之中。所以，利用该特性，我们可以把一些不需要对外操作和访问的属性使用Symbol来定义。
    
    也正因为这样一个特性，当使用JSON.stringify()将对象转换成JSON字符串的时候，Symbol属性也会被排除在输出内容之外：
    
    JSON.stringify(obj)  // {"age":18,"title":"Engineer"}
    我们可以利用这一特点来更好的设计我们的数据对象，让“对内操作”和“对外选择性输出”变得更加优雅。
    
    然而，这样的话，我们就没办法获取以Symbol方式定义的对象属性了么？非也。还是会有一些专门针对Symbol的API，比如：
    
    // 使用Object的API
    Object.getOwnPropertySymbols(obj) // [Symbol(name)]
    
    // 使用新增的反射API
    Reflect.ownKeys(obj) // [Symbol(name), 'age', 'title']

**应用场景2：使用Symbol来替代常量**

先来看一下下面的代码，是不是在你的代码里经常会出现？
    
    const TYPE_AUDIO = 'AUDIO'
    const TYPE_VIDEO = 'VIDEO'
    const TYPE_IMAGE = 'IMAGE'
    
    function handleFileResource(resource) {
      switch(resource.type) {
        case TYPE_AUDIO:
          playAudio(resource)
          break
        case TYPE_VIDEO:
          playVideo(resource)
          break
        case TYPE_IMAGE:
          previewImage(resource)
          break
        default:
          throw new Error('Unknown type of resource')
      }
    }
    如上面的代码中那样，我们经常定义一组常量来代表一种业务逻辑下的几个不同类型，我们通常希望这几个常量之间是唯一的关系，为了保证这一点，我们需要为常量赋一个唯一的值（比如这里的'AUDIO'、'VIDEO'、 'IMAGE'），常量少的时候还算好，但是常量一多，你可能还得花点脑子好好为他们取个好点的名字。
    
    现在有了Symbol，我们大可不必这么麻烦了：
    
    const TYPE_AUDIO = Symbol()
    const TYPE_VIDEO = Symbol()
    const TYPE_IMAGE = Symbol()
    这样定义，直接就保证了三个常量的值是唯一的了！是不是挺方便的呢。

**应用场景3：使用Symbol定义类的私有属性/方法**

我们知道在JavaScript中，是没有如Java等面向对象语言的访问控制关键字private的，类上所有定义的属性或方法都是可公开访问的。因此这对我们进行API的设计时造成了一些困扰。
    
    而有了Symbol以及模块化机制，类的私有属性和方法才变成可能。例如：
    
    在文件 a.js中
    const PASSWORD = Symbol()
    
    class Login {
      constructor(username, password) {
        this.username = username
        this[PASSWORD] = password
      }
    
      checkPassword(pwd) {
          return this[PASSWORD] === pwd
      }
    }
    
    export default Login
    在文件 b.js 中
    import Login from './a'
    
    const login = new Login('admin', '123456')
    
    login.checkPassword('123456')  // true
    
    login.PASSWORD  // oh!no!
    login[PASSWORD] // oh!no!
    login["PASSWORD"] // oh!no!
    由于Symbol常量PASSWORD被定义在a.js所在的模块中，外面的模块获取不到这个Symbol，也不可能再创建一个一模一样的Symbol出来（因为Symbol是唯一的），因此这个PASSWORD的Symbol只能被限制在a.js内部使用，所以使用它来定义的类属性是没有办法被模块外访问到的，达到了一个私有化的效果。

### Proxy代理 ###

使用代理（Proxy）监听对象的操作，然后可以做一些相应事情

ES6原生提供了Proxy构造函数，用来生成Proxy实例。
    
    var proxy = new Proxy(target, handler);
    Proxy对象的所有用法，都是上面的这种形式。不同的只是handle参数的写法。其中new Proxy用来生成Proxy实例，target是表示所要拦截的对象，handle是用来定制拦截行为的对象。
    
    var proxy = new Proxy({}, {
      get: function(target, property) {
        return 35;
      }
    });
    
    proxy.time // 35
    proxy.name // 35
    proxy.title // 35
    上面是一个拦截读取属性的行为的例子。要使Proxy起作用，必须针对Proxy实例进行操作，而不是针对目标对象（target）进行操作。

# 2、var、let、const之间的区别 #

*  var声明变量可以重复声明，而let不可以重复声明
 *  var是不受限于块级的，而let是受限于块级
 *  var会与window相映射（会挂一个属性），而let不与window相映射
 *  var可以在声明的上面访问变量，而let有暂存死区，在声明的上面访问变量会报错
 *  const声明之后必须赋值，否则会报错
 *  const定义不可变的量，改变了就会报错
 *  const和let一样不会与window相映射、支持块级作用域、在声明的上面访问变量会报错

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

*  用了箭头函数，this就不是指向window，而是父级（指向是可变的），在使用=>定义函数的时候，this的指向是定义时所在的对象，而不是使用时所在的对象
 *  不能够使用arguments对象
 *  不能用作构造函数，这就是说不能够使用new命令，否则会抛出一个错误
 *  不可以使用yield命令，因此箭头函数不能用作 Generator 函数

this的指向总是让人困扰，但是有了=>以后妈妈再也不用担心你使用this了

class Animal {
        constructor(){
            this.type = 'animal'
        }
        says(say) {
            setTimeout(function () {
                console.log(this.type + 'says' + say)
            },1000)
        }
    }
    var animal = new Animal()
    animal.says('hi') // undefined says hi
    我们再来看看=>的情况
    
    class Animal() {
        constructor() {
            this.type = 'animal'
        }
        says(say) {
            setTimeout(() => {
                console.log(this.type + ' says ' + say)
            }, 1000)
        }
    }
    var animal = new Animal()
    animal.says('hi') // animal says hi

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

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

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

# 5、介绍下 Set、Map的区别？ #

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

**Set**

*  成员不能重复
 *  只有键值没有键名，类似数组
 *  可以遍历，方法有add, delete,has

**Map**

*  本质上是健值对的集合，类似集合
 *  可以遍历，可以跟各种数据格式转换

# 6、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})`; //在windows键盘上，``是英文输入法下tab按键上面那个键。
            //'('+this.x+','+this.y+')';
        }
    }
    let p  =new Point(1,2);
    p.toString(); //"(1,2)"

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

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

# 8、setTimeout、Promise、Async/Await 的区别 #

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

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

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

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

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

# 9、promise有几种状态，什么时候会进入catch？ #

三个状态：pending、fulfilled、reject

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

当pending为rejected时，会进入catch

# 10、下面的输出结果是多少 #

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.

# 11、设计一个对象，键名的类型至少包含一个symbol类型，并且实现遍历所有key #

let name = Symbol('name');
     let product = {
        [name]:"洗衣机",    
        "price":799
      };
      Reflect.ownKeys(product); 
      //Reflect.ownKeys() :相当于Object.getOwnPropertyNames(target) concat(Object.getOwnPropertySymbols(target)

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

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

两个数组\[1\]并不是同一个值，它们分别定义的数组，在内存中分别对应着不同的存储地址，因此并不是相同的值

都能存储到Set结构中，所以size为2

# 13、Promise 中reject 和 catch 处理上有什么区别 #

*  reject 是用来抛出异常，catch 是用来处理异常
 *  reject 是 Promise 的方法，而 catch 是 Promise 实例的方法
 *  reject后的东西，一定会进入then中的第二个回调，如果then中没有写第二个回调，则进入catch
 *  网络异常（比如断网），会直接进入catch而不会进入then的第二个回调

# 14、使用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);
          }
        }
      }

# 15、如何使用Set去重 #

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

# 16、将下面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;
    }

遍历数组:for in 和 for of

for(let i in arr ){
        console.log(arr[i])
    }
    for(let i of arr){
        console.log(i);
    }

# 17、理解 async/await以及对Generator的优势 #

*  async await 是用来解决异步的，async函数是Generator函数的语法糖
 *  使用关键字async来表示，在函数内部使用 await 来表示异步
 *  async函数返回一个Promise对象，可以使用then方法添加回调函数
 *  当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句

**async较Generator的优势：**

*  内置执行器。Generator 函数的执行必须依靠执行器，而 Aysnc 函数自带执行器，调用方式跟普通函数的调用一样
 *  更好的语义。async 和 await 相较于 \* 和 yield 更加语义化
 *  更广的适用性。yield命令后面只能是 Thunk 函数或 Promise对象，async函数的await后面可以是Promise也可以是原始类型的值
 *  返回值是 Promise。async 函数返回的是 Promise 对象，比Generator函数返回的Iterator对象方便，可以直接使用 then() 方法进行调用

# 18、forEach、for in、for of三者区别 #

*  forEach更多的用来遍历数组
 *  for in 一般常用来遍历对象或json
 *  for of数组对象都可以遍历，遍历对象需要通过和Object.keys()
 *  for in循环出的是key，for of循环出的是value
    
    var user = \{name:‘张三’,age:10,sex:‘男’\}  
    for(let index in user)\{  
    console.log(index+’:’+user\[index\])  
    //“name:张三”"age:10"“sex:男”  
    \}  
    for(let index of Object.keys(user))\{  
    console.log(index+’:’+user\[index\])  
    //“name:张三”"age:10"“sex:男”  
    \}

# 19、说一下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';

[本文链接：https://blog.csdn.net/qq\_39903567/article/details/114990474][https_blog.csdn.net_qq_39903567_article_details_114990474]

[https_blog.csdn.net_qq_39903567_article_details_114990474]: https://blog.csdn.net/qq_39903567/article/details/114990474