for...of 和 for...in

2、promise的使用，怎么用es5实现promise

function MyPromise(fn) {
  this.value;
  this.status = 'pending';
  this.resolveFunc = function() {};
  this.rejectFunc = function() {};
  fn(this.resolve.bind(this), this.reject.bind(this));
}

MyPromise.prototype.resolve = function(val) {
  var self = this;
  if (this.status == 'pending') {
    this.status = 'resolved';
    this.value=val;
    setTimeout(function() {
      self.resolveFunc(self.value);
    }, 0);
  }
}

MyPromise.prototype.reject = function(val) {
  var self = this;
  if (this.status == 'pending') {
    this.status = 'rejected';
    this.value=val;
    setTimeout(function() {
      self.rejectFunc(self.value);
    }, 0);
  }
}

MyPromise.prototype.then = function(resolveFunc, rejectFunc) {
  this.resolveFunc = resolveFunc;
  this.rejectFunc = rejectFunc;
}
链式调用：
MyPromise.prototype.then = function(resolveFunc, rejectFunc) {
  var self = this;
  return new MyPromise(function(resolve_next, reject_next) {
    function resolveFuncWrap() {
      var result = resolveFunc(self.value);
      resolve_next(result);
    }
    function rejectFuncWrap() {
      var result = rejectFunc(self.value);
      resolve_next(result);
    }

    self.resolveFunc = resolveFuncWrap;
    self.rejectFunc = rejectFuncWrap;
  })
}

参考对象：https://www.cnblogs.com/malingyang/p/6535805.html

3、if有作用域吗

只有函数有作用域，if是没有作用域的。
但是有一种情况会让if看上去有作用域，就是在if {}语句中，使用const、let，他们会有块级作用域。

4、原型链和作用域链的区别

（1）原型链
当访问一个对象的某个属性时，会先在这个对象本身的属性上找，
如果没有找到，会去这个属性的__proto__属性上找，即这个构造函数的prototype，
如果还没找到，就会继续在__proto__上查找，直到最顶层，找不到即为undefined。这样一层一层往上找，彷佛是一条链子串起来，所以叫做原型链。
（2）作用域链
变量取值会到创建这个变量的函数的作用域中取值，如果找不到，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链。

（3）区别
作用域是对变量而言，原型链是对于对象的属性而言
作用域链的顶层是window，原型链的顶层是Object

5、js判断类型

1、typeof检测不出null 和 数组，结果都为object，所以typeof常用于检测基本类型

2、instanceof不能检测出number、boolean、string、undefined、null、symbol类型，所以instancof常用于检测复杂类型以及级成关系
3、constructor
null、undefined没有construstor方法，因此constructor不能判断undefined和null。但是contructor的指向是可以被改变，所以不安全
4、Object.prototype.toString.call全类型都可以判断

6、数据类型怎么检测

1、typeof
例：console.log(typeof true) // boolean

2、instanceof
例：console.log([1,2] instanceof Array) // true

3、constructor
例： console.log([1, 2].constructor === Array) // ture

4、Object.prototype.toString.call
例：Object.prototype.toString.call([1, 2]) // [object Array]

7、普通函数和箭头函数的区别

1、普通函数
可以通过bind、call、apply改变this指向
可以使用new
2、箭头函数
本身没有this指向，
它的this在定义的时候继承自外层第一个普通函数的this
被继承的普通函数的this指向改变，箭头函数的this指向会跟着改变
箭头函数外层没有普通函数时，this指向window
不能通过bind、call、apply改变this指向
使用new调用箭头函数会报错，因为箭头函数没有constructor

8、如何用原生js给一个按钮绑定两个onclick事件？

var btn = document.getElementById('btn')
btn.addEventListener('click', fn1)
btn.addEventListener('click', fn2)

function fn1 () {
  console.log('我是方法1')  
}

function fn2 () {
  console.log('我是方法2')  
}

9、document.write和innerHTML的区别

document.write 将内容写入页面，清空替换掉原来的内容，会导致重绘
document.innerHTML 将内容写入某个Dom节点，不会重绘

10、栈和堆的区别

1、堆
动态分配内存，内存大小不一，也不会自动释放
2、栈
自动分配相对固定大小的内存空间，并由系统自动释放
3、基本类型都是存储在栈中，每种类型的数据占用的空间的大小是确定的，并由系统自动分配和释放。内存可以及时回收。
4、引用类型的数据都是存储在堆中。准确说是栈中会存储这些数据的地址指针，并指向堆中的具体数据。

11、undefined 和 null 区别

