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 相关文章推荐
javascript新手语法小结
Jun 15 Javascript
jquery 图片预加载 自动等比例缩放插件
Dec 25 Javascript
[Web]防止用户复制页面内容和另存页面的方法
Feb 06 Javascript
自动完成JS类(纯JS, Ajax模式)
Mar 12 Javascript
可自定义速度的js图片无缝滚动示例分享
Jan 20 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
Apr 30 Javascript
jquery mobile界面数据刷新的实现方法
May 28 Javascript
jQuery 3.0 的 setter和getter 模式详解
Jul 11 Javascript
JS两种类型的表单提交方法实例分析
Nov 28 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
Sep 05 Javascript
微信小程序实现定位及到指定位置导航的示例代码
Aug 20 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
Aug 28 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垃圾回收机制对内存泄露的处理
2013/06/14 PHP
PHP多进程编程总结(推荐)
2016/07/18 PHP
php json相关函数用法示例
2017/03/28 PHP
js判断字符长度以及中英文数字等
2013/12/31 Javascript
javascript判断office版本示例
2014/04/11 Javascript
推荐8款jQuery轻量级树形Tree插件
2014/11/12 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
2016/12/12 Javascript
详解angular element()方法使用
2017/04/08 Javascript
基于vue开发的在线付费课程应用过程
2018/01/25 Javascript
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
2019/07/31 Javascript
五分钟搞懂Vuex实用知识(小结)
2019/08/12 Javascript
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
python flask安装和命令详解
2019/04/02 Python
python实现邮件自动发送
2019/08/10 Python
pytorch多进程加速及代码优化方法
2019/08/19 Python
Python venv虚拟环境配置过程解析
2020/07/08 Python
PyTorch安装与基本使用详解
2020/08/31 Python
Python importlib模块重载使用方法详解
2020/10/13 Python
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
美国女孩服装购物网站:Justice
2017/03/04 全球购物
Wedgwood美国官网:英国骨瓷,精美礼品及家居装饰
2018/02/17 全球购物
施华洛世奇加拿大官网:SWAROVSKI加拿大
2018/06/03 全球购物
碧欧泉法国官网:Biotherm法国
2019/10/23 全球购物
Agoda中文官网:安可达(低价预订全球酒店)
2021/01/18 全球购物
PHP中如何创建和修改数组
2012/05/02 面试题
给排水工程师岗位职责
2013/11/21 职场文书
降消项目实施方案
2014/03/30 职场文书
高三英语复习计划
2015/01/19 职场文书
校园开放日新闻稿
2015/07/17 职场文书
单位提档介绍信
2015/10/22 职场文书
导游词之岳阳楼
2019/09/25 职场文书
vue中 this.$set的使用详解
2021/11/17 Vue.js
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL
Centos7 Shell编程之正则表达式、文本处理工具详解
2022/08/05 Servers