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 学习之二 属性 文本与值(text,val)
Nov 25 Javascript
JavaScript跨域方法汇总
Oct 16 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
Oct 30 Javascript
JavaScript中操作字符串小结
May 04 Javascript
详解JavaScript基本类型和引用类型
Dec 09 Javascript
基于jQuery仿淘宝产品图片放大镜特效
Oct 19 Javascript
浅析JavaScript回调函数应用
May 22 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
Aug 25 Javascript
JS中对数组元素进行增删改移的方法总结
Dec 15 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
Jan 30 Javascript
JavaScript:ES2019 的新特性(译)
Aug 08 Javascript
javascript之Object.assign()的痛点分析
Mar 03 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修改时间格式的代码
2011/05/29 PHP
php学习之 数组声明
2011/06/09 PHP
深入掌握include_once与require_once的区别
2013/06/17 PHP
如何修改和添加Apache的默认站点目录
2013/07/05 PHP
PHP 等比例缩放图片详解及实例代码
2016/09/18 PHP
PHP对XML内容进行修改和删除实例代码
2016/10/26 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
JS解决url传值出现中文乱码的另类办法
2013/04/08 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
2013/05/07 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
2016/03/13 Javascript
原生JS实现图片左右轮播
2016/12/30 Javascript
vue-router实现tab标签页(单页面)详解
2017/10/17 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
2017/12/12 Javascript
vue实现通讯录功能
2018/07/14 Javascript
微信小程序前端promise封装代码实例
2019/08/24 Javascript
vue实现select下拉显示隐藏功能
2019/09/30 Javascript
python使用7z解压软件备份文件脚本分享
2014/02/21 Python
python从入门到精通(DAY 1)
2015/12/20 Python
详解Python中where()函数的用法
2018/03/27 Python
Python使用Opencv实现图像特征检测与匹配的方法
2019/10/30 Python
完美解决pycharm导入自己写的py文件爆红问题
2020/02/12 Python
python文件编写好后如何实践
2020/07/07 Python
Pytest如何使用skip跳过执行测试
2020/08/13 Python
护士实习自我鉴定
2013/10/22 职场文书
语文教学随笔感言
2014/02/18 职场文书
新教师培训方案
2014/06/08 职场文书
八荣八耻演讲稿
2014/09/15 职场文书
工人先锋号事迹材料
2014/12/24 职场文书
学校禁毒宣传活动总结
2015/05/08 职场文书
2015年基层党支部工作总结
2015/05/21 职场文书
三严三实·严以修身心得体会
2016/01/15 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书
python模拟浏览器 使用selenium进入好友QQ空间并留言
2022/04/12 Python
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技