1、null
什么都没有，表示一个空对象引用（主动释放一个变量引用的兑现那个，表示一个变量不再指向任何引用地址）
2、undefined
没有设置值的变量，会自动赋值undefined
3、区别
typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true

12、eval()的作用

eval(string) 函数计算 JavaScript 字符串，并把它作为脚本代码来执行
如果参数是一个表达式，eval() 函数将执行表达式；
如果参数是Javascript语句，eval()将执行 Javascript 语句；
如果执行结果是一个值就返回，不是就返回undefined，如果参数不是一个字符串，则直接返回该参数。
特殊：eval("{b:2}") // 声明一个对象
　eval("（{b:2}）") // 返回对象{b:2}

13、JS哪些操作会造成内存泄露

内存泄漏是指一块被分配的内存既不能使用，也不能回收，直到浏览器进程结束。
1、意外的全局变量
2、闭包
3、没有清理的dom元素
dom元素赋值给变量，又通过removeChild移除dom元素。但是dom元素的引用还在内存中
4、被遗忘的定时器或者回调

14、谈谈垃圾回收机制方式及内存管理

JavaScript 在定义变量时就完成了内存分配。当不在使用变量了就会被回收，因为其开销比较大，垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。
（1）垃圾回收
标记清除法
当变量进入环境时，将这个变量标记为'进入环境'。当标记离开环境时，标记为‘离开环境’。离开环境的变量会被回收
引用技计数法
跟踪记录每个值被引用的次数，如果没有被引用，就会回收
（2）内存管理
内存分配=》内存使用=》内存回收

15、什么是闭包，如何使用它，为什么要使用它？

（1）闭包就是能够读取其它函数内部变量的函数
（2）使用方法：在一个函数内部创建另一个函数
（3）最大用处有两个：读取其他函数的变量值，让这些变量始终保存在内存中
（4）缺点：会引起内存泄漏（引用无法被销毁，一直存在）

16、请解释JSONP的工作原理，以及它为什么不是真正的AJAX

JSONP 是一种非正式传输协议，允许用户传递一个callback给服务端，
然后服务端返回数据时会将这个callback 参数作为函数名来包裹住 JSON 数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。
当GET请求从后台页面返回时，可以返回一段JavaScript代码，这段代码会自动执行，可以用来负责调用后台页面中的一个callback函数。
它们的实质不同
ajax的核心是通过xmlHttpRequest获取非本页内容
jsonp的核心是动态添加script标签调用服务器提供的js脚本
jsonp只支持get请求，ajax支持get和post请求

17、请解释一下JavaScript的同源策略

同源指协议，域名，端口相同，
同源策略是一种安全协议，指一段脚本只能读取来自同一来源的窗口和文档的属性。

18、关于JS事件冒泡与JS事件代理（事件委托）

（1）事件冒泡
当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window，过程就像冒泡泡 。
如果在某一层想要中止冒泡，使用 event.stopPropagation() 。
但是当大量标签大量事件的时候先然不可能为每个元素都加上事件，（事件绑定占用事件，浏览器要跟踪每个事件，占用更多内存。
而且并不是所有事件都会被用户使用到）。所以需要事件委托来解决这个问题。
（2）事件委托
将事件给最外层的元素，自己不实现逻辑，由最外层元素来代理。（判断事件源，做不同处理）

19、new操作符到底到了什么

（1）var obj = new Fun() 做了三件事

var obj  = {}  // 创建一个空对象
obj.__proto__ = Fun.prototype //空对象的__proto__指向构造函数的原型对象
Fun.call(obj) // 构造函数this指向替换成obj

（2）实现一个new
function _new(fn, ...arg) {
    const obj = Object.create(fn.prototype);
    const ret = fn.apply(obj, arg);
    // 根据规范，返回 null 和 undefined 不处理，依然返回obj，不能使用
    // typeof result === 'object' ? result : obj
    return ret instanceof Object ? ret : obj;
}

20、js延迟加载的方式有哪些？

（1）defer属性
<script src="test.js" defer="defer"></script>
立即下载，但是会等到整个页面都解析完成之后再执行
（2）async属性
<script src="test.js" async=""></script>
不让页面等待脚本下载和执行（异步下载），但是无法控制加载的顺序
（3）动态创建script标签
（4）使用定时器延迟
（5）让js最后加载

21、promise、async有什么区别

1、什么是Async/Await
async/await是写异步代码的新方式，使用的方式看起来像同步
async/await是基于Promise实现的，它不能用于普通的回调函数。
2、什么是promise
为了解决异步嵌套而产生，让代码更易于理解
区别，async/await让代码更像同步，进一步优化了代码

