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代码
Nov 23 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
Feb 22 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
Apr 02 Javascript
JavaScript函数作用域链分析
Feb 13 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
Jun 05 Javascript
深入理解JavaScript的React框架的原理
Jul 02 Javascript
JS简单实现禁止访问某个页面的方法
Sep 13 Javascript
基于jQuery实现咖啡订单管理简单应用
Feb 10 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
Aug 30 Javascript
layui select动态添加option的实例
Mar 07 Javascript
Vue面试题及Vue知识点整理
Oct 07 Javascript
微信小程序如何获取地址
Dec 24 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/08 PHP
php结合ajax实现赞、顶、踩功能实例
2014/05/12 PHP
Laravel 5框架学习之表单验证
2015/04/08 PHP
详解Yii2高级版引入bootstrap.js的一个办法
2017/03/21 PHP
Maps Javascript
2007/01/22 Javascript
学习ExtJS TextField常用方法
2009/10/07 Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
2011/03/07 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
js 动态为textbox添加下拉框数据源的方法
2014/04/24 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
2015/04/22 Javascript
javascript委托(Delegate)blur和focus用法实例分析
2015/05/26 Javascript
jQuery获取cookie值及删除cookie用法实例
2016/04/15 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
Vue 2.0的数据依赖实现原理代码简析
2017/07/10 Javascript
简单谈谈React中的路由系统
2017/07/25 Javascript
小程序实现人脸识别功能(百度ai)
2018/12/23 Javascript
使用JS判断页面是首次被加载还是刷新
2019/05/26 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
2019/09/21 Javascript
CountUp.js数字滚动插件使用方法详解
2019/10/17 Javascript
Vue实例的对象参数options的几个常用选项详解
2019/11/08 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
2020/04/04 jQuery
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
[44:40]KG vs LGD 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
用Python的Flask框架结合MySQL写一个内存监控程序
2015/11/07 Python
深入源码解析Python中的对象与类型
2015/12/11 Python
Django文件存储 默认存储系统解析
2019/08/02 Python
500行python代码实现飞机大战
2020/04/24 Python
pip/anaconda修改镜像源,加快python模块安装速度的操作
2021/03/04 Python
外科实习自我鉴定
2013/10/06 职场文书
师范院校学生自荐信范文
2013/12/27 职场文书
善意的谎言事例
2014/02/15 职场文书
求职信内容怎么写
2014/05/26 职场文书
大一工商管理职业生涯规划:有梦最美,行动相随
2014/09/18 职场文书
认识实习感想
2015/08/10 职场文书
详解Python中的进程和线程
2021/06/23 Python