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 相关文章推荐
jQuery checkbox全选/取消全选实现代码
Nov 14 Javascript
整理AngularJS中的一些常用指令
Jun 16 Javascript
谈一谈javascript闭包
Jan 28 Javascript
浅析JS中对函数function的理解(基础篇)
Oct 14 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
vue.js实现含搜索的多种复选框(附源码)
Mar 23 Javascript
在node中如何使用 ES6
Apr 22 Javascript
BootStrap Fileinput上传插件使用实例代码
Jul 28 Javascript
js实现input密码框显示/隐藏功能
Sep 10 Javascript
JS使用栈判断给定字符串是否是回文算法示例
Mar 04 Javascript
使用vue实现各类弹出框组件
Jul 03 Javascript
Vue详细的入门笔记
May 10 Vue.js
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
oracle资料库函式库
2006/10/09 PHP
php 实现进制相互转换
2016/04/07 PHP
php实现转换html格式为文本格式的方法
2016/05/16 PHP
适合PHP初学者阅读的4本经典书籍
2016/09/23 PHP
laravel 实现关闭CSRF(全部关闭、部分关闭)
2019/10/21 PHP
jQuery判断密码强度实现思路及代码
2013/04/24 Javascript
window.onload和$(function(){})的区别介绍
2013/10/30 Javascript
jQuery如何使用自动触发事件trigger
2015/11/29 Javascript
jQueryUI中的datepicker使用方法详解
2016/05/25 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
对于Javascript 执行上下文的全面了解
2017/09/05 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
2018/03/02 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
微信小程序提交form操作示例
2018/12/30 Javascript
在Web关闭页面时发送Ajax请求的实现方法
2019/03/07 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
实例讲解React 组件
2020/07/07 Javascript
[48:26]VGJ.S vs infamous Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
python实现360皮肤按钮控件示例
2014/02/21 Python
从零学python系列之浅谈pickle模块封装和拆封数据对象的方法
2014/05/23 Python
Python安装Imaging报错:The _imaging C module is not installed问题解决方法
2014/08/22 Python
python通过线程实现定时器timer的方法
2015/03/16 Python
Python面向对象编程基础解析(一)
2017/10/26 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
python 发送get请求接口详解
2020/11/17 Python
HTML5 本地存储和内容按需加载的思路和方法
2011/04/07 HTML / CSS
Java中的基本数据类型所占存储空间大小固定的吗
2012/02/15 面试题
大学生职业生涯规划范文
2014/01/22 职场文书
大学竞选班长演讲稿
2014/04/24 职场文书
环保建议书300字
2014/05/14 职场文书
建设幸福中国演讲稿
2014/09/11 职场文书
关爱空巢老人感想
2015/08/11 职场文书