岁月如歌 » array

Array.prototype.slice

lifesinger — Tue, 04 May 2010 01:32:31 +0000

slice 可以用来获取数组片段，它返回新数组，不会修改原数组。

除了正常用法，slice 经常用来将 array-like 对象转换为 true array.

名词解释：array-like object – 拥有 length 属性的对象，比如 { 0: ‘foo’, length: 1 }, 甚至 { length: ‘bar’ }. 最常见的 array-like 对象是 arguments 和 NodeList.

查看 V8 引擎 array.js 的源码，可以将 slice 的内部实现简化为：

function slice(start, end) {
    var len = ToUint32(this.length), result = [];
    for(var i = start; i < end; i++) {
        result.push(this[i]);
    }
    return result;
}

可以看出，slice 并不需要 this 为 array 类型，只需要有 length 属性即可。并且 length 属性可以不为 number 类型，当不能转换为数值时，ToUnit32(this.length) 返回 0.

对于标准浏览器，上面已经将 slice 的原理解释清楚了。但是恼人的 ie, 总是给我们添乱子：

var slice = Array.prototype.slice;
slice.call(); // => IE: Object expected.
slice.call(document.childNodes); // => IE: JScript object expected.

以上代码，在 ie 里报错。可恨 IE 的 Trident 引擎不开源，那我们只有猜测了：

function ie_slice(start, end) {
    var len = ToUint32(this.length), result = [];

    if(__typeof__ this !== 'JScript Object') throw 'JScript object expected';
    if(this === null) throw 'Oject expected';

    for(var i = start; i < end; i++) {
        result.push(this[i]);
    }
    return result;
}

至此，把猥琐的 ie 自圆其说完毕。

关于 slice, 还有一个话题：用 Array.prototype.slice 还是 [].slice ? 从理论上讲，[] 需要创建一个数组，性能上会比 Array.prototype 稍差。但实际上，这两者差不多，就如循环里用 i++ 还是 ++i 一样，纯属个人习惯。

最后一个话题，有关性能。对于数组的筛选来说，有一个牺牲色相的写法：

var ret = [];
for(var i = start, j = 0; i < end; i++) {
    ret[j++] = arr[i];
}

用空间换时间。去掉 push, 对于大数组来说，性能提升还是比较明显的。

一大早写博，心情不是很好，得留个题目给大家：

var slice = Array.prototype.slice;
alert(slice.call({0: 'foo', length: 'bar'})[0]); // ?
alert(slice.call(NaN).length); // ?
alert(slice.call({0: 'foo', length: '100'})[0]); // ?

Chrome V8 引擎对 sort 的优化

lifesinger — Wed, 03 Feb 2010 04:25:15 +0000

var a = 0, b = 0;
[0, 0].sort(function() {
    a = 1;
    return 0;
});
[0, 1].sort(function() {
    b = 1;
    return 0;
});
alert(a === b); // true or false ?

上面的代码，除了 Chrome 输出 false, 其它浏览器皆为 true.

原因是 Chrome 对数组的 sort 方法进行了优化：

function sort(comparefn) {
  var custom_compare = (typeof(comparefn) === 'function');
  function Compare(x,y) {
    if (x === y) return 0;
    if (custom_compare) {
      return comparefn.call(null, x, y);
    }
    ...
}

虽然是优化，但也是陷阱。想用 sort 来干点额外体力活时，一定要小心。

小心数组的length

lifesinger — Fri, 23 Jan 2009 17:32:18 +0000

看下面的代码：

var foo = [];
foo[0] = 'a';
foo[2] = 'c';
alert(foo.length);

foo['name'] = 'lifesinger';
alert(foo.length);

var foo2 = [];
foo2['3'] = 3;
foo2['age'] = 20;
alert(foo2.length);

var foo3 = {};
foo3['age'] = 30;
alert(foo3.length);

对alert的输出结果是否感到有点惊讶？从上面的代码中，我们可以总结出以下规律：

对普通数组（key为自然数，从0开始依次增大1）来说，length是预期的结果
对关联数组来说，当key中有自然数时，length等于key中的最大自然数 + 1, key中没有自然数时，length为0
对象默认是没有length属性的

小心length, 别掉进代码的陷阱里。

更新：

JavaScript没有关联数组，key/value pair直接是对象提供的。感谢realazy指点。
对于key中含有非自然数的数组，可以分成两部分来看：一部分是数组本身的键值对，另一部分是对象的属性。length是针对数组部分而言的，因此始终等于 0 或 key中的最大自然数 + 1.