关于javascript:js面试题基础梳理

1、JavaScript 有几种数据类型？

number：数字类型
string：字符串类型
boolean：布尔值类型
undefined：未定义类型
null：空类型
object：对象类型
symbol：symbol 类型
bigint：大数字类型

2、JavaScript 最大平安数字与最小平安数字？

console.log(Number.MAX_SAFE_INTEGER)
// 9007199254740991
console.log(Number.MIN_SAFE_INTEGER)
// -9007199254740991

3、深拷贝与浅拷贝的区别？

浅拷贝：只拷贝第一层，深层的仍然是援用，扭转深层会影响原对象
深拷贝：每一层都拷贝了，扭转数据不会影响原对象

4、闭包是什么？

闭包是一个函数，是一个能让内部拜访到函数外部的函数

长处：使内部能拜访外部，缩短外部变量寿命
毛病：滥用闭包造成内存透露

例子:

function a () {
  let num = 0
  
  // 这是个闭包
  return function () {return ++num}
}
const b = a()
console.log(b()) // 1
console.log(b()) // 2

5、原型链是什么

原型链是一条援用的链，实例的隐式原型指向构造函数的显式原型，能够应用 A instanceof B 来判断 B 是否在 A 的原型链上。

6、什么是变量晋升？函数晋升？

变量晋升

console.log(name) // undefined
var name = 'Sunshine_Lin'

if (false) {var age = 23}
console.log(age) // undefined 不会报错

函数晋升

console.log(fun) // function fun() {}
function fun() {}

if (false) {function fun2(){}}
console.log(fun2) // undefined 不会报错

函数晋升优先级 > 变量晋升优先级

console.log(fun) // function fun() {}
var fun = 'Sunshie_Lin'
function fun() {}
console.log(fun) // 'Sunshie_Lin'

7、isNaN 与 Number.isNaN 的区别？

isNaN：除了判断 NaN 为 true 外，还会把不能转成数字判断为 true，例如 'dasd'
Number.isNaN：只会判断 NaN 为 true

8、解决遍历对象时，把原型上的属性遍历进去了咋办？

应用 hasOwnProperty 判断

function Person(name) {this.name = name}
Person.prototype.age = 23
const person = new Person('Sunshine_lin')
for (const key in person) {console.log(key) } // name age
// 应用 hasOwnProperty
for (const key in person) {person.hasOwnProperty(key) && console.log(key)
} // name

9、valueOf 与 toString？

valueOf 比拟偏差于计算，toString 偏差于显示
对象转换时，优先调用 toString
强转字符串时优先调用 toString，强转数字时优先调用 valueOf
失常状况下，优先调用 toString
运算操作符状况下优先调用 valueOf

10、JavaScript 变量在内存中具体存储模式？

根本数据类型：存在栈内存里
援用数据类型：指针存栈内存，指向堆内存中一块地址，内容存在堆内存中

11、讲一讲 JavaScript 的装箱和拆箱？

装箱：把根本数据类型转化为对应的援用数据类型的操作

看以下代码，s1 只是一个根本数据类型，他是怎么能调用 indexOf 的呢？

const s1 = 'Sunshine_Lin'
const index = s1.indexOf('_')
console.log(index) // 8

原来是 JavaScript 外部进行了装箱操作

1、创立 String 类型的一个实例；
2、在实例上调用指定的办法；
3、销毁这个实例；

var temp = new String('Sunshine_Lin')
const index = temp.indexOf('_')
temp = null
console.log(index) // 8

拆箱：将援用数据类型转化为对应的根本数据类型的操作

通过 valueOf 或者 toString 办法实现拆箱操作

var objNum = new Number(123);  
var objStr =new String("123");   
console.log(typeof objNum); //object
console.log(typeof objStr); //object 
console.log(typeof objNum.valueOf() ); //number
console.log(typeof objStr.valueOf() ); //string

console.log(typeof objNum.toString() ); // string 
console.log(typeof objStr.toString() ); // string

12、null 和 undefined 的异同点有哪些？

相同点

1、都是空类型
2、转布尔值都是 false，都是假值
3、null == undefined 为 true

不同点

1、typeof，前者为 object，后者为 undefined
2、null 转数字为 0，undefined 转数字为 NaN
3、null === undefined 为 false

13、如何判断数据类型？

typeof：能判断 string、number、undefined、boolean、function、object（null 是 object）Object.prototype.toString.call()：能判断大部分数据类型
instanceOf

14、为什么 typeof null 是 object？

