es6知识点1-自备使用

一、ES6 实战语法总体地图

平时写 Vue / JavaScript，ES6 最值得掌握的大概是这些

1. let、const：变量声明
2. 模板字符串：${}
3. 解构赋值：对象、数组快速取值
4. 箭头函数：() => {}
5. 对象增强写法：属性简写、方法简写
6. 展开运算符：...
7. 剩余参数：...args
8. 函数默认参数
9. 数组常用方法：map / filter / find / some / every
10. Promise
11. async / await
12. class
13. 模块化：import / export
14. 可选链：?.
15. 空值合并：??
16. Set / Map

其中真正日常使用频率特别高的是：

1～11 + 13～15。

---

1. let 和 const

这是 ES6 最基础的变化。

以前 JavaScript 经常使用：

var name = '张三'

ES6 以后主要使用：

let name = '张三'

const age = 20

可以先简单理解：

let   = 这个变量以后还可能重新赋值
const = 这个变量以后不准备重新赋值

let

例如分页：

let pageNum = 1

pageNum = 2
pageNum = 3

这是正常的。

因为 pageNum 后面会发生变化。

---

const

例如：

const baseUrl = '/api'

baseUrl = '/test'

这样会报错。

因为 const 不允许重新赋值。

所以实际项目里，经常会看到：

const response = await getUserInfo()

const data = response.data

const userId = data.userId

这些变量拿到以后不会重新赋值，所以用 const。

---

一个很重要的误区

很多人以为：

const 声明的对象不能修改。

这是错的。

比如：

const user = {
  name: '张三',
  age: 20
}

user.age = 21

console.log(user)

结果：

{
  name: '张三',
  age: 21
}

完全没问题。

因为 const 限制的是：

变量不能指向另外一个对象。

不能这样：

const user = {
  name: '张三'
}

user = {
  name: '李四'
}

这才会报错。

---

实战建议

JavaScript 项目里可以遵循：

默认 const
需要重新赋值的时候才 let
基本不要 var

比如：

const userId = 1001
const userName = '张三'

let pageNum = 1
let total = 0

---

2. 模板字符串 ${}

以前 JavaScript 拼字符串很烦：

const name = '张三'
const age = 20

const text = '姓名：' + name + '，年龄：' + age

ES6 可以直接：

const name = '张三'
const age = 20

const text = `姓名：${name}，年龄：${age}`

注意这里不是普通单引号：

''

而是反引号：

``

---

${} 里面可以直接写表达式

const price = 100
const count = 3

console.log(`总金额：${price * count}`)

输出：

总金额：300

也可以：

const user = {
  name: '张三',
  age: 20
}

console.log(`用户：${user.name}，明年${user.age + 1}岁`)

---

实战场景 1：拼 URL

以前：

const url = '/user/detail?id=' + userId

现在：

const url = `/user/detail?id=${userId}`

在 Vue 里面经常会遇到：

export function getOrder(orderId) {
  return request({
    url: `/xxx/order/${orderId}`,
    method: 'get'
  })
}

这里：

`/xxx/order/${orderId}`

假设：

orderId = 100

最终就是：

/repair/order/100

---

实战场景 2：提示信息

const orderNo = 'WX140001'

this.$message.success(`xxxx ${orderNo} 创建成功`)

比：

this.$message.success('xxx ' + orderNo + ' 创建成功')

清楚很多。

---

3. 解构赋值

这个非常重要。

Vue、Axios、前端项目里到处都是。

假设后端返回：

const user = {
  id: 1001,
  name: '张三',
  age: 25
}

以前取数据：

const id = user.id
const name = user.name
const age = user.age

ES6 可以写：

const { id, name, age } = user

这叫：

对象解构。

相当于自动执行：

const id = user.id
const name = user.name
const age = user.age

---

实战例子

Axios 返回：

const response = {
  code: 200,
  msg: 'success',
  data: {
    id: 1001,
    name: '张三'
  }
}

可以：

const { code, msg, data } = response

console.log(code)
console.log(msg)
console.log(data)

甚至继续解构：

const { id, name } = response.data

console.log(id)
console.log(name)

---

修改变量名称

比如后端返回：

const user = {
  name: '张三'
}

你不想叫 name，可以：

const { name: userName } = user

console.log(userName)

注意：

name: userName

意思不是：

把 userName 给 name

而是：

取出 user.name
然后保存到变量 userName

这个第一次看非常容易反。

---

设置默认值

比如：

const user = {
  name: '张三'
}

const { name, age = 18 } = user

因为没有 age：

console.log(age)

结果：

18

实际项目里很有用：

const {
  pageNum = 1,
  pageSize = 10
} = params

---

数组也可以解构

例如：

const arr = ['Java', 'Vue', 'MySQL']

const [a, b, c] = arr

console.log(a) // Java
console.log(b) // Vue
console.log(c) // MySQL

实际更常见的是：

const [first, second] = arr

---

例如有一段：

const response = await getUserInfo()

const { id, name, age } = response.data

const message = `用户 ${name}，ID=${id}，年龄=${age}`

console.log(message)

这里其实连续用了三个 ES6 知识：

① const
   ↓
const response = ...

② 解构赋值
   ↓
const { id, name, age } = response.data

③ 模板字符串
   ↓
`用户 ${name}，ID=${id}`

你可以先把这一阶段记成：

1. let / const
   管变量

2. 模板字符串
   管字符串拼接

3. 解构赋值
   管对象/数组取值

这三个都属于看 ES6 代码之前必须熟悉的基础语法。

这三个开始就会大量对应你现在 Vue / Axios 项目里的真实代码。