2021 web面试题常见之一 递归01
2021-08-18 本文已影响0人
litielongxx
递归
递归为函数a本身内部调用a，但一定有打破条件否则为死循环；常用于深拷贝深入过多不赘叙。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>1 最简单的递归</h3>
<textarea cols="50" rows="15">
let num=0
function a(data) {
num += data
data--
<!-- 唯一要求是打断限制条件不能一直下去,否则死循环 -->
if(data>=0) {
<!-- 函数调用本身形成递归-->
a(data)
}
}
a(10)
console.log(num)
</textarea>
<button>点击执行</button>
<!-- JSON.parse深拷贝 -->
<h3>2 JSON.parse(JSON.stringify(str))解决深拷贝</h3>
<textarea cols="50" rows="15">
<!-- JSON复制缺点，undefiend拷贝丢失 -->
let obj={name:'hjk',age:undefined}
let obj2=JSON.parse(JSON.stringify(obj))
obj.name='王者荣耀'
console.log(obj,obj2)
</textarea>
<button>点击执行</button>
<h3>递归解决深拷贝</h3>
<textarea cols="50" rows="35">
let obj={name:'hjk',age:undefined,hobby:['游泳','篮球']}
let obj2={}
<!-- obj2.name=obj.name -->
<!-- obj2.age=obj.undefined -->
<!-- obj2.xx=obj.xx -->
<!-- 目标 旧的数据 -->
function clone(obj,oldObj) {
<!-- 手动复制 -->
for (k in oldObj) {
<!-- 属性值 'hjk' []-->
let item=oldObj[k]
<!-- 复杂处理 -->
if(typeof item==='object') {
<!-- 判断是[]还是{}手动开辟栈和堆内存空间 -->
<!-- obj.xx固定 obj[xx]动态的,xx为变量 -->
obj[k]=Array.isArray[item]?[]:{}
<!-- 递归调用本身 -->
clone(obj[k],item)
}else{
<!-- 简单直接复制 -->
obj[k]=item
}
}
// 函数不return永远为undeifned
return obj
}
obj2=clone(obj2,obj)
obj.name='王者荣耀'
obj2.hobby=[999]
console.log(obj,obj2)
</textarea>
<button>点击执行</button>
</body>
<script>
// 点击button执行pre中的代码，用到eval
document.querySelectorAll('button').forEach(function(item){
item.addEventListener('click',function(){
// 不用箭头函数因为要指向事件点击源，用了()=>变成window了
// console.log(this.previousElementSibling.value);
eval(this.previousElementSibling.value)
})
})
</script>
</html>