不同数据类型底层都是用二进制来示意的，二进制前三位为 000 则会被判断为 object，而 null 二进制全是 0，所以被判断成 object

15、== 与 === 的区别？

==：比拟过程会进行隐式转换
===：值雷同，类型雷同才会为 true

16、JavaScript 的隐式转换规则？

转 string 类型：+（字符串连接符）转 number 类型：++/--(自增自减运算符) + - * / %(算术运算符) > < >= <= == != === !== (关系运算符)
转 boolean：!（逻辑非运算符)

17、双等号左右两边的转换规则？

1、null == undefined 为 true
2、如果有一个操作数是布尔值，则在比拟相等性之前先将其转换为数值——false 转换为 0，而 true 转换为 1；3、如果一个操作数是字符串，另一个操作数是数值，在比拟相等性之前先将字符串转换为数值
4、如果一个操作数是对象，另一个操作数不是，则调用对象的 toString()办法，用失去的根本类型值依照后面的规定进行比拟

18、undefined >= undefined 为什么是 false？

隐式转换，变成 NaN >= NaN，NaN 不等于本身也不大于本身

19、null >= null 为什么是 true？

隐式转换，变成 0 >= 0，为 true

20、[] == ![] 为什么是 true？

第一步：转为[] == false
第二步：转为[] == 0
第三步：转为 '' == 0
第四步：转为 0 == 0

21、0.1 + 0.2 === 0.3，对吗？

不对，JavaScript 存在精度失落问题，因为有些小数无奈用二进制示意，所以只能取近似值，解决办法有：先转大数，再变小数
应用 toFixed

22、什么是匿名函数？
匿名函数，就是没有名字的函数，比方：

(function(x, y){alert(x + y);  
})(2, 3)

23、绑定点击事件有几种形式？

三种

xxx.onclick = function (){}
<xxx onclick=""></xxx>
xxx.addEventListener('click', function(){}, false)

24、addEventListener 的第三个参数是干嘛的？

决定事件是捕捉阶段执行还是冒泡阶段执行

true：捕捉
false：默认，冒泡

25、函数申明和函数表达式的区别？

函数申明：享受函数晋升
函数表达式：归类于变量申明，享受变量晋升
函数晋升优先级 > 变量晋升优先级

console.log(fun) // fun () {}
// 函数表达式
var fun = function(name) {}
// 函数申明
function fun () {}
console.log(fun) // fun (name) {}

26、JavaScript 的事件流模型有哪些？

事件冒泡：由最具体的元素接管，并往上流传
事件捕捉：由最不具体的元素接管，并往下流传
DOM 事件流：事件捕捉 -> 指标阶段 -> 事件冒泡

27、Ajax、Axios、Fetch 有啥区别？

Ajax：是对 XMLHttpRequest(XHR)的封装
Axios：是基于 Promise 对 XHR 对象的封装
Fetch：是 window 的一个办法，基于 Promise，与 XHR 无关，不兼容 IE

28、load、$(document).ready、DOMContentLoaded 的区别？

$(document).ready、DOMContentLoaded：DOM 树构建结束，但还没有申请动态资源
load：动态资源申请结束

29、如何阻止事件冒泡？

function stopBubble(e) {if (e.stopPropagation) {e.stopPropagation()
  } else {window.event.cancelBubble = true;}
}

30、如何阻止事件默认行为？

function stopDefault(e) {if (e.preventDefault) {e.preventDefault();
  } else {window.event.returnValue = false;}
}

31、什么是事件委托？

当子元素都须要绑定雷同事件时，能够将事件绑在父元素上，长处有：绑定在父元素，则只需绑定一次，节俭性能
后续新增的子元素也能够触发父元素绑定的事件

32、如何实现数组去重？

// 应用 Map 去重
function quchong1(arr) {const newArr = []
  arr.reduce((pre, next) => {if (!pre.get(next)) {pre.set(next, 1)
      newArr.push(next)
    }
    return pre
  }, new Map())
  return newArr
}

// 应用 Set 去重
function quchong (arr) {return [...new Set(arr)]
}

33、Set 与 Array 的区别是什么？

Set 应用 has 判断有无元素，数组应用索引
Set 增加元素应用办法 add，数组用 push、unshift
Set 长度为 size，数组为 length
Set 会主动把同样的根底数据类型去重，数组不能
Set 删除元素用 delete，数组用 splice、pop、shift
Set 能够应用 clear 清空，数组须要从新赋值[]
数组能够传入 new Set(array)，实现数组转 Set
Set 能够应用 keys、value 办法，转数组
Set 自带 forEach 办法进行遍历

