3. 变量的解构赋值
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。
3.1 数组的结构
const arr = ['apple', 'banner', 'orange'] // 相当于声明了三个变量 fruit1, fruit2, fruit3 // 将数组 arr 中的值按下标顺序赋值给三个变量 // 数组的解构使用 [] let [fruit1, fruit2, fruit3] = arr console.log(fruit1) console.log(fruit2) console.log(fruit3)
3.2 对象的解构
const person = { name: 'zs', age: 13, sayHello: function() { console.log('Hello!') } } // 对象的解构是按照对象中的属性名将属性值赋值给相同名对应的变量 let {name, age, sayHello} = person console.log(name) console.log(age) sayHello() // 对象解构赋值的用处 // person.sayHello() 麻烦 // 解构出来，直接调用，不用每次写对象名 sayHello()
// 对象解构可以单独解构出其中的属性 let {sayHello} = person sayHello()
频繁使用对象方法、数组元素，就可以使用解构赋值形式
4. 模板字符串
模板字符串（template string）是增强版的字符串，用反引号（ ` ）（键盘esc键下面）标识，特点：
- 字符串中可以出现换行符
- 可以使用 ${xxx} 形式输出变量
4.1 模板字符串声明
let str = `声明了一个模板字符串` console.log(str)
4.2 字符串中可以出现换行符
let str = ` <ul> <li></li> <li></li> <li></li> </ul> ` console.log(str)
4.3 可以使用 ${xxx} 形式输出变量
let name = 'zs' let age = 13 let str = `我的名字是${name}, 我的年龄为${age}` console.log(str)
当遇到字符串与变量拼接的情况使用模板字符串
5. 简化对象写法
ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。
let name = 'zs' let age = 12 let sayHello = function() { console.log('你好！') } let person1 = { name, age, sayHello, sayHello2() { console.log('hello!') } } // 相当于 // let person2 = { // name: name, // age: age, // sayHello: sayHello, // sayHello2: function() { // console.log('hello!') // } // } console.log(person1.name) console.log(person1.age) person1.sayHello() person1.sayHello2()
6. 箭头函数
ES6 允许使用箭头（=>）定义函数。
// 定义一个普通的函数 let f1 = function() { console.log('hello') } // 定义箭头函数 let f2 = () => { console.log('world') } f1() f2()
6.1 箭头函数 this 指向声明时所在作用域下 this 的值
箭头函数的 this 是静态的. this 始终指向函数声明时所在作用域下的 this 的值
function getThis1() { console.log(this) } let getThis2 = () => { console.log(this) } // 直接调用 getThis1() getThis2()
function getThis1() { console.log(this.name) } let getThis2 = () => { console.log(this.name) } window.name = 'window' const NAME = { name: 'NEW_NAME' } // 使用call方法改变this指向 getThis1.call(NAME) getThis2.call(NAME)
箭头函数的this指向并没有发生更改，依旧指向声明时候作用域下的this(window)
6.2 箭头函数不能作为构造实例化对象
let Person = (name, age) => { this.name = name this.age = age } let p = new Person('zs', 12) console.log(p)
6.2.1 函数this指向
函数this的指向在函数定义的时候是不能确定的，在调用执行函数时才能明确函数this的指向。
函数名()调用函数，this指向window对象名.函数()this指向调用这个函数的对象- 函数作为事件处理函数时，this指向触发事件的元素
- 构造函数中的this指向new出来的对象
- 定时器函数中的this指向window
6.3 不能使用 arguments 变量
// 普通函数可以使用 arguments 变量获取传入的参数值 let fn1 = function() { console.log(arguments) } // 箭头函数不能使用 arguments 变量获取传入的参数值 let fn2 = () => { console.log(arguments) } fn1(1,2,3) fn2(1,2,3)
6.4 箭头函数的简写
6.4.1 如果形参只有一个，则小括号可以省略
let fn3 = n => { console.log(n) } fn3(100)
6.4.2 函数体如果只有一条语句，则花括号可以省略
函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的
执行结果
let fn4 = n => console.log(n) fn4(100) let fn5 = n => n*n // 相当于： // let fn5 = n => { // return n*n // } let res = fn5(100) console.log(res)
6.5 箭头函数实践
6.5.1 点击 div 2s 后颜色变成『粉色』
普通函数实现：
// 获取元素 let div = document.querySelector('div') // 绑定事件 div.addEventListener( 'click', function() { // 回调函数使用普通函数 // 由于定时器函数的this指向window // 需要保存this，事件处理函数指向触发事件的元素 let _this = this setTimeout( function() { _this.style.background = 'pink' }, 2000 ) } )
箭头函数实现：
// 获取元素 let div = document.querySelector('div') // 绑定事件 div.addEventListener('click', function () { // // 回调函数使用普通函数 // // 由于定时器函数的this指向window // // 需要保存this，事件处理函数指向触发事件的元素 // let _this = this // setTimeout(function () { // _this.style.background = 'pink' // }, 2000) // 箭头函数实现 // 由于箭头函数this指向定义函数作用域下的this，所以箭头函数this指向触发事件的元素 setTimeout(() => { this.style.background = 'pink' }, 2000) })
6.6 箭头函数小结
- 箭头函数适合与 this 无关的回调. 定时器, 数组的方法回调
- 箭头函数不适合与 this 有关的回调. 事件回调, 对象的方法
