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 相关文章推荐
jquery中对表单的基本操作代码
Jul 29 Javascript
jquery手风琴特效插件
Feb 04 Javascript
jQuery实现数秒后自动提交form的方法
Mar 05 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
Nov 24 Javascript
RequireJS多页面应用实例分析
Jun 29 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
Aug 24 Javascript
javascript事件的绑定基础实例讲解(34)
Feb 14 Javascript
Vuex之理解Mutations的用法实例
Apr 19 Javascript
ES6新特性:使用export和import实现模块化详解
Jul 31 Javascript
Node中使用ES6语法的基础教程
Jan 05 Javascript
详解JavaScript 中的批处理和缓存
Nov 19 Javascript
详解实现vue的数据响应式原理
Jan 20 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合并数组函数array_merge用法分析
2017/02/17 PHP
$.ajax json数据传递方法
2008/11/19 Javascript
event.srcElement 用法笔记e.target
2009/12/18 Javascript
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
jquery一句话全选/取消全选
2011/03/01 Javascript
30个最佳jQuery Lightbox效果插件分享
2011/04/11 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
2014/08/01 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
JavaScript实现的字符串replaceAll函数代码分享
2015/04/02 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
2015/11/30 Javascript
jquery对复选框(checkbox)的操作汇总
2016/01/13 Javascript
基于canvas粒子系统的构建详解
2017/08/31 Javascript
vue 使用Jade模板写html,stylus写css的方法
2018/02/23 Javascript
jQuery操作选中select下拉框的值代码实例
2020/02/07 jQuery
js实现简单的随机点名器
2020/09/17 Javascript
python实现忽略大小写对字符串列表排序的方法
2014/09/25 Python
Python常用知识点汇总
2016/05/08 Python
Python实现的归并排序算法示例
2017/11/21 Python
一文秒懂python读写csv xml json文件各种骚操作
2019/07/04 Python
处理Selenium3+python3定位鼠标悬停才显示的元素
2019/07/31 Python
python TK库简单应用(实时显示子进程输出)
2019/10/29 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
python通过函数名调用函数的几种场景
2020/09/23 Python
全面解析CSS Media媒体查询使用操作(推荐)
2017/08/15 HTML / CSS
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
HTML5实现多张图片上传功能
2016/03/11 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
2018/03/02 HTML / CSS
The Kooples美国官方网站:为情侣提供的法国当代时尚品牌
2019/01/03 全球购物
Tom Dixon官网:英国照明及家具设计和制造公司
2019/03/01 全球购物
德国、奥地利和瑞士最大的旅行和度假门户网站:HolidayCheck
2019/11/14 全球购物
职高毕业生自我鉴定
2013/10/21 职场文书
见习期自我鉴定
2013/11/07 职场文书
24岁生日感言
2014/01/13 职场文书
人身损害赔偿协议书格式
2014/11/01 职场文书
2016年度员工工作表现评语
2015/12/02 职场文书
对讲机的最大通讯距离是多少
2022/02/18 无线电