javascrit技巧(二)

JavaScript/前端
488
0
0
2022-09-29
  1. Promise
  • 劫持catch

我们知道Promise.catch会在函数发生错误的时候调用,catch是可以被reject回调函数劫持掉

new Promise(() => {
  throw 123
}).then(() => {}, (error) => {
  console.log('reject', error)
}).catch(err => {
  console.log('catch', err)
})
// 以上代码不会执行catch,而是执行reject函数
  • finally

当我们想在无论是resolve还是reject的情况下都去执行某段函数时可以使用finally

new Promise(() => {
  resolve()
}).finally(() => {
})
  • 全局劫持Promise报错

触发时机与catch一致, 若是没有绑定reject函数就会冒泡到此处执行, 优先级低于Promise本身的catch

reject>Promise自身定义的catch>全局的错误监控

window.addEventListener('unhandledrejection', (err) => {
  console.log(err)
})
  • then状态判断

第二个then回调函数会根据前面一个then回调函数里是否有报错来决定是调用resolve函数还是reject函数,如下例

new Promise(() => {
 throw 123
}).then(() => {},() => {
 console.log(133)
 throw 1
}).then((err) => {
 console.log(2, err)
}, (data) => {
 console.log(3, data)
})
// 由于第一个then里throw一个错误
// 所以第二个then里会调用reject函数
// 若是第一个then函数里无论是resolve函数还是reject函数
// 只要没有发生错误,就还是调用下一个then的resolve函数

2.Array

  • 扁平化

1.利用递归

function flatArray(array) {
  return array.reduce((flat, next) => {
    return flat.concat(Array.isArray(next) ? flatArray(next) : next)
  }, [])
}

2.es7的flat函数

Array.flat()
  • 快速生成0-9的数组
[...Array(10).keys()]
  • 快速将数据填充到某些位置
new Array(length).fill(value, start, end)
  • 取最后一个值
Array.slice(-1)[0]

3. Object

  • 相同属性的key的取值
var object = {
  a:'one',
  b:'two',
  a:'three'
}
// object = { a:'three', b:'two' }
相同属性的key会被后面的覆盖掉,但是key的顺序还是按照第一个来
  • for of调用

for of只能用在拥有迭代器的对象里面,Array天生拥有迭代器,而Object不具备,不过我们可以自定义迭代

var person = {
  name: 'Martin',
  age: 25,
  sex: 'man',
  *[Symbol.iterator]() {
    for (let key in this) {
     yield [key, this[key]]
    }
  }
}
for (let value of person) {
  console.log(value)
  // [name, 'Martin']  
  // [age, 25]  
  // [sex, 'man']
}
  • 隐式转换
var object = {
  toString() {
    console.log('toString')
  },
  valueOf() {
    console.log('valueOf')
  },
}
+object
object == 1
// 优先调用valueOf,若没有则调用toString

4.Nunber

  • 进制转换
1.10进制转换为别的进制:toString(), Number需先赋值,涉及到装箱拆箱
若不懂装箱拆箱可以回页面开始查看javascript技巧(一)
2.别的进制转换10进制: parseInt(str, radius), 第二个参数是进制
  • null + 1
首先解释下为什么typeof nullobject
早在javascript最初版本的时候,由于考虑性能的问题采用了低位存储变量的方法
在javascript里认为二进制前3位是0的都是对象
而null的二进制表示是全0,所以它也被当做了对象
那么既然知道null是全0,而javascript的加减都是
通过二进制计算,0 + 1 = 1
  • 类型加减计算方式
Number+Number=>加法
Boolean+Number=>加法
Boolean+Boolean=>加法
Number+String=>连接
String+Boolean=>连接
String+String=>连接

javascript技巧(一)