锐客网

  1. 首页 > 睿知 > it技术 > >

前端面试题|JavaScript前端经典面试题之ES6面试题汇总es6

es6js前端面试题js面试题es6面试题

推荐阅读： vue3面试题：最新vue3.0前端经典面试试题及答案（持续更新中……）_南北极之间的博客-CSDN博客打包大小减少41%初次渲染快55%, 更新渲染快133%内存减少54%......使用Proxy代替defineProperty实现响应式重写虚拟DOM的实现和Tree-Shaking......Vue3可以更好的支持TypeScriptComposition API（组合API）setup配置ref与reactivewatch与watchEffectprovide与inject......新的内置组件FragmentTeleportSuspense其他改变新的生命周期钩子data 选项应始终被声明为一个函https://blog.csdn.net/qq_22182989/article/details/125781704
1、es5和es6的区别，说一下你所知道的es6

ECMAScript5，即ES5，是ECMAScript的第五次修订，于2009年完成标准化
ECMAScript6，即ES6，是ECMAScript的第六次修订，于2015年完成，也称ES2015
ES6是继ES5之后的一次改进，相对于ES5更加简洁，提高了开发效率
ES6新增的一些特性：
1）let声明变量和const声明常量，两个都有块级作用域ES5中是没有块级作用域的，并且var有变量提升，在let中，使用的变量一定要进行声明
2）箭头函数ES6中的函数定义不再使用关键字function()，而是利用了()=>来进行定义
3）模板字符串模板字符串是增强版的字符串，用反引号（`）标识，可以当作普通字符串使用，也可以用来定义多行字符串
4）解构赋值ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值
5）for of循环for...of循环可以遍历数组、Set和Map结构、某些类似数组的对象、对象，以及字符串
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）promisePromise是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理、强大
13）SymbolSymbol是一种基本类型。Symbol 通过调用symbol函数产生，它接收一个可选的名字参数，该函数返回的symbol是唯一的
14）Proxy代理使用代理（Proxy）监听对象的操作，然后可以做一些相应事情
ES6是什么，为什么要学习它，不学习ES6会怎么样?
答：ES6是新一代的JS语言标准，对分JS语言核心内容做了升级优化，规范了JS使用标准，新增了JS原生方法，使得JS使用更加规范，更加优雅，更适合大型应用的开发。学习ES6是成为专业前端正规军的必经之路。不学习ES6也可以写代码打鬼子，但是最多只能当个游击队长。
ES5、ES6和ES2015有什么区别?
答：ES2015特指在2015年发布的新一代JS语言标准，ES6泛指下一代JS语言标准，包含ES2015、ES2016、ES2017、ES2018等。现阶段在绝大部分场景下，ES2015默认等同ES6。ES5泛指上一代语言标准。ES2015可以理解为ES5和ES6的时间分界线。

9.es6如何转为es5？
使用Babel 转码器，Babel 的配置文件是.babelrc，存放在项目的根目录下。使用 Babel 的第一步，就是配置这个文件。
babel是什么，有什么作用?
答：babel是一个 ES6 转码器，可以将 ES6 代码转为 ES5 代码，以便兼容那些还没支持ES6的平台。
2、var、let、const之间的区别
var声明变量可以重复声明，而let不可以重复声明
var是不受限于块级的，而let是受限于块级
var会与window相映射（会挂一个属性），而let不与window相映射
var可以在声明的上面访问变量，而let有暂存死区，在声明的上面访问变量会报错
const声明之后必须赋值，否则会报错
const定义不可变的量，改变了就会报错
const和let一样不会与window相映射、支持块级作用域、在声明的上面访问变量会报错
1、let和var的区别
let：没有变量提升过程，必须先声明再使用
存在暂时性死区
不能重复声明，但是可以重新赋值
拥有块级作用域
var： 是全局变量，存在变量提升过程，可以先使用在声明
可以重复声明
let有什么用，有了var为什么还要用let？
答： 在ES6之前，声明变量只能用var，var方式声明变量其实是很不合理的，准确的说，是因为ES5里面没有块级作用域是很不合理的，甚至可以说是一个语言层面的bug(这也是很多c++、java开发人员看不懂，也瞧不起JS语言的劣势之一)。没有块级作用域回来带很多难以理解的问题，比如for循环var变量泄露，变量覆盖等问题。let 声明的变量拥有自己的块级作用域，且修复了var声明变量带来的变量提升问题。
3、使用箭头函数应注意什么？
（1）用了箭头函数，this就不是指向window，而是父级（指向是可变的）
（2）不能够使用arguments对象
（3）不能用作构造函数，这就是说不能够使用new命令，否则会抛出一个错误
（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数
8，箭头函数的作用域上下文和 普通函数作用域上下文 的区别
箭头函数其实只是一个密名函数的语法糖，区别在于普通函数作用域中的this有特定的指向，一般指向window，而箭头函数中的this只有一个指向那就是指当前函数所在的对象，其实现原理其实就是类似于之前编程的时候在函数外围定义that一样，用了箭头函数就不用定义that了直接使用this
2、箭头函数有哪些特性
1、箭头函数是匿名函数，不绑定自己的this,arguments,super,new.target
2、箭头函数会捕获其所在上下文的this值，作为自己的this值，在使用call/apply绑定时，相当于只是传入了参数，对this没有影响
3、箭头函数不绑定arguments，取而代之用rest参数…解决
4、箭头函数当方法使用的时候，没有定义this绑定
5、箭头函数不能作为构造函数，和 new 一起用就会抛出错误
6、箭头函数没有原型属性
7、不能简单返回对象字面量，要用（包起来）
4、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岁了

4、es6字符串模板的好处
1、可以使用回车和换行
2、不用考虑引号的嵌套问题，但是不能反引号嵌套反引号
3、可以直接解析简单的js表达式
4、模板字符串为构造多行字符串和字符串拼接带来了更加方便的方式。
5、同一个模板字符串可以通过使用不同的标签，对模板进行进一步处理，输出不同的结果
7，ES6 中新增的数据类型有哪些？
Set 和 Map 都是 ES6 中新增的数据结构，是对当前 JS 数组和对象这两种重要数据结构的扩展。由于是新增的数据结构
1. Set 类似于数组，但数组可以允许元素重复，Set 不允许元素重复 ?
2. Map 类似于对象，但普通对象的 key 必须是字符串或者数字，而 Map 的 key 可以是任何数据类型 ?
5、介绍下 Set、Map的区别？
应用场景Set用于数据重组，Map用于数据储存Set：
（1）成员不能重复
（2）只有键值没有键名，类似数组
（3）可以遍历，方法有add, delete,has
Map:
（1）本质上是健值对的集合，类似集合
（2）可以遍历，可以跟各种数据格式转换
13、下面Set结构，打印出的size值是多少
let s = newSet(); s.add([1]); s.add([1]); console.log(s.size);

答案：2
两个数组[1]并不是同一个值，它们分别定义的数组，在内存中分别对应着不同的存储地址，因此并不是相同的值都能存储到Set结构中，所以size为2
16、如何使用Set实现数组的过滤去重
let arr = [12,43,23,43,68,12]; let item = [...new Set(arr)]; console.log(item); //[12, 43, 23, 68]


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 + ')'; } }

3，说说你对Promise的理解
Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件监听——更合理和更强大。Promise 有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。但是无法获取到pending状态，在promise中接受两个内置参数分别是resolve（成功）和reject（失败），Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。then方法可以传递两个回调函数第一个是成功，第二个是失败，失败回调也可以使用promise的catch方法回调，promise还有一个强大的功能那就是all方法可以组合多个promise实例，包装成一个新的 Promise 实例。
Promise用来解决异步回调问题，由于js是单线程的，很多异步操作都是依靠回调方法实现的，这种做法在逻辑比较复杂的回调嵌套中会相当复杂；也叫做回调地狱；promise用来将这种繁杂的做法简化，让程序更具备可读性，可维护性；
promise内部有三种状态，pedding，fulfilled，rejected；pedding表示程序正在执行但未得到结果，即异步操作没有执行完毕，fulfilled表示程序执行完毕，且执行成功，rejected表示执行完毕但失败；这里的成功和失败都是逻辑意义上的；并非是要报错。
其实，promise和回调函数一样，都是要解决数据的传递和消息发送问题，promise中的then一般对应成功后的数据处理，catch一般对应失败后的数据处理。
4，介绍一下async和await；
async 会将其后的函数（函数表达式或 Lambda）的返回值封装成一个 Promise 对象，而 await 会等待这个 Promise 完成，并将其 resolve 的结果返回出来。
async / await是ES7的重要特性之一，也是目前社区里公认的优秀异步解决方案。目前async / await 在 IE edge中已经可以直接使用了，但是chrome和Node.js还没有支持。幸运的是，babel已经支持async的transform了，所以我们使用的时候引入babel就行。在开始之前我们需要引入以下的package，preset-stage-3里就有我们需要的async/await的编译文件。
6、谈谈你对async/await的理解
async...await是基于promise的generator语法糖，它用来等待promise的执行结果，常规函数使用await没有效果；
async修饰的函数内部return不会得到预期的结果，会得到一个promise对象；
await等待的promise结果是resolve状态的内容，await 可以阻塞后面代码的执行，reject状态的内容需要使用try...catch获取，
await关键字必须要出现在async修饰的函数中，否则报错。

18、理解 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() 方法进行调用


7、Promise构造函数是同步执行还是异步执行，那么 then 方法呢？
promise构造函数是同步执行的，then方法是异步执行的
8、setTimeout、Promise、Async/Await 的区别
事件循环中分为宏任务队列和微任务队列
其中setTimeout的回调函数放到宏任务队列里，等到执行栈清空以后执行promise.then里的回调函数会放到相应宏任务的微任务队列里，等宏任务里面的同步代码执行完再执行async函数表示函数里面可能会有异步方法，await后面跟一个表达式
async方法执行时，遇到await会立即执行表达式，然后把表达式后面的代码放到微任务队列里，让出执行栈让同步代码先执行
9、promise有几种状态，什么时候会进入catch？
三个状态：
pending、fulfilled、reject
两个过程：
padding -> fulfilled、padding -> rejected当pending为rejectd时，会进入catch
10、Promise下面的输出结果是多少
const promise = new Promise((resolve, reject) => { console.log(1); resolve(); console.log(2); })promise.then(() => { console.log(3); })console.log(4);

Promise 新建后立即执行，所以会先输出 1，2，而 Promise.then()内部的代码在 当次 事件循环的 结尾 立刻执行 ，所以会继续输出4，最后输出3
14、Promise 中reject 和 catch 处理上有什么区别
reject 是用来抛出异常，catch 是用来处理异常
reject 是 Promise 的方法，而 catch 是 Promise 实例的方法
reject后的东西，一定会进入then中的第二个回调，如果then中没有写第二个回调，则进入catch
网络异常（比如断网），会直接进入catch而不会进入then的第二个回调
15、使用class 手写一个promise
//创建一个Promise的类 class Promise{ constructor(executer){//构造函数constructor里面是个执行器 this.status = 'pending'; //默认的状态 pending this.value = https://www.it610.com/article/undefined//成功的值默认undefined this.reason = undefined//失败的值默认undefined //状态只有在pending时候才能改变 let resolveFn = value =>{ //判断只有等待时才能resolve成功 if(this.status == pending){ this.status = 'resolve'; this.value = https://www.it610.com/article/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); } } }

手写Promise（简写）
var p = new Promise((resolve,reject)={
if(1){
resolve(‘成功’)
}
else{
reject(‘失败’);
}
})
p.then((res)=>{}).catch((err)=>{})
11、使用解构赋值，实现两个变量的值的交换
let a = 1; let b = 2; [a,b] = [b,a];

使用解构赋值，完成函数的参数默认值（编程题）
functiondemo({name="纵有千般好"}){ console.log(name); }

12、设计一个对象，键名的类型至少包含一个symbol类型，并且实现遍历所有key
let name = Symbol('name'); let product = { [name]:"洗衣机", "price":799 }; Reflect.ownKeys(product);


7、将下面for循环改成for of形式
let arr = [11,22,33,44,55]; let sum = 0; for(let i=0; i

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

19、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';

7、class中的super有哪些用法
Super在类中有两种用法，一个是super方法，一个是super对象；
super方法只能出现在constructor方法中，
super对象一般出现在子类覆盖父类的方法中。
8、静态和成员的区别
静态的变量或方法归类所有，全局独一份，
成员的变量或方法归对象所有，每次实例化对象成员方法和成员变量就会得到一份拷贝；
对于一些通用性的属性或方法，可以考虑设置为静态。
10、深拷贝的原理
Js的深拷贝发生在对象的赋值上，对象赋值的时候仅仅是一个引用赋值，也就是说两个不同变量名指向的是同一份内存空间；基本数据类型则不存在这样的行为；要完成对象的深拷贝需要使用递归遍历所有对象的属性进行赋值，也可以使用JSON.stringfy和JSON.parse操作。

1，说说对es6的理解（说一下es6，知道es6吗）
语法糖(箭头函数，类的定义，继承)，以及一些新的扩展（数组，字符串，对象，方法等），对作用域的重新定义，以及异步编程的解决方案（promise，async，await）、解构赋值的出现
2，ES6常用特性
变量定义(let和const,可变与不可变，const定义对象的特殊情况)
解构赋值
模板字符串
数组新API(例：Array.from(),entries(),values(),keys())
箭头函数(rest参数，扩展运算符，::绑定this)
Set和Map数据结构(set实例成员值唯一存储key值，map实例存储键值对(key-value))
Promise对象(前端异步解决方案进化史，generator函数，async函数)
Class语法糖(super关键字)

5，es6中的Module
ES6 中模块化语法更加简洁，使用export抛出，使用import from 接收，
如果只是输出一个唯一的对象，使用export default即可
// 创建 util1.js 文件，内容如
export default {undefined
a: 100
}
// 创建 index.js 文件，内容如
import obj from './util1.js’
如果想要输出许多个对象，就不能用default了，且import时候要加{...}，代码如下
// 创建 util2.js 文件，内容如
export function fn1() {undefined
alert('fn1')
}
export function fn2() {undefined
alert('fn2')
}
// 创建 index.js 文件，内容如
import { fn1, fn2 } from './util2.js’
6，ES6 class 和普通构造函数的区别
class 其实一直是 JS 的关键字（保留字），但是一直没有正式使用，直到 ES6 。 ES6 的 class 就是取代之前构造函数初始化对象的形式，从语法上更加符合面向对象的写法
1. class 是一种新的语法形式，是class Name {...}这种形式，和函数的写法完全不一样?
2. 两者对比，构造函数函数体的内容要放在 class 中的constructor函数中，constructor即构造器，初始化实例时默认执行 ?
3. class 中函数的写法是add() {...}这种形式，并没有function关键字 ?
而且使用 class 来实现继承就更加简单了
在class中直接extends关键字就可以实现继承，而不像之前的继承实现有多种不同的实现方式，在es6中就只有一种
注意以下两点：
使用extends即可实现继承，更加符合经典面向对象语言的写法，如 Java
子类的constructor一定要执行super()，以调用父类的constructor


===========
问：举一些ES6对String字符串类型做的常用升级优化?
答：
1、优化部分：
ES6新增了字符串模板，在拼接大段字符串时，用反斜杠(`)取代以往的字符串相加的形式，能保留所有空格和换行，使得字符串拼接看起来更加直观，更加优雅。
【前端面试题|JavaScript前端经典面试题之ES6面试题汇总es6】2、升级部分:
ES6在String原型上新增了includes()方法，用于取代传统的只能用indexOf查找包含字符的方法(indexOf返回-1表示没查到不如includes方法返回false更明确，语义更清晰), 此外还新增了startsWith(), endsWith(), padStart(),padEnd(),repeat()等方法，可方便的用于查找，补全字符串。
六、问：举一些ES6对Array数组类型做的常用升级优化?
答：
1、优化部分：
a. 数组解构赋值。ES6可以直接以let [a,b,c] = [1,2,3]形式进行变量赋值，在声明较多变量时，不用再写很多let(var),且映射关系清晰，且支持赋默认值。
b. 扩展运算符。ES6新增的扩展运算符(...)(重要),可以轻松的实现数组和松散序列的相互转化，可以取代arguments对象和apply方法，轻松获取未知参数个数情况下的参数集合。（尤其是在ES5中，arguments并不是一个真正的数组，而是一个类数组的对象，但是扩展运算符的逆运算却可以返回一个真正的数组）。扩展运算符还可以轻松方便的实现数组的复制和解构赋值（let a = [2,3,4]; let b = [...a]）。
2、升级部分:
ES6在Array原型上新增了find()方法，用于取代传统的只能用indexOf查找包含数组项目的方法,且修复了indexOf查找不到NaN的bug([NaN].indexOf(NaN) === -1).此外还新增了copyWithin(), includes(), fill(),flat()等方法，可方便的用于字符串的查找，补全,转换等。
七、问：举一些ES6对Number数字类型做的常用升级优化?
答：
1、优化部分：
ES6在Number原型上新增了isFinite(), isNaN()方法，用来取代传统的全局isFinite(), isNaN()方法检测数值是否有限、是否是NaN。ES5的isFinite(), isNaN()方法都会先将非数值类型的参数转化为Number类型再做判断，这其实是不合理的，最造成isNaN('NaN') === true的奇怪行为--'NaN'是一个字符串，但是isNaN却说这就是NaN。而Number.isFinite()和Number.isNaN()则不会有此类问题(Number.isNaN('NaN') === false)。（isFinite()同上）
2、升级部分:
ES6在Math对象上新增了Math.cbrt()，trunc()，hypot()等等较多的科学计数法运算方法，可以更加全面的进行立方根、求和立方根等等科学计算。
八、问：举一些ES6对Object类型做的常用升级优化?(重要)
答：
1、优化部分：
a. 对象属性变量式声明。ES6可以直接以变量形式声明对象属性或者方法，。比传统的键值对形式声明更加简洁，更加方便，语义更加清晰。
let [apple, orange] = ['red appe', 'yellow orange']; let myFruits = {apple, orange}; // let myFruits = {apple: 'red appe', orange: 'yellow orange'}; 复制代码

