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 相关文章推荐
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
Feb 03 Javascript
js实时获取系统当前时间实例代码
Jun 28 Javascript
JavaScript实现基于Cookie的存储类实例
Apr 10 Javascript
javascript中replace( )方法的使用
Apr 24 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
Jun 20 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 Javascript
《javascript少儿编程》location术语总结
May 27 Javascript
vue实现绑定事件的方法实例代码详解
Jun 20 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
Aug 12 Javascript
js原生map实现的方法总结
Jan 19 Javascript
在vue-cli3中使用axios获取本地json操作
Jul 30 Javascript
js前端设计模式优化50%表单校验代码示例
Jun 21 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中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
微信公众平台DEMO(PHP)
2016/05/04 PHP
JavaScript使用cookie
2007/02/02 Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
2011/02/23 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
2013/11/11 Javascript
获得Javascript对象属性个数的示例代码
2013/11/21 Javascript
ECMAScript6中Map/WeakMap详解
2015/06/12 Javascript
javascript显示中文日期的方法
2015/06/18 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
2015/07/17 Javascript
JS打字效果的动态菜单代码分享
2015/08/21 Javascript
javascript从作用域链谈闭包
2020/07/29 Javascript
js实现九宫格的随机颜色跳转
2017/02/19 Javascript
jQuery中table数据的值拷贝和拆分
2017/03/19 Javascript
Node.js实现文件上传的示例
2017/06/28 Javascript
easyui简介_动力节点Java学院整理
2017/07/14 Javascript
vue 使用Jade模板写html,stylus写css的方法
2018/02/23 Javascript
关于JavaScript中高阶函数的魅力详解
2018/09/07 Javascript
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
Vue内部渲染视图的方法
2019/09/02 Javascript
浅谈React中组件逻辑复用的那些事儿
2020/05/21 Javascript
python基础入门详解(文件输入/输出 内建类型 字典操作使用方法)
2013/12/08 Python
Python功能键的读取方法
2015/05/28 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
Python实现的绘制三维双螺旋线图形功能示例
2018/06/23 Python
启动Atom并运行python文件的步骤
2018/11/09 Python
Python 隐藏输入密码时屏幕回显的实例
2019/02/19 Python
Python中的pathlib.Path为什么不继承str详解
2019/06/23 Python
pandas实现DataFrame显示最大行列,不省略显示实例
2019/12/26 Python
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
纽约现代艺术博物馆商店:MoMA STORE(室内家具和杂货商品)
2016/08/02 全球购物
致跳远、跳高运动员广播稿
2014/01/09 职场文书
中学社团活动总结
2015/05/07 职场文书
运动会开幕式新闻稿
2015/07/17 职场文书
电脑无法安装Windows 11怎么办?无法安装Win11的解决方法
2021/11/21 数码科技
JavaScript正则表达式实现注册信息校验功能
2022/05/30 Java/Android