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 相关文章推荐
超级有用的13个基于jQuery的内容滚动插件和教程
Jul 31 Javascript
JQueryEasyUI Layout布局框架的使用
Apr 08 Javascript
每天一篇javascript学习小结(String对象)
Nov 18 Javascript
JavaScript的函数式编程基础指南
Mar 19 Javascript
js自定义select下拉框美化特效
May 12 Javascript
JavaScript:Date类型全面解析
May 19 Javascript
js省市区级联查询(插件版&amp;无插件版)
Mar 21 Javascript
JavaScript中的ES6 Proxy的具体使用
Jun 16 Javascript
解决layui调用自定义方法提示未定义的问题
Sep 14 Javascript
vue router 传参获取不到的解决方式
Nov 13 Javascript
Node.js创建一个Express服务的方法详解
Jan 06 Javascript
jquery向后台提交数组的代码分析
Feb 20 jQuery
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中register_globals参数为OFF和ON的区别(register_globals 使用详解)
2012/02/05 PHP
PHP多态代码实例
2015/06/26 PHP
怎样搭建PHP开发环境
2015/07/28 PHP
PHP使用redis消息队列发布微博的方法示例
2017/06/22 PHP
Thinkphp整合阿里云OSS图片上传实例代码
2019/04/28 PHP
QQ登录简单实现代码
2021/03/09 Javascript
jquery 3D球状导航的文章分类
2010/07/06 Javascript
TBCompressor js代码压缩
2011/01/05 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
jquery实现九宫格大转盘抽奖
2015/11/13 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
2017/01/22 Javascript
vue+iview动态渲染表格详解
2019/03/19 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
2019/09/16 Javascript
jquery选择器和属性对象的操作实例分析
2020/01/10 jQuery
jQuery实现小火箭返回顶部特效
2020/02/03 jQuery
JS使用for in有序获取对象数据
2020/05/19 Javascript
详解js中的几种常用设计模式
2020/07/16 Javascript
js仿京东放大镜效果
2020/08/09 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
Python实现统计代码行的方法分析
2017/07/12 Python
python如何查看微信消息撤回
2018/11/27 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
Python音频操作工具PyAudio上手教程详解
2019/06/26 Python
简单整理HTML5的基本特性和语法
2016/02/18 HTML / CSS
香港连卡佛百货官网:Lane Crawford
2019/09/04 全球购物
STP的判定过程
2012/10/01 面试题
测试时代收集的软件测试面试题
2013/09/25 面试题
社区工作者感言
2014/03/02 职场文书
医学求职信
2014/05/28 职场文书
小学生美德少年事迹材料
2014/08/24 职场文书
幼儿园教师自我评价
2015/03/04 职场文书
董事长秘书工作总结
2015/08/14 职场文书
django如何自定义manage.py管理命令
2021/04/27 Python
centos8安装nginx1.9.1的详细过程
2021/08/02 Servers
【海涛教你打DOTA】死灵飞龙第一视角解说
2022/04/01 DOTA