尤其在对象解构赋值(见优化部分b.)或者模块输出变量时，这种写法的好处体现的最为明显:
let {keys, values, entries} = Object; let MyOwnMethods = {keys, values, entries}; // let MyOwnMethods = {keys: keys, values: values, entries: entries} 复制代码

可以看到属性变量式声明属性看起来更加简洁明了。方法也可以采用简洁写法：
let es5Fun = { method: function(){} }; let es6Fun = { method(){} } 复制代码

b. 对象的解构赋值。 ES6对象也可以像数组解构赋值那样，进行变量的解构赋值：
let {apple, orange} = {apple: 'red appe', orange: 'yellow orange'}; 复制代码

c. 对象的扩展运算符(...)。 ES6对象的扩展运算符和数组扩展运算符用法本质上差别不大，毕竟数组也就是特殊的对象。对象的扩展运算符一个最最常用也最好用的用处就在于可以轻松的取出一个目标对象内部全部或者部分的可遍历属性，从而进行对象的合并和分解。
let {apple, orange, ...otherFruits} = {apple: 'red apple', orange: 'yellow orange', grape: 'purple grape', peach: 'sweet peach'}; // otherFruits {grape: 'purple grape', peach: 'sweet peach'} // 注意: 对象的扩展运算符用在解构赋值时，扩展运算符只能用在最有一个参数(otherFruits后面不能再跟其他参数) let moreFruits = {watermelon: 'nice watermelon'}; let allFruits = {apple, orange, ...otherFruits, ...moreFruits}; 复制代码

