Open YIXUNFE opened 8 years ago
当给 HTML 元素一个 id 后,
<div id="foo"></div>
我们就可以使用 getElementById 方法获取该 DOM 对象。而除了这种方式外,浏览器还提供了更加方便方法。
getElementById
window.foo === document.getElementById('foo') // true
直接使用 window 对象下面的 foo 属性即可获取元素。
window
foo
我们给 HTML 元素添加的 id 后会给 window 对象创建一个同名的属性,如果这个 id 是已有的属性则忽略,比如 id="alert":
id="alert"
window.alert === document.getElementById('alert') // false
另外要说的是,大家没必要对每一个 JS 会用到的元素都添加 id。因为查找的结果可以被赋值给变量保存起来,所以查找过程中的性能损耗不需要太苛求。而页面一加载就造成难以预计的全局污染才是令人担忧的,这也从根本上造成了我们难以使用 window.foo 这种方式查找元素。毕竟相对于去改变一个 DOM 对象的属性来说,改变 window 对象的属性要方便的多,有时候甚至是不经意的。
window.foo
setTimeout 方法是大家都再熟悉不过的,我们知道它有两个参数,一个是回调方法,一个是延迟时间。
setTimeout(callback[, time])
其实 setTimeout 方法还可以填入更多的参数,这些参数会被传入 callback 方法中。
比如:
setTimeout(alert, 0, 'abc') //alert abc
这里我们给 alert 方法传入了字符串 abc 作为参数。如果需要给 callback 传入多个参数,依次用逗号分隔就可以了。
abc
label 声明可以标记一个循环并可以和 break 或 continue 配合使用。
break
continue
来看一个使用 label 的例子:
var i, j; loop1: for (i = 0; i < 3; i++) { //第一个 for 循环被标记为 loop1 loop2: for (j = 0; j < 3; j++) { //第二个 for 循环被标记为 loop2 if (i === 1 && j === 1) { break loop1; } console.log("i = " + i + ", j = " + j); } } // "i = 0, j = 0" // "i = 0, j = 1" // "i = 0, j = 2" // "i = 1, j = 0"
例子中有两个循环,在满足条件后,使用 break loop1 直接跳出了外层循环。比使用两次 break 要方便多了
break loop1
给你一个全是数字的数组,如何对数组取极值呢?
你可能会说使用 sort 排序后取值,对,这是一种方法。
然而我们可以利用 apply 方法更加方便的求出数组中的极值。
我们知道 Math.max 和 Math.min 方法都接受两个或多个参数。而恰巧 apply 方法可以以数组形式对一个函数进行多参数传参。于是乎:
Math.max
Math.min
apply
var a = [4, 100, 12, 46, 87, 90] console.log(Math.max.apply(null, a)) //100 console.log(Math.min.apply(null, a)) //4
使用这种方法取值,都不需要对数组进行排序哦。另外这里给 apply 方法的第一个参数为 null 是因为我们不需要特别指定其上下文,即使用 window 作为上下文。
null
“直接使用 id 获取元素” 这个真的不推荐,老 IE 遗留的非标准行为,忘了就忘了吧 :smiley:
麻麻不会告诉你的几点 Javascript 知识(一)
直接使用 id 获取元素
当给 HTML 元素一个 id 后,
我们就可以使用
getElementById
方法获取该 DOM 对象。而除了这种方式外,浏览器还提供了更加方便方法。直接使用
window
对象下面的foo
属性即可获取元素。我们给 HTML 元素添加的 id 后会给 window 对象创建一个同名的属性,如果这个 id 是已有的属性则忽略,比如
id="alert"
:另外要说的是,大家没必要对每一个 JS 会用到的元素都添加 id。因为查找的结果可以被赋值给变量保存起来,所以查找过程中的性能损耗不需要太苛求。而页面一加载就造成难以预计的全局污染才是令人担忧的,这也从根本上造成了我们难以使用
window.foo
这种方式查找元素。毕竟相对于去改变一个 DOM 对象的属性来说,改变 window 对象的属性要方便的多,有时候甚至是不经意的。setTimeout 中的参数
setTimeout 方法是大家都再熟悉不过的,我们知道它有两个参数,一个是回调方法,一个是延迟时间。
其实 setTimeout 方法还可以填入更多的参数,这些参数会被传入 callback 方法中。
比如:
这里我们给 alert 方法传入了字符串
abc
作为参数。如果需要给 callback 传入多个参数,依次用逗号分隔就可以了。label 声明
label 声明可以标记一个循环并可以和
break
或continue
配合使用。来看一个使用 label 的例子:
例子中有两个循环,在满足条件后,使用
break loop1
直接跳出了外层循环。比使用两次break
要方便多了利用 apply 对数组取极值
给你一个全是数字的数组,如何对数组取极值呢?
你可能会说使用 sort 排序后取值,对,这是一种方法。
然而我们可以利用 apply 方法更加方便的求出数组中的极值。
我们知道
Math.max
和Math.min
方法都接受两个或多个参数。而恰巧apply
方法可以以数组形式对一个函数进行多参数传参。于是乎:使用这种方法取值,都不需要对数组进行排序哦。另外这里给
apply
方法的第一个参数为null
是因为我们不需要特别指定其上下文,即使用window
作为上下文。Thanks