<code>var result = 100 + true + 21.2 + null + undefined + "Tencent" + [] + null + 9 + false; //result = 'NaNTencentnull9false'

[] + [] // ""等于空字符串

[] + {} // "[object object]"

{} + [] // 0 对于编译器而言，代码块不会返回任何的值， 接着+[]就变成了一个强制转number的过程

true+true+true===3 // true

true-true // 0

true==1// true

true===1 // false

8+"1" // '81'

91-"1"// 90

[]==0 // true

Number([])===0 //true

[]===0 //false

🌛 null 和 undefined 有什么区别？

undefined 表示未定义，新定义的变量没有赋值就是undefined

null表示清空，当一个变量不用的时候，除了等待网页关闭销毁，也可以把它赋值为null。此时游览器会进行一个回收也就是清空内存。（比如定时器常常初始化为null）

补充:

typeof(null)会是一个object。最初这么设计的原因为：通常用作一个空引用一个空对象的预期,就像一个占位符。typeof的这种行为已经被确认为一个错误，虽然提出了修正，出于后兼容的目的，这一点已经保持不变。

null == undefined // true null === undefined // false

🌛 为什么 0.1 + 0.2 !== 0.3? 你如何解决这个问题？

因为 0.1 这样的数值用二进制表示你就会发现无法整除，

最后算下来会是0.0001100110011001...由于存储空间有限，位数是无限的，只能取近似。

代码：0.1 + 0.2 == 0.3 // false

代码：0.625 + 0.625 == 1.25 // true

进制转换规则：

十进制小数转换为二进制小数

十进制整数 -> 转二进制

举例：(5).toString(2) // 结果 101 转换：除2反向取余 2| 5 --- 余1 ------ 2| 2 --- 余0 ------ 1 举例：(13).toString(2) // 结果 1101 转换：除2反向取余 2| 13 --- 余1 ------ 2| 6 --- 余0 ------ 2| 3 --- 余1 ------ 1 核对：

ASCII表

十进制小数 -> 转二进制

举例：(0.625).toString(2) // 结果 0.101 转换：乘2正向取整 0.625*2=1.25======取出整数部分1 0.25*2=0.5========取出整数部分0 0.5*2=1==========取出整数部分1 举例：(0.7).toString(2) // 结果 0.101100110011001100110011 0011 ... 0.7*2=1.4========取出整数部分1 0.4*2=0.8========取出整数部分0 0.8*2=1.6========取出整数部分1 0.6*2=1.2========取出整数部分1 0.2*2=0.4========取出整数部分0 0.4*2=0.8========取出整数部分0 0.8*2=1.6========取出整数部分1 0.6*2=1.2========取出整数部分1 0.2*2=0.4========取出整数部分0 ...

🌟 实战购物车小数计算精度丢失如何解决？

推荐解决： 浮点数转化成整数

实战使用：购物车结算时，商品价格(33.01)-优惠券价格(5)，本应该是28.01，但是实际的结果是28.009999999999998

解决方法一：减数和被减数同乘除100

33.01 - 5 = 28.009999999999998

(33.01*100 - 5*100) / 100 = 28.01

解决方法二：在Number.EPSILON误差范围内判断

es6 提供了 Number.EPSILON，这个值等于 2^-52 ，这个值非常非常小，在底层计算机已经帮我们运算好，并且无限接近 0，但不等于 0，这个时候我们只要判断误差值在这个范围内就可以说明是相等的。

function numbersequal(a,b){

return Math.abs(a-b)<Number.EPSILON

}

var a = 0.1 + 0.2;

var b = 0.3;

console.log(numbersequal(a, b))

// true

解决方法三：四舍五入

采用四舍五入方法，取了一个 10 位小数

function numTofixed(num) {

if (typeof num == 'number') {

num = parseFloat(num.toFixed(10))

}

return num;

}

numTofixed(0.1 + 0.2);

// 0.3

//使用第三方库

//math.js

//bignumber.js

💘 JS(2)

🌟 说出变量在内存中的分配

栈：基本类型【名字】&【数据】、对象类型的【名字】&【堆地址】

堆：对象类型数据

🌟 说出变量赋值内存分配

