一、深浅拷贝
1.基本数据类型和引用数据类型的区别:
1. 基本数据类型的变量存储的是值
引用数据类型的变量存储的是地址值
2. 基本数据类型的变量存储的值在栈内存
引用数据类型的变量存储的值在堆内存
3. 基本数据类型的变量存储的是值和值之间相互不影响
引用数据类型的变量存储的值和值,在同用 一个地址的情况,其中一个的值发生变化,另一个也变
2. 深浅拷贝之发生在引用数据类型之间。
深拷贝: 拷贝的是值,源对象和拷贝的对象之间互不影响
浅拷贝: 拷贝的是地址,源对象和拷贝的对象存在公用一个地址的情况,所以相互之间会收到影响
3.浅拷贝
方法一:Object.assign()
方法
用于将一个或多个源对象的可枚举属性复制到目标对象。它只会进行浅拷贝。
const obj1 = {a: 1,b: {c: 2}};const obj2 = Object.assign({}, obj1);obj2.a = 2; // obj1.a 仍然是 1obj2.b.c = 3; // obj1.b.c 也变成 3console.log(obj1); // { a: 1, b: { c: 3 } }console.log(obj2); // { a: 2, b: { c: 3 } }
方法二:展开运算符...
使用展开运算符 ...
可以方便地创建一个对象的浅拷贝。
const obj1 = {a: 1,b: {c: 2}};const obj2 = {...obj1 };obj2.a = 2; // obj1.a 仍然是 1obj2.b.c = 3; // obj1.b.c 也变成 3console.log(obj1); // { a: 1, b: { c: 3 } }console.log(obj2); // { a: 2, b: { c: 3 } }
方法:Object.create()
使用 Object.create()
可以创建一个新对象,新对象的原型指向指定的对象,但这并不是传统意义上的拷贝,而是基于原型链的一个新对象。
const obj1 = {a: 1,b: {c: 2}};const obj2 = Object.create(obj1);obj2.a = 2; // obj1.a 仍然是 1obj2.b.c = 3; // obj1.b.c 也变成 3console.log(obj1); // { a: 1, b: { c: 3 } }console.log(obj2); // { a: 2 }
//===================for=================================var arr = [12, [34, 56, 78], 543, 67, 78]var brr = []for (var i = 0; i < arr.length; i++) {brr.push(arr[i])}// console.log(brr);// 第一层是深拷贝brr[0] = 20;console.log(arr); // [12, [34, 56, 78], 67, 78]console.log(brr); // [20, [34, 56, 78], 67, 78]// 第二是浅拷贝brr[1][0] = 43console.log(arr);//[12, [43, 56, 78],, 67, 78]console.log(brr);// [12, [43, 56, 78],, 67, 78]// ===================arr.slice(0)===========================var arr = [12, [34, 56, 78], 543, 67, 78]var brr = arr.slice(0)// 第一层是深拷贝brr[0] = 20;console.log(arr); // [12, [34, 56, 78],, 67, 78]console.log(brr); // [20, [34, 56, 78],, 67, 78]// 第二是浅拷贝brr[1][0] = 43console.log(arr);//[12, [43, 56, 78],, 67, 78]console.log(brr);// [12, [43, 56, 78],, 67, 78]// ===================arr.concat()===========================var arr = [12, [34, 56, 78], 543, 67, 78]var brr = arr.concat()// 第一层是深拷贝brr[0] = 20;console.log(arr); // [12, [34, 56, 78],, 67, 78]console.log(brr); // [20, [34, 56, 78],, 67, 78]// 第二层是浅拷贝brr[1][0] = 43console.log(arr);//[12, [43, 56, 78],, 67, 78]console.log(brr);// [12, [43, 56, 78],, 67, 78]//--------------------------Array.from()----------------------//Array.from() 方法可以用于创建一个新数组实例,它会浅拷贝类数组对象或可迭代对象。const arr1 = [1, 2, 3, { a: 4 }];const arr2 = Array.from(arr1);arr2[0] = 0; // arr1[0] 仍然是 1arr2[3].a = 5; // arr1[3].a 也变成 5console.log(arr1); // [1, 2, 3, { a: 5 }]console.log(arr2); // [0, 2, 3, { a: 5 }]
直接赋值和浅拷贝的区别:
直接复制的方法,只要是对象都会相互影响,因为是直接拷贝对象栈里面的地址
浅拷贝如果是一层对象,不相互影响,如果出现多层对象拷贝还会相互影响
4.深拷贝
方法一:递归
函数递归:如果一个函数在内部自己调用自己,那么这个函数就是递归函数
由于递归函数很容易发生栈溢出错误,所以需要加推出条件return
let i = 0;function fn() {console.log(`调用${i} 次 `);if (i >= 6) {return}i++fn()}fn()
利用setTimeout实现setInterval效果
function getTime() {document.querySelector('#box').innerHTML = new Date().toLocaleString()setTimeout(getTime, 1000)getTime()}getTime()
const obj1 = {a: 1,b: {c: 2}};const obj2 = {};function deepCopy(newObj, oldObj) {for (let key in oldObj) {if ((oldObj[key]).instanceof Array) {newObj[key] = []deepCopy(newObj[key], oldObj[key])} else if ((oldObj[key]).instanceof Object) {newObj[key] = {}deepCopy(newObj[key], oldObj[key])} else {newObj[key] = oldObj[key]}}}deepCopy(obj2, obj1)obj1.b.c = 6console.log('obj2, obj1', obj2, obj1);
function deepClone(obj) {if (obj === null || typeof obj !== 'object') {return obj; // 基础情况,直接返回值}// 创建一个新对象const newObj = Array.isArray(obj) ? [] : {};// 递归拷贝每个属性for (const key in obj) {if (obj.hasOwnProperty(key)) {newObj[key] = deepClone(obj[key]);}}return newObj;
}
方法二:lodash
Lodash 简介 | Lodash中文文档 | Lodash中文网
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script>var p = {name: "zs",age: 12,wife: {name: "zs的媳妇"}}var newP = _.cloneDeep(p);newP.wife.name = 'ls的媳妇'console.log(p);console.log(newP);var arr = [12, [34], 5, 67, 78, 8]var newArr = _.cloneDeep(arr);arr[1][0] = 43;console.log(newArr);console.log(arr);
</script>
方法三:JSON.parse(JSON.stringify(obj))
var obj = { name: "zs", age: 18, wife: { name: "zs的wife", city: { name: '上海' } } }var obj1 = JSON.parse(JSON.stringify(obj))
二、节流(技能冷却)
节流:单位时间内,频繁触发事件,只执行一次
使用场景:鼠标移动mousemove,页面尺寸缩放resize,滚动条滚动scroll等
<!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: 200px;height: 200px;background-color: #ededed;}</style>
</head>
<body><div id="box"></div>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script>const box = document.querySelector('#box')let i = 1;function mouseMove() {box.innerHTML = i++}box.addEventListener('mousemove', _.throttle(mouseMove, 3000))
</script>
核心思路:
a.声明一个定时器变量
b.当鼠标每次滑动都先判断是否有定时器,如果有定时器则不开开启新定时器
c.如果没有定时器则开启定时器,记得存到变量里面
定时器里面调用执行的函数
定时器里面要把定时器清空
<!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: 200px;height: 200px;background-color: #ededed;}</style>
</head>
<body><div id="box"></div>
</body>
</html>
<script>const box = document.querySelector('#box')let i = 1;function mouseMove() {box.innerHTML = i++}box.addEventListener('mousemove', throttle(mouseMove, 3000))function throttle(fn, t) {let timer = null;return function() {if (!timer) {timer = setTimeout(() => {fn()clearTimeout(timer)timer = null}, t)}}}// let timer = null;// timer = setTimeout(() => {// clearTimeout(timer)// console.log(timer)// }, 1000)//setTimeout中无法清除定时器,因为定时器还在运行
</script>
三、防抖(回城)
防抖:单位时间内,频繁触发事件,只执行最后一次,只要被打断就需要重来
使用场景:搜索框搜索输入,手机号、邮箱验证输入检测
<!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: 200px;height: 200px;background-color: #ededed;}</style>
</head>
<body><div id="box"></div>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script>const box = document.querySelector('#box')let i = 1;function mouseMove() {box.innerHTML = i++}box.addEventListener('mousemove', _.debounce(mouseMove, 3000))
</script>
核心思路:
a.声明一个定时器变量
b.当鼠标每次滑动都先判断是否有定时器,如果有定时器则清除前面的定时器
c.如果没有定时器则开启定时器,记得存到变量里面
d.定时器里面调用执行的函数
<!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: 200px;height: 200px;background-color: #ededed;}</style>
</head>
<body><div id="box"></div>
</body>
</html>
<script>const box = document.querySelector('#box')let i = 1;function mouseMove() {box.innerHTML = i++}box.addEventListener('mousemove', debounce(mouseMove, 3000))function debounce(fn, t) {let timer = null;return function() {if (timer) {clearTimeout(timer)}timer = setTimeout(() => {fn()}, t)}}// debounce(mouseMove, 3000)调用函数拿到return结果// debounce(mouseMove, 3000)=function(){}
</script>
性能优化 | 说明 | 使用场景 |
节流 | 单位时间内,频繁触发事件,只执行一次 | 鼠标移动mousemove,页面尺寸缩放resize,滚动条滚动scroll等 |
防抖 | 单位时间内,频繁触发事件,只执行最后一次 | 搜索框搜索输入,手机号、邮箱验证输入检测 |
四、节流案例
页面打开,可以记录上一次视频播放的位置
思路:
在ontimeupdate事件触发的时候,每隔1秒,就记录当前时间到本地存储
下次打开页面,onloadeddata事件触发,就可以从本地存储取出时间,让视频从取出的时间播放,如果没有就默认0s
获取当前时间video.currentTime
<!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: 200px;height: 200px;background-color: #ededed;}</style>
</head>
<body><div id="box"><video src="https://v.itheima.net/LapADhV6.mp4" controls autoplay loop muted preload="auto" width="640" height="360"></video></div>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script>//ontimeupdate事件在视频/音频当前的播放位置发生改变时触发//onloadeddata事件在当前帧的数据加载完成且没有足够的数据播放视频/音频的下一帧时触发const video = document.querySelector('video')video.ontimeupdate = _.throttle(() => {console.log(video.currentTime);localStorage.setItem('currentTime', video.currentTime)}, 1000)video.onloadeddata = () => {video.currentTime = localStorage.getItem('currentTime') || 0}
</script>
五、this指向
普通函数:谁调用this的值指向谁
1.全局函数 === window
2.回调函数 ===window
回调函数: 当一个函数作为另一个函数的参数, 那么这个函数就叫回调函数
console.log(this); //windowfunction fn() {console.log(this); //window}fn()setTimeout(function() {console.log(this); //window}, 1000)
3.在对象方法中 ===对象本身
4.事件中的 ===绑定事件的事件源
document.querySelector('button').addEventListener('click', function() {console.log(this); //<button>按钮</button> ,指向button})const obj = {sayHi: function() {console.log(this);//{sayHi: ƒ},指向obj}}obj.sayHi()
5.构造函数中 === new出来的对象
6.原型对象上对应的方法体内的this ===new出来的对象
let a;let b;function Star(name, age, sex) {a = this;this.name = name;this.age = age;}const ldh = new Star('ldh', 55)console.log(a === ldh);//true//构造函数里面的 this就是实例对象Star.prototype.sing = function() {b = this;console.log('唱歌');};ldh.sing()console.log(b === ldh);//true
7.箭头函数===没有this 指向上级作用域
箭头函数:箭头函数中不存在this,箭头函数会默认绑定外层this的值,this引用的就是最近作用域中的this,向外层作用域中,一层一层查找this,直到有this的定义
const obj = {sayHi: () => {console.log(this); //window}}obj.sayHi()document.querySelector('button').addEventListener('click', () => {console.log(this); //window})
六、修改this的指向
有3个方法可以动态指定普通函数中的this指向
call(),apply(),bind()
1.fun.call(thisArg,arg1,arg2,...)
thisArg是在fun函数运行时指定的this值
返回值就是函数的返回值,因为它就是调用函数
2.fun.apply(thisArg,[arg1,arg2,...])
const obj = {name: 'zs'}function fn(x, y) {console.log(this); //windowconsole.log(x + y);}fn()//调用函数,改变this指向fn.apply(obj, [1, 2])
const arr = [11, 22, 33, 44, 55]const max = Math.max.apply(Math, arr)console.log('max', max);
3.fun.bind(thisArg,arg1,arg2,...)
bind()方法不会调用函数,
能改变函数内部的this指向
返回值是个函数,但是这个里面的this是更改过的this
const obj = {name: 'zs'}function fn(x, y) {console.log(this); //windowconsole.log(x + y);}fn()//不会调用函数,能改变this指向//返回值是个函数,但是这个函数里面的this是更改过的thisconst fun = fn.bind(obj)fun()
案例:点击按钮禁用,2秒后开启
<!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>发送短信</button>
</body>
</html>
<script>const btn = document.querySelector('button')btn.addEventListener('click', function() {this.disabled = truesetTimeout(function() {//在这个普通函数里,我们要this的指向由原来的window改为btn,可以使用箭头函数,也可以使用bindthis.disabled = false}.bind(btn), 2000)})
</script>
4.总结
call,apply,bind
相同点:都可以改变this的指向
区别点:
call和apply会调用函数,并且改变函数内部this的指向。
call和apply传递的参数不同,call传递多个参数,apply以数组的形式传递多个参数
bind不会调用函数,而是返回了一个this指向改变后的函数,需要调用这个函数。