「2022」打算跳槽涨薪，必问面试题及答案 -- ECMAScript 篇

起点低怕什么，大不了加倍努力。人生就像一场马拉松比赛，拼的不是起点，而是坚持的耐力和成长的速度。只要努力不止，进步也会不止。

1、ECMAScript 与 JavaScript 的关系？

ECMA（European Computer Manufacturers Association）欧洲计算机协会，研究的 JavaScript 语言语法规范，这个东西名称就叫做 ECMAScript 。

JavaScript 是 ECMAScript 的一种实现，完整的 JavaScript 由以下三部分组成：

• ECMAScript：核心
• DOM：文档对象模型
• BOM：浏览器对象模型

2、var、let 和 const 定义变量，它们之间的区别。

var 与 let 和 const 区别总结：

var	let	const
可以重复定义	不能重复定义	不能重复定义
是变量，不能限制修改	是变量	只读常量，初始化时必须赋值
没有块级作用域	块级作用域，不能跨块访问	块级作用域，不能跨块访问
声明变量被提升，能引用	不会被初始化，不能引用	不会被初始化，不能引用

相关面试题：

var result = new Array();
for (var i=0; i<10; i++) {
 result[i] = function() {
  return i;
 }
}
console.log(result[0]())  //10

3、箭头函数与普通函数的区别？

它们之间的区别有：

• 箭头函数不能当做构造函数，不能使用 new 。
• 箭头函数没有原型对象。
• 箭头函数无法使用 arguments 对象，取而代之的是 rest 参数
• 箭头函数体内的 this 指向取决于外部代码块的 this。
• 箭头函数不可以当做 generator 函数，不能使用 yeild 关键字。

注意点：箭头函数的 this 永远指向其上下文的 this ，任何方法都改变了其指向，如： call() 、apply() 、apply()

相关面试题：

var name="window name"
var obj = {
 name:'obj name',
 showName:()=>{
  console.log(this.name) //运行结果 window name
 }
}
obj.showName.call(obj)

4、如果 new 一个箭头函数会怎么样？

我们说箭头函数不能当做构造函数，它没有 prototype ，也没有自己的 this 指向，不可以使用 arguments 参数，所以不能使用 new 。

new 操作符具体做了些什么？

• 创建了一个空对象。
• 将空对象的原型，指向构造函数的原型。
• 将空对象作为构造函数的上下文。
• 对构造函数的返回值进行处理判断，返回一个新的对象

所以上面的 第二步和第三步，箭头函数是无法执行的。

5、什么是 Promise 对象？什么是 Promise/A+ 规范？

Promise 对象是异步编程的一种解决方案，最早由社区提出。

Promises/A+ 规范是 JavaScript Promise 的标准，规定了一个Promise 所必须具有的特性。

Promise 是一个构造函数，接收一个函数作为参数，返回一个Promise 实例。一个 Promise实例有三种状态，分别是 pending、resolved 和 rejected，分别代表了进行中、已成功和已失败。实例的状态只能由 pending 转变 resolved 或者 rejected 状态，并且状态一经改变，就凝固了，无法再被改变了。状态的改变是通过 resolve() 和 reject() 函数来实现的，我们可以在异步操作结束后调用这两个函数改变 Promise 实例的状态，它的原型上定义了一个 then 方法，使用这个 then 方法可以为两个状态的改变注册回调函数。这个回调函数属于微任务，会在本轮事件循环的末尾执行。

相关面试题

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
*/

6、ES6 中的 await 和 then 的区别？

Async / Await ，其中 await 关键字存在async函数表达式中，用于等待 Promise 对象，暂停执行，等到异步操作完成后，恢复 async 函数的执行并返回解析值。如果把 await 放在 asnyc 函数体外，会报语法错误。

new Promise().then()，其中 then 是原型上的一个方法，接收两个参数，第一个参数是Promise执行成功时的回调，第二个参数是Promise执行失败的回调，两个函数只会有一个被调用。

它两之间的区别：

• await 会暂停所在 async 函数的执行，而 Promise 的 then 会继续执行当前函数，对于堆栈来说，这个不同点非常关键。
• await 返回的直接是数据，而 then 返回的是方法，方法里面带有数据。
• async / await 基于 promise 实现的。

7、Symbol 类型的注意点。

Symbol 是一个新的原始数据类型，表示独一无二的值，它是 js 的第七种数据类型，类似于字符串的数据类型。

使用 Symbol 的注意点有：

