1.0 ES6语法糖 [重点]
1.1数组的解构赋值
// 声明多个变量 let [a,b,c] = [1,2,3] let a=1，b=2； // 交换数值 [a,b] = [b,a] 2
1.12 函数的参数结构
文章来源：https://www.toymoban.com/news/detail-432729.html
1.2对象的解构
对象存在键值对，如果需要解构对象，你需要使用对象的键名为变量名
let data = {
code:200,
msg:'哥你请求通了',
dataList:{
res:[],
data:{}
}
}
let {需要结构的键名} = 需要结构的对象
let {code,dataList} = data
1.3 展开运算符
字符串的展开
// 字符串的展开
const str = 'hello world!'
console.log(...str); h e l l o w o r l d !
console.log([...str]); // 相当于split
console.log({ ...str });
数组的展开
// 数组的展开
const arr = [1, 2, 3, 4, 5]
const arr1 = [666, 666, 66, 5, 777]
console.log(...arr); 1 2 3 4 5
console.log([...arr]); // 数组的浅拷贝
console.log([...arr, ...arr1]); // 合并数组
const list = document.querySelectorAll('ul li')
console.log('list', [...list]); // 将伪数组转为数组
对象的展开
// 对象的展开
const obj = {
name: '小明',
age: 66,
like: '金花宝宝'
}
// console.log(...obj); // 报错
// console.log([...obj]);// 报错
console.log({ ...obj }); // 浅拷贝
console.log({ ...obj, ...{ name: '二狗', sex: '男' }, phone: 123123 }); // 对象的合并
1.4 模板字符串
`${xxx}`
1.5 对象简明写法
对象的简明写法1:
// 如果对象中键名与键值（变量）是一样的，可以简写成一个
let name = '张无忌'
const data = [123]
const obj ={
name，
data，
}
对象的简明写法2：
// 对象中的方法（函数），可以简写，去掉：及function
const obj = {
fn:function(){
// 函数体
}，
// 简写为：
fn(){
// 函数体
}
}
2.0 class类
2.1 什么是类？
具有相同特征的一类事物的抽象
2.2 类的实现
1、使用class关键字
2、类的动态属性定义在构造器中(constructor)，如果没有定义构造器，浏览器会自动生成一个空的构造器
3、类的方法直接定义在类种，自动挂载到原型对象上
4、静态方法以static关键字开头，只能构造函数自己调用，实例对象不可以调用
2.3 类的继承
1、类的继承通过关键字extends 来实现继承关系
2、子类必须在构造器中调用关键字super(),super就代表父类、超类、基类
3、子类的动态属性需在调用父类super之后
3.0 es6的模块化
模块化优点：【重点】
解决命名冲突，易于维护，责任单一
模块化的特点：【了解】
*一个JS文件，就是一个独立的模块，模块之间，可以相互地导入和导出*。
语法：
import : 用于导入其他模块提供的功能
export : 用于暴露该内容，以便其他地方导入
写法一：
导出：
export 你要导出的内容1；
export 你要导出的内容2；
export 你要导出的内容3；
export 你要导出的内容4；
导入：
import { 你要导入内容1，你要导入内容2，你要导入内容3，... } from '路径名/文件名'
写法二：
导出 ：
export default 你要导出的内容
导入 ：
import 变量名 from '路径名/文件名'
#a.js 定义需要暴露的内容
const data = 100
export default { data, isShow: true }
#b.js 引入需要使用的内容
// 默认导出
import 变量 from './a.js'
console.log(变量);
#在html文件中引入b.js
<script src="./module/b.js" type="module"></script>
# 一定要记得加上type 为 module
# 启动时要用虚拟服务器
文章来源地址https://www.toymoban.com/news/detail-432729.html
到了这里，关于es6的语法糖，展开运算符，类的实现的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
