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 相关文章推荐
彪哥1.1(智能表格)提供下载
Sep 07 Javascript
JQuery之拖拽插件实现代码
Apr 14 Javascript
js渐变显示渐变消失示例代码
Aug 01 Javascript
SOSO地图JS画出标注和中心点以html形式运行
Aug 09 Javascript
JQuery中使用.each()遍历元素学习笔记
Nov 08 Javascript
jQuery实现锚点scoll效果实例分析
Mar 10 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
Jul 09 Javascript
jQuery 遍历map()方法详解
Nov 04 Javascript
如何提高Dom访问速度
Jan 05 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
Jun 17 Javascript
微信小程序自定义弹窗实现详解(可通用)
Jul 04 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
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
超外差式晶体管收音机的组装与统调
2021/03/01 无线电
php桌面中心(二) 数据库写入
2007/03/11 PHP
写php分页时出现的Fatal error的解决方法
2011/04/18 PHP
基于php冒泡排序算法的深入理解
2013/06/09 PHP
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
PHP中的print_r 与 var_dump 输出数组
2016/06/13 PHP
php将print_r处理后的数据还原为原始数组的解决方法
2016/11/02 PHP
经常用的图片在容器中的水平垂直居中实例
2007/06/10 Javascript
使用javascript实现雪花飘落的效果
2015/01/13 Javascript
Node.js的包详细介绍
2015/01/14 Javascript
js比较日期大小的方法
2015/05/12 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
微信小程序 Video API实例详解
2016/10/02 Javascript
JavaScript 中对象的深拷贝
2016/12/04 Javascript
javascript事件的传播基础实例讲解(35)
2017/02/14 Javascript
JS实现上传图片的三种方法并实现预览图片功能
2017/07/14 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
2019/03/06 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
2020/07/26 Javascript
python定时检查某个进程是否已经关闭的方法
2015/05/20 Python
Sanic框架应用部署方法详解
2018/07/18 Python
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
使用HTML5做的导航条详细步骤
2020/10/19 HTML / CSS
Molton Brown美国官网:奢华美容、香水、沐浴和身体护理
2020/09/02 全球购物
全陪导游欢迎词
2014/01/17 职场文书
酒店周年庆活动方案
2014/08/21 职场文书
纪律教育学习月活动总结
2014/08/27 职场文书
工作疏忽、懈怠的检讨书
2014/09/11 职场文书
群众路线自查自纠工作情况报告
2014/10/28 职场文书
分居协议书范本(律师见证版)
2014/11/26 职场文书
2014年数学教师工作总结
2014/12/03 职场文书
行政文员岗位职责
2015/02/04 职场文书
2016年中学植树节活动总结
2016/03/16 职场文书