开发技巧(记录一下...）

1 默认参数

function fn (name = '菜鸟', age = 18) {
  console.log(name, age)
}
fn() // 菜鸟 18
fn('半糖', 22) // 半糖 22

2 扩展运算符

const arr1 = [1, 2, 4]
const arr2 = [4, 5, 7]
const arr3 = [7, 8, 9]

const arr = [...arr1, ...arr2, ...arr3]
[
  1, 2, 4, 4, 5,
  7, 7, 8, 9
]

3 剩余参数

function fn (name, ...params) {
  console.log(name)
  console.log(params)
}
fn ('半糖', 1, 2) // 半糖 [ 1, 2 ]
fn ('半糖', 1, 2, 3, 4, 5) // 半糖 [ 1, 2, 3, 4, 5 ]

4 模板字符串

const name = 'bant'
const age = '22'

console.log(`${name}今年${age}岁啦`) // bant今年22岁啦

5 Object.keys

可以用来获取对象的key的集合，进而可以获得对应key的value

const obj = {
  name: 'bant',
  age: 22,
  gender: '男'
}

const keys = Object.keys(obj)
console.log(keys) // [ 'name', 'age', 'gender' ]

6 Array.prototype.filter

const filterArr = [1, 2, 3, 4, 5]

// 三个参数：遍历项 索引 数组本身
// 配合箭头函数，返回大于3的集合
const filterArr2 = filterArr.filter((num, index, arr) => num > 3)
console.log(filterArr2)
[ 4, 5 ]

7 Array.prototype.some

some，意思就是只要有一个是真，那就返回真

const someArr = [false, true, false, true, false]

// 三个参数：遍历项 索引 数组本身
// 配合箭头函数，只要有一个为true，就返回true，一个都true都没有，就返回false
const someArr2 = someArr.some((bol, index, arr) => bol)
console.log(someArr2)
true

8  Array.prototype.every

every跟some是相反的，some是只要有一个就行，every是要所有为真才返回真

const everyArr = [false, true, false, true, false]

// 三个参数：遍历项 索引 数组本身
// 配合箭头函数，需要所有为true，才返回true，否则返回false
const everyArr2 = everyArr.every((bol, index, arr) => bol)
console.log(everyArr2)

9 Array.prototype.reduce

// 计算 1 + 2 + 3 + 4 + 5
const reduceArr = [1, 2, 3, 4, 5]
const sum = reduceArr.reduce((pre, next) => {
  return pre + next
}, 0)
console.log(sum) // 15

// 统计元素出现个数
const nameArr = ['A', 'B', 'A', 'A', '科比']
const totalObj = nameArr.reduce((pre, next) => {
  if (pre[next]) {
    pre[next]++
  } else {
    pre[next] = 1
  }
  return pre
}, {})
console.log(totalObj) // { 'A': 3, B: 1, '科比': 1 }

10 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) // 一秒钟后输出 '错误啦'
})

 all方法

• 接收一个Promise数组，数组中如有非Promise项，则此项当做成功

• 如果所有Promise都成功，则返回成功结果数组

• 如果有一个Promise失败，则返回这个失败结果

 

// 如果全都为成功
function fn(time) {
  return new Promise((resolve, reject) => {
    console.log(88)
    setTimeout(() => {
      resolve(`${time}毫秒后我成功啦！！！`)
    }, time)
  })
}

Promise.all([fn(2000), fn(3000), fn(1000)]).then(res => {
  // 3秒后输出 [ '2000毫秒后我成功啦！！！', '3000毫秒后我成功啦！！！', '1000毫秒后我成功啦！！！' ]
  console.log(res) 
}, err => {
  console.log(err)
})



// 如果有一个失败
function fn(time, isResolve) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      isResolve ? resolve(`${time}毫秒后我成功啦！！！`) : reject(`${time}毫秒后我失败啦！！！`)
    }, time)
  })
}

Promise.all([fn(2000, true), fn(3000), fn(1000, true)]).then(res => {
  console.log(res)
}, err => {
  console.log(err) // 3秒后输出 '3000毫秒后我失败啦！！！'
})

 race方法

• 接收一个Promise数组，数组中如有非Promise项，则此项当做成功

• 哪个Promise最快得到结果，就返回那个结果，无论成功失败

function fn(time, isResolve) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      isResolve ? resolve(`${time}毫秒后我成功啦！！！`) : reject(`${time}毫秒后我失败啦！！！`)
    }, time)
  })
}

Promise.race([fn(2000, true), fn(3000), fn(1000)]).then(res => {
  console.log(res)
}, err => {
  console.log(err) // 1秒后输出
})

 11 for of 和 for in

• for in ：遍历方法，可遍历对象和数组

• for of ：遍历方法，只能遍历数组，不能遍历非iterable对象 先看for in：

const obj = { name: 'demo', age: 22, gender: '男' }
const arr = [1, 2, 3, 4, 5]

for(let key in obj) {
  console.log(key)
}
name
age
gender

for(let index in arr) {
  console.log(index)
}
0 1 2 3 4


for(let item of arr) {
  console.log(item)
}
1 2 3 4 5

12 Set 和 Map

Set

// 可不传数组
const set1 = new Set()
set1.add(1)
set1.add(2)
console.log(set1) // Set(2) { 1, 2 }

// 也可传数组
const set2 = new Set([1, 2, 3])
// 增加元素 使用 add
set2.add(4)
set2.add('demo')
console.log(set2) // Set(5) { 1, 2, 3, 4, 'demo' }
// 是否含有某个元素 使用 has
console.log(set2.has(2)) // true
// 查看长度 使用 size
console.log(set2.size) // 5
// 删除元素 使用 delete
set2.delete(2)
console.log(set2) // Set(4) { 1, 3, 4, 'demo' }

set 的去重性

// 增加一个已有元素，则增加无效，会被自动去重
const set1 = new Set([1])
set1.add(1)
console.log(set1) // Set(1) { 1 }

// 传入的数组中有重复项，会自动去重
const set2 = new Set([1, 2, 'demo', 3, 3, 'demo'])
console.log(set2) // Set(4) { 1, 2, 'demo', 3 }


//利用set的不重复性，可以实现数组的去重
const arr = [1, 2, 3, 4, 4, 5, 5, 66, 9, 1]

// Set可利用扩展运算符转为数组哦
const quchongArr = [...new Set(arr)]
console.log(quchongArr) // [1,  2, 3, 4, 5, 66, 9]

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()