关于javascript:工作中遇到的50个JavaScript的基础知识点满分找我拿奖品

前言

大家好，我是林三心，根底是进阶的前提，明天给大家分享一下，我这一年来工作中遇到的 50 个「根底知识点」，我这一年来就有记录知识点的习惯哈哈。满分的能够找我拿礼品哦！

50 个根底知识点

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、原型链是什么呀？具体点！

看看我这篇文章：掘金讲「原型链」，讲的最好最通俗易懂的

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，例如 ’xxx’
• Number.isNaN：只有判断 NaN 时为 true，其余状况都为 false

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

• 1、 valueOf 偏差于运算， toString 偏差于显示
• 2、对象转换时，优先调用 toString
• 3、强转字符串优先调用 toString ，强转数字优先调用 valueOf
• 4、失常状况下，优先调用 toString
• 5、运算操作符状况下优先调用 valueOf

调用 valueOf

调用 toString

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

• 根本数据类型：存在 栈内存 里
• 援用数据类型：指针存 栈内存 ，指向 堆内存 中一块地址，内容存在堆内存中
• 也有说法说其实 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 的异同点有哪些？

相同点

• 都是空变量
• 都是假值，转布尔值都是 false
• null == undefined 为 true
  不同点
• typeof 判断 null 为 object，判断 undefined 为 undefined
• null 转数字为 0，undefined 转数字为 NaN
• null 是一个对象未初始化，undefined 是初始化了，但未定义赋值
• null === undefined 为 false

13、如何判断数据类型？

• typeof xxx：能判断出 number，string，undefined，boolean，object，function（null 是 object）
• Object.prototype.toString.call(xxx)：能判断出大部分类型
• Array.isArray(xxx)：判断是否为数组

14、为什么 typeof null 是 object？

不同的数据类型在底层都是通过二进制示意的，二进制前三位为 000 则会被判断为 object 类型，而 null 底层的二进制全都是 0，那前三位必定也是 000 ，所以被判断为 object

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

• ==：在比拟过程中会存在隐式转换
• ===：须要类型雷同，值雷同，能力为 true

16、JavaScript 的隐式转换规则？

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

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

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

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

依照 隐式转换规则，可转换成 NaN >= NaN ，NaN 不等于 NaN，也不大于，所以是 false

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

依照 隐式转换规则，可转换成 0 >= 0 ，0 等于 0，所以是 true

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

依照 双等号左右两边的转换规则

• 1、 ! 优先级高于 == ， [] 不是假值，所以先转换成 [] == false
• 2、左边为布尔值， false 先转数字 0 ，所以可转换为 [] == 0
• 3、右边为对象， [] 调用 toString 转为 ''，转换为'' == 0
• 4、右边为字符串， '' 转换为 0 ，最终为 0 == 0

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

不对，JavaScript 的计算存在精度失落问题

console.log(0.1 + 0.2 === 0.3) // false

• 起因：JavaScript 中小数是浮点数，需转二进制进行运算，有些小数无奈用二进制示意，所以只能取近似值，所以造成误差

• 解决办法：

  • 先变成整数运算，而后再变回小数
  • toFixed() 性能不好，不举荐

22、什么是匿名函数？

匿名函数：就是没有函数名的函数，如：

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

这里创立了一个匿名函数(在第一个括号内)，第二个括号用于调用该匿名函数，并传入参数。

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

三种

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

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

第三个变量传一个布尔值，需不需要阻止冒泡，默认是 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 的区别？

DOM 文档加载的步骤为：

• 1、解析 HTML 构造。
• 2、加载内部脚本和样式表文件。
• 3、解析并执行脚本代码。
• 4、DOM 树构建实现。// DOMContentLoaded 触发、 $(document).ready 触发
• 5、加载图片等内部文件。
• 6、页面加载结束。// 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 和 Map 数据结构

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

倡议看阮一峰老师的文章：Set 和 Map 数据结构

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

• NaN 不等于本身，也就是 NaN === NaN 为 false
• NaN 为假值，转布尔值为false
• NaN 实质是一个 number， typeof NaN === number

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 指向的四种状况？

• 1、new 操作符创立实例

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

• 2、指向 window

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

• 3、对象调用办法

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

• 4、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 防止内存透露」罢了

43、讲讲 JavaScript 的垃圾回收机制

看我这篇文章：赠你 13 张图，助你 20 分钟战胜了「V8 垃圾回收机制」

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

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

• Alert
• Confirm

• Prompt

  45. 如何将 JS 日期转换为 ISO 规范

toISOString() 办法用于将 js 日期转换为 ISO 规范。它应用 ISO 规范将 js Date 对象转换为字符串。如：

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

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

encodeURI() 函数用于在 JS 中对 URL 进行编码。它将 url 字符串作为参数并返回编码的字符串。

留神 ：encodeURI() 不会编码相似这样字符：/ ? : @ & = + $ #，如果须要编码这些字符，请应用 encodeURIComponent()。用法：

var uri = "my profile.php?name=sammer&occupation=pāntiNG";
var encoded_uri = encodeURI(uri);

decodeURI() 函数用于解码 js 中的 URL。它将编码的 url 字符串作为参数并返回已解码的字符串，用法：

var uri = "my profile.php?name=sammer&occupation=pāntiNG";
var encoded_uri = encodeURI(uri);
decodeURI(encoded_uri);

47、什么是 BOM？有哪些 api？

BOM 就是 browser object model ， 浏览器对象模型

48、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 能够操作浏览器以及浏览器读取到的文档。

49、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

50、解释一下 “use strict” ?

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

结语

如果你感觉此文对你有一丁点帮忙，点个赞，激励一下林三心哈哈。或者能够退出我的摸鱼群
想进学习群，摸鱼群，请查看我首页加我，并备注：思否，我会定时直播模仿面试，答疑解惑

满分的连忙找我！！！或者评论区通知我哦~~~