CSDN话题挑战赛第2期
参赛话题：学习笔记
目录
1. 变量的解构赋值
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。
let [a, b, c] = [1, 2, 3];
// a = 1
// b = 2
// c = 3数组的解构赋值
const F4 = ['小沈阳','刘能','赵四','宋小宝'];
let [xiao, liu, zhao, song] = F4; //声明四个变量，里面的值就等于F4对应的值
console.log(xiao);
console.log(liu);
console.log(zhao);
console.log(song);
对象的解构赋值
const zhao = {
name: '赵本山',
age: '不详',
xiaopin: function(){
console.log("我可以演小品");
}
};
let {name, age, xiaopin} = zhao;
console.log(name);
console.log(age);
console.log(xiaopin);
xiaopin();
遇到方法频繁调用，则可以用解构赋值
// zhao.xiaopin();
// zhao.xiaopin();
// zhao.xiaopin();
// 创建了多个重复的zhao 不如解构赋值
let {xiaopin} = zhao;
xiaopin();
解构赋值的深拷贝与浅拷贝
- 深拷贝：修改新变量的值不会影响原有变量的值。默认情况下基本数据类型（number，string，null，undefined，boolean）都是深拷贝。
- 浅拷贝：修改新变量的值会影响原有的变量的值。默认情况下引用类型（object）都是浅拷贝。
解构赋值中深拷贝情况：
1）一维数组且里面的数据是简单类型
2）对象里面是简单类型
其他情况都是浅拷贝。
let a = {
age: 18
}
// 引用赋值
let b = a;
b.age = 22;
console.log(a.age); // 22let a = {
age: 18
}
//解构赋值
let b = {...a};
b.age = 22;
console.log(a.age); // 18可以看到改变 b的属性 age 的值，并不会改变对象 a 的属性的 age 的值。所以是一次深拷贝。
但是：
let a = {
age: 18,
address: {
city: 'shanghai'
}
}
let b = {...a};
b.address.city = 'shenzhen';
console.log(a.address.city); // shenzhen我们发现，解构出来的属性city的改变引起了原来数据的改变，也就是说，解构赋值其实依然是浅拷贝。
解构赋值，如果所解构的原对象是
1）一维数组且里面的数据是简单类型
2）对象里面是简单类型
那他就是深拷贝。
对于复杂类型，本质就是对引用类型数据进项等号赋值，那它就是浅拷贝；
2. 模板字符串
模板字符串（template string）是增强版的字符串，用反引号（`）标识，特点：
1. 字符串中可以出现换行符
let str = `<ul>
<li>沈腾</li>
<li>玛丽</li>
<li>魏翔</li>
<li>艾伦</li>
</ul>`;2. 可以使用 ${xxx} 形式输出变量
let lovest = '魏翔';
let out = `${lovest}是我心目中最搞笑的演员!!`;
console.log(out);3. 简化对象写法
ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。
即：变量 → 对象.属性；函数 → 对象.方法。
这样的书写更加简洁。
let name = '尚硅谷';
let change = function(){
console.log('我们可以改变你!!');
}
const school = {
name,
change,
improve(){
console.log("我们可以提高你的技能");
}
}
// 等效于
// const school = {
// name: name,
// change: change,
// improve: function(){
// console.log("我们可以提高你的技能");
// }
// }
console.log(school);