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 相关文章推荐
让焦点自动跳转
Jul 01 Javascript
javascript中删除指定数组中指定的元素的代码
Feb 12 Javascript
js实现三张图(文)片一起切换的banner焦点图
Aug 25 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
Sep 18 Javascript
详解JavaScript设计模式开发中的桥接模式使用
May 18 Javascript
AngularJS基础 ng-list 指令详解及示例代码
Aug 02 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
Dec 03 Javascript
深入理解react-router@4.0 使用和源码解析
May 23 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
Sep 13 Javascript
微信小程序自定义tab实现多层tab嵌套功能
Jun 15 Javascript
js实现json数组分组合并操作示例
Feb 12 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
Feb 21 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
Laravel使用Caching缓存数据减轻数据库查询压力的方法
2016/03/15 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
PHP设计模式(八)装饰器模式Decorator实例详解【结构型】
2020/05/02 PHP
23个Javascript弹出窗口特效整理
2011/02/25 Javascript
Jquery 垂直多级手风琴菜单附源码下载
2015/11/17 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
JavaScript继承模式粗探
2016/01/12 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
2016/05/05 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
2016/05/15 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
2016/08/30 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
2016/10/25 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
2017/03/24 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
vue-router中scrollBehavior的巧妙用法
2018/07/09 Javascript
JavaScript实现学生在线做题计时器功能
2018/12/05 Javascript
webpack-mvc 传统多页面组件化开发详解
2019/05/07 Javascript
微信小程序 简易计算器实现代码实例
2019/09/02 Javascript
小程序实现图片预览裁剪插件
2019/11/22 Javascript
JS eval代码快速解密实例解析
2020/04/23 Javascript
Python 元组(Tuple)操作详解
2014/03/11 Python
小米5s微信跳一跳小程序python源码
2018/01/08 Python
python快排算法详解
2019/03/04 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
Django的Modelforms用法简介
2019/07/27 Python
Apache部署Django项目图文详解
2019/07/30 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
Nordgreen美国官网:在线购买极简主义斯堪的纳维亚手表
2019/07/24 全球购物
校运会广播稿100字
2014/01/27 职场文书
优秀教师获奖感言
2014/01/31 职场文书
校园文化标语
2014/06/18 职场文书
焦裕禄精神心得体会
2014/09/02 职场文书
go:垃圾回收GC触发条件详解
2021/04/24 Golang
仅用一句SQL更新整张表的涨跌幅、涨跌率的解决方案
2021/05/06 MySQL
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android