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 相关文章推荐
js 表格隔行颜色
Dec 02 Javascript
AlertBox 弹出层信息提示框效果实现步骤
Oct 11 Javascript
javascript基础之查找元素的详细介绍(访问节点)
Jul 05 Javascript
js对table的td进行相同内容合并示例详解
Dec 27 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
Jan 02 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
关于JavaScript的变量的数据类型的判断方法
Aug 14 Javascript
微信小程序 增、删、改、查操作实例详解
Jan 13 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
Mar 27 Javascript
为你的微信小程序体积瘦身详解
May 20 Javascript
详解VUE里子组件如何获取父组件动态变化的值
Dec 26 Javascript
JS中的const命令你真懂它吗
Mar 08 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
[原创]php使用strpos判断字符串中数字类型子字符串出错的解决方法
2017/04/01 PHP
PHP SESSION跨页面传递失败解决方案
2020/12/11 PHP
extjs grid设置某列背景颜色和字体颜色的方法
2010/09/03 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
2011/07/13 Javascript
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
jquery动态添加option示例
2013/12/30 Javascript
js获取url中&quot;?&quot;后面的字串方法
2014/05/15 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
2015/08/18 Javascript
window.onload使用指南
2015/09/13 Javascript
JavaScript 七大技巧(一)
2015/12/13 Javascript
js判断是否是手机页面
2017/03/17 Javascript
详解Angular2 之 结构型指令
2017/06/21 Javascript
Node.js中流(stream)的使用方法示例
2017/07/16 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
2017/09/14 Javascript
详解jQuery获取特殊属性的值以及设置内容
2018/11/14 jQuery
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
js实现网页随机验证码
2020/10/19 Javascript
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
Python实现带百分比的进度条
2016/06/28 Python
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
Python decimal模块使用方法详解
2020/06/08 Python
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
html5给汉字加拼音加进度条的实现代码
2020/04/07 HTML / CSS
华丽的手绘陶瓷:MacKenzie-Childs
2017/02/04 全球购物
Missguided美国官网:英国时尚品牌
2018/01/18 全球购物
澳大利亚最早和最古老的巨型游戏专家:Yardgames
2020/02/20 全球购物
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
汽车运用工程毕业生自荐信
2013/10/29 职场文书
最新教师自我评价分享
2013/11/12 职场文书
小学校园之星事迹材料
2014/05/16 职场文书
相亲大会策划方案
2014/06/05 职场文书
学校领导班子对照检查材料
2014/08/28 职场文书
2014年客户经理工作总结
2014/11/20 职场文书
2016年法制宣传月活动总结
2016/04/01 职场文书
Java 数组内置函数toArray详解
2021/06/28 Java/Android