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 相关文章推荐
麻雀虽小五脏俱全 Dojo自定义控件应用
Sep 04 Javascript
js列举css中所有图标的实现代码
Jul 04 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
Feb 21 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
Jun 24 Javascript
jQuery实现的网页换肤效果示例
Sep 20 Javascript
webpack配置之后端渲染详解
Oct 26 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
Oct 31 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
Dec 12 Javascript
详解vue-meta如何让你更优雅的管理头部标签
Jan 18 Javascript
微信小程序自定义底部弹出框
Nov 16 Javascript
jQuery实现简单评论功能
Aug 19 jQuery
js实现简单图片拖拽效果
Feb 22 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
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
php 阴历-农历-转换类代码
2012/01/16 PHP
php下载文件的代码示例
2012/06/29 PHP
laravel安装和配置教程
2014/10/29 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
php正确输出json数据的实例讲解
2018/08/21 PHP
JavaScript写的一个DIV 弹出网页对话框
2009/08/14 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
2016/06/30 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
微信小程序 radio单选框组件详解及实例代码
2017/01/10 Javascript
js数字舍入误差以及解决方法(必看篇)
2017/02/28 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
2017/04/24 Javascript
vue中的非父子间的通讯问题简单的实例代码
2017/07/19 Javascript
Angularjs中ng-repeat的简单实例
2017/08/25 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
基于vue cli 通过命令行传参实现多环境配置
2018/07/12 Javascript
微信小程序框架wepy之动态控制类名
2018/09/14 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
python中__call__方法示例分析
2014/10/11 Python
在Python的Django框架上部署ORM库的教程
2015/04/20 Python
python批量制作雷达图的实现方法
2016/07/26 Python
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
Python测试人员需要掌握的知识
2018/02/08 Python
python实现剪切功能
2019/01/23 Python
Django--权限Permissions的例子
2019/08/28 Python
如何在VSCode上轻松舒适的配置Python的方法步骤
2019/10/28 Python
Win10下安装并使用tensorflow-gpu1.8.0+python3.6全过程分析(显卡MX250+CUDA9.0+cudnn)
2020/02/17 Python
Python使用sys.exc_info()方法获取异常信息
2020/07/23 Python
简述进程的启动、终止的方式以及如何进行进程的查看
2013/07/12 面试题
高分子材料与工程专业推荐信
2013/12/01 职场文书
房屋买卖授权委托书
2014/09/27 职场文书
导游词之河姆渡遗址博物馆
2019/10/10 职场文书
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python