My-Es6

ES6常用语法总结

声明

let 和 const

• 作用范围

  • var命令在全局代码中执行
  • const和let命令只能在代码块中执行

• 赋值试用

  • const 命令声明常量后必须立马赋值
  • let 命令声明变量后可立马赋值或使用时赋值

• 重点

  • 不允许重复声明
  • 未定义就使用会报错：const 命令和 let 命令不存在变量提升
  • 暂时性死区：在代码块内使用 const 命令和 let 命令声明变量之前，该变量都不可用

箭头函数

• 使用方法 ()=>{}
  函数前如果只传一个参数则括号可以省略，函数体内没有操作只返回变量或者表达式则可以省略 return 及大括号，如果返回是对象需要用括号包裹
  例：

()=>1
v=>v+1
(a,b)=>a+b
()=>{
    alert("foo");
}
e=>{
    if (e == 0){
        return 0;
    }
    return 1000/e;
}

解构赋值

• 字符串解构：const [a, b, c, d, e] = “hello”

  • 数值解构：const { toString: s } = 123
  • 布尔解构：const { toString: b } = true

• 对象解构

  • 形式：const { x, y } = { x: 1, y: 2 }
  • 默认：const { x, y = 2 } = { x: 1 }
  • 改名：const { x, y: z } = { x: 1, y: 2 }

• 数组解构

  • 规则：数据结构具有 Iterator 接口可采用数组形式的解构赋值
  • 形式：const [x, y] = [1, 2]
  • 默认：const [x, y = 2] = [1]

• 函数参数解构

  • 数组解构：function Func([x = 0, y = 1]) {}
  • 对象解构：function Func({ x = 0, y = 1 } = {}) {}

注意：

• 匹配模式：只要等号两边的模式相同，左边的变量就会被赋予对应的值
• 解构赋值规则：只要等号右边的值不是对象或数组，就先将其转为对象
• 解构默认值生效条件：属性值严格等于 undefined
• 解构遵循匹配模式
• 解构不成功时变量的值等于 undefined
• undefined 和 null 无法转为对象，因此无法进行解构

set

• 定义：类似于数组的数据结构，成员值都是唯一且没有重复的值

• 声明：const set = new Set(arr)

• 入参：具有 Iterator 接口的数据结构

• 属性

  • constructor：构造函数，返回 Set
  • size：返回实例成员总数

方法

add()：添加值，返回实例
delete()：删除值，返回布尔
has()：检查值，返回布尔
clear()：清除所有成员
keys()：返回以属性值为遍历器的对象
values()：返回以属性值为遍历器的对象
entries()：返回以属性值和属性值为遍历器的对象
forEach()：使用回调函数遍历每个成员

通常用于数组去重 [...new Set(arr)]或Array.from(new Set(arr))

promise

Promise 是异步编程的一种解决方案

状态

进行中：pending
已成功：resolved
已失败：rejected

声明：new Promise((resolve, reject) => {})

resolve：将状态从未完成变为成功，在异步操作成功时调用，并将异步操作的结果作为参数传递出去
reject：将状态从未完成变为失败，在异步操作失败时调用，并将异步操作的错误作为参数传递出去

使用方法

then()：分别指定 resolved 状态和 rejected 状态的回调函数
catch()：指定发生错误时的回调函数

var waitSecond = new Promise(function (resolve, reject) {
  setTimeout(resolve, 1000)
})

waitSecond
  .then(function () {
    console.log('Hello') // 1秒后输出"Hello"
    return waitSecond
  })
  .then(function () {
    console.log('Hi') // 2秒后输出"Hi"
  })

通过.then 来进行异步编程串行化，避免了回调地狱

…运算符

延展操作符...可以在函数调用/数组构造时, 将数组表达式或者 string 在语法层面展开；还可以在构造对象时, 将对象表达式按 key-value 的方式展开。
例：

// 数组展开
const arr = [1, 2, 3, 4]
console.log([...arr, 5, 6]) // [1,2,3,4,5,6]

// 对象展开
const obj = { name: '小米', age: 14 }
console.log({ ...obj, height: 180 }) // {name: '小米', age: 14,height: 180}

async/await

async : 异步迭代器(for-await-of)：循环等待每个 Promise 对象变为 resolved 状态才进入下一步
一般同await一块使用
例：

async function getUserInfo (id) {
  const res = await getInfo(id)
}

注意
await 必须在 async 包裹的函数体里面

模板字符串

可以在字符串中使用变量

/* 
    1.ES5中的字符串 ： 一切以 引号'' 或 双引号"" 引起来的内容
        a. 不能在字符串中对变量取值，必须要使用连接符 +
        b. 无法识别字符串原有格式（缩进和换行），需要使用转义符 :  例如换行符 \n

    2.ES6中的模板字符串： 以 反引号`` 引起来的内容
        a. 可以在字符串中对象变量取值 ：  ${变量名}
        b. 可以识别字符串中原有格式
*/

let obj = {
  name: '张三',
  age: 20,
  sex: '男'
}

var num = 100

/* ES5 */

let str1 =
  '大家好' +
  '我的名字叫' +
  obj.name +
  '我的年龄是' +
  obj.age +
  '我的性别是' +
  obj.sex +
  '我的分数是' +
  num

console.log(str1)

/* ES6 */
let str2 = `大家好
我的名字叫${obj.name}
我的年龄是${obj.age}
我的性别是${obj.sex}

我的分数是${num}`

console.log(str2)

?.可选链操作费

可选链操作符?.允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效?.操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空 (nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
}

const dogName = adventurer.dog?.name
console.log(dogName) // undefined

console.log(adventurer.someNonExistentMethod?.()) // undefined

??空值合并操作符

空值合并操作符??是一个逻辑操作符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。

const foo = null ?? 'default string'
console.log(foo) // "default string"

const baz = 0 ?? 42
console.log(baz) // 0