面试遇到的问题（持续更新...）

1、Vue组件通信方式

1、父 --> 子：父组件标签传 子 props 接收
2、子 --> 父： 子组件中执行$emit (自定义事件)
3、万能：全局事件总线 $bus, 谁想接收数据，就在哪个组件上绑定自定义事件。事件的回调留在A组件上。
4、vuex

2、JS实现数组去重的方式

1、Set() + Array.from() 方法

Set对象：是值的集合，你可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次，即Set中的元素是唯一的。

Array.from() 方法：对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

const arr = [1, 2, 3, 3, 'hhh', 'hhh', true, true, false, false, undefined, undefined, NaN, NaN]
const result = Array.from(new Set(arr))
console.log(result) // [ 1, 2, 3, 'hhh', true, false, undefined, NaN ]
1
2
3

2、arr.forEach() 遍历 + indexOf() 方法
3、arr.forEach() 遍历 + includes() 方法 includes能够检测到数组中包含NaN

const testArr = [1, 'a', NaN]
console.log(testArr.includes(NaN)) // true
1
2

4、利用对象 ： 对象的属性名不可重复

function removeDuplicate(arr) {
  const newArr = []
  const obj = {}
  arr.forEach(item => {
    if (!obj[item]) {
      newArr.push(item)
      obj[item] = true
    }
  })
  return newArr
}
const result = removeDuplicate(arr)
console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN ]
1
2
3
4
5
6
7
8
9
10
11
12
13

3、 JS的微任务和宏任务有哪些， 执行顺序是什么？

参考：https://blog.csdn.net/m0_71231013/article/details/125188585 非常详细

4、JS如何区分对象和数组 使用的方法是什么？

typeof 可以判断除了 null 之外所有的基本类型

typeof null === ‘object’ 原因：在 JavaScript 中不同的对象在底层都表示为二进制，其中前三位表示类型信息，二进制前三位是 000 的话会被判断为 object 类型，null 的二进制表示是全 0， 自然前三位也是 0， 所以执行 typeof 时会返回“object”。

因此 typeof 在判断基本类型 null ，引用类型 Array 、 Object 、基本类型的包装类型以及函数实例 （new + 函数）时，得到的都是 object ，局限性很大。

1、使用Array.isArray()
2、使用Object.prototype.toString.call()
Object.prototype.toString()方法其实返回一个对象的内部属性[[class]]
改变Object.prototype.toString()这个函数的this指向就可以了，可以用call()方法来实现。 这个方法可以区分对象和数组

Object.prototype.toString.call() // "[object Undefined]"
Object.prototype.toString.call([1, 2]) // "[object Array]"
Object.prototype.toString.call(new Object()) // "[object Object]"
Object.prototype.toString.call(666) // "[object Number]"
Object.prototype.toString.call("666") // "[object String]"
Object.prototype.toString.call(/\s/g) // "[object RegExp]"
1
2
3
4
5
6

5、JS中八种数据类型

String Number Boolean Undefined Null Object Symbol BigInt
Symbol 指的是独一无二的值。每个通过 Symbol() 生成的值都是唯一的。
BigInt 是一种数字类型的数据，它可以表示任意精度格式的整数。

6、如何理解HTML语义化

1、让人更容易读懂（增加代码可读性）。
2、让搜索引擎更容易读懂，有助于爬虫抓取更多的有效信息，爬虫依赖于标签来确定上下文和各个关键字的权重（SEO）。
3、在没有 CSS 样式下，页面也能呈现出很好地内容结构、代码结构。

7、JS中如何进行隐式转换

Toprimitive方法:这是JS中每个值隐含的自带的方法，用来将值(无论是基本类型值还是对象)转换为基本类型值如果值为基本类型，则直接返回值本身;如果值为对象:
ToPrimitive(obj,type)
obj–>需要转换的对象
type–>期望的结果类型
type的值可以为number或者string，默认情况下为number

1、当type为number时规则如下:
(1)调用obi的valueof方法，如果为原始值，则返回，否则下一步
(2)调用obj的tostring方法，如果为原始值，则返回，否则下一步
(3)抛出TypeError异常

2、当type为string时规则如下:
(1)调用obj的tostring方法，如果为原始值，则返回，否则下一步
(2)调用obj的valueof方法，如果为原始值，则返回，否则下一步
(3)抛出TypeError异常