基本类型：变量赋值，栈开辟内存直接存数据 -> 数据互不影响

对象类型：变量赋值，栈开辟内存，存放堆地址 -> 数据相互影响

切记切记切记：形参也会出现传值、传地址问题

var num = 100

function fn(n) {

// var 形参 = 实参

// var n = num也就是100 基本类型 传值 不影响

n = 200

console.log(n) // 打印： 200

}

fn(num)

console.log(num) // 打印： 100

// --------------------------

var obj = { name: 'Jack' }

function fn(o) {

// var 形参 = 实参

// var o = obj 对象类型赋值 传地址 相互影响

o.name = 'Rose' //

console.log(o.name) // 打印：Rose

}

fn(obj)

console.log(obj.name) // 打印：Rose

🌟 判断是否是数组? var a=[]

方法1：通过语法 Array.isArray()

Array.isArray(a) === true

方法2：instanceof

a instanceof Array === true

方法3：原型链（constructor）

a.constructor === Array

方法4：Object.prototype.toString.call()

Object.prototype.toString.call(a) === '[object Array]'

🌛 如何交换两个变量的值

临时变量法

var a = 1

var b = 2;

var temp = a

a = b

b = temp

加减法

var a = 1

var b = 2;

a = a+b // a = 1+2 = 3

b = a-b // b = 3-2 = 1

a = a-b // a = 3-1 = 2

解构赋值法

var a = 1

var b = 2;

[a, b] = [b, a]

数组法

var a = 1

var b = 2

a = [a, b]

b = a[0]

a = a[1]

对象法

var a = 1

var b = 2

a = { a: b, b: a }

b = a.b

a = a.a

等等

🌟 说出数组有哪些方法(有疑问可百度或者私信我)

·数据操作：shift/unshift/pop/push/slice

遍历数据： forEach/map/filter/find/findIndex/some/every

工作常用：concat/join/indexOf/includes/reduce/Array.from()/fill()/isArray()

学习常用：reverse/splice

了解：sort

🌟 说出数组哪些方法会改变原数据

数据操作：shift/unshift/pop/push

学习常用：reverse/splice

了解：sort

🌟 如何实现数组去重

方法1：通过es6新增的Set数据结构、和展开运算符去重 [...new Set(重复数组)]

var arr = [1,2,3,2,3]

console.log([...new Set(arr)])

方法2：通过filter配合indexOf实现数组去重

var arr = [1,2,3,2,3]

var newarr = arr.filter(function(item, i) {

// i=0 item值是1 arr.indexOf(item) 返回0 真

// i=1 item值是2 arr.indexOf(item) 返回1 真

// i=2 item值是3 arr.indexOf(item) 返回2 真

// i=3 item值是2 arr.indexOf(item) 返回1 假

// i=4 item值是3 arr.indexOf(item) 返回2 假

return i === arr.indexOf(item);

})

console.log(newarr)

方法3：定义空数组，通过forEach遍历重复的数组，通过indexOf判断当前值是否在数组中，不在就push

var newarr = []

var arr = [1,2,3,2,3]

arr.forEach(function(item, i) {

if (newarr.indexOf(item) === -1)

{

newarr.push(item)

}

})

console.log(newarr)

方法4：定义空数组，通过forEach遍历重复的数组，通过includes判断当前值是否在数组中，不在就push

var newarr = []

var arr = [1,2,3,2,3]

arr.forEach(function(item, i) {

if (!newarr.includes(item))

{

newarr.push(item)

}

})

console.log(newarr)

方法5：利用对象的属性去重

var arr = [1,2,3,2,3]

var newarr = []

var obj = {}

arr.forEach(function(item) {

if (!obj[item]) {

obj[item] = item // 出现记录

newarr.push(item)

}

})

🌟 说出字符串常用方法

工作常用：数组、查找、替换、截取、大小、空格、截取

.split()、find()、replace()、substr()、toUpperCase()/toLowerCase()、trim()、slice()

学习：.length、lastIndexOf、repeat

🌛 JS如何去空格

说明： 通过 trim 去左右空格

留心：中间不能去

追问：JS如何去所有空格

解决：通过2021年 ES12新增语法replaceAll来解决

' a b c '.replaceAll(' ', '')

解决：通过正则

' a b c '.replace(/\s/g, '')

🌛 伪数组

长得像数组，能用少部分的属性 例如length 但是所有方法都不可以使用，在js中常见的伪数组有

document.querySelectAll()、arguments等等

🌟 谈谈你对this指向的理解

面试： 调用当前方法的对象 也就是谁调用的就指向谁

举例：

function fn1() {}

fn1() // 最大全局变量window调用的

标签对象.事件类型 = 处理函数 // 标签对象触发后调用的

学习

普通函数 指向window

对象函数 指向对象本身

事件函数 指向事件源

定时器函数 指向window

箭头函数 指向父function中的this 父没有function就是window

自定义 根据 call/apply/bind来确定指向

构造函数 this === 实例化对象 === 公共空间/原型对象上方法中的this

其他：事件、构造函数、公共空间/原型对象上方法-优先使用普通函数写法，当需要明确改变this指向的时候再换箭头函数，其它全不优先使用箭头函数。

🌟 图片懒加载原理

好处：减少HTTP请求，加快网页响应速度，减少服务器压力，增加用户浏览体验

原理：

监控滚动条滚动

获取总可视内容高度（可见视口高度+滚动条滚动高度）

获取所有图片

遍历步骤3（或这说：遍历伪数组）

在步骤4中判断，图片.offsetTop <= 步骤2 成立-修改src属性为data-src、失败-不管

节流防抖优化

留心：有时候图片高度怎么获取不到？

这是因为在某些特殊情况下需要页面加载的时候就获取到图片的高度,通过高度去做相关的操作,但是由于首次加载需要请求,图片还没完全加载回来的时候高度就显示为0

这个时候可以使用图片预加载,先保证图片加载回来了再进行下一步操作

具体操作如下：

（1）new一个图片实例对象

（2）给创建出来的图片对象的src赋值(img对象有src之后会自动请求图片资源,<img>标签同理)

（3）使用定时器定时获取图片的高度或者宽度:

a.如果值为0说明还没加载回来,不执行任何操作,让定时器再次执行

b.如果值不为0说明已经加载回来了,清除定时器,然后执行接下来的操作

示例代码：

let timer = ''

const i = new Image()

i.src = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2F1208%2F1300%2Fntk-1300-31979.jpg&refer=http%3A%2F%2Fimg2.niutuku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666936809&t=77a5b58fd5e3d5571a35f45d5c064492'

timer = setInterval(() => {

console.log(1);

if (i.height) {

clearInterval(timer)

timer = null

console.log('获取到了',i.height,i.width)

}

},1)

获取屏幕宽度：

<!-- 195x265 -->

<br />

<img src="./imgs/1.jpg" alt="">code>

<script>

var imgObj = document.querySelector('img')

console.log(imgObj.offsetWidth); // 0 部分属性必须再图片加载完毕后才能获取到其值

console.log(imgObj.offsetLeft); // 8

imgObj.onload = function() {

console.log(imgObj.offsetWidth); // 195

console.log(imgObj.offsetLeft); // 8

}

</script>

🌟 性能优化：网站首屏加载过慢如何解决

<code># 2015年 ES6

修饰符：let、const

解构赋值：let {键:变量名=默认值,...,键:变量名=默认值} = {键:值,....,键:值} !!!

字符串相关扩展：模板字符串

函数相关扩展：箭头函数!!!、函数形参默认值、rest参数 arguments

对象相关扩展：对象简写!!!、链判断操作符 ?. 空判断操作符??

数组相关扩展：find/findIndex/indexOf/includes

新增基本类型：symbol、bigint

-----------

// 重要 中等 中等 重要 重要

其他新增：展开运算符、新增数据结构、循环forof、module模块化、class类等等

# 2016年 ES7：Array.prototype.includes

# 2017年 ES8：Async functions

# 2018年 ES9：Promise.prototype.finally

# 2019年 ES10

# 2020年 ES11：String.prototype.matchAll、import()、BigInt、Promise.allSettled、

# 2021年 ES12：String.prototype.replaceAll、Promise.any、

