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使用prototype定义对象类型
Feb 07 Javascript
JS重要知识点小结
Nov 06 Javascript
javascript setTimeout和setInterval计时的区别详解
Jun 21 Javascript
javascript实现window.print()去除页眉页脚
Dec 30 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
Jan 04 Javascript
JS日程管理插件FullCalendar简单实例
Feb 07 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
Jan 27 Javascript
微信小程序实现多宫格抽奖活动
Apr 15 Javascript
解决vue-cli3 使用子目录部署问题
Jul 19 Javascript
使用vuepress搭建静态博客的示例代码
Feb 14 Javascript
JS实现页面跳转与刷新的方法汇总
Aug 30 Javascript
vue动态绘制四分之三圆环图效果
Sep 03 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
ThinkPHP php 框架学习笔记
2009/10/30 PHP
PHP 创建文件(文件夹)以及目录操作代码
2010/03/04 PHP
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
ThinkPHP模板中判断volist循环的最后一条记录的验证方法
2014/07/01 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
thinkPHP5.0框架自动加载机制分析
2017/03/18 PHP
PHP抽象类和接口用法实例详解
2019/07/20 PHP
Javascript 函数中的参数使用分析
2010/03/27 Javascript
JavaScript 继承使用分析
2011/05/12 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
2011/12/20 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
2013/01/23 Javascript
原生js做的手风琴效果的导航菜单
2013/11/08 Javascript
jquery查找tr td 示例模拟
2014/05/08 Javascript
jQuery实现当前页面标签高亮显示的方法
2015/03/10 Javascript
Vue.js创建Calendar日历效果
2016/11/03 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
2016/12/22 Javascript
Bootstrap fileinput文件上传组件使用详解
2017/06/06 Javascript
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
React如何避免重渲染
2018/04/10 Javascript
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
微信小程序开发摇一摇功能
2019/11/22 Javascript
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
[01:00:25]NB vs Secret 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
flask中过滤器的使用详解
2018/08/01 Python
python实现单链表中删除倒数第K个节点的方法
2018/09/28 Python
python增加图像对比度的方法
2019/07/12 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
matplotlib制作雷达图报错ValueError的实现
2021/01/05 Python
CSS3 RGBA色彩模式使用实例讲解
2016/04/26 HTML / CSS
介绍一下JMS编程步骤
2015/09/22 面试题
化验室技术员岗位职责
2013/12/24 职场文书
求职信结尾怎么写
2014/05/26 职场文书
三峡导游词
2015/01/31 职场文书
杜甫草堂导游词
2015/02/03 职场文书
vue实现简单数据双向绑定
2021/04/28 Vue.js
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB