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 相关文章推荐
Microsoft Ajax Minifier 压缩javascript的方法
Mar 05 Javascript
JQuery 插件模板 制作jquery插件的朋友可以参考下
Mar 17 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
May 11 Javascript
jQuery+AJAX实现网页无刷新上传
Feb 22 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
Apr 06 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
Oct 11 Javascript
layer实现关闭弹出层刷新父界面功能详解
Nov 15 Javascript
使用vue中的v-for遍历二维数组的方法
Mar 07 Javascript
详解webpack2异步加载套路
Sep 14 Javascript
微信小程序中转义字符的处理方法
Mar 28 Javascript
jstree中的checkbox默认选中和隐藏示例代码
Dec 29 Javascript
Vue通过懒加载提升页面响应速度
May 10 Vue.js
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
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
Windows下wamp php单元测试工具PHPUnit安装及生成日志文件配置方法
2018/05/28 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
豆瓣网的jquery代码实例
2008/06/15 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
2010/06/23 Javascript
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
2013/06/05 Javascript
Javascript实现简单二级下拉菜单实例
2014/06/15 Javascript
JavaScript中setMonth()方法的使用详解
2015/06/11 Javascript
解决jQuery使用JSONP时产生的错误
2015/12/02 Javascript
不得不分享的JavaScript常用方法函数集(下)
2015/12/25 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
2017/02/09 Javascript
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
Vue请求JSON Server服务器数据的实现方法
2018/11/02 Javascript
vue-cli中使用高德地图的方法示例
2019/03/28 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
2019/05/03 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
[35:43]2018DOTA2亚洲邀请赛 4.1 小组赛B组 paiN vs Effect
2018/04/03 DOTA
python中查找excel某一列的重复数据 剔除之后打印
2013/02/10 Python
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
python类继承用法实例分析
2015/05/27 Python
python实现的用于搜索文件并进行内容替换的类实例
2015/06/28 Python
Python中的Descriptor描述符学习教程
2016/06/02 Python
详解python中asyncio模块
2018/03/03 Python
对python sklearn one-hot编码详解
2018/07/10 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
欧洲品牌瓷器餐具网上商店:Porzellantreff.de
2018/04/04 全球购物
护理专业的自荐信
2013/10/22 职场文书
户外用品商店创业计划书
2014/01/29 职场文书
优秀毕业生自我鉴定
2014/02/11 职场文书
高一军训的心得体会
2014/09/01 职场文书
高中课前三分钟演讲稿
2014/09/13 职场文书
八项规定自查自纠报告及整改措施
2014/10/26 职场文书
2014年教研室工作总结
2014/12/06 职场文书