2021-05-10

Posted 2021-05-16 前端世界升级打怪

ES6分享（二）

---

一，变量的解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称
为解构赋值。

//数组的解构赋值
const arr = ['红楼梦', '三国演义', '西游记', '水浒传'];
let [honglou, sanguo, xiyou, shuihu] = arr;

/对象的解构赋值
const qi = {
 name: '奇奇',
 tags: ['帅哥', '爱豆', '全能', '前端']
};
let {name, tags} = qi;

//复杂解构
let wujing = {
 name: '吴京',
gender: '男',
 move: ['战狼', '战狼2', '杀破狼'],
 other: [
 {name: '谢楠'},
 {zhiye: '主持人'}
 ]
};
let {move: [one, two, three], other: [first, second]} = 
wujing;

---

二，模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识，特点：
1) 字符串中可以出现换行符
2) 可以使用 ${xxx} 形式输出变量

// 定义字符串
let str = `<ul>
<li>唐僧</li>
 <li>孙悟空</li>
 <li>猪八戒</li>
 <li>沙和尚</li>
 </ul>`;
// 变量拼接
let animal = '白龙马';
let result = `${animal}是一条龙`;

当遇到字符串与变量拼接的情况使用模板字符串

---

三.简化对象写法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这
样的书写更加简洁。

let name = '奇奇';
let age = function () {
 console.log('20');
}
//属性和方法简写
let shuaige = {
 name,
age,
 leixing() {
 console.log('帅哥')
 }
};

---

结尾

第二弹~~~