开发技巧(记录一下...）
1 默认参数
function fn (name = '菜鸟', age = 18) {
console.log(name, age)
}
fn() // 菜鸟 18
fn('半糖', 22) // 半糖 222 扩展运算符
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)
true8 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 512 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()