学习前端面试知识（14）

2024-8-21  打卡第十四天 

js的数据类型

基本类型：String，Number，Object，Null，undefined，Boolean

es6之后引入：Symbol，BigInt

判断方式：typeof，instanceof，Object.prototype.toString().call()

• 使用typeof的时候，返回表示变量数据类型的字符串。适用于所有类型的检测，包括基本数据类型和引用数据类型，但是对于数组和null返回的都是object，可能产生误导，并且无法区分函数指针和函数实例（通过new Function()创建的）

<script>
console.log(typeof undefined); // "undefined"
console.log(typeof 0);         // "number"
console.log(typeof true);      // "boolean"
console.log(typeof "hello");   // "string"
console.log(typeof Symbol());  // "symbol"
console.log(typeof 1n);        // "bigint"
console.log(typeof function(){}); // "function"
console.log(typeof []);        // "object" 误导
console.log(typeof null);      // "object" 误导
</script>

• instanceof主要用于检测引用数据类型，特别判断一个对象是否属于某个构造函数的实例，对于基本数据类型无法判断

<script>
console.log([] instanceof Array); // true
console.log(null instanceof Object); // false
console.log(function(){} instanceof Function); // true
</script>

• 返回一个表示该对象内部的字符串，这个字符串对于不同的数据类型是唯一的

<script>
console.log(Object.prototype.toString.call(undefined)); // "[object Undefined]"
console.log(Object.prototype.toString.call(null));      // "[object Null]"
console.log(Object.prototype.toString.call(true));      // "[object Boolean]"
console.log(Object.prototype.toString.call("hello"));   // "[object String]"
console.log(Object.prototype.toString.call(1));         // "[object Number]"
console.log(Object.prototype.toString.call(Symbol()));  // "[object Symbol]"
console.log(Object.prototype.toString.call(1n));        // "[object BigInt]"
console.log(Object.prototype.toString.call([]));        // "[object Array]"
console.log(Object.prototype.toString.call({}));        // "[object Object]"
console.log(Object.prototype.toString.call(function(){})); // "[object Function]"
</script>

es6的新特性

• 变量声明：const let
• 箭头函数
• rest参数，允许将一个不定数量的参数作为一个数组

<script>
function test(...args){
    console.log(args.filter(v => v > 2)); // [3,4,5,6]
}
test(1,2,3,4,5,6);
</script>

• 模版字符串，使用``
• 解构赋值，允许从数组或对象中提取数据，并赋值给变量

<script>
const [a,b,c] = [1,2,3];
console.log(a); <!--1-->
console.log(b); <!--2-->
console.log(c); <!--3-->

const { name,age } = {name:'John',age:20}
<!--name:John age:20-->
console.log("name:"+name+"age:"+age);
const { name,age } = {age:20,name:'John'}
<!--name:John age:20-->
console.log("name:"+name+"age:"+age);
</script>

• 引入类：使用class关键字定义类，包含构造函数，方法，静态方法等
• 模块化：导入导出模块import export
• promise异步编程，解决回调地狱
• 新的数据结构，Map和Set，Map用于存储键值对，Set用于存储不重复的值
• 数组新方法：Array.from()用于将类数组或者可迭代对象转换为数组
• 感觉rest和扩展运算符很像，简单说一下自己的理解，结合了文心一言的回复。扩展运算符是向外，用于将数组或对象结构展开到新的结构中。Rest参数是内向的，用于将多个参数收集到数组中。

数组去重的方法

• 使用构造函数set去重，不是箭头函数，该方法的this会直接指向调用他的数组实例，再使用Array.from转为数组

<script>
const arr = [1,2,2,3,3];
Array.prototype.myUnrepeat = function(){
    return Array.from(new Set(this));
}
<!--[1,2,3]-->
console.log(arr.myUnrepeat(arr));
</script>

• 使用filter去重，注意val和index的位置不能交换，第一个是当前的值，第二个是当前值的指针，第三个是真正被遍历的数组

<script>
const arr = [1,2,2,3,3];
Array.prototype.myUnrepeat = function(){
    return this.filter((val,index,self) => self.indexOf(val) == index);
}
<!--[1,2,3]-->
console.log(arr.myUnrepeat(arr));
</script>

说一下深拷贝和浅拷贝，如何自己实现一个深拷贝？

浅拷贝和深拷贝的区别是，是否对其内部的子对象进行递归复制。

• 浅拷贝

<script>
let origin = { a: 1, b: {c: 2}};
let copy = Object.assign({},origin);
<!--let copy = {...origin};-->
console.log(copy);
copy.b.c = 3;
console.log(origin.b.c);  <!-- 3 -->
</script>

• 深拷贝

<script>
let origin = { a: 1, b: {c: 2}};
let copy = JSON.parse(JSON.stringify(origin));
console.log(copy);
copy.b.c = 3;
console.log(origin.b.c);  <!-- 2 状态没变 -->
</script>