JavaScript ES6新增语法相关个人总结（三）

Promise基础

- 基本语法

代码例：

// 实例化Promise对象
const p = new Promise(function(resolve, reject){
  setTimeout(function(){
	let data = '请求成功的数据'
	// 请求成功，调用resolve
	resolve(data)
	
	// let err = '请求失败'
	// 请求失败，调用reject
	// reject(err)
  }, 1000)
})

// 调用Promise对象的then方法
p.then(function(res){
  console.log(res) // '请求成功的数据'
}, function(err){
  console.log(err) // '请求失败'
})

- then方法

then方法会返回一个Promise对象，该Promise对象内有两个属性

• PromiseState 状态
• PromiseResult 返回值
  `

根据then方法回调函数中返回的结果不同，这两个属性的返回值也不同

• 返回的结果是非Promise类型的属性，状态为成功，返回值为对象的成功的值
• 返回结果是Promise对象，这两个值则由该Promise对象的回调结果决定
• 抛出错误(throw）,状态为失败，返回值为throw的内容

代码例：

// 实例化Promise对象
const p = new Promise((resolve, reject)=>{
  setTimeout(()=>{
	resolve('成功数据')
  }, 1000)
})

// then方法的回调结果是一个Promise对象，由result接收
const result = p.then(res=>{
  console.log(res)
  // 1.返回非Promise类型的属性
  // return 123
  
  // 2.返回Promise对象
  // return new Promise((resolve, reject)=>{
  // 	resolve('ok')
  // 	reject('error')
  // })
  
  // 3.抛出错误
  // throw '出错了！'
})

console.log(result)
// Promise{
//   [[PromiseState]]
//   [[PromiseResult]] 
// }

- 链式调用

代码例：

// 实例化Promise对象
const p = new Promise((resolve, reject)=>{
  setTimeout(()=>{
  	resolve('成功')
  },1000)
})

// 由于then方法的回调结果是一个Promise对象
// 可以依靠该特性，进行链式调用
p.then(res=>{
  ...
}).then(res=>{
  ...
}).then(...)

- catch方法

catch方法相当于then方法的一个语法糖，负责捕捉Promise回调的reject部分

代码例：

// 实例化Promise对象
const p = new Promise((resolve, reject)=>{
  setTimeout(()=>{
  	reject('失败')
  },1000)
})

// then方法回调reject
// p.then(res=>{}, err=>{
//   console.log(err) // '失败'
// })

// catch方法
p.catch(err=>{
  console.log(err) // '失败'
})

Set（集合）

ES6 提供了新的数据结构 Set（集合）。它类似于数组，但成员的值都是唯一的，集合实现了 iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历

代码例：

// 声明一个set
let s = new Set()
// set内传参往往传入一个数组
let s2 = new Set([1,2,3,4,1,2,3])
// size 返回元素个数
console.log(s2.size) // 4
// add 增加一个新元素
// s2.add(5)
// delete 删除元素，返回值为Boolean
// s2.delete(1)
// has 检测集合中是否包含某个元素，返回值为Boolean
// s2.has(7)
// clear 清空集合，返回undefined
// s2.clear()

for(let item of s2){
  console.log(item) // 依次输出 1 2 3 4
}

- Set相关应用

代码例：

let arr = [1,2,3,4,5,4,3,1,2]
// 数组去重
let res = [...new Set(arr)]
console.log(res) // [1,2,3,4,5]

// 数组求交集
let arr2 = [4,5,5,6,7,5,4]
let res2 = res.filter(item => new Set(arr2).has(item))
console.log(res2) // [4,5]

// 数组并集
let res3 = [...new Set([...arr, ...arr2])]
console.log(res3) // [1,2,3,4,5,6,7]

// 数组差集（arr里有哪些是arr2里没有的）
let res4 = res.filter(item => !(new Set(arr2).has(item)))
console.log(res4) // [1,2,3]

Map数据结构

ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合。但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map 也实现了iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历。
`
相当于升级版的对象

代码例：

// 声明 Map
let m = new Map()

// 添加元素
m.set('name','sky')
m.set('fn', function(){
  console.log('fn')
})
let key = {age: 18}
let value = [1,2,3]
m.set(key, value)

// size 返回Map的元素个数
console.log(m.size) // 3

// get 返回键名对象的键值
console.log(m.get(key)) // [1,2,3]

// has 检测Map中是否包含某个元素，返回Boolean值
console.log(m.has('fn')) // true

// delete 删除某个元素，返回Boolean值
// m.delete('name')

// clear 清空
// m.claer()

// 遍历Map对象
for(let item of m){
  console.log(item) // 每个元素都是数组，由键名和键值组成
}

---

- Recorded by Scorpio_sky@2021-01-18