1.0 ES6语法糖 [重点]

1.1数组的解构赋值

// 声明多个变量
let [a,b,c] = [1,2,3]
​
let a=1，b=2；
// 交换数值
[a,b] = [b,a]
​2

 1.12 函数的参数结构

 

 

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 
# 启动时要用虚拟服务器