标签归档:JavaScript

JavaScript中的array.sort的一些注意事项

JavaScript 中,array.sort([compareFunction]) 在不指定比较函数的情况下,将会使用默认的比较函数,而这个比较函数是根据字母表数序来比较的。简单来说,先把数组中的各项转化为 string,然后再进行比较。

这意味着对于数字的排序,必须写比较函数而不能用默认的,否则,将会导致类似 [1, 10, 11, 2, 3] 这样的排序结果。

自然地,true, false, null 等也被先转为对应的字符串再进行比较,但 undefined 有点特殊,JavaScrip 1.2 后会把其放到数组的最后面。

继续阅读

innerHTML设置样式在IE下的问题

使用 innerHTML 设置内容时,如果内含 style 样式,在 IE7 及以下可能会发现样式没生效。

解决方法:把 <style> 样式放到待设置的 html 内容的最后。

所使用的代码片段是:

var str1 = '<style>#con{color:red;}</style><p>红字</p>',
    str2 = '<p>二:<style>#con{color:green;}</style>绿字</p>',
    str3 = '<p>蓝字</p><style>#con{color:blue;}</style>';

IE下获取链接相对路径的问题

<a href="about.html" id="anc">a link with href="about.html"</a>
var anchor = document.getElementById('anc');

console.log(anchor.href);
console.log(anchor.getAttribute('href'));

以上代码,对于第一个 log,希望得到形如 //liunian.info/about.html 的绝对路径,对于第二个 log,希望得到 about.html 这个相对路径。

但在 ie 下,第二个却也由相对路径变为绝对路径了。

兼容的处理方法是使用第二个参数,这个参数是 IE 私有的,但由于 JavaScript 的语言特性,多参数并不会导致出错,所以,对于 Chrome、FF 等将仍是原来的方法。

anchor.getAttribute('href', 2);

References

  1. getAttribute(“HREF”) is always absolute
  2. 获得原始href属性的方法
  3. getAttribute method

JavaScript生成指定范围内的随机数

JavaScript 中,可以使用 Math.random() 来获得 [0, 1) 之间的随机数,但没有直接的获取一给定范围内的随机数,出于使用频率还算多,可以写成一个函数。

// mod from: http://roshanbh.com.np/2008/09/get-random-number-range-two-numbers-javascript.html

function randomToN(maxVal, floatVal) {
    var randVal = Math.random() * maxVal;
    return typeof floatVal === 'undefined' ?
        Math.floor(randVal) : randVal.toFixed(floatVal);
}

function randomXToY(minVal, maxVal, floatVal) {
    var randVal = minVal + Math.random() * (maxVal - minVal);
    return typeof randVal === 'undefined' ?
        Math.floor(randVal) : randVal.toFixed(floatVal);
}

// example usages:
randomToN(50);           // => 35
randomToN(50, 3);        // => 37.748
randomXToY(30, 80);      // => 51
randomXToY(30, 80, 2);   // => 68.36

JavaScript 之 String.replace

最简单的用法

直接的用字符串替换字符串是最简单的用法,这种情况下将只会替换掉第一个匹配的字符串。

var res = 'a1a2a3'.replace('a', 'b'); // => 'b1a2a3'

使用正则来达到复杂的要求

JavaScript 中正则的介绍可参照 MDN 的 RegExp

// 把字符串的所有英文字符都去掉,不论大小写
var pattern = /[a-z]/gi;
var str = '1aBc2d3E4f5e';
var res = str.replace(pattern, ''); // => '12345'

继续阅读

把JavaScript中的伪数组转换为真数组

在 JavaScript 中, 函数中的隐藏变量 arguments 和用 getElementsByTagName 获得的元素集合(NodeList)都不是真正的数组,不能使用 push 等方法,在有这种需要的时候只能先转换为真正的数组。

对于 arguments,可以使用 Array.prototype.slice.call(arguments); 来达到转换的目的,但对于 NodeList 则不行了,其在 IE8 及以下将会报错,只能说其 JS 引擎有所限制。

因此,如果需要把 NodeList 转换为真正的数组,则需要做下兼容处理。

function realArray(c) {
    try {
        return Array.prototype.slice.call(c);
    } catch (e) {
        var ret = [], i = 0, len = c.length;
        for (; i < len; i++) {
            ret[i] = (c[i]);
        }
        return ret;
    }
}

References

  1. javascript Array.prototype.slice使用说明
  2. Advanced Javascript: Objects, Arrays, and Array-Like objects

代价的选择

对于语言来说,如果想减少跨平台开发的消耗,那么就要付出语言运行效率的代价。比如java等依赖于虚拟机的语言,很大程度上是一次编译处处运行的,但效率上就远远哪不上c这种可以直接和硬件打交道的语言。

javascript这种解释性的语言则更是跨平台,只要浏览器依照了规范,那么就处处可以运行,但效率上就更慢上一些了。再加上其天然的单线程特征,在处理复杂运动上就更加劣势了。

touchpad 的概念不说不好,但由于采用语言本身的问题,比采用 java 的android慢上很多,更不用说是采用object-c的ios了。

JavaScript保留字

JavaScript 除了语言规范本身的关键字、保留字外,在和浏览器结合的过程中产生了更多的保留字,有一次就踩中了status这个雷区,故特意找来一下这方面的资料[1]以备忘。

JavaScript Reserved Words
break continue do for import new this void
case default else function in return typeof while
comment delete export if label switch var with

继续阅读

连续赋值与求值顺序

看到一个2010 年的帖子[1],里面讨论了一段 JavaScript 代码:

var a = {n:1};
a.x = a = {n:2};  
alert(a.x);     // --> undefined 

帖子里有很多的讨论来分析为何 a.xundefined,下面是我的一些思考。

首先,在JavaScript中,有以下几点需要明确的:

  1. 可以说一切都是对象,一切都是引用调用。
  2. 赋值运算符(=)是除逗号运算符(,)外优先级最低的,并且是右结合的。[2]
  3. 求值顺序[3]是从左向右的[4]

继续阅读