前端面试题之es6篇(附答案)

es6面试题

  • es5和es6的区别,说一下你所知道的es6
  • var、let、const之间的区别
  • es6实现代码数组去重的方式?
  • 使用箭头函数应注意什么?
  • ES6的模板字符串有哪些新特性?并实现一个类模板字符串的功能
  • 介绍下 Set、Map的区别?
  • promise是什么?有几种状态,什么时候会进入catch?
  • promise构造函数是同步执行还是异步执行,那么 then 方法呢?
  • setTimeout、Promise、Async/Await 的区别
  • 使用结构赋值,实现两个变量的值的交换
  • 下面Set结构,打印出的size值是多少
  • Promise 中reject 和 catch 处理上有什么区别
  • 如何使用Set去重
  • 将下面for循环改成for of形式
  • 理解 async/await以及对Generator的优势
  • forEach、for in、for of三者区别
  • 说一下es6的导入导出模块
  • 箭头函数与普通函数区别?
  • axios的特点有哪些?axios 拦截器
  • ajax和axios区别
  • 什么是Async/Await?

es6面试题解析

es5和es6的区别,说一下你所知道的es6

ECMAScript5,即ES5,是ECMAScript的第五次修订,于2009年完成标准化
ECMAScript6,即ES6,是ECMAScript的第六次修订,于2015年完成,也称ES2015
ES6是继ES5之后的一次改进,相对于ES5更加简洁,提高了开发效率

