深淺拷貝
練習(xí)
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<div></div>
<script>
function getTime(){
document.querySelector('div').innerHTML = new Date().toLocaleString()
setTimeout(getTime,1000)
}
getTime()
</script>
</body>
</html>
<!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>
<script>
const obj = {
uname: 'pink',
age: 18,
hobby: ['乒乓球', '足球'],
family: {
baby: '小pink'
}
}
const o = {}
// 拷貝函數(shù)
function deepCopy(newObj, oldObj) {
debugger
for (let k in oldObj) {
// 處理數(shù)組的問題 一定先寫數(shù)組 在寫 對象 不能顛倒
if (oldObj[k] instanceof Array) {
newObj[k] = []
// newObj[k] 接收 [] hobby
// oldObj[k] ['乒乓球', '足球']
deepCopy(newObj[k], oldObj[k])
} else if (oldObj[k] instanceof Object) {
newObj[k] = {}
deepCopy(newObj[k], oldObj[k])
}
else {
// k 屬性名 uname age oldObj[k] 屬性值 18
// newObj[k] === o.uname 給新對象添加屬性
newObj[k] = oldObj[k]
}
}
}
deepCopy(o, obj) // 函數(shù)調(diào)用 兩個(gè)參數(shù) o 新對象 obj 舊對象
console.log(o)
o.age = 20
o.hobby[0] = '籃球'
o.family.baby = '老pink'
console.log(obj)
console.log([1, 23] instanceof Object)
// 復(fù)習(xí)
// const obj = {
// uname: 'pink',
// age: 18,
// hobby: ['乒乓球', '足球']
// }
// function deepCopy({ }, oldObj) {
// // k 屬性名 oldObj[k] 屬性值
// for (let k in oldObj) {
// // 處理數(shù)組的問題 k 變量
// newObj[k] = oldObj[k]
// // o.uname = 'pink'
// // newObj.k = 'pink'
// }
// }
</script>
</body>
</html>
<!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>
<!-- 先引用 -->
<script src="./lodash.min.js"></script>
<script>
const obj = {
uname: 'pink',
age: 18,
hobby: ['乒乓球', '足球'],
family: {
baby: '小pink'
}
}
const o = _.cloneDeep(obj)
console.log(o)
o.family.baby = '老pink'
console.log(obj)
</script>
</body>
</html>
<!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>
<script>
const obj = {
uname: 'pink',
age: 18,
hobby: ['乒乓球', '足球'],
family: {
baby: '小pink'
}
}
// 把對象轉(zhuǎn)換為 JSON 字符串
// console.log(JSON.stringify(obj))
const o = JSON.parse(JSON.stringify(obj))
console.log(o)
o.family.baby = '123'
console.log(obj)
</script>
</body>
</html>
異常處理
throw 拋異常
try/catch 捕獲錯(cuò)誤信息
debugger
處理this
this指向——普通函數(shù)
<!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>
<button>點(diǎn)擊</button>
<script>
// 普通函數(shù)： 誰調(diào)用我，this就指向誰
console.log(this) // window
function fn() {
console.log(this) // window
}
window.fn()
window.setTimeout(function () {
console.log(this) // window
}, 1000)
document.querySelector('button').addEventListener('click', function () {
console.log(this) // 指向 button
})
const obj = {
sayHi: function () {
console.log(this) // 指向 obj
}
}
obj.sayHi()
</script>
</body>
</html>
改變this
<!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>
<script>
const obj = {
uname: 'pink'
}
function fn(x, y) {
console.log(this) // window
console.log(x + y)
}
// 1. 調(diào)用函數(shù)
// 2. 改變 this 指向
fn.call(obj, 1, 2)
</script>
</body>
</html>
性能優(yōu)化
節(jié)流
案例
<!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>
<style>
.box {
width: 500px;
height: 500px;
background-color: #ccc;
color: #fff;
text-align: center;
font-size: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
const box = document.querySelector('.box')
let i = 1 // 讓這個(gè)變量++
// 鼠標(biāo)移動函數(shù)
function mouseMove() {
box.innerHTML = ++i
// 如果里面存在大量操作 dom 的情況，可能會卡頓
}
// console.log(mouseMove)
// 節(jié)流函數(shù) throttle
function throttle(fn, t) {
// 起始時(shí)間
let startTime = 0
return function () {
// 得到當(dāng)前的時(shí)間
let now = Date.now()
// 判斷如果大于等于 500 采取調(diào)用函數(shù)
if (now - startTime >= t) {
// 調(diào)用函數(shù)
fn()
// 起始的時(shí)間 = 現(xiàn)在的時(shí)間 寫在調(diào)用函數(shù)的下面
startTime = now
}
}
}
box.addEventListener('mousemove', throttle(mouseMove, 500))
// throttle(mouseMove, 500) === function () { console.log(1) }
// box.addEventListener('mousemove', function () {
// // 得到當(dāng)前的時(shí)間
// let now = Date.now()
// // 判斷如果大于等于 500 采取調(diào)用函數(shù)
// if (now - startTime >= t) {
// // 調(diào)用函數(shù)
// fn()
// // 起始的時(shí)間 = 現(xiàn)在的時(shí)間 寫在調(diào)用函數(shù)的下面
// startTime = now
// }
// })
</script>
</body>
</html>
防抖
文章來源：http://www.zghlxwxcb.cn/news/detail-591499.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-591499.html
到了這里，關(guān)于前端學(xué)習(xí)——JS進(jìn)階 (Day4)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