• Symbol 函数前不能使用 new 命令，否则会报错。
• Symbol 函数可以接受一个字符串作为参数，表示对 Symbol 实例的描述，主要是为了在控制台显示，或者转为字符串时，比较容易区分。
• Symbol 作为属性名，该属性不会出现在 for...in、for...of 循环中，也不会被 Object.keys()、Object.getOwnPropertyNames()、JSON.stringify() 返回。
• Object.getOwnPropertySymbols 方法找到对象的所有属性名的 Symbol 值，作为数组返回。
• Symbol.keyFor 方法返回一个已登记的 Symbol 类型值的 key 。

8、Set 和 weakSet 结构

ES6 提供了新的数据结构 Set，它类似于数组，但是成员的值都是唯一的，会通过 Object.is 方法自动去重。

WeakSet 结构与 Set 结构类似，也是不重复的集合。但是 WeakSet 的成员只能是对象，不能是其他类型的值，WeakSet 中的对象都是弱引用，因此能够被垃圾回收自动清理。

9、Object.assign 和扩展运算法是深拷贝还是浅拷贝，两个区别？

Object.assign 使用：

let outObj = {
 a:1,
 b:2
}
let newObj = Object.assign({},outObj)
newObj.a = 3;
console.log(newObj) //{a: 3, b: 2}

扩展运算符：

let outObj = {
 a:1,
 b:2
}
let newObj = { ...outObj }
newObj.a = 3;
console.log(newObj) //{a: 3, b: 2}

Object.assign 和 扩展运算 都是浅拷贝。

Object.assign 方法接收的第一个参数作为目标对象，后面的对象作为源对象，然后把所有源对象合并到目标对象中，它会修改目标对象，因此会触发 setter 。

扩展运算符 ... 使用时，数组或对象中的每一个值都会被拷贝到一个新的数组或对象中，它不复制继承的属性或类的属性，但它会复制 ES6 的 Symbols 属性。

10、如何实现 0.1+0.2 == 0.3 结果返回真？

为什么 0.1+0.2 != 0.3 ?

JS 中采用的 IEEE754 的双精度标准，计算机内部存储数据的编码时，0.1 在计算机内部根本不是精确的 0.1，而是有舍入误差的。

console.log(0.1+0.2) // 0.30000000000000004

正是有舍入，所以我们发现 0.1+0.2 并不等于0.3。

如何解决？

Number.EPSILON 是 javaScript 表示的最小精度，这个值就相当于 2 的 -52 次方。

console.log( Number.EPSILON ) // 2.220446049250313e-16
console.log( Number.EPSILON === Math.pow(2, -52) ) //true

引入 Number.EPSILON 目的在于：浮点计算时，设置一个误差范围，如果小于这个值就忽略不计。所以：

function isEqual( a, b ){
 if( a-b < Number.EPSILON ){
  return true
 }else{
  return false
 }
}
console.log( isEqual( 0.1+0.2, 0.3 ) )

11、ECMAScript 6 怎么写 class ，为何会出现 class？

ES6 中新增 class ，它是为了补充 js 中缺少的一些面向对象语言的特性，本质上来说它只是一种语法糖，它的绝大多数功能 ES5 都可以实现，新的 class 写法让对象原型写法更清晰。添加 class 之后，有利于我们更好的组织代码，在 class 中添加方法，其实就是添加到类的原型上。

class 应用：

class Phone{
 // 构造函数
 constructor( brand, price ){
  this.brand = brand;
  this.price = price
 },
 call(){
  console.log("可以打电话")
 }
}
// 实例化对象
let hw = new Phone( '华为', 999 )

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

setTimeout 是异步执行函数，js 主线程运行到此函数时，不会等待 setTimeout 中的回调函数，回调函数会被压进消息队列，然后直接向下执行，当执行完当前事件循环的时候，回调函数会在下次事件循环中被执行。

console.log(1)
setTimeout(()=>{
 console.log(2)
},0)
console.log(3)
// 运行结果：1 3 2

Promise 本身是同步的立即执行函数，当在执行体中执行 resolve 或 reject 的时候，此时是异步操作，会先执行 then / catch 等，等主栈完成后，才会执行 resolve reject 中的方法。

console.log(1)
var p =new Promise(( resolve, reject )=>{
 console.log(2)
 resolve(3)
})
p.then((res)=>{
 console.log(res)
})
console.log(4)
// 运行结果：1 2 4 3

Async/Await 函数返回的是一个 Promise 对象，当函数执行的时候，一旦遇到 await 就会先返回，等到触发的异步操作完成，在执行函数体后面的语句。

await的含义为等待，也就是 async 函数需要等待await后的函数执行完成并且有了返回结果（Promise对象）之后，才能继续执行下面的代码。await通过返回一个Promise对象来实现同步的效果。

