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图像处理思路及实现代码
Dec 25 Javascript
无缝滚动的简单实现代码(推荐)
Jun 07 Javascript
详解jQuery插件开发方式
Nov 22 Javascript
jQuery插件ContextMenu自定义图标
Mar 15 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
Jun 27 Javascript
vue获取当前激活路由的方法
Mar 17 Javascript
node前端开发模板引擎Jade的入门
May 11 Javascript
在VUE中实现文件下载并判断状态的方法
Nov 08 Javascript
微信小程序实现一个简单swiper代码实例
Dec 30 Javascript
vue 使用 canvas 实现手写电子签名
Mar 06 Javascript
JavaScript实现拖拽和缩放效果
Aug 24 Javascript
uniapp微信小程序实现一个页面多个倒计时
Nov 01 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 URL跳转代码 减少外链
2011/06/25 PHP
CI框架(CodeIgniter)公共模型类定义与用法示例
2017/08/10 PHP
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
2007/04/20 Javascript
新浪微博字数统计 textarea字数统计实现代码
2011/08/28 Javascript
javascript 兼容所有浏览器的DOM扩展功能
2012/08/01 Javascript
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
浅谈JavaScript中的String对象常用方法
2015/02/25 Javascript
JS声明式函数与赋值式函数实例分析
2016/12/13 Javascript
JS实现的简单图片切换功能示例【测试可用】
2017/02/14 Javascript
详解Angular 开发环境搭建
2017/06/22 Javascript
利用jsonp与代理服务器方案解决跨域问题
2017/09/14 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
2018/12/13 Javascript
[03:00]2018完美盛典_最佳英雄奖
2018/12/17 DOTA
Python最基本的输入输出详解
2015/04/25 Python
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
2017/05/18 Python
python 获取键盘输入,同时有超时的功能示例
2018/11/13 Python
简单了解Python matplotlib线的属性
2019/06/29 Python
Python何时应该使用Lambda函数
2019/07/02 Python
PowerBI和Python关于数据分析的对比
2019/07/11 Python
简单了解Django ContentType内置组件
2019/07/23 Python
python实现复制大量文件功能
2019/08/31 Python
多版本python的pip 升级后, pip2 pip3 与python版本失配解决方法
2019/09/11 Python
执行Python程序时模块报错问题
2020/03/26 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
Django全局启用登陆验证login_required的方法
2020/06/02 Python
Canvas与Image互相转换示例代码
2013/08/09 HTML / CSS
html5 canvas绘制矩形和圆形的实例代码
2016/06/16 HTML / CSS
中国酒类在线零售网站:酒仙网
2016/08/20 全球购物
英国简约舒适女装品牌:Great Plains
2018/07/27 全球购物
迪卡侬中国官网:Decathlon中国
2020/08/10 全球购物
读书伴我成长演讲稿
2014/05/07 职场文书
自主招生教师推荐信
2014/05/10 职场文书
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
服务员态度差检讨书
2014/10/28 职场文书
python cv2图像质量压缩的算法示例
2021/06/04 Python
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电