# 2022年 ES13：

🌟 es6常见问题汇总

新增了哪些数据类型：symbol、bigInt（在整数后加n或者调用BigInt()生成一个bigint类型数据）

新增的数据类型属于哪一类：基本类型

数组如何去重：Set、filter+indexOf、forEach+indexOf、forEach+includes、对象

新增数据类型有哪些分别有什么用

Set数组去重

Map对象的键不限于字符串

🌟 let、const

面试题1：let和const区别

相同点-都是块级作用域/不能重复定义

不同点-let修改/const不能修改

面试题2：const真的不能修改吗

基本类型：不可以

对象类型：可以

原理：const不可以修改栈里面的地址，但是可以修改堆里面的数据

面试题3：暂时性死区

let前面的区域就是暂时性死区，必须先定义再使用

面试题4：let和const如何选

普遍用let、明确后期不改用const 例如Date、xhr、promise对象等

const d = new Date()

面试题5：var和let区别

var 函数作用域 可以重复定义 可以修改

let 块级作用域 不能重复定义 可以修改

🌟 bind 和 call/apply 的区别

fun.call(thisArg, param1, param2, ...)

fun.apply(thisArg, [param1,param2,...])

fun.bind(thisArg, param1, param2, ...)

是否立刻执行

call/apply 改变了函数的 this 上下文后

马上 执行该函数。

bind 则是返回改变了上下文后的函数,

不执行该函数 。

返回值的区别

call/apply 返回 fun 的执行结果。

bind 返回 fun 的拷贝，并指定了 fun 的 this 指向，保存了 fun 的参数。

🌛 手写bind/call/apply 原理

call

<script>

Function.prototype.myCall = function (context, ...args) {

context = context ? Object(context) : window

context.fn = this

let res = context.fn(...args)

return res

}

function testFn(data1, data2) {

console.log('this：', this)

console.log('args：', data1, data2)

}

let obj = { a: 1, b: 2 }

testFn.call(obj, 11, 22)

testFn.myCall(obj, 11, 22)

</script>

apply

<script>

Function.prototype.myApply = function (context, args) {

context = context ? Object(context) : window

context.fn = this

let res = context.fn(...args)

return res

}

function testFn(data1, data2) {

console.log('this：', this)

console.log('args：', data1, data2)

}

let obj = { a: 1, b: 2 }

testFn.apply(obj, [11, 22])

testFn.myApply(obj, [11, 22])

</script>

bind

<script>

Function.prototype.myBind = function (context, ...args1) {

context = context ? Object(context) : window

return (...args2) => {

let args = args1.length ? args1 : args2

context.fn = this

let res = context.fn(...args)

delete context.fn

return res

}

}

function testFn(data1, data2) {

console.log('this：', this)

console.log('args：', data1, data2)

}

let obj = { a: 1, b: 2 }

let aFn = testFn.bind(obj, 11, 22)

let bFn = testFn.myBind(obj, 11, 22)

aFn()

// aFn(111,222)

bFn()

// bFn(111, 222)

</script>

💘 JS(4)

🌟 原型、原型链概念

原型：js给每个函数分配的公共空间，减少内存占用

原型链：多个原型的集合，当调用对象的属性或方法时，先自身找，找不到去原型链上找，一直找到Object构造函数的原型链

🌟 构造函数new干了啥

1 给obj创建一个空对象

2 给obj增加__proto__属性 并且指向 构造函数的.prototype（原型链继承）

3 将 构造函数this中的数据 全部放到obj上（构造函数继承）

4 返回obj实例对象

// let Sym = fn

function Sym() {

this.a = 1;

this.b = 2;

this.c = 3;

}

// 第一种使用方式：当变量赋值用

let data1 = Sym;

console.log(data1); // 打印：函数本身

// 第二种使用方法：当函数用

let data2 = Sym();

console.log(data2); // 打印：undefined 但是window多了a、b、c三个属性

// 第三种使用方法：new关键词

let data3 = new Sym();

console.log("new关键词：", data3); // 打印：对象

