1.2 解构是深拷贝吗?为什么?
-
这里就是面试官给你挖坑了,考察你的基础扎实程度。
-
我们先来看一组代码:
数组解构赋值
let arr2 = [1,2,3,4];
let newArr2 = […arr2]; //此处是解构赋值
newArr2.push(5);
console.log(arr2, newArr2) // arr2的结果: 1,2,3,4 newArr2的结果: 1,2,3,4,5
对象解构赋值
let objA = {
name: ‘小明’,
age: 8
}
let {name , age} = objA;
name = ‘小花’;
age = 10;
console.log(name, age, objA); // 1.name为小花,2.age为10 3.objA没有变化
-
据上可得:无论是数组还是对象,经过解构赋值之后的新变量,两者之间相互没有影响,那么我们是否可以下定义了:解构赋值是深拷贝?
-
不要急,我们再来看一组代码:
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:深拷贝的代码务必手写下来,真的很重要
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 _ 属性,该属性也指向原型对象,并且该属性不是标准属性,不可以用在编程中,该属性用于浏览器内部使用(只用于看,不能操作)
你需要理解这几句话:
-
在函数里有一个属性prototype
-
由该函数创建的对象默认会连接到该属性上
-
_proto_是站在对象角度来说的
-
prototype 是站在构造函数角度来说的
-
如下图:
看图看不懂?代码来说话:
function Person() {
}
Person.prototype.name = “养猪的王某人”;
Person.prototype.age = 18;
Person.prototype.getAge = function () {
console.log(this.age);
}
let person1 = new Person();
console.log(person1);
console.log(person1.name); // 继承父级的属性
console.log(person1.constructor);
- 打印结果:
图解:
-
person1 通过 new关键字继承 Person(),可以得到原型链上的属性和方法
-
说的通俗一点,小明上学,自己挣不到钱,可以用住他爸妈的房子,花他们的钱,这就属于继承(血脉继承)。
-
函数内的构造器(constructor)指向构造他的函数
原型链的查找规则:
- 由下往上找,一层一层找,直到找到 null,如果找到 null还没找到,就报错。
-
寻找自身属性,如果找到了,就返回该值
-
如果没找到,继续往上找(逐级)
-
直到找到 null为止
-
如果还没找到,抛出错误
看了这么久,休息一会儿吧
-
this 的指向在函数创建的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁。
-
一般来说,谁调用,指向谁(并不是所有情况)
-
最外层的 this (指向window)
- 方法内的 this(依然指向window)
function a(){
let userName = “张三”;
console.log(this) // window
}
a(); // 相当于window.a()
- 对象内的 this(看调用情况)
let o = {
userName: ‘张三’,
fn:function(){
console.log(this.userName);
}
}
o.fn(); // 打印结果:张三 o调用 this 指向o
Vue 面试题
1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程?
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用?
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用?
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么?
14.说一下 Vue 和 React 的认识,做一个简单的对比
15.Vue 的 nextTick 的原理是什么?
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解?
19.vue-cli 替我们做了哪些工作?
…
算法
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
- 冒泡排序
- 选择排序
- 快速排序
- 二叉树查找: 最大值、最小值、固定值
- 二叉树遍历
- 二叉树的最大深度
- 给予链表中的任一节点,把它删除掉
- 链表倒叙
- 如何判断一个单链表有环
- 给定一个有序数组,找出两个数相加为一个目标数
…
由于篇幅限制小编,pdf文档的详解资料太全面,细节内容实在太多啦,所以只把部分知识点截图出来粗略的介绍,每个小节点里面都有更细化的内容!有需要的程序猿(媛)可以帮忙点赞+评论666
的区别是什么?
14.说一下 Vue 和 React 的认识,做一个简单的对比
15.Vue 的 nextTick 的原理是什么?
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解?
19.vue-cli 替我们做了哪些工作?
…
[外链图片转存中…(img-gs8zXafR-1714729460477)]
算法
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
- 冒泡排序
- 选择排序
- 快速排序
- 二叉树查找: 最大值、最小值、固定值
- 二叉树遍历
- 二叉树的最大深度
- 给予链表中的任一节点,把它删除掉
- 链表倒叙
- 如何判断一个单链表有环
- 给定一个有序数组,找出两个数相加为一个目标数
…
[外链图片转存中…(img-SziyYcY1-1714729460478)]
由于篇幅限制小编,pdf文档的详解资料太全面,细节内容实在太多啦,所以只把部分知识点截图出来粗略的介绍,每个小节点里面都有更细化的内容!有需要的程序猿(媛)可以帮忙点赞+评论666