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 相关文章推荐
jQuery EasyUI 中文API Button使用实例
Apr 14 Javascript
myEvent.js javascript跨浏览器事件框架
Oct 24 Javascript
jquery如何把参数列严格转换成数组实现思路
Apr 01 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
Aug 12 Javascript
node.js中的fs.existsSync方法使用说明
Dec 17 Javascript
js实现div层缓慢收缩与展开的方法
May 11 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
Aug 24 Javascript
js多个物体运动功能实例分析
Dec 20 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
Feb 18 Javascript
vscode中vue-cli项目es-lint的配置方法
Jul 30 Javascript
Vue.js 图标选择组件实践详解
Dec 03 Javascript
使用webpack将ES6转化ES5的实现方法
Oct 13 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
国产动画《伍六七》原声大碟大卖,啊哈娱乐引领音乐赋能IP的新尝试
2020/03/08 国漫
解析php中如何调用用户自定义函数
2013/08/06 PHP
php的hash算法介绍
2014/02/13 PHP
php生成百度sitemap站点地图类函数实例
2014/10/17 PHP
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
php版微信公众平台接口参数调试实现判断用户行为的方法
2016/09/23 PHP
php微信公众号开发(4)php实现自定义关键字回复
2016/12/15 PHP
Laravel学习基础之migrate的使用教程
2017/10/11 PHP
神奇的代码 通杀各种网站-可随意修改复制页面内容
2008/07/17 Javascript
Javascript 中的 &amp;&amp; 和 || 使用小结
2010/04/25 Javascript
基于JQuery的数字改变的动画效果--可用来做计数器
2010/08/11 Javascript
JS中判断null、undefined与NaN的方法
2014/03/24 Javascript
jquery动态添加元素事件失效问题解决方法
2014/05/23 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
2015/08/25 Javascript
jQuery简单注册和禁用全局事件的方法
2016/07/25 Javascript
javascript self对象使用详解
2016/10/18 Javascript
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
vue 配置多页面应用的示例代码
2018/10/22 Javascript
vuex如何重置所有state(可定制)
2019/01/17 Javascript
vue实现可视化可拖放的自定义表单的示例代码
2019/03/20 Javascript
关于微信小程序map组件z-index的层级问题分析
2019/07/09 Javascript
微信小程序如何使用canvas二维码保存至手机相册
2019/07/15 Javascript
使用Python的urllib2模块处理url和图片的技巧两则
2016/02/18 Python
浅谈Python 字符串格式化输出(format/printf)
2016/07/21 Python
Anaconda入门使用总结
2018/04/05 Python
Python Logging 日志记录入门学习
2018/06/02 Python
使用python将图片格式转换为ico格式的示例
2018/10/22 Python
深入浅析Python代码规范性检测
2020/07/31 Python
用python发送微信消息
2020/12/21 Python
CSS3媒体查询(Media Queries)介绍
2013/09/12 HTML / CSS
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
体育教育专业自荐信范文
2013/12/20 职场文书
八项规定整改方案
2014/02/21 职场文书
团日活动总结
2014/04/28 职场文书
明星员工获奖感言
2014/08/14 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书