前端面试刷题day4(每日更新前端面试高频考察点)
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了前端面试刷题day4(每日更新前端面试高频考察点),小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2454字,纯文字阅读大概需要4分钟。
内容图文
码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取。
每天都提供一道关于前端面试中常见的题目。并且我建立了一个QQ群(425554900),QQ群内提供大量面试题目和答案,包括CSDN每日更新的题目答案。欢迎大家加群交流,打卡,共同进步。
今日题目:
说一下深拷贝如何解决循环引用问题?
题解:
看个例子:
function deepCopy(obj) {
const res = Array.isArray(obj) ? [] : {};
for (let key in obj) {
if (typeof obj[key] === "object") {
res[key] = deepCopy(obj[key]);
} else {
res[key] = obj[key];
}
}
return res;
}
var obj = {
a: 1,
b: 2,
c: [1, 2, 3],
d: { aa: 1, bb: 2 },
};
obj.e = obj;
console.log("obj", obj); // 不会报错
const objCopy = deepCopy(obj);
console.log(objCopy);
从例子中可以看到,当存在循环引用的时候,deepCopy会报错,栈溢出。
- obj对象存在循环引用时,打印它是不会栈溢出
- 深拷贝 obj 时,才会导致溢出
循环应用问题解决
- 即:目标对象存在循环应用时报错处理
大家都知道,对象的key是不能是对象的。
{{a:1}:2}
// Uncaught SyntaxError: Unexpected token ':'
参考解决方式一:使用weekmap;
解决循环引用问题,我们可以额外开辟一个存储空间,来存储当前对象和拷贝对象的对应关系。
这个存储空间,需要可以存储 key-value
形式的数据,且key
可以是一个引用类型。
我们可以选择 WeakMap
这种数据结构:
- 检查
WeakMap
中有无克隆过的对象 - 有,直接返回
- 没有,将当前对象作为
key
,克隆对象作为value
进行存储 - 继续克隆
function isObject(obj) {
return (typeof obj === "object" || typeof obj === "function") && obj !== null;
}
function cloneDeep(source, hash = new WeakMap()) {
if (!isObject(source)) return source;
if (hash.has(source)) return hash.get(source); // 新增代码,查哈希表
var target = Array.isArray(source) ? [] : {};
hash.set(source, target); // 新增代码,哈希表设值
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
if (isObject(source[key])) {
target[key] = cloneDeep(source[key], hash); // 新增代码,传入哈希表
} else {
target[key] = source[key];
}
}
}
return target;
}
参考解决方式二:
可以用Set,发现相同的对象直接赋值,也可用Map。
const o = { a: 1, b: 2 };
o.c = o;
function isPrimitive(val) {
return Object(val) !== val;
}
const set = new Set();
function clone(obj) {
const copied = {};
for (const [key, value] of Object.entries(obj)) {
if (isPrimitive(value)) {
copied[key] = value;
} else {
if (set.has(value)) {
copied[key] = { ...value };
} else {
set.add(value);
copied[key] = clone(value);
}
}
}
return copied;
}
我会帮大家把每一天的题目和超级详细的答案整理好,欢迎加群领取当日题目答案和以往题目答案。
关注公众号后,回复【前端面试题】,领取大量前端面试题汇总pdf资料
内容总结
以上是互联网集市为您收集整理的前端面试刷题day4(每日更新前端面试高频考察点)全部内容,希望文章能够帮你解决前端面试刷题day4(每日更新前端面试高频考察点)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。