ES6 新特性（0基础，精简版，学ES6看这篇就够了！！！）
1 let声明变量以及声明特性
1.1 声明变量
//声明变量
let a
//声明变量并赋值
let b = 10
//声明多个变量
let c = 5,d = 6,e = 7, arr = []1.2 声明特性
1.2.1 变量不能重复声明
// 1.变量不能重复声明
let star = "ldh"
let star = "zxy"
console.log(star)
1.2.2 块级作用域
//2.块级作用域 （变量只在作用域内有效）
{
let boy = 'lihua'
}
console.log(boy)
1.2.3 不存在变量提升
与var不同的是, let不能在声明变量之前，使用该变量
//3.不存在变量提升
console.log(song)
let song = 'xin'
1.2.4 不影响作用域链
在下述的fn()函数中，打印school变量，在当前的函数作用域中并未找到，就会向上一层的作用域寻找。
{
let school = 'college'
function fn(){
console.log(school)
}
fn()
} 
2 const声明常量以及特点
2.1 声明常量
// 1. 声明常量 (一定要赋初始值)
const PI = 3.14
// 2. 一般常量使用大写（潜规则），不强制要求
const a = 100
// 3. 常量的值不能修改
// PI = 32.2 块级作用域
常量a只会在作用域内有效，外部打印找不到
{
const a = 100
}
console.log(a);2.3 对于对象和数组元素修改，不算做对常量的修改，不会报错
const ARR = [1, 2, 3, 4]
ARR.push(5) // 因为常量所指向的地址没有改变
console.log(ARR)
3 变量的解构赋值
3.1 数组
const F4 = ['xx', 'yy', 'zz', 'kk']
let [x, y, z, k] = F4
console.log(x)
console.log(y)
console.log(z)
console.log(k)
3.2 对象
// 2. 对象
const zs = {
name: '张三',
age: 18,
sing: function() {
console.log('我会唱歌')
}
}
let {name, age, sing} = zs // 需要用大括号
console.log(name)
console.log(age)
console.log(sing)
sing()
4 模板字符串
4.1 声明 （使用反引号）
let str = `hello`
console.log(str, typeof str)
4.2 内容中可以直接出现换行符
let str2 = `
- 1
- 2
`
console.log(str2)4.3 变量拼接
4.3.1 内容中可以直接出现变量
let lovestr = 'shenteng'
console.log(`${lovestr} is a`)
4.3.2 内容中可以直接出现表达式
let a = 3
let b = 4
let str3 = `${a + b}`
console.log(str3)4.3.3 模板字符串中可以调用函数
function fun() {
return 'hello'
}
let str4 = `${fun()}`
console.log(str4)5 对象的简化写法
之前的写法
let name = '张三'
let change = function(){
console.log('这是一个方法')
}
const sch = {
name: name,
change:change,
improve: function(){
console.log('这是一个方法')
}
}
console.log(sch)ES6 允许在大括号里面直接写入变量和函数，作为对象的属性和方法
let name = '张三'
let change = function(){
console.log('这是一个方法')
}
const sch = {
// 1. 定义对象的简写形式
// 2. 省略了属性值和冒号
name,
change,
// 3.方法前面省略了function关键字
improve(){
console.log('这是一个方法')
}
}
console.log(sch)
6 箭头函数
// 使用之前方法声明一个函数
let fn = function(a,b){
return a + b
}
fn(1, 2)6.1 使用箭头函数声明一个函数
// ES6 允许使用 => 定义函数
//声明函数
let fn = (a,b) => {
return a + b
}
//调用函数
console.log(fn(1,2))
6.2 箭头函数中 this 是静态的， this 始终指向函数声明时所在作用域下的 this 的值
首先定义两个函数，一个是正常的形式，另一个是箭头函数的形式定义的
function getName(){
console.log(this.name)
}
let getName2 = () => {
console.log(this.name)
}
设置 window对象 的 name 属性
// 设置 window对象 的 name 属性
window.name = 'xxyyzz'
const school = {
name: 'qinghua'
}调用
getName() // this 指向 window 输出 xxyyzz
getName2() // this 指向 window 输出 xxyyzz使用call方法调用
getName.call(school) // 结果是qinghua
getName2.call(school) // 结果还是 xxyyzz6.3 不能作为构造实例化对象
let Person = (name, age) => {
this.name = name
this.age = age
}
let person = new Person('xxyyzz', 18)
console.log(person)
// 报错: Person is not a constructor6.4 不能使用 arguments 变量
let fn1 = () => {
console.log(arguments)
}
fn1(1,2,3)
// 报错: arguments is not defined6.5 箭头函数的简写
6.5.1 省略小括号, 当形参有且只有一个的时候
let add = n => {
return n + n
}6.5.2 省略花括号, 当形参有且只有一个的时候, 而且函数体只有一行语句的时候, 此时 return 必须省略, 语句的执行结果就是函数的返回值
let pow = n => n * n6.6 案例
需求1：点击div， 2s后颜色变成粉色
按照之前的做法
let box = document.querySelector('.box');
box.addEventListener('click', function() {
// 定时器
setTimeout(function() {
console.log(this);
this.style.backgroundColor = 'pink';
}, 2000)
})
由上述的结果可以看出，此时的this指向window, 并不是指向当前的box
方法1： 保存this的值
let box = document.querySelector('.box');
box.addEventListener('click', function() {
// 保存this的值
let _this = this
// 定时器
setTimeout(function() {
console.log(_this)
_this.style.backgroundColor = 'pink';
}, 2000)
})
方法2：使用箭头函数
因为 箭头函数中 this 是静态的， this 始终指向函数声明时所在作用域下的 this 的值
let box = document.querySelector('.box');
box.addEventListener('click', function() {
setTimeout(() => {
console.log(this);
this.style.backgroundColor = 'pink';
}, 2000)
})需求2：从数组中返回偶数的元素
方法1：使用之前的方法
// 需求2：从数组中返回偶数的元素
const arr = [1,2,6,8,9,100]
const result = arr.filter(function(item) {
if (item % 2 === 0) {
return true
} else {
return false
}
})
console.log(result)
方法2：使用箭头函数
// 需求2：从数组中返回偶数的元素
const arr = [1,2,6,8,9,100]
const result = arr.filter(item => item % 2 === 0)
console.log(result)
总结： 1. 箭头函数适合与this无关的回调，比如定时器、数组的方法回调
2. 箭头函数不适合于this有关的回调，比如DOM元素的事件回调、对象的方法
7 函数参数的默认值
如果形参需要接收三个参数值，而实参只传了两个，比如下面的加法函数，那么结果就会是NAN，因为c没有值，就是undefined
function add(a, b, c) {
return a + b + c
}
let result = add(1, 2)
console.log(result)
此时就可以知道参数默认值的好处了
function add(a, b, c = 10) {
return a + b + c
}
let result = add(1, 2)
console.log(result)
但是这边有一个注意点，就是具有默认值的参数，一般位置放在最后面
7.1 可以与解构赋值结合
// 2. 可以与结构赋值结合
function connect({host = '127.0.0.1', username, password, port}) {
console.log(host)
console.log(username)
console.log(password)
console.log(port)
}
connect({
host: 'localhost',
username: 'root',
password: 'root',
port: 3306
})
8 rest 参数
1. 先看下 ES5 获取实参的方式
// ES5 获取实参的方式
function date(){
console.log(arguments)
console.log(typeof arguments)
}
date('2019-10-10','2019-10-11','2019-10-12')
可以看出得出的结果是一个对象
2. 再看下ES6获取实参的方式 （rest 参数）
function date1(...args){
console.log(args)
}
date1('2021-10-10','2021-10-11','2021-10-12') // 得到的是数组
结果是数组，是数组的话就可以使用数组的一系列方法，提高了我们对参数的使用的灵活度，并且rest参数必须放到最后
9 扩展运算符
... 表示扩展运算符, 扩展运算符可以将数组转化为逗号分隔的参数序列
1. 当不使用扩展运算符时
const boys = ['张三', '李四', '王五']
// 声明一个函数
function show() {
console.log(arguments)
}
show(boys)
2. 当使用扩展运算符时
const boys = ['张三', '李四', '王五']
// 声明一个函数
function show() {
console.log(arguments)
}
show(...boys)
3. 应用案例：
案例1：数组的合并
首先看下ES5中的做法
//案例： 合并数组
const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
const arr = arr1.concat(arr2)
console.log(arr)
ES6使用扩展运算符合并数组
const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
const arr = [...arr1, ...arr2]
console.log(arr)
案例2：数组的克隆
// 2. 数组的克隆
const arr1 = [1, 2, 3]
const arr2 = [...arr1]
console.log(arr2)
案例3：将伪数组转换为真正的数组
const divs = document.querySelectorAll('div')
console.log(divs)
// 3. 将伪数组转化为真正的数组
const divs = document.querySelectorAll('div')
// console.log(divs)
const divArr = [...divs]
console.log(divArr)
10 Symbol 的基本使用
10.1 创建Symbol---方式1
// 1. 创建Symbol
let s = Symbol()
console.log(s, typeof s)
Symbol()中也可以传入字符串参数，相当于一个标志，但是返回的结果是不同的
// 1. 创建Symbol
let s = Symbol()
console.log(s, typeof s)
let s2 = Symbol('张三')
let s3 = Symbol('张三')
console.log(s2, s3)
console.log(s2 === s3) // false
10.2 创建Symbol---方式2 --->Symbol.for 创建
通过这种方式创建，可以通过描述的字符串得出唯一的 Symbol值
let s4 = Symbol.for('李四')
let s5 = Symbol.for('李四')
console.log(s4, s5)
console.log(s4 === s5) // true 
10.3 Symbol 创建对象属性
方式1：
let game = {
name: '俄罗斯方块',
up: function() {
},
down: function() {
}
}
let methods = {
up: Symbol(),
down: Symbol(),
}
// 添加两个方法
game[methods.up] = function() {
console.log('我要上升了！')
}
game[methods.down] = function() {
console.log('我要下降了！')
}
console.log(game)
方式2：
let info = {
name: '张三',
[Symbol('age')]: 20,
[Symbol('say')]: function() {
console.log('我要说话了！')
}
}
console.log(info)
10.4 Symbol内置值
参考：Symbol.asyncIterator - JavaScript | MDN (mozilla.org)
11 迭代器
// 声明一个数组
const arr = [1, 2, 3, 4, 5]
// 使用 for...of 遍历数组
for (let element of arr) {
console.log(element)
// 输出：1 2 3 4 5
}
工作原理：
1. 创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。
2. 第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。
3. 第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。
4. 不断调用指针对象的next方法，直到它指向数据结构的结束位置。
5.每一次调用next方法都会返回一个包含value和done两个属性的对象。其中，value属性是当前成员的值，done属性是一个布尔值，表示遍历是否结束。
const arr = [1, 2, 3, 4, 5]
let iterator = arr[Symbol.iterator]()
console.log(iterator.next()) // { value: 1, done: false }
console.log(iterator.next()) // { value: 2, done: false }
console.log(iterator.next()) // { value: 3, done: false }
console.log(iterator.next()) // { value: 4, done: false }
console.log(iterator.next()) // { value: 5, done: false }
console.log(iterator.next()) // { value: undefined, done: true }
案例：迭代器自定义遍历对象
1. 当我们直接遍历对象时
const banji = {
name:'终极一班',
stus:[
'xiaoming',
'xiaoning',
'xiaotian',
'knight'
],
}
for(let v of banji){
console.log(v)
}
无法遍历，因为对象没有iterable 这个属性
现在我们有个需求是: 需要遍历该对象中stus: 让其中的值逐条输出
因为对象没有iterable属性，所以需要加上这个接口，并让其返回一个对象，该对象中是一个next() 函数，用来遍历
// 声明一个对象
const banji = {
name:'终极一班',
stus:[
'xiaoming',
'xiaoning',
'xiaotian',
'knight'
],
[Symbol.iterator]() {
// 索引变量
let index = 0
return {
next: () => {
if (index < this.stus.length) {
// 构建一个yield返回值
const result = {value: this.stus[index], done: false}
// 下标自增
index++
return result
}
// 返回结束标志
return {value: undefined, done: true}
}
}
}
}
for(let v of banji){
console.log(v)
}
12 生成器函数
12.1 简单介绍
生成器其实就是一个特殊的函数，进行异步编程
写法的特殊地方就是需要加个 * 星号，靠左，靠右，中间都行
function * gen() {
console.log("hello generator")
}
let iterator = gen()
console.log(iterator)
上述函数中的返回结果并没有输出，看它的返回结果实际上是一个迭代器对象，所以我们就可以调其中的next()方法，来运行这个函数中的console.log()语句
function * gen() {
console.log("hello generator")
}
let iterator = gen()
console.log(iterator)
iterator.next()
12.2 函数中可以出现yield语句
yield可以看成是函数代码的分隔符
function * gen() {
console.log("111")
yield "我是1" // yield为函数代码的分隔符
console.log("222")
yield "我是2"
console.log("333")
yield "我是3"
console.log("444")
}
let iterator = gen()
console.log(iterator)
iterator.next()
iterator.next()
iterator.next()
iterator.next()这样子的话，就不像原来一下输出了执行的结果，而是通过next方法来控制执行
12.3 生成器函数参数
function * gen(arg) {
console.log(arg);
let re1 = yield 111
console.log(re1)
let re2 = yield 222
console.log(re2)
let re3 = yield 333
console.log(re3)
}
// 执行获取迭代器对象
let iterator = gen("AAA")
console.log(iterator.next())
// next方法可以传入实参
console.log(iterator.next("BBB")) // 第二次调用传入的参数，将作为第一个yield语句的返回结果
console.log(iterator.next("CCC")) // 第三次调用传入的参数，将作为第二个yield语句的返回结果
console.log(iterator.next("DDD")) // 第四次调用传入的参数，将作为第三个yield语句的返回结果
12.4 生成器函数案例
12.4.1 案例1
1s 后控制台输出 111，然后2s后输出 222， 然后3s后输出 333
按照之前的写法的话，当我们有很多个回调任务时，代码的缩进就会不断地向前推进，不利于阅读，这种现象就被称为 “回调地狱”
setTimeout(()=> {
console.log(111)
setTimeout(()=> {
console.log(222)
setTimeout(()=> {
console.log(333)
},3000)
},2000)
}, 1000)解决回调地狱问题：使用生成器函数
// 定义三个任务函数
function one() {
setTimeout(() => {
console.log(111)
iterator.next() // 执行下一个任务
}, 1000)
}
function two() {
setTimeout(() => {
console.log(222)
iterator.next()
}, 2000)
}
function three() {
setTimeout(() => {
console.log(333)
iterator.next()
}, 3000)
}
// 定义生成器函数
function* gen() {
yield one()
yield two()
yield three()
}
// 调用生成器函数
let iterator = gen()
iterator.next()
12.4.2 案例2
模拟获取：用户数据、订单数据、商品数据
// 案例2： 模拟获取：用户数据、订单数据、商品数据
function getUsers() {
setTimeout(() => {
let data = '用户数据'
// 调用next方法，并将数据传入
iterator.next(data)
}, 1000)
}
function getOrders() {
setTimeout(() => {
let data = '订单数据'
iterator.next(data)
}, 1000)
}
function getGoods() {
setTimeout(() => {
let data = '商品数据'
iterator.next(data)
}, 1000)
}
function* gen() {
let users = yield getUsers()
console.log(users)
let orders = yield getOrders()
console.log(orders)
let goods = yield getGoods()
console.log(goods)
}
// 调用生成器函数
let iterator = gen()
iterator.next()13 Promise
13.1 实例化Promise对象
// 实例化 Promise 对象
const promise = new Promise((resolve, reject) => {
// 异步操作
setTimeout(() => {
const success = true
if (success) {
resolve(success)
} else {
reject(success)
}
}, 1000)
});
// 调用 Promise 对象 then 方法处理成功情况
promise.then((value) => {
console.log(value)
}, function(reason) {
console.log("操作失败！")
});13.2 Promise-then方法
// 创建Promise对象
const promise = new Promise((resolve, reject) => {
setTimeout(() =>{
resolve('成功')
})
})调用 then 方法，then方法的返回结果是 Promise 对象，对象状态由回调函数执行结果决定
1. 如果回调函数中返回的结果是 非Promise类型的属性，状态为成功，返回值为对象的成功的值
const result = promise.then((value) =>{
console.log(value)
return "I love you"
}, (reason) => {
console.error(reason)
})
console.log(result)
2. 如果回调函数中返回的结果是 Promise 对象，状态为返回结果的状态，返回值为对象的成功的值
const result = promise.then((value) =>{
console.log(value)
return new Promise((resolve, reject) =>{
resolve('ok')
})
}, (reason) => {
console.error(reason)
})
console.log(result)
3. 如果回调函数中返回的结果是 抛出异常，状态为失败，返回值为对象的失败的值
const result = promise.then((value) =>{
console.log(value)
throw '出错了'
}, (reason) => {
console.error(reason)
})
console.log(result)
13.3 Promise-catch方法
const promise = new Promise((resolve,reject)=>{
setTimeout(()=>{
reject('出错啦！')
},1000)
})
promise.catch(reason => {
console.warn(reason)
})
14 Set集合
14.1 声明一个Set
let mySet = new Set()
console.log(mySet)
console.log(typeof mySet)
let mySet2 = new Set(["好事","坏事","大事","好事"]) // 可以去重
console.log(mySet2)
14.2 集合的相关操作
let mySet2 = new Set(["好事","坏事","大事","好事"]) // 可以去重
console.log(mySet2)
// 元素个数
console.log(mySet2.size)
// 添加元素
mySet2.add("小事")
console.log(mySet2)
// 删除元素
mySet2.delete("坏事")
console.log(mySet2)
// 检测是否有该元素
console.log(mySet2.has("大事")) // 返回结果是boolean类型
// 清空set
mySet2.clear()
console.log(mySet2)
// 遍历Set: 集合实现了iterator接口，所以可以使用for...of进行遍历
for(let item of mySet2){
console.log(item)
}15 Map
15.1 声明一个Map
let myMap = new Map()15.2 Map的相关操作
// 添加键值对(元素)
myMap.set('name', '张三')
myMap.set('age', 18)
let key = {
school: 'university'
}
myMap.set(key, ['清华大学','北京大学'])
console.log(myMap)
// 获取Map中的元素个数
console.log(myMap.size)
// 删除元素
myMap.delete('age')
console.log(myMap)
// 获取元素
console.log(myMap.get('name'))
console.log(myMap.get(key))
// 判断Map中是否存在某个元素
console.log(myMap.has('name'))
console.log(myMap.has('age'))
// 清空Map
// myMap.clear()
// console.log(myMap)
// 遍历Map
for (let v of myMap) {
console.log(v)
}
16 class类介绍
先看下ES5中用构造方法来实例化对象的做法
// 手机
function Phone(brand, price) {
this.brand = brand
this.price = price
}
// 添加方法
Phone.prototype.call = function() {
console.log("正在呼叫...")
}
// 实例化对象
let honor = new Phone('荣耀', 2499)
console.log(honor)
honor.call()
再看下ES6中通过 class类 来实现
class Phone {
// 构造方法
constructor(brand, price) { // constructor 名字不能修改，是固定的
this.brand = brand
this.price = price
}
// 添加方法，（方法必须使用该语法）
call() {
console.log("华为手机正在呼叫...")
}
}
// 实例化对象
let honor = new Phone('华为', 2499)
console.log(honor)
honor.call()
16.1 类的静态成员
// 类的静态成员
class Phone {
static name = 'nojiya'
static change = function() {
console.log("我可以改变你们")
}
}
let phoneSHI = new Phone()
console.log(phoneSHI)
console.log(phoneSHI.name) // undefined
console.log(Phone.name) // nojiya
console.log(Phone.change) 
也就是说static标注的属性和方法是属于类的，而不属于实例对象
16.2 类继承
ES5中使用构造函数实现类继承
//1. ES5中使用构造函数实现类继承
// 手机
function Phone(brand, price) {
this.brand = brand
this.price = price
}
// 添加方法
Phone.prototype.call = function() {
console.log("正在呼叫...")
}
// 智能手机
function SmartPhone(brand, price, color, size) {
Phone.call(this, brand, price) //call 方法是 JavaScript 中的函数方法，它可以在指定的作用域中调用函数，并将指定的参数传递给该函数。
this.color = color
this.size = size
}
// 设置子集构造函数的原型
SmartPhone.prototype = new Phone()
SmartPhone.prototype.constructor = SmartPhone
// 添加子类自己的方法
SmartPhone.prototype.photo = function() {
console.log("正在拍照...")
}
// 测试
let s = new SmartPhone("小米", 399, "黑色", "4.7inch")
console.log(s)
s.call()
s.photo()
ES6中使用class实现类继承
// 2. ES6中使用class实现类继承
// 手机
class Phone {
constructor(brand, price) {
this.brand = brand
this.price = price
}
call() {
console.log("正在呼叫...")
}
}
// 智能手机
// extends关键字
class SmartPhone extends Phone
{
constructor(brand, price, color, size) {
super(brand, price) //super 关键字用于调用父类的构造函数或方法。
this.color = color
this.size = size
}
photo() {
console.log("正在拍照...")
}
}
// 测试
let s = new SmartPhone("荣耀", 1399, "银色", "4.2inch")
console.log(s)
s.call()
s.photo()
16.3 子类对父类方法的重写
16.4 class 中的get 和 set
1、get:
// get
class Phone {
get price() {
console.log('price属性被读取了')
return 'iloveyou'
}
}
// 实例化对象
let s = new Phone()
console.log(s.price)
2、set:
// set
class Phone {
set price(newVal) {
console.log('price属性被修改了')
}
}
// 实例化对象
let s = new Phone()
s.price = 'free'
17 ES6中的数值扩展
17.1 Number.EPSILON
Number.EPSILON 是JavaScript表示的最小精度, EPSILON 属性的值接近于 2.2204460492503131e-16
// 1. Number.EPSILON 是JavaScript表示的最小精度
// EPSILON 属性的值接近于 2.2204460492503131e-16
function equal(a, b) {
if (Math.abs(a - b) < Number.EPSILON) {
return true
} else {
return false
}
}
console.log(0.1 + 0.2) // 0.30000000000004
console.log(0.1 + 0.2 === 0.3) // false
console.log(equal(0.1 + 0.2, 0.3)) // true
17.2 二进制、八进制、十进制、十六进制
// 二进制、八进制、十进制、十六进制
let b = 0b10
let o = 0o10
let d = 10
let x = 0x10
console.log(b, o, d, x) // 2 8 10 16
17.3 Number.isFinite()
判断一个数是否是有限大的数
function isFinite(num) {
return Number.isFinite(num)
}
console.log(isFinite(5)) // true
console.log(isFinite(5.0)) // true
console.log(isFinite(5.1)) // true
console.log(isFinite(Infinity)) // false
17.4 Number.isNaN()
判断一个数是否是 NaN
function isNaN(num) {
return Number.isNaN(num)
}
console.log(isNaN(5)) // false
console.log(isNaN(NaN)) // true
17.5 Number.parserInt()、 Number.parseFloat()
将字符串转为整数
let num = "123.456";
console.log(Number.parseInt(num)); // 123
console.log(Number.parseFloat(num)); // 123.456
17.6 Number.isInteger()
判断一个数是否为整数
let num = 12.34
console.log(Number.isInteger(num)); // false
let num1 = 12
console.log(Number.isInteger(num1)); // true
17.7 Math.trunc()
将数字的小数部分抹掉
// 将数字的小数部分抹掉
// Math.trunc()
let num = 12.34
console.log(Math.trunc(num)); // 12
let num1 = -12.34
console.log(Math.trunc(num1)); // -12
17.8 Math.sign()
判断一个数是正数、负数、还是零
// 判断一个数是正数、负数、还是零
// Math.sign()
let num = 12.34
console.log(Math.sign(num)); // 1
let num1 = -12.34
console.log(Math.sign(num1)); // -1
let num2 = 0
console.log(Math.sign(num2)); // 0
18 ES6中对象方法的扩展
18.1 Object.is
判断两个值是否完全相等
console.log(Object.is(120, 120)) // true
console.log(Object.is(120, 121)) // false;
18.2 Object.assign
对象的合并
const config1 = {
host: 'localhost',
port: 3306,
test: 'test'
}
const config2 = {
host: '192.168.0.100',
port: 8080,
}
console.log(Object.assign(config1, config2))
18.3 Object.setPrototypeOf 设置原型对象
// Object.setPrototypeOf 设置原型对象
const school = {
name: 'qinghua',
}
const city = {
xiaoqu: ['北京', '上海']
}
console.log(Object.setPrototypeOf(school, city))
18.4 Object.getPrototypeOf 获取原型对象
console.log(Object.getPrototypeOf(school))
19 ES6中的暴露 -> export
1. 分别暴露
// 分别暴露
export let school = 'xx'
export function teach() {
console.log('teach')
}
2. 统一暴露
// 统一暴露
let school = 'ty'
function sayHello() {
console.log('hello')
}
export { school, sayHello }
3. 默认暴露
// 默认暴露
export default {
name: '张三',
age: 18,
change: function() {
console.log('change')
}
}
20 ES6中的导入 -> import
方式1：通用的方式
方式二：解构赋值形式
方式三：简便形式，针对默认暴露
因为将所有的引入操作的代码都写在页面中，是非常占地方的，所以我们将它们都引入到一个入口文件app.js中，然后在页面中引入这个入口文件
// 入口文件
// 模块引入
import * as m1 from './m1.js'
import * as m2 from './m2.js'
import * as m3 from './m3.js'21 babel 对ES6模块化代码进行转换
并不是所有的浏览器都能向chrome一样都能识别ES6新特性,所以需要进行转换
1. 安装工具： babel-cli babel-preset-env browserify
npm i babel-cli babel-preset-env browserify -D
2. npx babel src/js -d dist/js --presets=babel-preset-env
3. npx browserify dist/js/app.js -o dist/bundle.js