34、Map 与 Object 的区别是什么？

Map 应用 set 设置属性，对象应用 obj[key] = value
Map 应用 get 获取属性值，对象应用 obj[key]
Map 应用 has 判断属性存在与否，对象只能 obj[key]
Map 删除元素应用 delete 办法，对象应用 delete 关键字
Map 应用 clear 进行情空，对象须要从新赋值{}
Map 和对象都能够应用 entries 办法转数组键值对
Map 自带 forEach 办法进行遍历

35、NaN 是什么？有什么特点？

typeof NaN 为 number
NaN 不等于本身，不大于本身，不小于本身
NaN 能够应用 Number.isNaN 判断
NaN 是假值，转布尔值为 false

36、解决异步的办法有哪些？

回调函数
Promise
事件监听
公布订阅
async/await

37、JavaScript 继承形式有几种？

前置工作

// 定义一个动物类
function Animal (name) {
  // 属性
  this.name = name || 'Animal';
  // 实例办法
  this.sleep = function(){console.log(this.name + '正在睡觉！');
  }
}
// 原型办法
Animal.prototype.eat = function(food) {console.log(this.name + '正在吃：' + food);
};

1、原型链继承
外围：将父类的实例作为子类的原型

function Cat(){}
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';

var cat = new Cat();
console.log(cat.name); // cat
cat.eat('fish') // cat 正在吃：fish
cat.sleep() // cat 正在睡觉！console.log(cat instanceof Animal); //true 
console.log(cat instanceof Cat); //true

长处：

1、十分纯正的继承关系，实例是子类的实例，也是父类的实例
2、父类新增原型办法 / 属性，子类都能拜访到
3、简略，易于实现

毛病：

1、要想为子类新增属性和办法，必须要在 new Animal()这样的语句之后执行，不能放结构器中
2、来自原型对象的所有属性被所有实例共享
3、创立子实例时，无奈向父类构造函数传参
4、不反对多继承

2、结构继承
外围：应用父类的结构器来增强子类实例，等于是复制父类的实例属性给子类（没用到原型）

function Cat(name) {Animal.call(this);
  this.name = name || 'Tom';
}

var cat = new Cat();
console.log(cat.name); // Tom
cat.sleep() // Tom 正在睡觉！console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true

长处：

1、解决了原型链继承中，子类实例共享父类援用属性的问题
2、创立子类实例时，能够向父类传递参数
3、能够实现多继承(call 多个父类对象)

毛病：

1、实例并不是父类的实例，常识子类的实例
2、是能继承父类的实例属性和办法，不能继承原型属性 / 办法
3、无奈实现函数复用，每个子类都有父类实例函数的正本，影响性能

3、实例继承
外围：为父类实例增加新个性，作为子类实例返回

function Cat(name){var instance = new Animal();
  instance.name = name || 'Tom';
  return instance;
}

var cat = new Cat();
console.log(cat.name) // Tom
cat.sleep() // Tom 正在睡觉！console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // false

长处：

1、不限度调用形式，不论是 new 子类 () 还是子类()，返回的对象具备雷同成果

毛病：

1、实例是父类的实例，不是子类的实例
2、不反对多继承

4、拷贝继承
外围：就一个一个拷贝

function Cat(name){var animal = new Animal();
  for(var p in animal){Cat.prototype[p] = animal[p];
  }
  this.name = name || 'Tom';
}

var cat = new Cat();
console.log(cat.name); // Tom
cat.sleep() // Tom 正在睡觉！console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true

长处：

1、反对多继承

毛病：

1、效率低，内存占用高（因为要拷贝父类的属性）
2、无奈获取父类不可枚举办法（不可枚举办法，不能应用 for in 拜访到）

5、组合继承
外围：通过父类结构，继承父类的属性并保留传参的长处，而后通过将父类实例作为子类原型，实现函数复用

function Cat(name){Animal.call(this);
  this.name = name || 'Tom';
}
Cat.prototype = new Animal();

Cat.prototype.constructor = Cat;

var cat = new Cat();
console.log(cat.name); // Tom
cat.sleep() // Tom 正在睡觉！console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // true

长处：

1、补救了结构继承的缺点，能够继承实例属性 / 办法，也可继承原型属性 / 办法
2、既是子类的实例，也是父类的实例
3、不存在援用属性共享问题
4、可传参
5、函数可复用

毛病：

1、调用了两次父类构造函数，生成了两份实例（子类实例将子类原型上的那份屏蔽了）

