javascript Array.prototype.slice使用说明

 更新时间:2010年10月11日 22:40:50   作者:  
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]); // ?

相关文章

  • TypeScript学习笔记之类型窄化篇

    TypeScript学习笔记之类型窄化篇

    目前用TypeScript的人越来越多,尤其是一些大厂,大的项目,github上面很多开源项目也都是ts语法编译的,这篇文章主要给大家介绍了关于TypeScript学习笔记之类型窄化的相关资料,需要的朋友可以参考下
    2021-09-09
  • 漂亮的widgets,支持换肤和后期开发新皮肤

    漂亮的widgets,支持换肤和后期开发新皮肤

    漂亮的widgets,支持换肤和后期开发新皮肤...
    2007-04-04
  • JS中两个数组对象筛选方法

    JS中两个数组对象筛选方法

    这篇文章主要介绍了JS中两个数组对象筛选,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-12-12
  • JS从数组中随机获取一个值的常用写法

    JS从数组中随机获取一个值的常用写法

    这篇文章主要介绍了JS从数组中随机获取一个值的常用写法,需要的朋友可以参考下
    2023-07-07
  • JavaScript实现九宫格移动拼图游戏

    JavaScript实现九宫格移动拼图游戏

    这篇文章主要为大家详细介绍了JavaScript实现九宫格移动拼图游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • js精准的倒计时函数分享

    js精准的倒计时函数分享

    这篇文章主要为大家分享了js实现精准的倒计时函数,如何实现倒计时模块,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • TypeScript中命名空间与模块化详情

    TypeScript中命名空间与模块化详情

    这篇文章主要介绍了TypeScript中命名空间与模块化详情,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-08-08
  • Postman参数化实现过程及原理解析

    Postman参数化实现过程及原理解析

    这篇文章主要介绍了Postman参数化实现过程及原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • easyui给某一个单元格的内容增加下划线的操作方法

    easyui给某一个单元格的内容增加下划线的操作方法

    在EasyUI的DataGrid组件中,你可以通过自定义单元格的渲染方式来实现给某一个单元格的内容增加下划线的效果,本文给大家介绍easyui如何给某一个单元格的内容增加下划线,感兴趣的朋友跟随小编一起看看吧
    2024-08-08
  • 关于ckeditor在bootstrap中modal中弹框无法输入的解决方法

    关于ckeditor在bootstrap中modal中弹框无法输入的解决方法

    今天小编就为大家分享一篇关于ckeditor在bootstrap中modal中弹框无法输入的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09

最新评论