深夜爆肝JS好文！2024字节跳动春招面试题深度讲解(1)

最新推荐文章于 2024-10-05 01:22:45 发布

2301_78850344

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量1k

点赞数 15

分类专栏：程序员文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2301_78850344/article/details/137627094

版权

程序员专栏收录该内容

262 篇文章 0 订阅

订阅专栏

本文探讨了JavaScript中的解构赋值与深拷贝的区别，指出解构并非深拷贝，仅适用于一维数组和对象。介绍了使用JSON.stringify和原生JavaScript实现深拷贝的方法，以及原型和原型链的概念，最后涉及this指向和new关键字的作用。

摘要由CSDN通过智能技术生成

据上可得：无论是数组还是对象，经过解构赋值之后的新变量，两者之间相互没有影响，那么我们是否可以下定义了：解构赋值是深拷贝？
不要急，我们再来看一组代码：

let arr3 = [[1,2],[3,4],[5,6]];

let newArr3 = […arr3];

newArr3[0][1] = 33333;

console.log(newArr2, arr2)

打印结果是：

在这里插入图片描述

我们可以看到：两组数据相互影响了
那么问题就来了，为什么上面的代码可以实现互不影响，下面却不行？
答案是：解构不是真正的深拷贝，是伪深拷贝
结论：解构只能深拷贝一维数组与一维对象，多维数组和对象无效

1.3 如何实现一个深拷贝？

这里有两种方式

JSON()的相关API，代码如下：

let list = [

{id: 1, stuName: ‘小明’, class:‘五年二班’},

{id: 2, stuName: ‘小红’, class:‘五年三班’},

{id: 3, stuName: ‘小绿’, class:‘五年四班’}

]

// JSON.stringify : 对象转json字符串

// JSON.parse : 将json字符串转换成json对象

let newList = JSON.parse(JSON.stringify(list));

let newObj = {

id: 4,

stuName: ‘小白’,

class: ‘五年四班’

}

newList.push(newObj)

newList[2].class = ‘六年一班’;

console.log(list, newList)

打印结果如下：

在这里插入图片描述

由此可见，JSON相关方法，确实可以实现深拷贝。
但是此类方法只能适用于部分场景
如果对象里有 function这种关键字是不行的，JSON()方法会将它转化为字符串，那么，自然不行，性质都不一样了

2. 用原生JS写一个真正的深拷贝，适用于所有场景：

原理简单粗暴：将对象里的值一个一个取过来，重新定义
代码如下：

// 标准的深拷贝

function deepClone(source){

// 判断复制的目标是数组还是对象

const targetObj = source.constructor === Array ? [] : {};

// 遍历目标

for(let keys in source){

if(source.hasOwnProperty(keys)){

// 如果值是对象，就递归一下

if(source[keys] && typeof source[keys] === ‘object’){

targetObj[keys] = source[keys].constructor === Array ? [] : {};

targetObj[keys] = deepClone(source[keys]);

}else{

// 如果不是，就直接赋值 (基本类型)

targetObj[keys] = source[keys];

}

return targetObj;

}

测试是否管用：

let objD = {

name: ‘小猪’,

age: 20,

detail: {

color: ‘白色’,

type: ‘种猪’

}

let newObjD = deepClone(objD);

newObjD.detail.color = “黑色”;

console.log(objD, newObjD)

实际结果：

在这里插入图片描述

实验表明，确实是管用的
FAQ：深拷贝的代码务必手写下来，真的很重要

2. 原型与原型链

1.1 原型是什么？有什么用？

原型 prototype是 js 中极其重要的概念之一，也是面试高频问题点，也是比较容易引起混淆的地方
原型的概念:
首先，我们明确原型是一个对象
每个函数都有一个属性叫做原型（函数特有的），这个属性指向一个对象
原型是函数对象的属性，不是所有对象的属性，对象经过构造函数new出来，那么这个new出来的对象的构造函数有一个属性叫原型
当哦我们定义一个函数的时候，这个函数的原型属性也就被定义出来了，并且可以使用它。如果不对它进行显示赋值的话，那么它的初始值就是一个空的对象Object（默认添加的）
简单来说：原型是函数的一个特有属性

function fn1(a , b){

return a*b;

}

console.log(fn1.prototype); // 函数默认添加的原型

console.log(fn1.constructor); // 构造器指向

在这里插入图片描述

从上面我们可以看到：函数fn1的原型是Object（默认添加的，所以为空）
函数的构造器是 Function
当然，我们也可以手动给它添加原型属性和方法：

function fn1(a , b){

return a*b;

}

// 手动添加原型属性和方法

// 通过 new 关键字可以继承

fn1.prototype.name = “小明”;

fn1.prototype.age = 18;

fn1.prototype.fn = function(){

console.log(“年纪是：”+this.age);

}

1.2 原型链（ __ proto __ ）

定义：有限的实例对象和原型之间组成有限链，就是用来实现共享属性和继承的
从1.1中，我们知道了：所有的函数都是 Function 的实例。在构造函数上都有一个原型属性 prototype，该属性也是一个对象；那么在原型对象上有一个 constructor 属性，该属性指向的就是构造函数；
而实例对象上有一个 _ proto _ 属性，该属性也指向原型对象，并且该属性不是标准属性，不可以用在编程中，该属性用于浏览器内部使用（只用于看，不能操作）

在这里插入图片描述