「2022」打算跳槽涨薪,必问面试题及答案 -- ECMAScript 篇
阅读原文时间:2022年02月11日阅读:2

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

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

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

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

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

它们之间的区别有:

  • 箭头函数不能当做构造函数,不能使用 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)

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

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

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

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

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

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

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

它两之间的区别:

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

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 。

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

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

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 属性。

为什么 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 ) )

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 )

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

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

for…in 不仅可以遍历数组,还可以对象。

for…of 进行遍历数组的。

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

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"

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

对于Set:

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

对于Map:

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

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


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

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

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

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

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);

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

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

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

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

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器

你可能感兴趣的文章