/*

栈 堆

data1: 地址1 地址1：function Sym() { this.a = 1; this.b = 2; this.c = 3; }

data2：undefined 地址2：{a:1,b:2,c:3, __proto__：}

data3：地址2

*/

function _new(当前new的构造函数) {

// let obj = {};

// obj.__proto__ = 当前new的构造函数.prototype;

let obj = Object.create(当前new的构造函数.prototype); // !!!!

// obj.a = 1;

// obj.b = 2;

// obj.c = 3;

当前new的构造函数.call(obj);

return obj;

}

let data4 = _new(Sym);

// 需求：封装_new普通函数仿写new关键词效果

// 分析：_new普通函数里面做哪些时

// - 必须返回一个对象

console.log("通过_new仿写new：", data4);

🌛 箭头函数与普通函数区别？能不能作为构造函数

语法更加简洁、清晰，（没有箭头和function关键字，括号也可以省略）

箭头函数不会创建自己的this

箭头函数继承而来的this指向永远不变

.call()/.apply()/.bind()无法改变箭头函数中this的指向

箭头函数不能作为构造函数使用，也就是不能使用new关键字

箭头函数没有自己的arguments

箭头函数没有原型prototype

箭头函数不能用作Generator函数，不能使用yeild关键字

🌛 更精确判断数据类型

// typeof 基本类型：除了null是object其他都是自身

console.log(typeof null); // 'object'

console.log(typeof undefined);// 'undefined'

console.log(typeof true);// 'boolean'

console.log(typeof 123);// 'number'

console.log(typeof "sdafadsf");// 'string'

console.log(typeof Symbol());// 'symbol'

console.log(typeof 1111n);// 'bigint'

// typeof 对象类型：除了function是function其他都是object

// 问题：你就无法根据不同类型做不同逻辑处理

// 比如：判断是数组 判断是null

// 解决：Array.isArray() 等等单独处理

// 然后：也可以统一处理

// 语法：Object.prototype.toString.call(数据)

console.log(Object.prototype.toString.call(null));// '[object Null]'

console.log(Object.prototype.toString.call(undefined));// '[object Undefined]'

console.log(Object.prototype.toString.call(true));// '[object Boolean]'

console.log(Object.prototype.toString.call(123));// '[object Number]'

console.log(Object.prototype.toString.call("sdfdsf"));// '[object String]'

console.log(Object.prototype.toString.call(Symbol()));// '[object Symbol]'

console.log(Object.prototype.toString.call(1111n));// '[object BigInt]'

console.log(Object.prototype.toString.call(function () {}));// '[object Function]'

console.log(Object.prototype.toString.call({}));// '[object Object]'

console.log(Object.prototype.toString.call([]));// '[object Array]'

//下面封装一个精确判断数据类型的方法

function getType(data) {

let result = Object.prototype.toString.call(data);

// console.log(result.substr(8, result.length - 1 - 8));

console.log(result.slice(8, -1));

}

//调用该函数实例化

getType(null);

getType(undefined);

getType(true);

getType(123);

getType("sdfdsf");

getType(Symbol());

getType(1111n);

getType(function () {});

getType({});

getType([]);

🌛 Object构造函数上有哪些语法

重要

Object.defineProperty() vue双向绑定原理

Object.keys() 获取对象的所有键 返回数组

Object.values() 获取对象的所有值 返回数据

Object.create() 创建对象（特色 基于指定原型造对象 场景1：new原理优化，场景2：vue ）

Object.assign() 合并对象

Object.prototype.constructor 所属构造函数

Object.prototype.toString() 转字符串

💘 JS(5) 高频

🌟 输入网址浏览器做了什么（简单版）

打开浏览器输入网址回车 -> 去DNS服务器找网址对应的IP地址 -> 找不到【无法访问此网站】 找到了【根据ip地址去请求服务器】 -> 服务器返回数据 -> 【浏览器解析】

脚下留心：浏览器其实返回的是index.html的数据，然后在解析的过程中，遇到link、script、img等 再次发送请求拿数据然后解析

🌟 输入网址浏览器做了什么（完整版）

域名解析，浏览器查找该域名的IP地址

浏览器根据解析得到的IP地址向WEB服务器发送HTTP请求

