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工具 Cookie 封装
Aug 21 Javascript
jQuery中unbind()方法用法实例
Jan 19 Javascript
实例详解jQuery结合GridView控件的使用方法
Jan 04 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
Jan 12 Javascript
AngularJS基础 ng-list 指令详解及示例代码
Aug 02 Javascript
AngularJS 作用域详解及示例代码
Aug 17 Javascript
JS中with的替代方法与String中的正则方法详解
Dec 23 Javascript
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
Aug 17 Javascript
vue中promise的使用及异步请求数据的方法
Nov 08 Javascript
ES6 更易于继承的类语法的使用
Feb 11 Javascript
npm qs模块使用详解
Feb 07 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连接Access数据库错误及解决方法
2013/06/20 PHP
PHP使用微信开发模式实现搜索已发送图文及匹配关键字回复的方法
2017/09/13 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
js propertychange和oninput事件
2014/09/28 Javascript
JavaScript设计模式之外观模式实例
2014/10/10 Javascript
Css3制作变形与动画效果
2015/07/24 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
2015/09/06 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
2016/01/27 Javascript
JS iFrame加载慢怎么解决
2016/05/13 Javascript
Bootstrap3学习笔记(二)之排版
2016/05/20 Javascript
Bootstrap安装环境配置教程分享
2016/05/27 Javascript
JS字符串false转boolean的方法(推荐)
2017/03/08 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
2018/06/07 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
2019/04/10 Javascript
重学JS之显示强制类型转换详解
2019/06/30 Javascript
[42:32]Secret vs Optic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Fiddler如何抓取手机APP数据包
2016/01/22 Python
Python之批量创建文件的实例讲解
2018/05/10 Python
python版本单链表实现代码
2018/09/28 Python
python3使用flask编写注册post接口的方法
2018/12/28 Python
python 阶乘累加和的实例
2019/02/01 Python
详解用python写网络爬虫-爬取新浪微博评论
2019/05/10 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
用python求一重积分和二重积分的例子
2019/12/06 Python
python实现ftp文件传输功能
2020/03/20 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
详解python中GPU版本的opencv常用方法介绍
2020/07/24 Python
Python 使用双重循环打印图形菱形操作
2020/08/09 Python
python 爬取免费简历模板网站的示例
2020/09/27 Python
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
2017/10/26 HTML / CSS
毕业生找工作的求职信范文
2013/12/24 职场文书
工程承包协议书范本
2014/09/29 职场文书
社区国庆节活动总结
2015/03/23 职场文书
清明节文明祭祀倡议书
2015/04/28 职场文书
幼儿园班级管理心得体会
2016/01/07 职场文书