发表于： 2023-03-21 20:26:52
0 281
今天的js知识点：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 浅拷贝
// const obj = {
// uname: 'red',
// age: 18,
// family: {
// baby: '小red'
// }
// }
// const o = {...obj}
// console.log(o)
// o.age = 20
// console.log(o)
// console.log(obj)
// const o = {}
// Object.assign(o, obj) // 从一个或多个源对象复制到目标对象，返回修改后的对象
// o.age = 20
// o.family.baby = '老red'
// console.log(o)
// console.log(obj)
// 深拷贝
const obj = {
uname: 'red',
age: 18,
hobby: ['乒乓球', '足球'],
family: {
baby: '小red'
}
}
const o = {}
//拷贝函数
function deepCopy(newObj, oldObj) {
//debugger 语句调用任何可用的调试功能，例如设置断点。
debugger
for(let k in oldObj) {
// 处理器的问题
// instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上
if (oldObj[k] instanceof Array){
//创建一个空数组接收
newObj[k] = []
deepCopy(newObj[k],oldObj[k])
}else if (oldObj[k] instanceof Object){
//创建一个空数组接收
newObj[k] = {}
deepCopy(newObj[k],oldObj[k])
}else {
/*console.log(k) //属性名
console.log(oldObj[k])*/ // 属性值
// newObj[k] = o.uname
newObj[k] = oldObj[k]
}
}
}
deepCopy(o, obj) // 函数调用
console.log(o)
o.age = 20
o.hobby[0] = '篮球'
o.family.baby = '老red'
console.log(obj)
// console.log([1,21] instanceof Object)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div></div>
<script>
// let i = 1
// function fn() {
// console.log(`这是第${i}次`)
// if(i >= 6) {
// return
// }
// i++
// fn()
// }
// fn()
// 练习 利用递归函数实现 setTimeout 模拟 setInterval 效果
// function getTime() {
// // toLocaleString()方法 打印最新的时间
// document.querySelector('div').innerHTML = new Date().toLocaleString()
// setTimeout(getTime, 1000)
// }
// getTime()
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>lodash实现深拷贝</title>
</head>
<body>
<!-- 先引用-->
<script src="js/lodash.min.js"></script>
<script>
const obj = {
uname: 'red',
age: 18,
hobby: ['乒乓球', '足球'],
family: {
baby: '小red'
}
}
const o = _.cloneDeep(obj)
console.log(o)
o.family.baby = '老red'
console.log(obj)
</script>
<script>
const obj = {
uname: 'red',
age: 18,
hobby: ['乒乓球', '足球'],
family: {
baby: '小red'
}
}
//把对象转换为 JSON 字符串
// stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串
// console.log(JSON.stringify(obj))
//parse() 方法用来解析 JSON 字符串，构造由字符串描述的 JavaScript 值或对象
const o = JSON.parse(JSON.stringify(obj))
console.log(o)
o.family.baby = '老red'
console.log(obj)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>123</p>
<script>
// 抛出异常
// function fn(x, y) {
// if(!x || !y){
// //throw 语句用来抛出一个用户自定义的异常。
// // throw '没有参数传递进来'
// //当运行时错误产生时，Error 对象会被抛出。Error 对象也可用于用户自定义的异常的基础对象。
// throw new Error('没有参数传递进来')
// }
// return x + y
// }
// console.log(fn())
// 捕获异常 try/catch
function fn() {
try {
//可能要发生错误的代码 要写到 try
// try...catch 语句标记要尝试的语句块，并指定一个出现异常时抛出的响应。
const p =document.querySelector('.p')
p.style.color = 'red'
}catch (err) {
// message 只读属性返回一个字符串来表示与给定错误名称关联的消息或描述,但是不中断程序的执行
console.log(err.message)
throw new Error('程序出错了')
// 需要加 return 中断程序
// return
}
finally {
// 不管你程序对不对，一定会执行的代码
alert('弹出对话框')
}
console.log(11)
}
fn()
</script>
</body>
</html>
返回列表
评论