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 相关文章推荐
统一接口:为FireFox添加IE的方法和属性的js代码
Mar 25 Javascript
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
Apr 29 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
Mar 10 Javascript
jquery实现键盘左右翻页特效
Apr 30 Javascript
微信JS接口大全
Aug 25 Javascript
javascript self对象使用详解
Oct 18 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
Dec 19 Javascript
AngularJS实现图片上传和预览功能的方法分析
Nov 08 Javascript
解决vue-cli + webpack 新建项目出错的问题
Mar 20 Javascript
深入浅析Vue.js中 computed和methods不同机制
Mar 22 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
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
鸡肋的PHP单例模式应用详解
2013/06/03 PHP
PHP和javascript常用正则表达式及用法实例
2014/07/01 PHP
简单说说PHP优化那些事(经验分享)
2014/11/27 PHP
php单例模式示例分享
2015/02/12 PHP
jQuery html()等方法介绍
2009/11/18 Javascript
javascript JSON操作入门实例
2010/04/16 Javascript
javascript整除实现代码
2010/11/23 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
深入理解JavaScript系列(43):设计模式之状态模式详解
2015/03/04 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
深入理解jquery自定义动画animate()
2016/05/24 Javascript
JavaScript面试题(指针、帽子和女朋友)
2016/11/23 Javascript
Servlet实现文件上传,可多文件上传示例
2016/12/05 Javascript
jquery插入兄弟节点的操作方法
2016/12/07 Javascript
js获取ip和地区
2017/03/10 Javascript
简单谈谈js的数据类型
2017/09/25 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
2018/01/18 Javascript
vue项目引入字体.ttf的方法
2018/09/28 Javascript
全面了解JavaScript的作用域链
2019/04/03 Javascript
浅入深出Vue之自动化路由
2019/08/06 Javascript
React中使用UMEditor的方法示例
2019/12/27 Javascript
JavaScript事件冒泡机制原理实例解析
2020/01/14 Javascript
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
Python正规则表达式学习指南
2016/08/02 Python
对python实现模板生成脚本的方法详解
2019/01/30 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
标准导师推荐信(医学类)
2013/10/28 职场文书
军训自我鉴定100字
2014/02/13 职场文书
献爱心倡议书
2014/04/14 职场文书
关于孝道的演讲稿
2014/05/21 职场文书
选秀节目策划方案
2014/06/06 职场文书
运动会口号大全
2014/06/07 职场文书
校本教研活动总结
2014/07/01 职场文书
银行党员批评与自我批评
2014/10/15 职场文书
《敬重卑微》读后感3篇
2019/11/26 职场文书