Array.prototype.slice 使用扩展


Posted in Javascript onJune 09, 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 相关文章推荐
支持ie与FireFox的剪切板操作代码
Sep 28 Javascript
jQuery中校验时间格式的正则表达式小结
Sep 22 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
Nov 22 Javascript
JavaScript数据结构和算法之图和图算法
Feb 11 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
Mar 10 Javascript
jquery自定义表格样式
Nov 23 Javascript
Angular中使用$watch监听object属性值的变化(详解)
Apr 24 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
Sep 22 Javascript
Windows安装Node.js报错:2503、2502的解决方法
Oct 25 Javascript
angularJS开发注意事项
May 26 Javascript
详解JWT token心得与使用实例
Aug 02 Javascript
vue和iview实现Scroll 数据无限滚动功能
Oct 31 Javascript
Confirmer JQuery确认对话框组件
Jun 09 #Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
Jun 09 #Javascript
JavaScript 原型与继承说明
Jun 09 #Javascript
JavaScript 构造函数 面相对象学习必备知识
Jun 09 #Javascript
JS 图片缩放效果代码
Jun 09 #Javascript
JQuery优缺点分析说明
Jun 09 #Javascript
web页面数据展示新想法(json)
Jun 08 #Javascript
You might like
星际流派综述
2020/03/04 星际争霸
通用PHP动态生成静态HTML网页的代码
2010/03/04 PHP
php获取$_POST同名参数数组的实现介绍
2013/06/30 PHP
Server.HTMLEncode让代码在页面里显示为源代码
2013/12/08 PHP
PHP实现批量上传单个文件
2015/12/29 PHP
js href的用法
2010/05/13 Javascript
JavaScript浏览器选项卡效果
2010/08/25 Javascript
jQuery 拖动层(在可视区域范围内)
2012/05/24 Javascript
js 浏览本地文件夹系统示例代码
2013/10/24 Javascript
javascript 通用loading动画效果实例代码
2014/01/14 Javascript
JavaScript表单通过正则表达式验证电话号码
2014/03/14 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
2014/11/28 Javascript
Bootstrap媒体对象的实现
2016/05/01 Javascript
JavaScript 对象详细整理总结
2016/09/29 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
2016/12/18 Javascript
VUE中v-model和v-for指令详解
2017/06/23 Javascript
微信小程序 空白页重定向解决办法
2017/06/27 Javascript
JS HTML图片显示Canvas 压缩功能
2017/07/21 Javascript
Bootstrap 树控件使用经验分享(图文解说)
2017/11/06 Javascript
extjs4图表绘制之折线图实现方法分析
2020/03/06 Javascript
Vue+Openlayers自定义轨迹动画
2020/09/24 Javascript
Python爬取京东的商品分类与链接
2016/08/26 Python
Python实现通讯录功能
2018/02/22 Python
python爬取微信公众号文章
2018/08/31 Python
Python中实例化class的执行顺序示例详解
2018/10/14 Python
numpy.random模块用法总结
2019/05/27 Python
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
python matplotlib库绘制条形图练习题
2019/08/10 Python
python爬虫开发之selenium模块详细使用方法与实例全解
2020/03/09 Python
集团公司总经理岗位职责
2013/12/20 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
党员自我剖析材料范文
2014/10/06 职场文书
安徽导游词
2015/02/12 职场文书
2015年班主任个人工作总结
2015/03/31 职场文书
MySQL详细讲解变量variables的用法
2022/06/21 MySQL