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 相关文章推荐
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
May 21 Javascript
js查错流程归纳
May 04 Javascript
为指定的元素添加遮罩层的示例代码
Jan 15 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
Jun 23 Javascript
JavaScript实现给定时间相加天数的方法
Jan 25 Javascript
浅析BootStrap Treeview的简单使用
Oct 12 Javascript
vue-resource 拦截器使用详解
Feb 21 Javascript
node.js利用redis数据库缓存数据的方法
Mar 01 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
mpvue构建小程序的方法(步骤+地址)
May 22 Javascript
vue大型项目之分模块运行/打包的实现
Sep 21 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中函数rand和mt_rand的区别比较
2012/12/26 PHP
PHP面向对象学习之parent::关键字
2017/01/18 PHP
CSS+Jquery实现页面圆角框方法大全
2009/12/24 Javascript
Javascript string 扩展库代码
2010/04/09 Javascript
扩展JavaScript功能的正确方法(译文)
2012/04/12 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
javascript中解析四则运算表达式的算法和示例
2014/08/11 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
2015/05/20 Javascript
jquery实现简单手风琴菜单效果实例
2015/06/13 Javascript
解析JavaScript的ES6版本中的解构赋值
2015/07/28 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
NodeJS的Promise的用法解析
2016/05/05 NodeJs
jQuery Form表单取值的方法
2017/01/11 Javascript
validationEngine 表单验证插件使用实例代码
2017/06/15 Javascript
Vue组件全局注册实现警告框的实例详解
2018/06/11 Javascript
利用React Router4实现的服务端直出渲染(SSR)
2019/01/07 Javascript
Vue移动端项目实现使用手机预览调试操作
2020/07/18 Javascript
[02:33]2018DOTA2亚洲邀请赛赛前采访——LGD
2018/04/04 DOTA
python中的__init__ 、__new__、__call__小结
2014/04/25 Python
介绍Python的Django框架中的静态资源管理器django-pipeline
2015/04/25 Python
Python字符串格式化输出方法分析
2016/04/13 Python
Python2和Python3中print的用法示例总结
2017/10/25 Python
python主线程捕获子线程的方法
2018/06/17 Python
Python实现在某个数组中查找一个值的算法示例
2018/06/27 Python
如何爬取通过ajax加载数据的网站
2019/08/15 Python
对Django中内置的User模型实例详解
2019/08/16 Python
python logging通过json文件配置的步骤
2020/04/27 Python
用HTML5实现鼠标滚轮事件放大缩小图片的功能
2015/06/25 HTML / CSS
STAUD官方网站:洛杉矶独有的闲适风格
2019/04/11 全球购物
医学专业毕业生个人的求职信
2013/12/04 职场文书
后勤服务中心总经理工作职责
2014/03/03 职场文书
热爱祖国的演讲稿
2014/05/04 职场文书
员工趣味活动方案
2014/08/27 职场文书
财务整改报告范文
2014/11/05 职场文书
2015新员工试用期工作总结
2014/12/12 职场文书