风尚云网-JS相关综合面试题(不看后悔系列)持续更新...

目录

简述一下Promise原理？

简述一下继承与原型链？

判断 js 类型的几种方式？

闭包的概念？优缺点？

数组去重的方法？

DOM 事件有哪些阶段？谈谈对事件代理的理解？ 

 ES6 的 class 和构造函数的区别？

JS中如何将页面重定向到另一个页面？

---

---

简述一下Promise原理？

Promise 对象用于表示一个异步操作的最终完成 (或失败)及其结果值。 

Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息。

在Promise的内部，有一个状态管理器的存在，有三种状态：pending、fulfilled、rejected。　　　　
(1) promise 对象初始化状态为 pending。　　　　
(2) 当调用resolve(成功)，会由pending => fulfilled。　　　　
(3) 当调用reject(失败)，会由pending => rejected。　　
需要记住的是注意promsie状态 只能由 pending => fulfilled/rejected, 一旦修改就不能再变。

简述一下继承与原型链？

JavaScript 只有一种结构：对象。

每个实例对象（object）都有一个私有属性（称之为 __proto__ ）指向它的构造函数的原型对象（prototype）。

该原型对象也有一个自己的原型对象（__proto__），层层向上直到一个对象的原型对象为 null。根据定义，null 没有原型，并作为这个原型链中的最后一个环节。

JavaScript 对象是动态的属性“包”（指其自己的属性）。

JavaScript 对象有一个指向一个原型对象的链。

当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。

判断 js 类型的几种方式？

1. typeof

可以判断出'string','number','boolean','undefined','symbol'
但判断 typeof(null) 时值为 'object'; 判断数组和对象时值均为 'object'

2. instanceof

原理是 构造函数的 prototype 属性是否出现在对象的原型链中的任何位置

function A() {} let a = new A(); a instanceof A //true,因为 Object.getPrototypeOf(a) === A.prototype;

3. Object.prototype.toString.call()

常用于判断浏览器内置对象,对于所有基本的数据类型都能进行判断，即使是 null 和 undefined

4. Array.isArray()

用于判断是否为数组

闭包的概念？优缺点？

闭包的概念：闭包就是能读取其他函数内部变量的函数。

优点：

1. 避免全局变量的污染
2. 希望一个变量长期存储在内存中（缓存变量）

缺点：

1. 内存泄露（消耗）
2. 常驻内存，增加内存使用量

数组去重的方法？

1.ES6 的 Set

let arr = [1,1,2,3,4,5,5,6] let arr2 = [...new Set(arr)]

2.reduce()

let arr = [1,1,2,3,4,5,5,6]
let arr2 = arr.reduce(function(ar,cur) {
  if(!ar.includes(cur)) {
    ar.push(cur)
  }

  return ar
},[])

3.filter()

// 这种方法会有一个问题：[1,'1']会被当做相同元素，最终输入[1]
let arr = [1,1,2,3,4,5,5,6]
let arr2 = arr.filter(function(item,index) {
  // indexOf() 方法可返回某个指定的 字符串值 在字符串中首次出现的位置
  return arr.indexOf(item) === index
})

DOM 事件有哪些阶段？谈谈对事件代理的理解？ 

分为三大阶段：捕获阶段--目标阶段--冒泡阶段

事件代理简单说就是：事件不直接绑定到某元素上，而是绑定到该元素的父元素上，进行触发事件操作时(例如'click')，再通过条件判断，执行事件触发后的语句(例如'alert(e.target.innerHTML)') 

好处：(1)使代码更简洁；(2)节省内存开销 

 ES6 的 class 和构造函数的区别？

class 的写法只是语法糖，和之前 prototype 差不多，但还是有细微差别的，下面看看：

1. 严格模式

类和模块的内部，默认就是严格模式，所以不需要使用use strict指定运行模式。只要你的代码写在类或模块之中，就只有严格模式可用。考虑到未来所有的代码，其实都是运行在模块之中，所以 ES6 实际上把整个语言升级到了严格模式。

2. 不存在提升

类不存在变量提升（hoist），这一点与 ES5 完全不同。

new Foo(); // ReferenceError
class Foo {}

3. 方法默认是不可枚举的

ES6 中的 class，它的方法（包括静态方法和实例方法）默认是不可枚举的，而构造函数默认是可枚举的。细想一下，这其实是个优化，让你在遍历时候，不需要再判断 hasOwnProperty 了

4. class 的所有方法（包括静态方法和实例方法）都没有原型对象 prototype，所以也没有[[construct]]，不能使用 new 来调用。

5. class 必须使用 new 调用，否则会报错。这是它跟普通构造函数的一个主要区别，后者不用 new 也可以执行。

6. ES5 和 ES6 子类 this 生成顺序不同

ES5 的继承先生成了子类实例，再调用父类的构造函数修饰子类实例。ES6 的继承先 生成父类实例，再调用子类的构造函数修饰父类实例。这个差别使得 ES6 可以继承内置对象。

7. ES6可以继承静态方法，而构造函数不能

JS中如何将页面重定向到另一个页面？

使用 location.href：window.location.href =“url”

使用 location.replace： window.location.replace("url");

Json字符串转换json 对象、json 对象转换json字符串?

JSON.parse(jsonstr); //可以将json字符串转换成json对象
JSON.stringify(jsonobj); //可以将json对象转换成json对符串

attribute和property的区别是什么?

property是DOM中的属性，是JavaScript里的对象；
attribute是HTML标签上的特性，它的值只能够是字符串； 

---

持续更新敬请关注~~~