002-解构赋值-模版字符串-箭头函数
1. 解构赋值
- 允许按照一定模式从数组和对象中提取值,对变量进行赋值
- 数组的解构
const F4 = ["小沈阳","刘能","赵四","宋小宝"];
let [xiao,liu,zhao,song] = F4;
- 对象的解构
const zhao = {
name: "赵本山",
age: "不详",
xiaopin: function(){
console.log("我可以演小品");
}
}
//解构方式1
let {name,age,xiaopin} = zhao;
//解构方式2
let {xiaopin} = zhao;
xiaopin();
//解构方式3
let {name:newName} = zhao;
- 上述三种解构的区别与联系:
- 都是通过键值对查找赋值,与书写顺序无关
- 换句话说: 解构方式1中,将
{name,age,xiaopin}
调换位置,结果和原来一样,如果将name
改成Name
,会赋值失败(undefined
),其余两个依旧可以正常赋值。(等号左边是变量,右边是键值对) - 第三种解构方式:
name
是key ,newName
是value ,也是新变量名,zhao
中的都是键值对
2. 模版字符串
- ES6 引入反引号声明字符串
- 声明
let str = `我也是一个字符串哦`;
- 内容中可以直接出现换行符
let str = `<ul>
<li>沈腾</li>
<li>玛丽</li>
<li>艾伦</li>
</ul>`
- 变量拼接
let lovest = "沈腾";
let out = `${lovest}是我心目中最搞笑的演员`;
注意:${}
是固定格式
3. 简化对象写法
- ES6 允许在大括号里直接写入变量和函数,作为对象的属性和方法
- 之前的写法:
let name = "尚硅谷";
let change = function(){
console.log("我们可以改变你");
}
const school = {
name:name,
change: change,
improve: function(){
console.log("我们可以提高你的技能");
}
}
- 简化写法:
let name = "尚硅谷";
let change = function(){
console.log("我们可以改变你");
}
const school = {
name,
change,
improve(){
console.log("我们可以提高你的技能");
}
}