javascript Array.prototype.slice使用说明


Posted in Javascript onOctober 11, 2010

除了正常用法,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]); // ?
Javascript 相关文章推荐
Three.js源码阅读笔记(光照部分)
Dec 27 Javascript
载入jQuery库的最佳方法详细说明及实现代码
Dec 28 Javascript
JavaScript DOM节点添加示例
Jul 16 Javascript
JavaScript中定义函数的三种方法
Mar 12 Javascript
浅谈JavaScript中null和undefined
Jul 09 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 Javascript
详解vue项目首页加载速度优化
Oct 18 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
Aug 22 Javascript
node微信开发之获取access_token+自定义菜单
Mar 17 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
Apr 15 Javascript
判断“命令按钮”是否被鼠标单击详解
Jul 31 Javascript
Vue.js 无限滚动列表性能优化方案
Dec 02 Javascript
javascript 伪数组实现方法
Oct 11 #Javascript
javascript forEach通用循环遍历方法
Oct 11 #Javascript
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
Oct 11 #Javascript
JavaScript isArray()函数判断对象类型的种种方法
Oct 11 #Javascript
JSChart轻量级图形报表工具(内置函数中文参考)
Oct 11 #Javascript
jQuery 表单验证扩展代码(一)
Oct 11 #Javascript
AlertBox 弹出层信息提示框效果实现步骤
Oct 11 #Javascript
You might like
解析php session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
ThinkPHP数据操作方法总结
2015/09/28 PHP
php similar_text()函数的定义和用法
2016/05/12 PHP
PHP中Laravel 关联查询返回错误id的解决方法
2017/04/01 PHP
Js获取事件对象代码
2010/08/05 Javascript
在Javascript里访问SharePoint列表数据的实现方法
2011/05/22 Javascript
Json和Jsonp理论实例代码详解
2013/11/15 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
2015/06/04 Javascript
jQuery实现html元素拖拽
2015/07/21 Javascript
基于JavaScript实现回到页面顶部动画代码
2016/05/24 Javascript
javascript中活灵活现的Array对象详解
2016/11/30 Javascript
discuz表情的JS提取方法分析
2017/03/22 Javascript
React-router 4 按需加载的实现方式及原理详解
2017/05/25 Javascript
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
2019/09/17 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
2020/11/16 Javascript
python 字符串split的用法分享
2013/03/23 Python
通过C++学习Python
2015/01/20 Python
在Linux系统上通过uWSGI配置Nginx+Python环境的教程
2015/12/25 Python
Django在win10下的安装并创建工程
2017/11/20 Python
Python 获得命令行参数的方法(推荐)
2018/01/24 Python
python中使用while循环的实例
2019/08/05 Python
python自动结束mysql慢查询会话的实例代码
2019/10/27 Python
解决python3插入mysql时内容带有引号的问题
2020/03/02 Python
Python通过文本和图片生成词云图
2020/05/21 Python
python利用tkinter实现图片格式转换的示例
2020/09/28 Python
python PIL模块的基本使用
2020/09/29 Python
基于django和dropzone.js实现上传文件
2020/11/24 Python
金山毒霸系列的笔试题
2013/04/13 面试题
全神贯注教学反思
2014/02/03 职场文书
关于运动会的广播稿(10篇)
2014/09/12 职场文书
2015年教研员工作总结
2015/05/26 职场文书
入党申请书怎么写?
2019/06/11 职场文书
如何使用python包中的sched事件调度器
2022/04/30 Python