对象

var a={}
console.log(a > 2);//false
console.1og(a.valueOf()); 
console.log(a.toString());
console.log(Number(a.toString())); //[Object Object]
1
2
3
4
5

var objToNumber = function (value) {
	return Number(value.va1ueOf().toString())
}
console. log(objToNumber([]) === 0);//-->0
console. log(objToNumber({}) === NaN);//-->NaN
1
2
3
4
5

调用valueOf()返回的结果以及调用toString()返回的结果

+操作符的两边有至少一个string类型变量时，两边的变量都会被隐式转换为字符串;其他情况下两边的变量都会被转换为数字。

console.1og(1 + "23");//123
console.1og(1 + false);//1
console.1og('1' + false);//1false
console.log(true + false);//1 
1
2
3
4

-、* 、/ 操作运算符会转换为数字

console.log(25 - "23");//2
console.log(1 * false);//0 
console.log(1 / 'aa');/ /NaN
1
2
3

== 操作符来说

console.log(3 == true);//3-->3, true-->1,false
console.1og('0' == false);//"0"-+0, false-->0, true
console.log('0' = 0);//true
1
2
3

对于<和>比较符,按照字母的排列顺序比较

console.1og('c' > 'b');//true
console.1og('de' > 'fg');//false
1
2

其他情况下，转换为数字再比较

console.log('12' < 13);//true
console. log(false < -1);//false
1
2

8、display:none 和visibility:hidden的区别

display:none; 彻底消失，释放空间。可能引发页面的reflow回流（重排）。
visibility:hidden; 就是隐藏，但是位置没释放，好比opacity:0; 不引发页面回流。

9、什么是重绘和回流？

重绘：简单来说就是重新绘画，当给一个元素更换颜色、更换背景，虽然不会影响页面布局，但是颜色或背景变了，就会重新渲染页面，这就是重绘。

回流：当增加或删除dom节点，或者给元素修改宽高时，会改变页面布局，那么就会重新构造dom树然后再次进行渲染，这就是回流。

总结：
1、重绘不会引起dom结构和页面布局的变化，只是样式的变化，有重绘不一定有回流。
2、回流则是会引起dom结构和页面布局的变化，有回流就一定有重绘。

如何优化：
（1）使用 transform 替代 top，实现动画性能更好，因为使用transform页面没有回流了。
（2）不要把节点的属性值放在一个循环里当成循环里的变量
（3）尽量不使用table布局，可能很小的一个小改动会造成整个 table 的重新布局
（4）把DOM离线后修改。如：使用 documentFragment 对象在内存里操作DOM
（5）不要一条一条地修改 DOM 的样式。与其这样，还不如预先定义好css的 class，然后修改 DOM 的 className。

10、script 标签中 defer 和 async 的区别？

script ：会阻碍 HTML 解析，只有下载好并执行完脚本才会继续解析 HTML。
async script ：解析 HTML 过程中进行脚本的异步下载，下载成功立马执行，有可能会阻断 HTML 的解析。
defer script：完全不会阻碍 HTML 的解析，解析完成之后再按照顺序执行脚本。

11、js中深拷贝和浅拷贝的区别？

主要在于复制出来的新对象和原来的对象是否会互相影响，改一个，另一个也会变

（水瓶和吸管）

浅拷贝：仅仅是指向被复制的内存地址，如果原地址发生改变，那么浅拷贝出来的对象也会相应的改变 ；新旧对象共享内存，修改其中一个，另一个也会受到影响
使用Object.assign()方法:


深拷贝：在内存中开辟一块新的地址用于存放复制的对象； 新旧对象不会共享内存，修改其中的一个不会影响另一个
1、使用 JSON.parse(JSON.stringify(obj))


2、使用扩展运算符实现深拷贝

12、JS中isNaN和Number.isNaN的区别

isNaN():为了判断一个计算结果或者变量的值是否为NaN
isNaN()的判断过程:
1、首先进行类型检测，如果传入的参数不是数值类型
2、第二步将传入的参数转为数值类型，然后再进行是否为NaN的判断

Number.isNaN()：ES6出来的Number对象的扩展的方法
Number.isNaN()的判断的过程:
1、首先进行类型检测，如果传入的参数不是数值类型，直接返回false。
2、如果判断是教值类型，然后isNaN()的方式进行判断。