22、== 和 === 的区别，什么情况下用相等 ==

== 是判断转换后的值是否相等, 
=== 是判断值及类型是否完全相等
不需要判断类型时可以使用==

23、bind、call、apply的区别

var a = {
    user:"hahaha",
    fn:function(e,ee){
        console.log(this.user); //hahaha
        console.log(e+ee); //3
    }
}
var b = a.fn;
b.call(a);
b.apply(a);
b.call(a,1,2);
b.apply(a,[10,1]);

call,apply,bind方法一般用来指定this的环境
注意如果call和apply的第一个参数写的是null，那么this指向的是window对象
第一个参数是this指向的新环境
第二、三...个参数是传递给新环境的参数
小结： bind方法可以让函数想什么时候调用就什么时候调用。apply、call方法只是临时改变了this指向。

参考源

24、如何判断链表是否有环

第一种方法, 创建哈希表,不过会占用较大的空间,不是最佳方法.( 时间复杂度O(n) )
第二种方法: 给节点添加visited访问标记 (时间复杂度O(n)), 不需要额外的空间
第三种方法: 快慢指针法,设定快指针fast,慢指针slow,每次循环快指针fast移动两个位置,慢指针移动一个位置(时间复杂度 O(n)) 需要额外的空间

25、介绍暂时性死区

console.log(aVar) // undefined
console.log(aLet) // causes ReferenceError: aLet is not defined
var aVar = 1
let aLet = 2
在代码块内，使用let、const命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”。

26、两个对象如何比较

有思路即可，步骤：
（1）判断两个类型是否对象
（2）判断两个对象key的长度是否一致
（3）判断属性value值的数据类型，根据不同数据类型做比较
    a、是对象，重复这个步骤
    b、是数组，转字符串比较
    c、是基本类型，直接判断

27、介绍各种异步方案

（1）回调函数
（2）promise
（3）async/await

28、Promise和Async处理失败的时候有什么区别

（1）Promise错误可以在构造体里面被捕获，而async/await返回的是promise,可以通过catch直接捕获错误。
（2）await 后接的Promise.reject都必须被捕获，否则会中断执行

29、JS为什么要区分微任务和宏任务

（1）js是单线程的，但是分同步异步，
    Javascript 有一个 main thread 主线程和 call-stack 调用栈(执行栈)，所有的任务都会被放到调用栈等待主线程执行。
（2）微任务和宏任务皆为异步任务，它们都属于一个队列
（3）宏任务一般是：script，setTimeout，setInterval、setImmediate（浏览器暂时不支持，只有IE10支持，具体可见MDN）
（4）微任务：原生Promise、Process.nextTick（Node独有）、Object.observe(废弃)、MutationObserver
（5）遇到微任务，先执行微任务，执行完后如果没有微任务，就执行下一个宏任务，如果有微任务，就按顺序一个一个执行微任务
  注：宏任务的优先级高于微任务

详情参考

30、Promise和setTimeout执行先后的区别

Promise是微任务，
setTimeout是宏任务，
先执行setTimeout，遇到Promise，会先执行Promise，等同一个宏任务中的微任务执行完成，才执行下一个宏任务

31、单例、工厂、观察者项目中实际场景

单例模式：
  限制类实例化次数只能一次，一个类只有一个实例，并提供一个访问它的全局访问点
  有一些对象我们往往只需要一个，比如线程池、全局缓存、浏览器中的window对象等。在JavaScript开发中，
    单例模式的用途同样非常广泛。试想一下，当我们单击登录按钮的时候，页面中会出现一个登录浮窗，而这个登录浮窗是唯一的，
    无论单击多少次登录按钮，这个浮窗都只会被创建一次，那么这个登录浮窗用单例模式来创建
*   类只有一个实例
*   全局可访问该实例
*   自行实例化（主动实例化）
*   可推迟初始化，即延迟执行（与静态类/对象的区别）
工厂模式：
  当创建相似对象时执行重复操作
  当编译时不知道具体类型的情况下，为工厂客户提供一个创建对象的接口
  对象的构建十分复杂
  需要依赖具体环境创建不同实例
  处理大量具有相同属性的小对象
  不滥用运用工厂模式，有时候仅仅只是给代码增加了不必要的复杂度，同时使得测试难以运行下去
观察者模式优缺点：
目标者与观察者，功能耦合度降低，专注自身功能逻辑；
观察者被动接收更新，时间上解耦，实时接收目标者更新状态。

详情参考
 详情参考

32、添加原生事件不移除为什么会内存泄露

详情参考

33、setTimeout(0)和setTimeout(2)之间的区别

