javascript Array.prototype.slice使用说明


Posted in Javascript onOctober 11, 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 函数式编程
Aug 16 Javascript
JavaScript Event学习第九章 鼠标事件
Feb 08 Javascript
JS中判断null、undefined与NaN的方法
Mar 24 Javascript
jQuery学习笔记之基础中的基础
Jan 19 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
Aug 26 Javascript
web前端开发JQuery常用实例代码片段(50个)
Aug 28 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
JavaScript如何实现组合列表框中元素移动效果
Mar 01 Javascript
React Native 使用Fetch发送网络请求的示例代码
Dec 02 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
Jun 15 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
Nov 09 Javascript
Vue点击切换Class变化,实现Active当前样式操作
Jul 17 Javascript
javascript 伪数组实现方法
Oct 11 #Javascript
javascript forEach通用循环遍历方法
Oct 11 #Javascript
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
Oct 11 #Javascript
JavaScript isArray()函数判断对象类型的种种方法
Oct 11 #Javascript
JSChart轻量级图形报表工具(内置函数中文参考)
Oct 11 #Javascript
jQuery 表单验证扩展代码(一)
Oct 11 #Javascript
AlertBox 弹出层信息提示框效果实现步骤
Oct 11 #Javascript
You might like
php中in_array函数用法探究
2014/11/25 PHP
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
2011/10/31 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
2016/06/08 Javascript
Javascript实现汉字和拼音互转的终极方案
2016/10/19 Javascript
微信小程序  Mustache语法详细介绍
2016/10/27 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
JavaScrip关于创建常量的知识点
2017/12/07 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
2017/12/18 Javascript
在JavaScript中使用严格模式(Strict Mode)
2019/06/13 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
2020/07/01 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
Python遍历zip文件输出名称时出现乱码问题的解决方法
2015/04/08 Python
教你用python3根据关键词爬取百度百科的内容
2016/08/18 Python
Python 2.x如何设置命令执行的超时时间实例
2017/10/19 Python
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
python 将列表中的字符串连接成一个长路径的方法
2018/10/23 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
python 3.8.3 安装配置图文教程
2020/05/21 Python
opencv 图像滤波(均值,方框,高斯,中值)
2020/07/08 Python
提高python代码运行效率的一些建议
2020/09/29 Python
Django自定义YamlField实现过程解析
2020/11/11 Python
CSS3混合模式mix-blend-mode/background-blend-mode简介
2018/03/15 HTML / CSS
ASOS比利时:英国线上零售商及自有品牌
2018/07/29 全球购物
database面试题
2013/03/28 面试题
销售人员中英文自荐信
2013/09/22 职场文书
开办化妆品公司创业计划书
2013/12/26 职场文书
物流司机岗位职责
2013/12/28 职场文书
小学生环保标语
2014/06/13 职场文书
奥巴马当选演讲稿
2014/09/10 职场文书
2014年少先队工作总结
2014/12/03 职场文书
2014年监理个人工作总结
2014/12/11 职场文书
简历自我评价优缺点
2015/03/11 职场文书
mysql中int(3)和int(10)的数值范围是否相同
2021/10/16 MySQL
JavaScript组合继承详解
2021/11/07 Javascript