Array.prototype 的泛型应用分析


Posted in Javascript onApril 30, 2010

题目
请说明下面语句的输出:

x = {shift:[].shift}; 
x.shift(); 
console.info(x.length);

如果你回答正确,那么说明你已经了解 Array 函数的泛型应用。在理解这到题目之前,我 我们首先要了解数组(Array)的 shift 定义。

MDC 中已经对相关的说明描述得非常的清楚

shift is intentionally generic; this method can be called or 
applied to objects resembling arrays. Objects which do not 
contain a length property reflecting the last in a series of 
consecutive, zero-based numerical properties may not behave 
in any meaningful manner.

同时,EMCAScript 中的定义也同时定义了对于 shift 操作对于对象 length 属性的改变, 那么基本上我们可以了解到上题中的答案为
0

扩散思维
如果对于上面的题目还无法理解,那么我们更清楚的说明 Array.prototype.shift 对对象 的 length 的影响。
x = {}; 
Array.prototype.shift.call(x); 
console.info(x.length);

很明显,对于对象如果为定义 length 属性,则 shift 则会自动加上 length 属性并设置 为 0 。

既然已经说到这里,那么下面的题目输出什么留给大家去思考。

x = function (a, b, c) {}; 
Array.prototype.shift.call(x); 
console.info(x.length);

重新认识泛型
很明显,上面的题目有可能还是无法说明本篇文章的题目。泛型(Generic)应用其实 期前也说明过,但这里主要说明 Array 方法对于“类数组”的操作使用。

强制转换为数组

var args = Array.prototype.slice.call(arguments);

这个用法比较火星,其实期前也用过,详细参见这里。

迭代数据

Array.prototype.forEach.call(arguments, function(i) { 
console.info(i); 
});

如果对象能够被递归,则出了“传统”的 for、while 等语句以外,还可以考虑使用 Array 的 forEach 属性(注意 IE 会是悲剧)。Array 的 forEach 方法详见这里。

其他的 Array 扩展用法可以散发自己的思维,如果对应浏览器的 Array 没有对应的实现方 法,可以参见这里。

其实,不仅仅是 Array 方法,很多浏览器原生对象的方法都是泛型,我们完全可以利用这 这些特性使代码更为的清晰
使用原生方法,效率更高。

Javascript 相关文章推荐
Javascript typeof 用法
Dec 28 Javascript
javascript 表单验证常见正则
Sep 28 Javascript
js中根据字数截取字符串,不能截断url
Jan 12 Javascript
基于JQuery的列表拖动排序实现代码
Oct 01 Javascript
JavaScript实现的类字典插入或更新方法实例
Jul 10 Javascript
javascript实现数字倒计时特效
Mar 30 Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 Javascript
微信小程序商品到详情的实现
Jun 27 Javascript
JavaScript图片处理与合成总结
Mar 04 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
Sep 27 Javascript
详解JavaScript 的变量
Mar 08 Javascript
layui实现tab的添加拒绝重复的方法
Sep 04 Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
Apr 30 #Javascript
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
Apr 29 #Javascript
匹配任意字符的正则表达式写法
Apr 29 #Javascript
jquery ajax提交表单数据的两种实现方法
Apr 29 #Javascript
jQuery 动画弹出窗体支持多种展现方式
Apr 29 #Javascript
jQuery 工具函数学习资料
Apr 29 #Javascript
IE JS无提示关闭窗口不提示的方法
Apr 29 #Javascript
You might like
ThinkPHP中处理表单中的注意事项
2014/11/22 PHP
解决在laravel中auth建立时候遇到的问题
2019/10/15 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
php gethostbyname获取域名ip地址函数详解
2010/01/24 Javascript
在vs2010中调试javascript代码方法
2011/02/11 Javascript
给应用部分的js代码设定一个统一的入口
2014/06/15 Javascript
SublimeText自带格式化代码功能之reindent
2015/12/27 Javascript
vue.js初学入门教程(2)
2016/11/07 Javascript
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
vue数组对象排序的实现代码
2018/06/20 Javascript
小程序实现抽奖动画
2020/04/16 Javascript
vue双向绑定数据限制长度的方法
2019/11/04 Javascript
JS三级联动代码格式实例详解
2019/12/30 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
2020/03/07 Javascript
JS实现鼠标按下拖拽效果
2020/07/23 Javascript
[55:45]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第一局
2016/02/28 DOTA
简单使用Python自动生成文章
2014/12/25 Python
python使用webbrowser浏览指定url的方法
2015/04/04 Python
python的Tqdm模块的使用
2018/01/10 Python
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
详解Python字典的操作
2019/03/04 Python
Django时区详解
2019/07/24 Python
python爬虫 猫眼电影和电影天堂数据csv和mysql存储过程解析
2019/09/05 Python
python打包多类型文件的操作方法
2020/09/21 Python
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
Myprotein蛋白粉美国官网:欧洲畅销运动营养品牌
2016/11/15 全球购物
综合办公室个人的自我评价
2013/12/22 职场文书
求职信的七个关键技巧
2014/02/05 职场文书
《自选商场》教学反思
2014/02/14 职场文书
诉讼代理人授权委托书
2014/04/08 职场文书
和谐家庭演讲稿
2014/05/24 职场文书
毕业典礼邀请函
2015/01/31 职场文书
上级领导检查欢迎词
2015/09/30 职场文书
2016圣诞节贺卡寄语
2015/12/07 职场文书
导游词幽默开场白
2019/06/26 职场文书