YIXUNFE / blog

文章区
151 stars 25 forks source link

麻麻不会告诉你的几点 Javascript 知识(一) #37

Open YIXUNFE opened 8 years ago

YIXUNFE commented 8 years ago

麻麻不会告诉你的几点 Javascript 知识(一)


直接使用 id 获取元素

当给 HTML 元素一个 id 后,

<div id="foo"></div>

我们就可以使用 getElementById 方法获取该 DOM 对象。而除了这种方式外,浏览器还提供了更加方便方法。

window.foo === document.getElementById('foo')
// true

直接使用 window 对象下面的 foo 属性即可获取元素。

我们给 HTML 元素添加的 id 后会给 window 对象创建一个同名的属性,如果这个 id 是已有的属性则忽略,比如 id="alert":

window.alert === document.getElementById('alert')
// false

另外要说的是,大家没必要对每一个 JS 会用到的元素都添加 id。因为查找的结果可以被赋值给变量保存起来,所以查找过程中的性能损耗不需要太苛求。而页面一加载就造成难以预计的全局污染才是令人担忧的,这也从根本上造成了我们难以使用 window.foo 这种方式查找元素。毕竟相对于去改变一个 DOM 对象的属性来说,改变 window 对象的属性要方便的多,有时候甚至是不经意的。


setTimeout 中的参数

setTimeout 方法是大家都再熟悉不过的,我们知道它有两个参数,一个是回调方法,一个是延迟时间。

setTimeout(callback[, time])

其实 setTimeout 方法还可以填入更多的参数,这些参数会被传入 callback 方法中。

比如:

setTimeout(alert, 0, 'abc')
//alert abc

这里我们给 alert 方法传入了字符串 abc 作为参数。如果需要给 callback 传入多个参数,依次用逗号分隔就可以了。


label 声明

label 声明可以标记一个循环并可以和 breakcontinue 配合使用。

来看一个使用 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 要方便多了


利用 apply 对数组取极值

给你一个全是数字的数组,如何对数组取极值呢?

你可能会说使用 sort 排序后取值,对,这是一种方法。

然而我们可以利用 apply 方法更加方便的求出数组中的极值。

我们知道 Math.maxMath.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 作为上下文。


Thanks


cssmagic commented 8 years ago

“直接使用 id 获取元素” 这个真的不推荐,老 IE 遗留的非标准行为,忘了就忘了吧 :smiley: