js小陷阱汇总

1、数组排序

console.log([1, 2, 5, 10].sort()) //[1, 10, 2,5]
console.log([1, 2, 5, 10].sort((a, b) => a-b)) // [1, 2, 5, 10]
console.log([1, 2, 5, 10].sort((a, b) => b-a)) // [10, 5, 2, 1]

2、替换函数

var s = 'bob'
console.log(s.replace('b', 'l')) // lob
console.log(s.replace(/b/g, 'l')) // lol
console.log(s) // bob

3、比较运算

console.log('abc' === 'abc') // true
console.log(1 === 1) // true
console.log([1, 2, 3] === [1, 2, 3]) //false
console.log({a: 1} === {a: 1}) // false
console.log({} === {}) // false

4、数组不是基础类型

var arr = []
console.log(typeof arr) // object
console.log(Array.isArray(arr)) // true

5、document.querySelector，document.querySelectorAll
以前的原生DOM操作方法很繁琐，有了这两个可以使用单一的方法进行多种类型的DOM选择
但名字依旧繁琐，可以使用熟悉的 $ 来设置别名

var $ = document.querySelectorAll
// 测试
console.log($('body)) // 报错

原因是 querySelectorAll 所需的执行上下文必须是 document，而赋值到 $ 调用后上下文变成了全局window

正确用法：
var $ = document.querySelectorAll.bind(document)
querySelector 同理

常用的DOM选择方法

var query = document.querySelector.bind(document)
var queryAll = document.querySelectorAll.bind(document)
var fromId = document.getElementById.bind(document)
var fromClass = document.getElementsByClassName.bind(document)
var fromTag = document.getElementsByTagName.bind(document)