前言

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

50个根底知识点

1、JavaScript有几种数据类型？

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

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

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

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

  • 深拷贝层层拷贝，浅拷贝只拷贝第一层，深层只是援用
  • 在深拷贝中，新对象中的更改不会影响原始对象，而在浅拷贝中，新对象中的更改，原始对象中也会跟着改。
  • 在深拷贝中，原始对象不与新对象共享雷同的属性，而在浅拷贝中，它们具备雷同的属性。

4、闭包是什么？

闭包是一个能读取其余函数外部变量的函数

  • 长处：使内部能拜访到部分的货色

  • 毛病：使用不当容易造成内存透露的问题
    例子：

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

5、原型链是什么呀？具体点！

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

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

变量晋升

console.log(name) // undefinedvar 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 = 23const person = new Person('Sunshine_lin')for (const key in person) { console.log(key) } // name age// 应用 hasOwnPropertyfor (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

调用者返回值返回值类型
Array数组自身Array
Boolean布尔值Boolean
Date毫秒数Number
Function函数自身Function
Number数字值Number
Object对象自身Object
String字符串String

调用toString

调用者返回值返回值类型
Array数组转字符串，相当于Array.join()String
Boolean转字符串'true'、'false'String
Date字符串日期，如'Fri Dec 23 2016 11:24:47 GMT+0800 (中国规范工夫)'String
Number数字字符串String
Object'[object Object]'String
String字符串String

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 = nullconsole.log(index) // 8

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

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

    var objNum = new Number(123);  var objStr =new String("123");   console.log( typeof objNum ); //objectconsole.log( typeof objStr ); //object console.log( typeof objNum.valueOf() ); //numberconsole.log( typeof objStr.valueOf() ); //stringconsole.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); // catcat.eat('fish') // cat正在吃：fishcat.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); // Tomcat.sleep() // Tom正在睡觉！console.log(cat instanceof Animal); // falseconsole.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) // Tomcat.sleep() // Tom正在睡觉！console.log(cat instanceof Animal); // trueconsole.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); // Tomcat.sleep() // Tom正在睡觉！console.log(cat instanceof Animal); // falseconsole.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); // Tomcat.sleep() // Tom正在睡觉！console.log(cat instanceof Animal); // trueconsole.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 Codevar cat = new Cat();console.log(cat.name); // Tomcat.sleep() // Tom正在睡觉！console.log(cat instanceof Animal); // trueconsole.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 = nameconsole.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.fnfn() // 浏览器window，node里global

  • 4、call、apply、bind扭转this

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

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

办法作用是否影响原数组
push在数组后增加元素，返回数组长度✅
pop删除数组最初一项，返回被删除项✅
shift删除数组第一项，并返回数组✅
unshift数组结尾增加元素，返回增加的元素✅
reserve反转一个数组，返回批改后的数组✅
sort排序一个数组，返回批改后的数组✅
splice截取数组，返回被截取的区间✅
join将一个数组所有元素连接成字符串并返回这个字符串❌
concatarr1.concat(arr2, arr3) 连贯数组❌
joinarr.join(x)将arr数组元素连接成字符串并返回这个字符串❌
map操作数组每一项并返回一个新数组❌
forEach遍历数组，没有返回值❌
filter对数组所有项进行判断，返回合乎规定的新数组❌
every数组每一项都合乎规定才返回true❌
some数组有合乎规定的一项就返回true❌
reduce接管上一个return和数组的下一项❌
flat数组扁平化❌
slice截取数组，返回被截取的区间❌

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

办法作用
Math.max(arr)取arr中的最大值
Math.min(arr)取arr中的最小值
Math.ceil(小数)小数向上取整
Math.floor(小数)小数向下取整
Math.round(小数)小数四舍五入
Math.sqrt(num)对num进行开方
Math.pow(num, m)对num取m次幂
Math.random() * num取0-num的随机数

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 ， 浏览器对象模型

api作用代表办法或属性
window.history操纵浏览器的记录history.back()
history.go(-1)
window.innerHeight获取浏览器窗口的高度
window.innerWidth获取浏览器窗口的宽度
window.location操作刷新按钮和地址栏location.host：获取域名和端口
location.hostname：获取主机名
location.port：获取端口号
location.pathname：获取url的门路
location.search：获取?开始的局部
location.href：获取整个url
location.hash：获取#开始的局部
location.origin：获取以后域名
location.navigator：获取以后浏览器信息

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”。

结语

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

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