本文已参与「新人创作礼」活动，一起开启掘金创作之路
深浅拷贝
主要介绍JavaScript中深浅拷贝的使用。顾名思义，两者实际上是对数据进行拷贝，对于简单数据类型而言，两者的区别不大。对于复杂数据类型而言，浅拷贝只会拷贝该数据的地址，深拷贝则会完全复制出一份新的数据。通过以下案例进行简要介绍：
<!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>
let a = [1, 2, 3];
let b = a;
console.log("浅拷贝");
console.log("a的值:", a);
console.log('a赋值给b,b的值:', b);
b[0] = 100;
console.log('修改b的值,b:', b);
console.log('此时a的值,a:', a);
console.log("-----------------------------");
console.log("深拷贝");
let c = [1, 2, 3];
let d = JSON.parse(JSON.stringify(c));
console.log("c的值:", c);
console.log('c赋值给d,d的值:', d);
d[0] = 100;
console.log('修改d的值,d:', d);
console.log('此时c的值,c:', c);
</script>
</body>
</html>
运行结果:
编辑
\
三种异步编程解决方案
主要介绍如何利用生成器以及promise对象解决回调地狱的问题。下面的案例是一个简单的回调地狱问题，本文将以此具体介绍三种方案的使用。（注意：本例添加了计时器，可以此观察数据的显示情况）
setTimeout(() => {
console.log(1);
setTimeout(() => {
console.log(2);
setTimeout(() => {
console.log(3);
}, 5000)
}, 3000)
}, 1000);
1.生成器方案
// 解决方案一：生成器
function time1() {
setTimeout(() => {
console.log(1);
t.next();
}, 1000)
}
function time2() {
setTimeout(() => {
console.log(2);
t.next();
}, 3000);
}
function time3() {
setTimeout(() => {
console.log(3);
}, 5000)
}
function* time() {
yield time1();
yield time2();
yield time3();
}
let t = time();
t.next();
2.promise对象方案
// 解决方案二：promise对象
function time1() {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log(1);
resolve();
}, 1000)
})
}
function time2() {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log(2);
resolve();
}, 3000);
})
}
function time3() {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log(3);
}, 5000);
})
}
time1().then((resolve, reject) => {
return time2();
}).then(() => {
return time3()
}).then(() => {})
3.async和await修饰符
// 解决方案三：async和await修饰符
function time1() {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log(1);
resolve();
}, 1000)
})
}
function time2() {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log(2);
resolve();
}, 3000);
})
}
function time3() {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log(3);
}, 5000);
})
}
async function t() {
await time1();
await time2();
await time3();
}
t();
\
