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 尚未实现错误解决办法
Nov 27 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
Aug 07 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
Jun 13 Javascript
javascript中scrollTop详解
Apr 13 Javascript
javascript运算符——逻辑运算符全面解析
Jun 27 Javascript
Bootstrap select多选下拉框实现代码
Dec 23 Javascript
vue-router跳转页面的方法
Feb 09 Javascript
jQuery异步提交表单实例
May 30 jQuery
详解三种方式解决vue中v-html元素中标签样式
Nov 22 Javascript
详解JavaScript 事件流
Sep 02 Javascript
原生JavaScript实现弹幕组件的示例代码
Oct 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调用三种数据库的方法(1)
2006/10/09 PHP
PHP strtok()函数的优点分析
2010/03/02 PHP
php将fileterms函数返回的结果变成可读的形式
2011/04/21 PHP
用PHP代码在网页上生成图片
2015/07/01 PHP
thinkphp3.2.3 分页代码分享
2016/07/28 PHP
jQuery UI的Dialog无法提交问题的解决方法
2011/01/11 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
2013/12/26 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
2015/04/21 Javascript
javascript的BOM汇总
2015/07/16 Javascript
node.js实现博客小爬虫的实例代码
2016/10/08 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
2017/01/05 Javascript
jQuery设置图片等比例缩小的方法
2017/04/29 jQuery
微信小程序倒计时功能实现代码
2017/11/09 Javascript
微信小程序在其他页面监听globalData中值的变化
2019/07/15 Javascript
TypeScript类型声明书写详解
2019/08/28 Javascript
jQuery实现简单日历效果
2020/07/05 jQuery
jquery实现简单每周轮换的日历
2020/09/10 jQuery
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
2020/12/19 Vue.js
Nodejs 数组的队列以及forEach的应用详解
2021/02/25 NodeJs
[01:07:34]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第二场 1月9日
2021/03/11 DOTA
win10系统中安装scrapy-1.1
2016/07/03 Python
利用python实现简易版的贪吃蛇游戏(面向python小白)
2018/12/30 Python
用python中的matplotlib绘制方程图像代码
2019/11/21 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
伦敦最受欢迎的蛋糕店:Konditor & Cook
2019/11/01 全球购物
珍惜水资源建议书
2014/03/12 职场文书
揭牌仪式策划方案
2014/05/28 职场文书
2014年客服工作总结范文
2014/11/13 职场文书
2015清明节祭奠英烈寄语大全
2015/03/04 职场文书
2014年度个人工作总结范文
2015/03/09 职场文书
教师求职简历自我评价
2015/03/10 职场文书
中学教师读书笔记
2015/07/01 职场文书
MySQL悲观锁与乐观锁的实现方案
2021/11/02 MySQL
关于PHP数组迭代器的使用方法实例
2021/11/17 PHP
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android