d. super 关键字。ES6在Class类里新增了类似this的关键字super。同this总是指向当前函数所在的对象不同，super关键字总是指向当前函数所在对象的原型对象。
2、升级部分:
a. ES6在Object原型上新增了is()方法，做两个目标对象的相等比较，用来完善'==='方法。'==='方法中NaN === NaN //false其实是不合理的，Object.is修复了这个小bug。(Object.is(NaN, NaN) // true)
b. ES6在Object原型上新增了assign()方法，用于对象新增属性或者多个对象合并。
const target = { a: 1 }; const source1 = { b: 2 }; const source2 = { c: 3 }; Object.assign(target, source1, source2); target // {a:1, b:2, c:3} 复制代码

注意: assign合并的对象target只能合并source1、source2中的自身属性，并不会合并source1、source2中的继承属性，也不会合并不可枚举的属性，且无法正确复制get和set属性（会直接执行get/set函数，取return的值）。
c. ES6在Object原型上新增了getOwnPropertyDeｓｃｒｉｐｔors()方法，此方法增强了ES5中getOwnPropertyDeｓｃｒｉｐｔor()方法，可以获取指定对象所有自身属性的描述对象。结合defineProperties()方法，可以完美复制对象，包括复制get和set属性。
d. ES6在Object原型上新增了getPrototypeOf()和setPrototypeOf()方法，用来获取或设置当前对象的prototype对象。这个方法存在的意义在于，ES5中获取设置prototype对像是通过__proto__属性来实现的，然而__proto__属性并不是ES规范中的明文规定的属性，只是浏览器各大产商“私自”加上去的属性，只不过因为适用范围广而被默认使用了，再非浏览器环境中并不一定就可以使用，所以为了稳妥起见，获取或设置当前对象的prototype对象时，都应该采用ES6新增的标准用法。
d. ES6在Object原型上还新增了Object.keys()，Object.values()，Object.entries()方法，用来获取对象的所有键、所有值和所有键值对数组。
九、问：举一些ES6对Function函数类型做的常用升级优化?(重要)
答：
1、优化部分：
a. 箭头函数(核心)。箭头函数是ES6核心的升级项之一，箭头函数里没有自己的this,这改变了以往JS函数中最让人难以理解的this运行机制。主要优化点:
Ⅰ.箭头函数内的this指向的是函数定义时所在的对象，而不是函数执行时所在的对象。ES5函数里的this总是指向函数执行时所在的对象，这使得在很多情况下this的指向变得很难理解，尤其是非严格模式情况下，this有时候会指向全局对象，这甚至也可以归结为语言层面的bug之一。ES6的箭头函数优化了这一点，它的内部没有自己的this,这也就导致了this总是指向上一层的this，如果上一层还是箭头函数，则继续向上指，直到指向到有自己this的函数为止，并作为自己的this。
Ⅱ.箭头函数不能用作构造函数，因为它没有自己的this，无法实例化。
Ⅲ.也是因为箭头函数没有自己的this,所以箭头函数 内也不存在arguments对象。（可以用扩展运算符代替）
b. 函数默认赋值。ES6之前，函数的形参是无法给默认值得，只能在函数内部通过变通方法实现。ES6以更简洁更明确的方式进行函数默认赋值。
function es6Fuc (x, y = 'default') { console.log(x, y); } es6Fuc(4) // 4, default 复制代码

