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实现的图片马赛克后显示并切换加文字功能
Apr 21 Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
Nov 05 Javascript
jQuery性能优化技巧分析
Feb 20 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
Aug 26 Javascript
JavaScript实现给定时间相加天数的方法
Jan 25 Javascript
javascript中Date对象应用之简易日历实现
Jul 12 Javascript
js改变html的原有内容实现方法
Oct 05 Javascript
详解vue+vueRouter+webpack的简单实例
Jun 17 Javascript
node vue项目开发之前后端分离实战记录
Dec 13 Javascript
Vue+Django项目部署详解
May 30 Javascript
关于layui时间回显问题的解决方法
Sep 24 Javascript
如何实现iframe父子传参通信
Feb 05 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 引用是个坏习惯
2010/03/12 PHP
php 的加密函数 md5,crypt,base64_encode 等使用介绍
2012/04/09 PHP
LotusPhp笔记之:基于ObjectUtil组件的使用分析
2013/05/06 PHP
php检测数组长度函数sizeof与count用法
2014/11/17 PHP
php获取文章内容第一张图片的方法示例
2017/07/03 PHP
20款非常优秀的 jQuery 工具提示插件 推荐
2012/07/15 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
2013/01/21 Javascript
JavaScript获得指定对象大小的方法
2015/07/01 Javascript
javascript获取网页宽高方法汇总
2015/07/19 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
2015/10/31 Javascript
浅谈javascript的call()、apply()、bind()的用法
2016/02/21 Javascript
bootstrap布局中input输入框右侧图标点击功能
2016/05/16 Javascript
Vuejs 组件——props数据传递的实例代码
2017/03/07 Javascript
详解AngularJS ng-class样式切换
2017/06/27 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
2018/08/23 jQuery
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
spring+angular实现导出excel的实现代码
2019/02/27 Javascript
关于微信小程序map组件z-index的层级问题分析
2019/07/09 Javascript
json 带斜杠时如何解析的实现
2019/08/12 Javascript
微信小程序使用 vant Dialog组件的正确方式
2020/02/21 Javascript
跟老齐学Python之集成开发环境(IDE)
2014/09/12 Python
Python的批量远程管理和部署工具Fabric用法实例
2015/01/23 Python
关于numpy中np.nonzero()函数用法的详解
2017/02/07 Python
python中 chr unichr ord函数的实例详解
2017/08/06 Python
解决django前后端分离csrf验证的问题
2019/02/03 Python
使用 Python 处理3万多条数据只要几秒钟
2020/01/19 Python
解决Keras 与 Tensorflow 版本之间的兼容性问题
2020/02/07 Python
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
应届医学毕业生求职信分享
2013/12/02 职场文书
关于爱情的广播稿
2014/01/16 职场文书
12岁生日感言
2014/01/21 职场文书
销售经理工作职责
2014/02/03 职场文书
好听的队名和口号
2014/06/09 职场文书
2014年涉外离婚协议书范本
2014/11/20 职场文书
Python实现随机生成迷宫并自动寻路
2021/06/13 Python