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 相关文章推荐
JavaScript 封装Ajax传递的数据代码
Jun 05 Javascript
jQuery 常见操作实现方式和常用函数方法总结
May 06 Javascript
JS获取当前网页大小以及屏幕分辨率等
Sep 05 Javascript
jquery实现勾选复选框触发事件给input赋值
Feb 01 Javascript
jquery分隔Url的param方法(推荐)
May 25 Javascript
全面了解构造函数继承关键apply call
Jul 26 Javascript
JS实现的判断方法、变量是否存在功能示例
Mar 28 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
Jul 06 Javascript
浅谈Node 异步IO和事件循环
May 05 Javascript
vue项目中使用bpmn为节点添加颜色的方法
Apr 30 Javascript
JavaScript函数柯里化实现原理及过程
Dec 02 Javascript
JavaScript实现H5接金币功能(实例代码)
Feb 22 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函数)
2006/10/09 PHP
php防止网站被刷新的方法汇总
2014/12/01 PHP
PHP的Yii框架中YiiBase入口类的扩展写法示例
2016/03/17 PHP
PHP中子类重载父类的方法【parent::方法名】
2016/05/06 PHP
PHP实现Google plus的好友拖拽分组效果
2016/10/21 PHP
精心挑选的15个jQuery下拉菜单制作教程
2012/06/15 Javascript
用JS实现3D球状标签云示例代码
2013/12/01 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
基于jQuery的select下拉框选择触发事件实例分析
2016/11/18 Javascript
vue-cli之router基本使用方法详解
2017/10/17 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
通过layer实现可输入的模态框的例子
2019/09/27 Javascript
vue 返回上一页,页面样式错乱的解决
2019/11/14 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
node.js使用stream模块实现自定义流示例
2020/02/13 Javascript
Python爬取读者并制作成PDF
2015/03/10 Python
介绍Python的Urllib库的一些高级用法
2015/04/30 Python
详解Python中的Cookie模块使用
2015/07/06 Python
Django1.9 加载通过ImageField上传的图片方法
2018/05/25 Python
PyQt5+Caffe+Opencv搭建人脸识别登录界面
2019/08/28 Python
Win10+GPU版Pytorch1.1安装的安装步骤
2019/09/27 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
Python基于os.environ从windows获取环境变量
2020/06/09 Python
亚马逊西班牙购物网站:amazon西班牙
2017/03/06 全球购物
中国制造网:Made-in-China.com
2019/10/25 全球购物
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
说出你对remoting 和webservice的理解和应用
2014/06/08 面试题
教师实习自我鉴定
2013/12/14 职场文书
护士思想汇报
2014/01/12 职场文书
建设工地安全标语
2014/06/07 职场文书
小学课外阅读总结
2014/07/09 职场文书
师德师风建设整改措施思想汇报
2014/10/11 职场文书
先进人物事迹材料
2014/12/29 职场文书
开工典礼致辞
2015/07/29 职场文书