目录
1.3,JSON.stringify JSON.parse实现
一,深浅拷贝(重点)
1.1原理
1.2,Lodash实现
_.cloneDeep(obj)
1.3,JSON.stringify JSON.parse实现
二,抛出异常
2.1,throw抛异常
会中断执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function fn(x, y) {
if (!x || !y) {
throw new Error('none arguments delivered')
}
return x + y
}
console.log(fn());
</script>
</body>
</html>
2.2,try/catch捕获错误信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>123</p>
<script>
function fn() {
//可能发生的代码放在try里
try {
const p = document.querySelector('.p')
p.style.color = 'red'
} catch (err) {
//拦截错误 提示浏览器提供的错误信息,但是不中断程序的执行
console.log(err.message);
//需要return中断程序
return
}
console.log(11);
}
fn()
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>123</p>
<script>
function fn() {
//可能发生的代码放在try里
try {
const p = document.querySelector('.p')
p.style.color = 'red'
} catch (err) {
//拦截错误 提示浏览器提供的错误信息,但是不中断程序的执行
console.log(err.message);
throw new Error('傻逼你写错了')
//需要return中断程序
// return
}
console.log(11);
}
fn()
</script>
</body>
</html>
2.3,finally
不管代码有没有错误都执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>123</p>
<script>
function fn() {
//可能发生的代码放在try里
try {
const p = document.querySelector('.p')
p.style.color = 'red'
} catch (err) {
//拦截错误 提示浏览器提供的错误信息,但是不中断程序的执行
console.log(err.message);
throw new Error('傻逼你写错了')
//需要return中断程序
// return
}
finally{
//不管代码对不对 代码都执行
console.log(111);
}
console.log(11);
}
fn()
</script>
</body>
</html>
2.4,debbuger【关键字】(打断点)
三,this的指向
3.1,普通函数,谁调用我 this就指向谁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>点击</button>
<script>
//普通函数谁调用我 我就指向谁
console.log(this);
function fn() {
console.log(this);
}
window.fn()
window.setInterval(function () {
console.log(this);
}, 1000)
document.querySelector('button').addEventListener(function(){
console.log(this); //指向button
})
const obj = {
sayHi:function(){
console.log(this); //指向obj
}
}
</script>
</body>
</html>
3.2,箭头函数 this 指向最近作用域中的this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const user = {
name:'xxx',
age:18,
walk:() =>{
console.log(this);
}
}
</script>
</body>
</html>
四,处理this的指向
4.1,call() *
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const obj = {
uname:'H',
}
function fn(x,y){
console.log(this
);
}
//调用函数
//改变this指向
fn.call(obj,1,2)
</script>
</body>
</html>
4.2,apply() ***
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const obj = {
age: 18
}
function fn(x, y) {
console.log(this); //指向 Obj
console.log(x + y);
}
//调用函数
//改变this指向 apply第二个参数是数组
fn.apply(obj, [1, 2])
//返回值 -->就是函数的返回值
//因为apply本身就是在调用函数
//使用场景 求数组最大值
//apply有两个参数 一this指向谁 二参数
const arr = [1, 2, 3, 8, 9, 4]
const max = Math.max.apply(Math, arr)
console.log(max);
const min = Math.min.apply(Math, arr)
console.log(min);
console.log(Math.max(...arr));
console.log(Math.min(...arr));
</script>
</body>
</html>
4.3,bind() *******
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//bind不会调用函数去改变this指向
const obj = {
age: 85
}
function fn() {
console.log(this);
}
//能改变this 的指向 拷贝经过更改 返回值是函数
const fun = fn.bind(obj)
console.log(fun);
fun() //指向函数 函数内This指向85
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>点击</button>
<script>
//bind不会调用函数去改变this指向
const obj = {
age: 85
}
function fn() {
console.log(this);
}
//能改变this 的指向 拷贝经过更改 返回值是函数
const fun = fn.bind(obj)
console.log(fun);
fun() //指向函数 函数内This指向85
//案例 Bind的妙用
const btn = document.querySelector('button')
btn.addEventListener('click', function () {
//禁用按钮
this.disabled = true
window.setTimeout(function () {
// 在普通函数里面由原来的window改为btn
this.disabled = false
}.bind(this), 2000) //用bind()改变this指向
})
</script>
</body>
</html>
五,防抖
相当于回城时被打断 回城重新开始
https://www.lodashjs.com/docs/lodash.debounce#_debouncefunc-wait0-options
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box"></div>
<script>
//手搓防抖函数
//核心seTimeout
//每次事件触发的时候 先判断是否有定时器 如果有先清除以前的定时器
//如果没有定时器,则开启定时器,存入到定时器变量里面
//定时器里面写函数调用
function debounce(fn,t){
let timer
//return返回一个匿名函数
return function(){
if(timer) clearTimeout(timer)
setTimeout(function(){
fn()
},t)
}
box.addEventListener('mousemove',debounce(mouseMove,500))
// debounce(mouseMove, 500)
// debounce(mouseMove,500) = function () { }
}
</script>
</body>
</html>
六,节流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function throttle(fn,t){
let timer = null
if(!timer){
timer = setTimeout(function(){
fn()
//清空定时器
timer = null
})
}
}
box.addEventListener('mousemove', throttle(mouseMove, 500))
</script>
</body>
</html>
总结
目录
1.3,JSON.stringify JSON.parse实现