async function a1(){
 console.log( 1 );
 await a2();
 console.log( 2 )
}
async function a2(){
 console.log( 3 )
}
console.log( 4 );
a1();
console.log( 5 )
// 运行结果 4 1 3 5 2

13、forEach、for in、for of 三者区别

forEach 是数组的方法，进行遍历数组的。

for...in 不仅可以遍历数组，还可以对象。

for...of 进行遍历数组的。

for...in 与 for... of 遍历对象时，in 使用的是下标，而 of 使用的是 key。

14、说一下 es 6 的导入导出模块

export 命令用于规范模块的对外接口。

import 命令用于输入其他模块提供的功能。

export 对外暴露数据方式有三种：

方式1：分别暴露

export let person = "前端小姐姐"
export function showName(){
 console.log( "倩倩" )
}

方式2：统一暴露

let person = "前端小姐姐"
function showName(){
 console.log( "倩倩" )
}
export {
 person,
 showName
}

方式3：默认暴露

export default{
 person = "前端小姐姐",
 showName: function(){
  console.log( "倩倩" )
 }
}

import 引入方式有三种：

方式1：通用的导入方式

import * as m from "./src/js/m.js"
console.log( "m",m )

方式2：解构赋值

import  { person, showName } from "./src/js/m.js"
// 重名时，可自定义名字
import  { person as per, showName } from "./src/js/m.js"
// 针对默认暴露也可以这么写
import  { default as m } from "./src/js/m.js"

方式3：简便形式，针对默认暴露

import m from "./src/js/m.js"

15、介绍下 Set、Map的区别 ?

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

对于Set：

• 成员不能重复。
• 只有键值没有键名，类似数组。
• 可以使用 for...of 遍历
• 方法有 size、add、delete、has、clear

对于Map：

• 键值对的集合，类似集合。
• 可以 for..of 遍历
• 方法有 size、set、delete、has、clear

---

光说理论是不是都要困了，现在是时候大展拳脚了！看看你对 ES 知识掌握到底怎么样？

---

16、写出下面代码运行结果。

new Promise((resolve)=>{
 console.log( 1 )
 resolve()
}).then(()=>{
  console.log( 2 )
  new Promise(res=>{
   res(1)
  }).then(()=>{
    console.log( 3 )
   new Promise(res=>{
    res(1)
   }).then(()=>{
    console.log( 4 )
   })
  }).then(()=>{
   new Promise(res=>{
   res(1)
  }).then(()=>{
  console.log( 5 )
  })
 })
}).then(()=>{
    console.log( 6 )
})
答案： 1 2 3 6 4 5

17、箭头函数中的 this 。请写出下面代码运行结果。

name = "单身狗"
setTimeout(()=>{
console.log(this.name)  //单身狗
},0)
function Job(){
 this.name = "漂亮小姐姐"
 setTimeout(()=>{
  console.log(`我是天天敲代码的 ${this.name} ！`) //漂亮小姐姐
 },3000)
}
let j = new Job()

箭头函数没有自己的 this ，它的 this 是继承而来的，默认指向在定义它时所处的对象。

18、写出下面代码运行结果。

var name = 'window name'
var p1 = {
 name:'p1 name',
 showName:function(){
  console.info(this.name)
 }
}
var fn = p1.showName
fn()
p1.showName()
var p2 = {
 name:'p2 name',
 showName:function(fun){
  fun()
 }
}
p2.showName(p1.showName)
p2.showName = p1.showName
p2.showName()
/*
运行结果：
window name
 p1 name
 window name
 p2 name
*/

19、箭头函数可以用call或者apply改变this指向吗？

call 和 apply 都是用来改变 this 指向的，它们会立即执行。

ES6 箭头函数的主要特性：

• 箭头函数没有自己的 this 对象，箭头函数内部的 this 是词法作用域，由上下文确定。this 在定义函数的时候已绑定，并非执行函数的时候。
• 箭头函数的 this 永远指向其父级作用域。
• 任何方法都改变不了 this ，包括 call、apply 和 bind。

试试下面这个练习，你就知道了。

const obj1 = {
 name:'张三',
}
const obj2 = {
 name:'李四',
 fun2 : function(){ //修改成箭头函数再试试
  console.log(this);
 }
}
obj2.fun2();
obj2.fun2.call(obj1);

尝试修改成箭头函数，然后再观察结果。

20、前端领域内，你比较擅长什么？

这个问题就留给读到最后，能够坚持学习的人，问问我们自己有什么是我们擅长的？在哪块领域是我们占据竞争优势的？

前端发展百花放，一技未熟百技出。未知何处去下手，关注小编胜百书。

愿你在前端的某一角能够深钻细研，能够拥有自己的竞争优势。