2、升级部分:
ES6新增了双冒号运算符，用来取代以往的bind，call,和apply。
foo::bar; // 等同于 bar.bind(foo); foo::bar(...arguments); // 等同于 bar.apply(foo, arguments); 复制代码

十、问：Symbol是什么，有什么作用？
答： Symbol是ES6引入的第七种原始数据类型（说法不准确，应该是第七种数据类型，Object不是原始数据类型之一，已更正），所有Symbol()生成的值都是独一无二的，可以从根本上解决对象属性太多导致属性名冲突覆盖的问题。对象中Symbol()属性不能被for...in遍历，但是也不是私有属性。
十一、问：Set是什么，有什么作用？
答： Set是ES6引入的一种类似Array的新的数据结构，Set实例的成员类似于数组item成员，区别是Set实例的成员都是唯一，不重复的。这个特性可以轻松地实现数组去重。
十二、问：Map是什么，有什么作用？
答： Map是ES6引入的一种类似Object的新的数据结构，Map可以理解为是Object的超集，打破了以传统键值对形式定义对象，对象的key不再局限于字符串，也可以是Object。可以更加全面的描述对象的属性。
十三、问：Proxy是什么，有什么作用？
答： Proxy是ES6新增的一个构造函数，可以理解为JS语言的一个代理，用来改变JS默认的一些语言行为，包括拦截默认的get/set等底层方法，使得JS的使用自由度更高，可以最大限度的满足开发者的需求。比如通过拦截对象的get/set方法，可以轻松地定制自己想要的key或者value。下面的例子可以看到，随便定义一个myOwnObj的key,都可以变成自己想要的函数。
function createMyOwnObj() { //想把所有的key都变成函数，或者Promise,或者anything return new Proxy({}, { get(target, propKey, receiver) { return new Promise((resolve, reject) => { setTimeout(() => { let randomBoolean = Math.random() > 0.5; let Message; if (randomBoolean) { Message = `你的${propKey}运气不错，成功了`; resolve(Message); } else { Message = `你的${propKey}运气不行，失败了`; reject(Message); } }, 1000); }); } }); } let myOwnObj = createMyOwnObj(); myOwnObj.hahaha.then(result => { console.log(result) //你的hahaha运气不错，成功了 }).catch(error => { console.log(error) //你的hahaha运气不行，失败了 }) myOwnObj.wuwuwu.then(result => { console.log(result) //你的wuwuwu运气不错，成功了 }).catch(error => { console.log(error) //你的wuwuwu运气不行，失败了 }) 复制代码

十四、问：Reflect是什么，有什么作用？
答： Reflect是ES6引入的一个新的对象，他的主要作用有两点，一是将原生的一些零散分布在Object、Function或者全局函数里的方法(如apply、delete、get、set等等)，统一整合到Reflect上，这样可以更加方便更加统一的管理一些原生API。其次就是因为Proxy可以改写默认的原生API，如果一旦原生API别改写可能就找不到了，所以Reflect也可以起到备份原生API的作用，使得即使原生API被改写了之后，也可以在被改写之后的API用上默认的API。
十五、问：Promise是什么，有什么作用？
答： Promise是ES6引入的一个新的对象，他的主要作用是用来解决JS异步机制里，回调机制产生的“回调地狱”。它并不是什么突破性的API，只是封装了异步回调形式，使得异步回调可以写的更加优雅，可读性更高，而且可以链式调用。
十六、问：Iterator是什么，有什么作用？(重要)
答： Iterator是ES6中一个很重要概念，它并不是对象，也不是任何一种数据类型。因为ES6新增了Set、Map类型，他们和Array、Object类型很像，Array、Object都是可以遍历的，但是Set、Map都不能用for循环遍历，解决这个问题有两种方案，一种是为Set、Map单独新增一个用来遍历的API，另一种是为Set、Map、Array、Object新增一个统一的遍历API，显然，第二种更好，ES6也就顺其自然的需要一种设计标准，来统一所有可遍历类型的遍历方式。Iterator正是这样一种标准。或者说是一种规范理念。
就好像Javaｓｃｒｉｐｔ是ECMAｓｃｒｉｐｔ标准的一种具体实现一样，Iterator标准的具体实现是Iterator遍历器。Iterator标准规定，所有部署了key值为[Symbol.iterator]，且[Symbol.iterator]的value是标准的Iterator接口函数(标准的Iterator接口函数: 该函数必须返回一个对象，且对象中包含next方法，且执行next()能返回包含value/done属性的Iterator对象)的对象，都称之为可遍历对象，next()后返回的Iterator对象也就是Iterator遍历器。
//obj就是可遍历的，因为它遵循了Iterator标准，且包含[Symbol.iterator]方法，方法函数也符合标准的Iterator接口规范。 //obj.[Symbol.iterator]() 就是Iterator遍历器 let obj = { data: [ 'hello', 'world' ], [Symbol.iterator]() { const self = this; let index = 0; return { next() { if (index < self.data.length) { return { value: self.data[index++], done: false }; } else { return { value: undefined, done: true }; } } }; } }; 复制代码

ES6给Set、Map、Array、String都加上了[Symbol.iterator]方法，且[Symbol.iterator]方法函数也符合标准的Iterator接口规范，所以Set、Map、Array、String默认都是可以遍历的。
//Array let array = ['red', 'green', 'blue']; array[Symbol.iterator]() //Iterator遍历器 array[Symbol.iterator]().next() //{value: "red", done: false} //String let string = '1122334455'; string[Symbol.iterator]() //Iterator遍历器 string[Symbol.iterator]().next() //{value: "1", done: false} //set let set = new Set(['red', 'green', 'blue']); set[Symbol.iterator]() //Iterator遍历器 set[Symbol.iterator]().next() //{value: "red", done: false} //Map let map = new Map(); let obj= {map: 'map'}; map.set(obj, 'mapValue'); map[Symbol.iterator]().next() {value: Array(2), done: false} 复制代码

十七、问：for...in 和for...of有什么区别？
答： 如果看到问题十六，那么就很好回答。问题十六提到了ES6统一了遍历标准，制定了可遍历对象，那么用什么方法去遍历呢？答案就是用for...of。ES6规定，有所部署了载了Iterator接口的对象(可遍历对象)都可以通过for...of去遍历，而for..in仅仅可以遍历对象。
这也就意味着，数组也可以用for...of遍历，这极大地方便了数组的取值，且避免了很多程序用for..in去遍历数组的恶习。
上面提到的扩展运算符本质上也就是for..of循环的一种实现。
十八、Generator函数是什么，有什么作用？
答： 如果说Javaｓｃｒｉｐｔ是ECMAｓｃｒｉｐｔ标准的一种具体实现、Iterator遍历器是Iterator的具体实现，那么Generator函数可以说是Iterator接口的具体实现方式。
执行Generator函数会返回一个遍历器对象，每一次Generator函数里面的yield都相当一次遍历器对象的next()方法，并且可以通过next(value)方法传入自定义的value,来改变Generator函数的行为。
Generator函数可以通过配合Thunk 函数更轻松更优雅的实现异步编程和控制流管理。
十九、async函数是什么，有什么作用？
答： async函数可以理解为内置自动执行器的Generator函数语法糖，它配合ES6的Promise近乎完美的实现了异步编程解决方案。
二十、Class、extends是什么，有什么作用？
答： ES6 的class可以看作只是一个ES5生成实例对象的构造函数的语法糖。它参考了java语言，定义了一个类的概念，让对象原型写法更加清晰，对象实例化更像是一种面向对象编程。Class类可以通过extends实现继承。它和ES5构造函数的不同点：
a. 类的内部定义的所有方法，都是不可枚举的。
///ES5 function ES5Fun (x, y) { this.x = x; this.y = y; } ES5Fun.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')'; } var p = new ES5Fun(1, 3); p.toString(); Object.keys(ES5Fun.prototype); //['toString'] //ES6 class ES6Fun { constructor (x, y) { this.x = x; this.y = y; } toString () { return '(' + this.x + ', ' + this.y + ')'; } } Object.keys(ES6Fun.prototype); //[] 复制代码

b.ES6的class类必须用new命令操作，而ES5的构造函数不用new也可以执行。
c.ES6的class类不存在变量提升，必须先定义class之后才能实例化，不像ES5中可以将构造函数写在实例化之后。
d.ES5 的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面。ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。
二十一、module、export、import是什么，有什么作用？
答： module、export、import是ES6用来统一前端模块化方案的设计思路和实现方案。export、import的出现统一了前端模块化的实现方案，整合规范了浏览器/服务端的模块化方法，用来取代传统的AMD/CMD、requireJS、seaJS、commondJS等等一系列前端模块不同的实现方案，使前端模块化更加统一规范，JS也能更加能实现大型的应用程序开发。
import引入的模块是静态加载（编译阶段加载）而不是动态加载（运行时加载）。
import引入export导出的接口值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。
二十二、日常前端代码开发中，有哪些值得用ES6去改进的编程优化或者规范？
答：
1、常用箭头函数来取代var self = this; 的做法。
2、常用let取代var命令。
3、常用数组/对象的结构赋值来命名变量，结构更清晰，语义更明确，可读性更好。
4、在长字符串多变量组合场合，用模板字符串来取代字符串累加，能取得更好地效果和阅读体验。
5、用Class类取代传统的构造函数，来生成实例化对象。
6、在大型应用开发中，要保持module模块化开发思维，分清模块之间的关系，常用import、export方法。





参考资料：
ES6常见面试题总结 - 知乎大家好，我是小蔡，上周跟大家分享了Html5常见面试题总结的知识，今天跟大家分享下ES6常见面试题总结的知识。 1、es5和es6的区别，说一下你所知道的es6ECMAScript5，即ES5，是ECMAScript的第五次修订，于2009年完…前端面试题|JavaScript前端经典面试题之ES6面试题汇总es6
文章图片
https://zhuanlan.zhihu.com/p/102442557
JS面试题总结(含ES6)_竹春的博客-CSDN博客_es6面试题部分内容来源于网络主要内容包括：数据类型，变量和常量，数组和常用方法，本地存储，关于异步处理：Generator async promise 的区别，关于ES6兼容与优化数据类型1，介绍js的基本数据类型。 Undefined、Null、Boolean、Number、String2，类型判断用到哪些方法？typeoftypeof xxx...https://blog.csdn.net/cmy0816/article/details/81291766
ES6常见面试题 - 知乎1、let和var的区别 let：没有变量提升过程，必须先声明再使用 存在暂时性死区 不能重复声明，但是可以重新赋值 拥有块级作用域 var： 是全局变量，存在变量提升过程，可以先使用在声明 可以重复声明 2、箭头函数有…前端面试题|JavaScript前端经典面试题之ES6面试题汇总es6
文章图片
https://zhuanlan.zhihu.com/p/270002133

ES6经典面试题_缘飞梦的博客-CSDN博客一、问：ES6是什么，为什么要学习它，不学习ES6会怎么样?答： ES6是新一代的JS语言标准，对分JS语言核心内容做了升级优化，规范了JS使用标准，新增了JS原生方法，使得JS使用更加规范，更加优雅，更适合大型应用的开发。学习ES6是成为专业前端正规军的必经之路。不学习ES6也可以写代码打鬼子，但是最多只能当个游击队长。二、问：ES5、ES6和ES2015有什么区别?答： ES20...https://blog.csdn.net/qq_37481512/article/details/105101297




    推荐阅读


    上一篇：时光消散不去的身影

    下一篇：JavaScript高级语法|ES6——class类实现继承