6、寄生组合继承
外围：通过寄生形式，砍掉父类的实例属性，这样，在调用两次父类的结构时，就不会初始化两次实例办法 / 属性，防止继承组合的毛病

function Cat(name) {Animal.call(this);
  this.name = name || 'Tom';
}
// 创立一个没有实例办法的类
var Super = function () {};
Super.prototype = Animal.prototype;
// 将实例作为子类的原型
Cat.prototype = new Super();

// Test Code
var cat = new Cat();
console.log(cat.name); // Tom
cat.sleep() // Tom 正在睡觉！console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); //true

长处：

1、堪称完满

毛病：

1、实现简单

38、创立一个对象的形式有哪几种？

new Object

const obj = new Object()
obj.name = 'Sunshine_Lin'

字面量

const obj = {name: 'Sunshin_Lin'}

工厂模式

function createObj(name) {const obj = new Object()
  obj.name = name
  return obj
}
const obj = createObj('Sunshine_Lin')

构造函数

function Person(name) {this.name = name}
const person = new Person('Sunshine_Lin')

39、this 指向的四种状况？

new 操作符

function Person(name) {
  this.name = name
  console.log(this)
}
// this 指向以后 person 实例对象
const person = new Person('Sunshine_Lin')

指向 window

function fn() {console.log(this)
}
fn() // 浏览器 window，node 里 global

对象调用办法

const target = {fn: function () {console.log(this) }
}
target.fn() // target

// 这种就是扭转了 this 了
const fn = target.fn
fn() // 浏览器 window，node 里 global

箭头函数

const obj = {
  name: '林三心',
  fn: () => {console.log(this.name)
  }
}
console.log(obj.fn()) // undefined

call、apply、bind 扭转 this

const obj1 = {
  name: '林三心',
  sayName: function() {console.log(this.name)
  }
}
const obj2 = {name: 'Sunshin_Lin'}
// 扭转 sayName 的 this 指向 obj2
obj1.sayName.call(obj2) // Sunshin_Lin
// 扭转 sayName 的 this 指向 obj2
obj1.sayName.apply(obj2) // Sunshin_Lin
// 扭转 sayName 的 this 指向 obj2
const fn = obj1.sayName.bind(obj2)
fn() // Sunshin_Lin

40、数组的罕用办法有哪些？

41、Math 的罕用办法有哪些？

42、JS 中有哪些不同类型的弹出框？

在 JS 中有三种类型的弹出框可用，别离是：Alert、Confirm、Prompt

43、如何将 JS 日期转换为 ISO 规范

var date = new Date();
var n = date.toISOString();
console.log(n);
// YYYY-MM-DDTHH:mm:ss.sssZ

44、如何在 JS 中编码和解码 URL

编码：encodeURI()
解码：decodeURI()

45、什么是 BOM？有哪些 api？
BOM 就是 browser object model，浏览器对象模型

46、BOM 和 DOM 的关系

BOM 全称 Browser Object Model，即浏览器对象模型，次要解决浏览器窗口和框架。DOM 全称 Document Object Model，即文档对象模型，是 HTML 和 XML 的利用程序接口（API），遵循 W3C 的规范，所有浏览器公共恪守的规范。JS 是通过拜访 BOM（Browser Object Model）对象来拜访、管制、批改客户端(浏览器)，因为 BOM 的 window 蕴含了 document，window 对象的属性和办法是间接能够应用而且被感知的，因而能够间接应用 window 对象的 document 属性，通过 document 属性就能够拜访、检索、批改 XHTML 文档内容与构造。因为 document 对象又是 DOM 的根节点。能够说，BOM 蕴含了 DOM(对象)，浏览器提供进去给予拜访的是 BOM 对象，从 BOM 对象再拜访到 DOM 对象，从而 js 能够操作浏览器以及浏览器读取到的文档。

47、JS 中的 substr()和 substring()函数有什么区别
substr() 函数的模式为 substr(startIndex,length)。它从 startIndex 返回子字符串并返回 ’length’ 个字符数。

var s = "hello";
(s.substr(1,4) == "ello" ) // true

substring() 函数的模式为 substring(startIndex,endIndex)。它返回从 startIndex 到 endIndex – 1 的子字符串。

var s = "hello";
(s.substring(1,4) == "ell" ) // true

48、解释一下 “use strict” ?

“use strict”是 Es5 中引入的 js 指令。应用“use strict”指令的目标是强制执行严格模式下的代码。在严格模式下，咱们不能在不申明变量的状况下应用变量。晚期版本的 js 疏忽了“use strict”。