Array.prototype.slice 使用扩展


Posted in Javascript onJune 09, 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 相关文章推荐
js 可拖动列表实现代码
Dec 13 Javascript
jquery做的一个简单的屏幕锁定提示框
Mar 26 Javascript
javascript动态判断html元素并执行不同的操作
Jun 16 Javascript
扒一扒JavaScript 预解释
Jan 28 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 Javascript
jQuery视差滚动效果网页实现方法经验总结
Sep 29 Javascript
微信小程序 wxapp内容组件 text详细介绍
Oct 31 Javascript
通过js控制时间,一秒一秒自己动的实例
Oct 25 Javascript
小程序指纹验证的实现代码
Dec 04 Javascript
微信小程序版本自动更新的方法
Jun 14 Javascript
JavaScript console的使用方法实例分析
Apr 28 Javascript
查找Vue中下标的操作(some和findindex)
Aug 12 Javascript
Confirmer JQuery确认对话框组件
Jun 09 #Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
Jun 09 #Javascript
JavaScript 原型与继承说明
Jun 09 #Javascript
JavaScript 构造函数 面相对象学习必备知识
Jun 09 #Javascript
JS 图片缩放效果代码
Jun 09 #Javascript
JQuery优缺点分析说明
Jun 09 #Javascript
web页面数据展示新想法(json)
Jun 08 #Javascript
You might like
PHP性能优化准备篇图解PEAR安装
2011/12/05 PHP
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
解析link_mysql的php版
2013/06/30 PHP
yii2带搜索功能的下拉框实例详解
2016/05/12 PHP
php利用ffmpeg提取视频中音频与视频画面的方法详解
2017/06/07 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
PHP快速排序算法实现的原理及代码详解
2019/04/03 PHP
Javascript 键盘keyCode键码值表
2009/12/24 Javascript
一个JavaScript变量声明的知识点
2013/10/28 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
AngularJS入门教程之双向绑定详解
2016/08/18 Javascript
js实现图片左右滚动效果
2017/02/27 Javascript
用js屏蔽被http劫持的浮动广告实现方法
2017/08/10 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
2017/09/28 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
2018/06/22 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
2018/08/01 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
2018/08/17 Javascript
elementUI多选框反选的实现代码
2019/04/03 Javascript
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
python实现socket客户端和服务端简单示例
2014/02/24 Python
Python实现堆排序的方法详解
2016/05/03 Python
Python网络编程之TCP与UDP协议套接字用法示例
2018/02/02 Python
python对离散变量的one-hot编码方法
2018/07/11 Python
Python Pandas中根据列的值选取多行数据
2019/07/08 Python
Python入门Anaconda和Pycharm的安装和配置详解
2019/07/16 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
python基于socket函数实现端口扫描
2020/05/28 Python
python和c语言哪个更适合初学者
2020/06/22 Python
土耳其时尚购物网站:Morhipo
2017/09/04 全球购物
贝玲妃英国官网:Benefit英国
2018/02/03 全球购物
大型晚会策划方案
2014/02/06 职场文书
小学生一分钟演讲稿
2014/08/26 职场文书
2014派出所所长群众路线对照检查材料思想汇报
2014/09/18 职场文书
2014年领导班子专项整治整改方案
2014/09/28 职场文书
工程部经理岗位职责
2015/02/02 职场文书
2015年学校教育教学工作总结
2015/04/22 职场文书