标签：面试题 必问 console log -- name Promise showName 函数

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

 

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、前端领域内，你比较擅长什么？

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

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

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

标签：面试题,必问,console,log,--,name,Promise,showName,函数
来源： https://www.cnblogs.com/web-learn/p/15881875.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。