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 相关文章推荐
FireBug 调试JS入门教程 如何调试JS
Dec 23 Javascript
JavaScript实现拖拽网页内元素的方法
Apr 15 Javascript
基于jquery animate操作css样式属性小结
Nov 27 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
May 13 Javascript
js制作支付倒计时页面
Oct 21 Javascript
vue实现图书管理demo详解
Oct 17 Javascript
Vue入门之数据绑定(小结)
Jan 08 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
May 05 Javascript
小程序:授权、登录、session_key、unionId的详解
May 15 Javascript
vue 源码解析之虚拟Dom-render
Aug 26 Javascript
vue.js实现双击放大预览功能
Jun 23 Javascript
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
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(6) 面向对象
2010/02/16 PHP
php 在文件指定行插入数据的代码
2010/05/08 PHP
PHP的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
PHP中的Streams详细介绍
2014/11/12 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
详解cookie验证的php应用的一种SSO解决办法
2017/10/20 PHP
PHP的mysqli_select_db()函数讲解
2019/01/23 PHP
textContent在Firefox下与innerText等效的属性
2007/05/12 Javascript
JObj预览一个JS的框架
2008/03/13 Javascript
WordPress 照片lightbox效果的运用几点
2009/06/22 Javascript
JQuery的ajax基础上的超强GridView展示
2009/09/18 Javascript
JavaScript Scoping and Hoisting 翻译
2012/07/03 Javascript
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
js Date概念详细介绍
2013/11/22 Javascript
Js与Jq 获取页面元素值的方法和差异对比
2015/04/30 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
2016/11/04 Javascript
原生js实现类似fullpage的单页/全屏滚动
2017/01/22 Javascript
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
使用JavaScript实现一个小程序之99乘法表
2017/09/21 Javascript
javascript代码优化的8点总结
2018/01/29 Javascript
JS实现返回上一页并刷新页面的方法分析
2019/07/16 Javascript
Javascript Dom元素获取和添加详解
2019/09/24 Javascript
Python urllib、urllib2、httplib抓取网页代码实例
2015/05/09 Python
pygame实现贪吃蛇游戏(上)
2019/10/29 Python
python实现批量文件重命名
2019/10/31 Python
解决keras GAN训练是loss不发生变化,accuracy一直为0.5的问题
2020/07/02 Python
pandas处理csv文件的方法步骤
2020/10/16 Python
Python实现中英文全文搜索的示例
2020/12/04 Python
canvas 阴影和图形变换的示例代码
2018/01/02 HTML / CSS
Airbnb爱彼迎官网:成为爱彼迎房东,赚取收入
2019/03/14 全球购物
施华洛世奇新加坡官网:SWAROVSKI新加坡
2020/10/06 全球购物
文明礼仪小标兵事迹
2014/01/12 职场文书
优秀团干部个人事迹
2014/05/29 职场文书
2015年法务工作总结范文
2015/05/23 职场文书
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python