JavaScript数组的一些奇葩行为


Posted in Javascript onJanuary 25, 2016

在程序语言中数组的重要性不言而喻,JavaScript中数组也是最常使用的对象之一,数组是值的有序集合,由于弱类型的原因,JavaScript中数组十分灵活、强大,不像是Java等强类型高级语言数组只能存放同一类型或其子类型元素,JavaScript在同一个数组中可以存放多种类型的元素,而且是长度也是可以动态调整的,可以随着数据增加或减少自动对数组长度做更改。

今天,复习了一下JavaScript的数组,然后,把他的一些奇葩行为总结了一下,在这里和大家share一下,如果有不对的地方,欢迎指出!

奇葩1:Array()构造器函数可以不使用new关键字进行调用:

Array()构造器使用传递给他的参数作为数组的元素,从而创建数组,一般的,我们是如下调用的:

var a = new Array(1, 2, "bom!");
a.length; //3
console.log(a); //[1, 2, "bom!"]

但是,省略掉new也是可以的,如下:

var a = Array(1, 2, "bom!");
a.length; //3
console.log(a); //[1, 2, "bom!"]

虽然,我不知道他的内部实现机制是什么,但是,猜想他的构造器函数可能是如下定义的:

function Array(args) {
//如果,this不是Array的实例的话,
//说明不是通过new调用的,则在这里再重新调用
if( !this instanceof Array) {
return new Array(args);
}//后面是正常调用时的实现代码
//...
}

奇葩2:当只传一个参数给构造函数时,行为莫测

如果只传一个参数,并且这个参数是一个整数,将会得到一个数组,并且length等于这个参数

var a = new Array(12);
console.log(a.length); //12
console.log(a); //[]

如果只传一个浮点数,就会报错:

var a = new Array(1.1); //Uncaught RangeError: Invalid array length(…)

传递一个字符串就会正常工作,并且该字符串作为数组的第一个元素:

var a = new Array("1.1");
console.log(a.length); //
console.log(a); //["1.1"]

但是为了避免二义性,我建议最好是是直接使用字面量的形式创建数组:

var a = []; //空数组
var a = [1, 1, "bom"]; //三个元素
var a = [12]; //一个元素,并且元素是12

奇葩3:数组的length属性可以被修改(可写)

如下,我们直接把本来是2的length改成了100,而且还修改成功了!!!

var a = [1, 2, 3, 4];
console.log(a.length); //4
a.length = 100; 
console.log(a.length); //100

虽然length等于100,但是,元素a[4]-a[99]是不存在的,并且如果你请求他们的值的话,例如,从0到a.length做一个循环中做的话,那么会得到undefined。

接下来再看:

var a = [1, 2, 3, 4];
a.length = 100;
console.log(a[10]); //undefined
console.log(99 in a); //false

与下面的例子有点相似:

var a = [1, 2, 3, 4];
a[99] = undefined;
console.log(a.length); //100

不同之处在于,这里的a[99]存在了,因为我们创建了它,即使他拥有的是undefined的值。但是从a[4]到a[98]的所有元素则是不存在的,如下:

var a = [1, 2, 3, 4];
a[99] = undefined;
console.log(99 in a); //true;
console.log(98 in a); //false
console.log(a.length); //100

以上所述给大家分享了JavaScript数组的一些奇葩行为,文章写的不好还请见谅,谢谢!

Javascript 相关文章推荐
jQuery 中使用JSON的实现代码
Dec 01 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
JavaScript拆分字符串时产生空字符的解决方案
Sep 26 Javascript
深入浅析Vue组件开发
Nov 25 Javascript
BootStrap表单宽度设置方法
Mar 10 Javascript
webpack配置的最佳实践分享
Apr 21 Javascript
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
浅谈Node.js爬虫之网页请求模块
Jan 11 Javascript
解决Webpack 热部署检测不到文件变化的问题
Feb 22 Javascript
详解vue中async-await的使用误区
Dec 05 Javascript
js实现一个页面多个倒计时的3种方法
Feb 25 Javascript
node.js如何操作MySQL数据库
Oct 29 Javascript
JavaScript文本框脚本编写的注意事项
Jan 25 #Javascript
详解js私有作用域中创建特权方法
Jan 25 #Javascript
超赞的jQuery图片滑块动画特效代码汇总
Jan 25 #Javascript
理解js对象继承的N种模式
Jan 25 #Javascript
解决js函数闭包内存泄露问题的办法
Jan 25 #Javascript
JavaScript数据类型学习笔记
Jan 25 #Javascript
分步解析JavaScript实现tab选项卡自动切换功能
Jan 25 #Javascript
You might like
说说PHP的autoLoad自动加载机制
2012/09/27 PHP
PHP模块memcached使用指南
2014/12/08 PHP
PHP遍历数组的三种方法及效率对比分析
2015/02/12 PHP
浅谈php的优缺点
2015/07/14 PHP
PHP简单实现断点续传下载的方法
2015/09/25 PHP
浅析PHP开发规范
2018/02/05 PHP
prototype 源码中文说明之 prototype.js
2006/09/22 Javascript
js实现运行代码需要刷新的解决方法
2007/08/18 Javascript
input禁止键盘及中文输入,但可以点击
2014/02/13 Javascript
js实现DOM走马灯特效的方法
2015/01/21 Javascript
JS如何生成一个不重复的ID的函数
2016/12/25 Javascript
javaScript之split与join的区别(详解)
2017/11/08 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
详解javascript脚本何时会被执行
2021/02/05 Javascript
[02:51]DOTA2 Supermajor小组分组对阵抽签仪式
2018/06/01 DOTA
Python解决走迷宫问题算法示例
2018/07/27 Python
关于阿里云oss获取sts凭证 app直传 python的实例
2019/08/20 Python
django重新生成数据库中的某张表方法
2019/08/28 Python
Django中间件拦截未登录url实例详解
2019/09/03 Python
使用python求解二次规划的问题
2020/02/29 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
英国最大的正宗复古足球衫制造商和零售商:TOFFS
2018/06/21 全球购物
Manduka官网:瑜伽垫、瑜伽毛巾和服装
2018/07/02 全球购物
HEMA法国:荷兰原创设计
2019/02/21 全球购物
廉价连衣裙和婚纱礼服在线销售:Tbdress
2019/02/28 全球购物
教师现实表现材料
2014/02/14 职场文书
三八妇女节活动主持词
2014/03/17 职场文书
乡镇消防工作实施方案
2014/03/27 职场文书
小学生评语大全
2014/04/18 职场文书
篝火晚会策划方案
2014/05/16 职场文书
综合实践活动报告
2015/02/05 职场文书
3.15消费者权益日活动总结
2015/02/09 职场文书
2015年档案室工作总结
2015/05/23 职场文书
工作服管理制度范本
2015/08/06 职场文书
酒桌上的祝酒词
2015/08/12 职场文书
卖车协议书范文
2016/03/23 职场文书