ES6新增的一些特性:

  • let声明变量和const声明常量,两个都有块级作用域
      ES5中是没有块级作用域的,并且var有变量提升,在let中,使用的变量一定要进行声明
  • 箭头函数
      ES6中的函数定义不再使用关键字function(),而是利用了()=>来进行定义
  • 模板字符串
      模板字符串是增强版的字符串,用反引号(`)标识,可以当作普通字符串使用,也可以用来定义多行字符串
  • 解构赋值
      ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值
  • for of循环
      for...of循环可以遍历数组、Set和Map结构、某些类似数组的对象、对象,以及字符串
  • import、export导入导出
      ES6标准中,Js原生支持模块(module)。将JS代码分割成不同功能的小块进行模块化,将不同功能的代码分别写在不同文件中,各模块只需导出公共接口部分,然后通过模块的导入的方式可以在其他地方使用
  • set数据结构
      Set数据结构,类似数组。所有的数据都是唯一的,没有重复的值。它本身是一个构造函数
  • ... 展开运算符
      可以将数组或对象里面的值展开;还可以将多个值收集为一个变量
  • 修饰器 @
      decorator是一个函数,用来修改类甚至于是方法的行为。修饰器本质就是编译时执行的函数
  • class 类的继承
      ES6中不再像ES5一样使用原型链实现继承,而是引入Class这个概念
  • async、await
      使用 async/await, 搭配promise,可以通过编写形似同步的代码来处理异步流程, 提高代码的简洁性和可读性
      async 用于申明一个 function 是异步的,而 await 用于等待一个异步方法执行完成
  • promise
      Promise是异步编程的一种解决方案,比传统的解决方案(回调函数和事件)更合理、强大
  • Symbol
      Symbol是一种基本类型。Symbol 通过调用symbol函数产生,它接收一个可选的名字参数,该函数返回的symbol是唯一的
  • Proxy代理
      使用代理(Proxy)监听对象的操作,然后可以做一些相应事情
var、let、const之间的区别
  • var声明变量可以重复声明,而let不可以重复声明
  • var是不受限于块级的,而let是受限于块级
  • var会与window相映射(会挂一个属性),而let不与window相映射
  • var可以在声明的上面访问变量,而let有暂存死区,在声明的上面访问变量会报错
  • const声明之后必须赋值,否则会报错
  • const定义不可变的量,改变了就会报错
  • const和let一样不会与window相映射、支持块级作用域、在声明的上面访问变量会报错
es6实现代码数组去重的方式?

...new Set()一行代码去重

使用箭头函数应注意什么?
  • 用了箭头函数,this就不是指向window,而是父级(指向是可变的)
  • 不能够使用arguments对象
  • 不能用作构造函数,这就是说不能够使用new命令,否则会抛出一个错误
  • 不可以使用yield命令,因此箭头函数不能用作 Generator 函数
ES6的模板字符串有哪些新特性?并实现一个类模板字符串的功能

基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定
在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。ES6反引号(``)就能解决

let name = '小明';
        let age = 10;
        let str = '你好,${name} 已经 ${age}岁了'
        str = str.replace(/\$\{([^}]*)\}/g,function(){
            return eval(arguments[1]);
        })
        console.log(str);//你好,小明 已经 10岁了
介绍下 Set、Map的区别?

应用场景Set用于数据重组,Map用于数据储存
Set: 
 (1)成员不能重复
 (2)只有键值没有键名,类似数组
 (3)可以遍历,方法有add, delete,has
Map:
 (1)本质上是健值对的集合,类似集合
 (2)可以遍历,可以跟各种数据格式转换

promise是什么?有几种状态,什么时候会进入catch?

promise是异步编程的一种解决方案.用来解决异步操作问题
三个状态:pending(等待中)、fulfilled(已成功)、reject(已失败)
两个过程:padding -> fulfilled、padding -> rejected
当pending为rejectd时,会进入catch

promise构造函数是同步执行还是异步执行,那么 then 方法呢?

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

setTimeout、Promise、Async/Await 的区别
  • 事件循环中分为宏任务队列和微任务队列
  • 其中setTimeout的回调函数放到宏任务队列里,等到执行栈清空以后执行
  • promise.then里的回调函数会放到相应宏任务的微任务队列里,等宏任务里面的同步代码执行完再执行
  • async函数表示函数里面可能会有异步方法,await后面跟一个表达式
  • async方法执行时,遇到await会立即执行表达式,然后把表达式后面的代码放到微任务队列里,让出执行栈让同步代码先执行
使用结构赋值,实现两个变量的值的交换
 let a = 1;let b = 2;
[a,b] = [b,a];
下面Set结构,打印出的size值是多少
let s = new Set();
s.add([1]);
s.add([1]);console.log(s.size);

console.log()答应出来是2
两个数组[1]并不是同一个值,它们分别定义的数组,在内存中分别对应着不同的存储地址,因此并不是相同的值。 都能存储到Set结构中,所以size为2

Promise 中reject 和 catch 处理上有什么区别
  • reject 是用来抛出异常,catch 是用来处理异常
  • reject 是 Promise 的方法,而 catch 是 Promise 实例的方法
  • reject后的东西,一定会进入then中的第二个回调,如果then中没有写第二个回调,则进入catch
  • 网络异常(比如断网),会直接进入catch而不会进入then的第二个回
如何使用Set去重
let arr = [12,43,23,43,68,12];
let item = [...new Set(arr)];
console.log(item);//[12, 43, 23, 68]
将下面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;
}
理解 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() 方法进行调用
forEach、for in、for of三者区别
  • forEach更多的用来遍历数组
  • for in 一般常用来遍历对象或json
  • for of数组对象都可以遍历,遍历对象需要通过和Object.keys()
  • for in循环出的是key,for of循环出的是value
说一下es6的导入导出模块

通过import导入 通过export导出

  • 使用export default时 对应的import语句不需要适用大括号
  • 不适用export default时 对应的import语句需要使用大括号
箭头函数与普通函数区别?
  • 写法不一样
  • 普通函数存在变量提升的现象
  • 箭头函数不能作为构造函数使用
  • 两者this的指向不同
  • 箭头函数的arguments指向它的父级函数所在作用域的arguments
  • 箭头函数没有new.target
axios的特点有哪些?axios 拦截器

axios是一个基于promise的http库 支持promise所有的api

它可以拦截请求和响应
它可以转换请求数据和响应数据 并对响应回来的内容自动转换成json类型的数据
安全性更高

常用方法有axios.get axios.delete axios.post axios.put

  • 请求拦截器

请求拦截器的作用是在请求发送前进行一些操作,例如在每个请求体里加上token,统一做了处理如果以后要改也非常容易。

  • 响应拦截器
    响应拦截器的作用是在接收到响应后进行一些操作,例如在服务器返回登录状态失效,需要重新登录的时候,跳转到登录页。
ajax和axios区别

先来看一下代码
ajax

 $.ajax({
    url: '接口地址',
    type: 'get', //或者post   请求类型
    dataType: 'json',
    data: { // 要发送的请求参数
      'username' : 'hermit',
      'password' : 'a123'
    },
    success : function (response) {
      console.log(response); // 请求返回的数据
    }
  })

axios

 axios({
    url: '接口地址',
    method: 'get', //或者 post    请求类型
    responseType: 'json', //默认格式,如果就是 json 格式可以不写
    data: {
      'username' : 'hermit',
      'password' : 'a123'
    }
  }).then( function(response){ // 请求正确返回的数据
    console.log(response);
    console.log(response.data);
  }).catch( function(error) { // 请求错误返回的数据
    console.log(error);n  
  })

两者其实并没有太大的区别,在写法上大致相同。
其实axios是通过 promise 实现对 ajax 技术的一种封装。就像 ajax 是 通过 jQuery 来封装一样。
也就是说,jQuery 将请求技术进行了封装 变成了 ajax , 而 通过 promise 又把 ajax 进行封装就成了 axios。

什么是Async/Await?
  • async/await是写异步代码的新方式,以前的方法有回调函数和Promise。
  • async/await是基于Promise实现的,它不能用于普通的回调函数。
  • async/await与Promise一样,是非阻塞的。
  • async/await使得异步代码看起来像同步代码,这正是它的魔力所在。

持续更新中......

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 161,780评论 4 369
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 68,424评论 1 305
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 111,397评论 0 254
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,576评论 0 218
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,997评论 3 295
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,945评论 1 224
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,107评论 2 317
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,850评论 0 208
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,625评论 1 250
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,804评论 2 253
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,285评论 1 265
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,613评论 3 261
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,291评论 3 242
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,164评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,963评论 0 201
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 36,096评论 2 285
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,886评论 2 278