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 相关文章推荐
IE和Mozilla的兼容性汇总event
Aug 12 Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
Apr 13 Javascript
VBS通过WMI监视注册表变动的代码
Oct 27 Javascript
JQueryEasyUI datagrid框架的进阶使用
Apr 08 Javascript
js快速排序的实现代码
Dec 08 Javascript
再谈Jquery Ajax方法传递到action(补充)
May 12 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
Apr 24 Javascript
微信js-sdk地理位置接口用法示例
Oct 12 Javascript
JavaScript创建对象的七种方式(推荐)
Jun 26 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
Apr 03 Javascript
js抽奖转盘实现方法分析
May 16 Javascript
JavaScript JSON使用原理及注意事项
Jul 30 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来自动调用不同服务器上的flash
2006/10/09 PHP
php将文本文件转换csv输出的方法
2014/12/31 PHP
Yii净化器CHtmlPurifier用法示例(过滤不良代码)
2016/07/15 PHP
Laravel日志用法详解
2016/10/09 PHP
PHP中-&gt;和=&gt;的含义及使用示例解析
2020/08/06 PHP
jQuery Ajax文件上传(php)
2009/06/16 Javascript
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
js校验表单后提交表单的三种方法总结
2014/02/28 Javascript
js判断手机端(Android手机还是iPhone手机)
2015/07/22 Javascript
JavaScript通过代码调用Flash显示的方法
2016/02/02 Javascript
关于JavaScript中事件绑定的方法总结
2016/10/26 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
2017/06/11 Javascript
React-Native做一个文本输入框组件的实现代码
2017/08/10 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
2019/05/16 Javascript
js中关于Blob对象的介绍与使用
2019/11/29 Javascript
JS实现超级好看的鼠标小尾巴特效
2020/12/01 Javascript
Python批量修改文件后缀的方法
2014/01/26 Python
Python中type的构造函数参数含义说明
2015/06/21 Python
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
python3获取两个日期之间所有日期,以及比较大小的实例
2018/04/08 Python
pygame游戏之旅 按钮上添加文字的方法
2018/11/21 Python
Pycharm设置utf-8自动显示方法
2019/01/17 Python
Django对models里的objects的使用详解
2019/08/17 Python
django2.2安装错误最全的解决方案(小结)
2019/09/24 Python
python调用接口的4种方式代码实例
2019/11/19 Python
python 统计文件中的字符串数目示例
2019/12/24 Python
python模拟点击在ios中实现的实例讲解
2020/11/26 Python
Aeropostale官网:美国著名校园品牌及青少年服饰品牌
2019/03/21 全球购物
摄影实习自我鉴定
2013/09/20 职场文书
内容编辑个人求职信
2013/12/10 职场文书
群众路线党课主持词
2014/04/01 职场文书
大学生毕业求职信
2014/06/12 职场文书
《比的意义》教学反思
2016/02/18 职场文书
详解Java实现数据结构之并查集
2021/06/23 Java/Android