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 相关文章推荐
js 模拟气泡屏保效果代码
Jul 10 Javascript
jquery ajax 简单范例(界面+后台)
Nov 19 Javascript
判断浏览器的内核及版本号方法汇总
Jan 05 Javascript
jquery实现聚光灯效果的方法
Feb 06 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
May 06 Javascript
vue中设置、获取、删除cookie的方法
Sep 21 Javascript
jQuery each和js forEach用法比较
Feb 27 jQuery
Vue使用mixin分发组件的可复用功能
Sep 01 Javascript
如何换个角度使用VUE过滤器详解
Sep 11 Javascript
React中Ref 的使用方法详解
Apr 28 Javascript
微信小程序实现多图上传
Jun 19 Javascript
关于React Native使用axios进行网络请求的方法
Aug 02 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
一个简单的PHP投票程序源码
2007/03/11 PHP
php中的观察者模式
2010/03/24 PHP
php笔记之:AOP的应用
2013/04/24 PHP
php密码生成类实例
2014/09/24 PHP
Yii框架安装简明教程
2020/05/15 PHP
jQuery设置与获取HTML,文本和值的简单实例
2014/02/26 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
2016/04/04 Javascript
解决Angular.Js与Django标签冲突的方案
2016/12/20 Javascript
JS实现搜索关键词的智能提示功能
2017/07/07 Javascript
微信小程序自定义组件
2017/08/16 Javascript
浅谈Node模块系统及其模式
2017/11/17 Javascript
axios发送post请求springMVC接收不到参数的解决方法
2018/03/05 Javascript
jQuery实现遍历XML节点和属性的方法示例
2018/04/29 jQuery
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
Node.js net模块功能及事件监听用法分析
2019/01/05 Javascript
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python实现探测socket和web服务示例
2014/03/28 Python
Python实现网站文件的全备份和差异备份
2014/11/30 Python
pycharm debug功能实现跳到循环末尾的方法
2018/11/29 Python
WxPython建立批量录入框窗口
2019/02/27 Python
用Python获取摄像头并实时控制人脸的实现示例
2019/07/11 Python
jupyter notebook 多行输出实例
2020/04/09 Python
如何使用Python进行PDF图片识别OCR
2021/01/22 Python
移动端html5 meta标签的神奇功效
2016/01/06 HTML / CSS
HTML5 表单验证失败的提示语问题
2017/07/13 HTML / CSS
英国最大的电子产品和家电零售企业:Currys PC World
2016/09/24 全球购物
MATCHESFASHION澳大利亚/亚太地区:英国时尚奢侈品电商
2020/01/14 全球购物
OLEDBConnection和SQLConnection有什么区别
2013/05/31 面试题
保洁主管岗位职责
2013/11/20 职场文书
信息技术课后反思
2014/04/27 职场文书
会计求职自荐信
2014/06/20 职场文书
综合管理员岗位职责
2015/02/11 职场文书
8g内存用python读取10文件_面试题-python 如何读取一个大于 10G 的txt文件?
2021/05/28 Python