定时器表面意思是过指定时间后执行，但是真正的含义是每过指定时间后，会有fn进入事件队列
(1)setTimeout(fn,0)的含义是，指定某个任务在主线程最早可得的空闲时间执行，意思就是不用再等多少秒了，只要主线程执行栈内的同步任务全部执行完成，栈为空就马上执行
(2)setTimeout(fn,1) 1毫秒后执行，但是因为要先执行前面的宏任务，所以不一定就是在一毫秒后执行，取决于队列里任务执行的速度

34、for..in 和 object.keys的区别

Object.keys不会遍历继承的原型属性
for...in 会遍历继承的原型属性

35、XML和JSON的区别？

1，xml是重量级的，json是轻量级的。
2，xml在传输过程中比较占带宽，json占带宽少，易于压缩。
3，xml和json都用在项目交互下，xml多用于做配置文件，json用于数据交互。

36、说说你对AMD和Commonjs的理解

两者都是为了实现模块化编程而出现的
（1）commonjs
通常被应用于服务器，在服务器端，模块的加载和执行都在本地完成，因此，CommonJS并不要求模块加载的异步化。
核心思想：
一个单独文件就是一个模块，通过require方法来同步加载要依赖的模块，然后通过extports或则module.exports来导出需要暴露的接口。
（2）AMD
可以实现异步加载依赖模块，预加载，在并行加载js文件同时，还会解析执行该模块。虽然可以并行加载，异步处理，但是加载顺序不一定
（3）CMD
懒加载，虽然会一开始就并行加载js文件，但是不会执行，而是在需要的时候才执行。

38、["1", "2", "3"].map(parseInt) 答案是多少？

这题看到的时候都懵逼了，还是太菜了 = =...
（1）map用法：
arr.map(function(el, index, arr) {
   return el
})
map方法接收一个函数参数，并且这个函数可以接收三个参数
el：遍历过程中的当前项，
index：遍历过程中的当前下标
arr: 原数组

（2）parseInt用法：
parseInt(str, num) 
根据num解析str，并返回一个整数。
str: 要解析的字符串，如果字符第一个数不能被转换，返回NaN。
num: 基数，介于 2 ~ 36 之间，如果传0，则默认用10计算。num不在区间内，返回NaN

（3）所以这道题，关键点就在num
el和index 相当于 str 和 num 带入一下
parseInt('1', 0) // '1' 用基数10算 为1
parseInt('2', 1) // NaN
parseInt('3', 2) // NaN

39、常见兼容性问题？

（1）事件对象兼容
e  = e || window.event;
（2）阻止事件冒泡兼容
event.stopPropagation? event.stopPropagation():event.cancelBubble=true;
（3）阻止默认行为兼容
evt.preventDefault?evt.preventDefault():evt.returnValue=false;
（4）事件监听兼容
addEventListener  ? addEventListener  : attachEvent()
removeEventListener() ? removeEventListener() : detachEvent()
（5）事件目标对象兼容
var src = event.target || event.srcElement;

40、说说你对promise的了解

（1）promise是为解决异步处理回调金字塔问题而产生的
（2）有三种状态，pengding、resolve、reject，状态一旦决定就不会改变
（3）then接收resolve()，catch接收reject()

41、模块化开发怎么做？

首先我们要知道什么是模块化开发?
1. 模块就是一个有特定功能的文件,我们可以通过加载这些模块得到特定的功能
2. 模块化开发就是js的功能分离,通过需求引入不同的文件
3. 模块化开发可以使代码耦合度降低,避免代码多次在页面出现,他最大的作用就是重用
模块开发要遵循的规范
1. AMD规范也叫异步模块加载规范,在这个规范下模块会异步加载,不影响后面语句的执行,我们可以使用define定义模块,使用require调用模块
2. CommonJS规范是服务器端模块的规范,node.js就采用了这个规范,每个模块都有一个单独的作用域,模块内部的变量无法被其他模块读取,除非定义为global的对象和属性
3. CMD规范通用模块定义.CMD是按需加载,一个模块就是一个文件

42、介绍js有哪些内置对象？

String对象、Array对象、Object对象、Number对象
Math对象、Date对象、Boolean对象

43、说几条写JavaScript的基本规范？

1、不要在同一行声明多个变量
2、使用 === 和 !== 来比较
3、不要使用全局函数
4、变量在使用之前的位置声明（减少变量提升干扰）
5、if用花括号包起来即使只有一行
6、写注释

雅虎军规：

