一些js技巧

不受同源策略影响

自由变量的查找是在函数定义的地方，向上级作用域查找！

变量提升的注意点

var fn = 1
function fn() {}
console.log(fn) // 输出1
// 注意：fn函数为一等公民，提升顶部，var fn后面声明的，于是覆盖了fn函数。
// 如果var fn; 没赋值，则fn打印函数fn( )
// 如果是let、const则报错禁止重复声名！

new Object() 与 Object.create(null) 的区别

【后者必传引用类型的参数{},[],fn...】

前者就是 创建一个普通的对象，没有原型；传入基本类型的值会返回基本类型对象； 后者会创建一个空对象，并将原型指向传入的参数

this是执行时确定指向，而不是声明时确定指向

使用URLSearchParams获取url query【ie团灭】

例如：https://www.google.com/search?q=fsda&ie=utf-8 location.search ----> "?q=fsda&ie=utf-8"

window.requestAnimationFrame()

html结构，动态增加div的长度

使用setTimeout实现，需要手动控制帧率

使用RAF实现，不需要手动控制帧率，而且性能更高

切换到后台标签页，动画会自动暂停；切换回来则又会开始。

遍历对象

for... in 会把对象的原型属性也给遍历出来， 可以用hasOwnProperty过滤

Object.keys() 方法会返回一个由给定对象的自身可枚举属性组成的数组

可以使用slice获取数组最后一个元素而不改变数组。例如：[1,2,3].slice(-1)

addEventListener只监听一次

element.addEventListener('click', (e) => {
  event.getModifierState('CapsLock')  // CapsLock 大写是否打开
},{
    once: true // 第三个参数
})

过滤虚值

const myArray = [1, undefined, NaN, 2, null, '@denicmarko', true, 3, false];

console.log(myArray.filter(Boolean)) // [1, 2, "@denicmarko", true, 3]

范围内随机整数

function randomNumber(min, max) {
  if (min >= max) return max
  // return Math.floor(Math.random() * (max - min) + min) // 不包含max
  return Math.floor(Math.random() * (max - min + 1) + min) // 包含max
}