ES6-开发技巧

是什么

总结了一些工作中的 ES6 的相关开发技巧，可以方便大家查缺补漏，回忆起相关的知识点

1. let const 和 var

let 值可变，有变量提升（暂时性死区），没有初始化提升
const 值不可变（对象属性可变），有变量提升（暂时性死区），没有初始化提升
var 值可变，有变量提升，有初始化提升

var name = '王小花'
function fn () {
  console.log(name)
  let name = '李小明'
}
fn() // Cannot access 'name' before initialization

2. 扩展运算符

用途：合并元素

const arr1 = [1,2,3], arr2 = [4,5,6];

const arr = [...arr1, ...arr2]

3. 剩余参数

用途：传入参数合集


function fn(name, ...params) {
 ....
}
fn('王小花', '11', '三年级')

4. 模板字符串

用途：变量与字符串拼接

const name = "王小花"
console.log(`hello, ${name}`)

5. 对象同名属性

用途：当对象的属性名和变量名相同时，可以简写统一

const name =  "王小花";
const age = "100"
const person = {name, age}

6. 解构赋值

用途：简化对象取属性的值操作

const person = {name: "王小花", age: 100}
const {name, age} = person;
const {name: realName, age} = person;

7. 箭头函数

用途：完全修复了 this 的作用域指向，始终指向词法作用域，也就是外部的调用者。

1. 箭头函数不可作为构造函数，不能使用new
1. 箭头函数没有自己的this
1. 箭头函数没有arguments对象
1. 箭头函数没有原型对象

const x = x => x * x;

const fn = name => ({ name: name })

8. includes

用途：判断元素是否存在于数组中，存在返回 True, 否则返回 False

const flag = [1,2,3,4].includes("3")

9. for...in 和 for...of

for...in 可遍历对象和数组
for...of 只可遍历数组，不可遍历非iterable对象

const person = {
 'name': 'wxh',
 'age': 30,
 'gender': 'man'
}
for(let key in person) {
  console.log(key,'===', person[key])
}

const arr = [1,2,3,4]
for(let item of arr) { 
    console.log(item);
}

10. Object.values

用途：获取对象的值

const obj = {
  name: '王小花',
  age: 33,
  gender: '男'
}

const values = Object.values(obj)
console.log(values) // [ '王小花', 33, '男' ]

11. find 和 findIndex

用途：

find：找到返回被找元素，找不到返回undefined
findIndex：找到返回被找元素索引，找不到返回-1

const findArr = [
  { name: '王小花', age: '24' },
  { name: '李小明', age: '32' },
  { name: '张小桐', age: '34' }
]

const name = findArr.find(({ name }) => name === '李小明')
const index = findArr.findIndex(({ name }) => name === '张小桐')
console.log(name) // { name: '李小明', age: '32' }
console.log(index) // 2

12. Promise

promise对象用于表示一个异步操作的最终的状态和结果

promise是对象
异步操作
最终状态及结果值

function requestData () {
  // 模拟请求
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('王小花')
    }, 1000)
  })
}

requestData().then(res => {
  console.log(res) // 一秒钟后输出 '王小花'
}, err => {
  console.log(err)
})

function requestData () {
  // 模拟请求
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject('李小明')
    }, 1000)
  })
}

requestData().then(res => {
   console.log(res)
}, err => {
   console.log(err) // 一秒钟后输出 '李小明'
})

13. async/await

用途：以同步的方式执行异步操作

await只能在async函数里使用
await后面最好接Promise，如果后面接的是普通函数则会直接执行
async函数返回的是一个Promise

function fn1 () {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(5)
    }, 1000)
  })
}

function fn2 (data) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(data * 10)
    }, 2000)
  })
}

async function req () {
  const data1 = await fn1() // 等待1秒后返回数据再往下执行
  const data2 = await fn2(data1) // 拿data1去请求2秒后，往下走
  console.log(data2) // 总共3秒后 输出 50
}
req()

总结

方法都很基础，具体在开发中可以去灵活运用