内容部分
1.尽量减少HTTP请求数
2.减少DNS查找
3.避免重定向
4.让Ajax可缓存
5.延迟加载组件
6.预加载组件
7.减少DOM元素的数量
8.跨域分离组件
9.尽量少用iframe
10.杜绝404

css部分
11.避免使用CSS表达式
12.选择舍弃@import
13.避免使用滤镜
14.把样式表放在顶部

js部分
15.去除重复脚本
16.尽量减少DOM访问
17.用智能的事件处理器
18.把脚本放在底部

javascript, css
19.把JavaScript和CSS放到外面
20.压缩JavaScript和CSS

图片
21.优化图片
22.优化CSS Sprite
23.不要用HTML缩放图片
24.用小的可缓存的favicon.ico（P.S. 收藏夹图标）

cookie
25.给Cookie减肥

服务器
34.使用CDN（内容分发网络）
35.添上Expires或者Cache-Control HTTP头

详情参考

44、JavaScript有几种类型的值？，你能画一下他们的内存图吗？

栈：原始数据类型（Undefined  Null  Boolean  Number  String）
堆：引用数据类型（对象、数组、函数）

45、href="#"与href="javascript:void(0)的区别"？

1、# 包含了一个位置信息，默认的锚是#top 也就是网页的上端。在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。
可以当作锚链接使用
2、javascript:void(0), 仅仅表示一个死链接。
如果你要定义一个死链接请使用 javascript:void(0) 
<!-- 2.执行 void() 操作符中的代码 -->
<a href="javascript:void(alert('还真点啊你，真听话！！！哈哈哈！！！'))">点我弹出警告框!!!</a><br>
<a href="javascript:void(console.log('还真点啊你，真听话！！！哈哈哈！！！'))">点我输出到控制台!!!</a><br>

46、对this的理解

1、单独使用，this表示全局对象
2、在函数中，this表示全局对象
3、在对象的一个函数方法中，this表示这个对象
4、可以通过apply、bind来更改this的指向
ps： this永远指向的是最后调用它的对象，仅当它在对象的一个函数方法中时会有差异

47、promise.all 返回什么

如果没有报错，返回执行结果[res1, res2,...]
如果报错，则返回第一个报错的promise的结果

48、多个await的执行顺序，如果要同步执行如何实现？

使用Promise.all
promise.all是等所有异步操作都完成之后返回结果，相当于让这些异步同步了

posted @ 2021-07-06 21:42 cairn 阅读(214) 评论(0) 收藏举报

刷新页面返回顶部

cairn

web前端面试题[JS、ES6等高级语法]

1、事件循环机制(event loop)，讲解宏任务和微任务

2、es6的新特性

3、es6中this指向问题

2、promise的使用，怎么用es5实现promise

3、if有作用域吗

4、原型链和作用域链的区别

5、js判断类型

6、数据类型怎么检测

7、普通函数和箭头函数的区别

8、如何用原生js给一个按钮绑定两个onclick事件？

9、document.write和innerHTML的区别

10、栈和堆的区别

11、undefined 和 null 区别

12、eval()的作用

13、JS哪些操作会造成内存泄露

14、谈谈垃圾回收机制方式及内存管理

15、什么是闭包，如何使用它，为什么要使用它？

16、请解释JSONP的工作原理，以及它为什么不是真正的AJAX

17、请解释一下JavaScript的同源策略

18、关于JS事件冒泡与JS事件代理（事件委托）

19、new操作符到底到了什么

20、js延迟加载的方式有哪些？

21、promise、async有什么区别

22、== 和 === 的区别，什么情况下用相等 ==

23、bind、call、apply的区别

24、如何判断链表是否有环

25、介绍暂时性死区

26、两个对象如何比较

27、介绍各种异步方案

28、Promise和Async处理失败的时候有什么区别

29、JS为什么要区分微任务和宏任务

30、Promise和setTimeout执行先后的区别

31、单例、工厂、观察者项目中实际场景

32、添加原生事件不移除为什么会内存泄露

33、setTimeout(0)和setTimeout(2)之间的区别

34、for..in 和 object.keys的区别

35、XML和JSON的区别？

36、说说你对AMD和Commonjs的理解

38、["1", "2", "3"].map(parseInt) 答案是多少？

39、常见兼容性问题？

40、说说你对promise的了解

41、模块化开发怎么做？

42、介绍js有哪些内置对象？

43、说几条写JavaScript的基本规范？

44、JavaScript有几种类型的值？，你能画一下他们的内存图吗？

45、href="#"与href="javascript:void(0)的区别"？

46、对this的理解

47、promise.all 返回什么

48、多个await的执行顺序，如果要同步执行如何实现？