服务器收到请求并进行处理

服务器返回一个响应

浏览器对该响应进行解码，渲染显示

页面显示完成后，浏览器发送异步请求

整个过程结束之后，浏览器关闭TCP连接。

详细解释点这儿

🌟 对HTTP理解

面试：HTTP是超文本传输协议，规定了客户端和服务端如何通信，然后由两个部分组成分别是请求、 响应

学习：就是一个规则，你必须按照这个规则才可以和后端交互拿数据

概念：超文本传输协议

作用：规定客户端和服务端通信技术

场景：网页、APP等

响应组成：响应行（同上）、响应头（暂略）、响应体（接口数据调试错误）

请求组成：请求行（地址/状态码/请求方式）、请求头（ua、content-type、token、cookie）、请 求体（接口参数）

🌟 HTTP周边：HTTP动词 状态码 请求头参数

HTTP动词（请求方式 method)

明确：form标签也就是w3c就是遵循http规则设计的 但是它的请求方式仅仅只有两种get、post 其 它不支持

但是：我们目前主流用get、post ，但是还有很多其它的请求方式

种类：常用的get查询、post增加数据、put修改数据、delete删除数据

实际：java工程师就用get查询 增删改都用post

状态码

2xx 200 成功 201 成功并且服务器创建了新数据

3xx 301 站内跳转 302 站外跳转 304 浏览器缓存

4xx 400 你传递给后端的参数 401 密码错误 403 没有权限 404文件不存在 405 请求方式有误

5xx 500 服务器有误

请求头参数

ua、content-type、token、cookie

🌟 HTTP周边：强制缓存、协商缓存

强制缓存：就是文件直接从本地缓存中获取，不需要发送请求。

响应头 Cache-Control : 86400

expires

协商缓存/对比缓存

在响应头部 Response Headers 中，

有两种资源标识：

Last-Modified 资源的最后修改时间，对应请求头为 If-Modified-Since ；

Etag 资源的唯一标识，所谓唯一，可以想象成时人类的指纹，具有唯一性；但 Etag 的本质是一个字符串；对应请求头为 If-None-Match 。

Last-Modified 和 Etag

当响应头部 Response Headers 同时存在 Last-Modified 和 Etag 的值时，会优先使用 Etag ；

Last-Modified 只能精确到秒级；

如果资源被重复生成，而内容不变，则 Etag 更精确。

请求行/响应行：method、url、status

请求头：headers、cookie、content-type、ua、if-none-match、if-modified-since

请求体：请求参数

响应头：content-type 告诉浏览器如何解析数 、etag、last-modified、 Cache-Control...

响应体：响应的数据

🌟 get和post有什么区别

GET在浏览器回退时是无害的，而POST会再次提交请求。

GET产生的URL地址可以被Bookmark，而POST不可以。

GET请求会被浏览器主动cache，而POST不会，除非手动设置。

GET请求只能进行url编码，而POST支持多种编码方式。

GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。

GET请求在URL中传送的参数是有长度限制的，而POST么有。

对参数的数据类型，GET只接受ASCII字符，而POST没有限制。

GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。

GET参数通过URL传递，POST放在Request body中。

上传图片：2M 一般只能上传png、jpg gif不允许

很生动形象的解释了get和post的区别

🌟 谈谈你对http、https的理解，有什么区别

http超文本通讯协议 默认端口80

https也是超文本通讯协议 相对http更加安全 默认端口443

🌟 谈谈你对骨架屏的理解

骨架屏就是在页面数据尚未加载前先给用户展示出页面的大致结构，直到请求数据返回后再渲染页面，补充进需要显示的数据内容。常用于文章列表、动态列表页等相对比较规则的列表页面。 很多项目中都有应用:ex:饿了么h5版本,知乎,facebook等网站中都有应用。

效果参考

🌟 谈谈你对节流防抖的理解

回答：节流防抖都是用来进行项目优化，减少代码触发的频率，同时又不影响实际效果

节流：触发事件之后如果用户在设定时间内再次触发，则刷新触发事件，只执行最后一次

防抖：用户点击之后一直点击不能触发，必须执行完每次事件并且等待时间结束才能继续执行