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 相关文章推荐
深入理解JavaScript系列(16) 闭包(Closures)
Apr 12 Javascript
JQuery实现简单验证码提示解决方案
Dec 20 Javascript
JS保存、读取、换行、转Json报错处理方法
Jun 14 Javascript
js AppendChild与insertBefore用法详细对比
Dec 16 Javascript
js阻止移动端页面滚动的两种方法
Jan 25 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
Mar 13 Javascript
图解Javascript——作用域、作用域链、闭包
Mar 21 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
Oct 31 Javascript
微信小程序实现弹出菜单
Jul 19 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
Apr 02 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
May 23 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
Oct 29 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制作静态网站的模板框架(一)
2006/10/09 PHP
Discuz板块横排显示图片的实现方法
2007/05/28 PHP
php微信公众账号开发之前五个坑(一)
2016/09/18 PHP
accesskey 提交
2006/06/26 Javascript
通过onmouseover选项卡实现img图片的变化
2014/02/12 Javascript
5种处理js跨域问题方法汇总
2014/12/04 Javascript
express的中间件cookieParser详解
2014/12/04 Javascript
JavaScript DOM事件(笔记)
2015/04/08 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
2015/04/26 Javascript
使用Bootrap和Vue实现仿百度搜索功能
2017/10/26 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
JavaScript寄生组合式继承实例详解
2018/01/06 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
2018/08/08 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
2019/09/11 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
layui上传图片到服务器的非项目目录下的方法
2019/09/26 Javascript
JQuery复选框全选效果如何实现
2020/05/08 jQuery
[52:26]完美世界DOTA2联赛决赛 FTD vs Phoenix 第一场 11.08
2020/11/11 DOTA
python获取本机外网ip的方法
2015/04/15 Python
Python时间的精准正则匹配方法分析
2017/08/17 Python
解读python logging模块的使用方法
2018/04/17 Python
python抖音表白程序源代码
2019/04/07 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
python使用 __init__初始化操作简单示例
2019/09/26 Python
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
Web Service面试题:如何搭建Axis2的开发环境
2012/06/20 面试题
数据库面试要点基本概念
2013/10/31 面试题
升职自荐信
2013/11/28 职场文书
雷锋式好少年事迹材料
2014/08/17 职场文书
2014教师党员个人自我评议
2014/09/20 职场文书
个性与发展自我评价
2015/03/06 职场文书
工厂采购员岗位职责
2015/04/07 职场文书
JavaScript 去重和重复次数统计
2021/03/31 Javascript
SQL CASE 表达式的具体使用
2022/03/21 SQL Server
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技