对象字面量增强
ES6中对 对象字面量 进行了增强，称之为 Enhanced object literals（增强对象字面量）
ES6的对象字面量增强本质是ES6提供的一种语法糖写法
let username = 'klaus'
let age = 'age'
const user = {
// 当属性名和属性值所对应的变量名相同的时候，可以简写
username,
// 普通方法可以简写
running() {
console.log("running")
},
// 属性名可以是变量或表达式
['add' + 'ress']: 'shanghai',
[age]: 24
}
解构
ES6中新增了一个从数组或对象中方便获取数据的方法，称之为解构Destructuring
解构赋值 是一种特殊的语法，它使我们可以将数组或对象“拆包”至一系列变量中
数组解构
const arr = ['Klaus', 'Alex', 'Steven', undefined, 'Jhon']
// 基本使用
const [name1, name2] = arr
console.log(name1, name2) // => Klaus Alex
// 数组的解构是有顺序的
// 如果某个数组元素项不需要解构，需要使用空位替代
const [user1, , user2] = arr
console.log(user1, user2) // => Klaus Steven
// 默认值
// 如果每个元素值为undefined的时候，就会使用传入的默认值
// 其余情况就使用元素本身的值
const [,,, username = 'default'] = arr
console.log(username) // => default
// 将解构出的元素放置到一个新的数组中
const [name, ...names] = arr
console.log(names) // => [ 'Alex', 'Steven', undefined, 'Jhon' ]
// 嵌套解构
const arr = [[1], [2], [3], [4]]
const [[num1], [num2], [num3]] = arr
console.log(num1, num2, num3) // => 1 2 3
对象解构
const user = {
name: 'Klaus',
age: 24,
address: 'shanghai'
}
// 基本使用
// 对象的解构是基于key，所以对象的解构没有顺序
const { name, address } = user
console.log(name, address) // => Klaus shanghai
// 重命名
const { age: userAge } = user // => 等价于 const userAge = user.age
console.log(userAge) // => Klaus
// console.log(age) // error
// 默认值
// 当解构出来的值为undefined的时候，就会使用默认值
const { gender = 'male' } = user
console.log(gender) // => male
// 将剩余key解构到一个新数组中
const {address: userAddress, ...userInfo} = user
console.log(userInfo) // => { name: 'Klaus', age: 24 }
// 嵌套解构
const user = {
name: 'Klaus',
age: 23,
friend: {
name: 'Alex'
}
}
const {friend: { name }} = user
console.log(name) // => Alex
示例
const info = {
x: 12,
y: 23,
width: 300,
height: 500
}
function getPosition({x = 0, y = 0} = {}) {
console.log(`${x}, ${y}`)
}
getPosition() // => '0, 0'
getPosition({x: 20}) // => '20, 0'
getPosition(info) // => '12, 23'
模板字符串
在ES6之前，如果我们想要将字符串和一些动态的变量（标识符）拼接到一起，是非常麻烦和丑陋的（ugly）
ES6允许我们使用字符串模板来嵌入JS的变量或者表达式来进行拼接：
-
首先，我们会使用 `` 符号来编写字符串，称之为模板字符串
-
其次，在模板字符串中，我们可以通过 ${expression} 来嵌入动态的内容
const name = 'Klaus'
const age = 23
// expression 可以是基本变量 也可以是 任意合法的JS表达式
console.log(`my name is ${name}, my age is ${age + 2}`)
// => my name is Klaus, my age is 25
标签模板字符串
模板字符串还有另外一种特殊用法：标签模板字符串（Tagged Template Literals）
我们平时很少直接使用标签模板字符串，但是在使用一些第三方库的时候，其内部函数调用可能需要我们以标签模板字符串的形式去进行调用，如styled-components
function foo(...args) {
console.log(args)
}
// 普通调用方式
foo(10, 20, 30)
// 标签模板字符串调用方式
// 标签模板字符串调用本质是一种特殊的函数调用方式
foo`my name is, my age is`
// => [['my name is, my age is']]
const username = 'Klaus'
const age = 24
// 模板字符串会被解析形成如下参数后被传入对应函数:
// 1. 第一个元素是数组，是被模块字符串拆分的字符串组合
// 2. 之后的参数内容是一个个模块字符串传入的变量值
foo`my name is ${username}, my age is ${age}`
// => [ [ 'my name is ', ', my age is ', '' ], 'Klaus', 24 ]
