一些常被忽略的前端知识

create on in simple_record with 0 comment and 88 view

记录一些前端常会忽略掉的小知识

arguments类型

函数中的arguments是一个类数组对象,而非数组。

function func(){
    arguments // {0: val1, 1: val2 ...}
    [...arguments] // 常用转化 [val1, val2, ...]
}

定时器的this指向

nodejs中定时器中的回调函数内的 this 会指向 Timeout 对象,而在浏览器中则是全局对象(非严格模式)或undefined(严格模式)

定义的变量成为全局变量

在非严格模式的全局环境下,使用var定义的变量或不定义的变量会成为全局对象的属性(chrome,IE),node下不定义的变量会成为全局对象的属性,edge 下都不会。

遍历dom列表时,不能完全遍历的问题

通过 getElementsByClassName('class') 方法得到一个元素列表,在遍历列表时,若此过程中改变了某元素的 class, 导致这个元素不能被getElementsByClass('class') 方法获取到(比如:移除了元素的 class),那么这个列表长度则会随之改变,导致不能正常全部遍历。若有这种行为,需要clone一份元素列表,再进行遍历。

例子:

const Eles = document.getElementsByClassName("ele") Array.prototype.forEach.call( Eles, ele => { ele.classList.remove("ele") } )

这种情况下,将导致循环不能正常进行。

修改为:

const Eles = document.getElementsByClassName("ele") const cloneEles = [...Eles ] Array.prototype.forEach.call( cloneEles, ele => { ele.classList.remove("ele") } )

undefined变量

在全局条件下 undefined 是不可以被修改的。
在局部条件下 undefined 在某种情况下是可以被修改的。

(function(undefined) { console.log(undefined); // "123" })('123')

对象和基础类型

'123' === new String(123) // false '123' == new String(123) // true

函数长度

函数对象拥有 length 属性,表示可接收参数个数。

(function(a,b,c){}).length // 3
😁😂😃😄😅😆😇😈😉😐😑😒😓😔😕😖😗😘😙😠😡😢😣😤😥😦😧😨😩😰😱😲😳😴😵😶😷😸😹🙀🙁🙂🙃🙄🙅🙆🙇🙈
🙂