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 相关文章推荐
在html页面上拖放移动标签
Jan 08 Javascript
JQuery中$之选择器用法介绍
Apr 05 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
May 30 Javascript
关于Javascript作用域链的八点总结
Dec 06 Javascript
jQuery中:nth-child选择器用法实例
Dec 31 Javascript
jquery中filter方法用法实例分析
Feb 06 Javascript
jquery+json实现分页效果
Mar 07 Javascript
利用bootstrapValidator验证UEditor
Sep 14 Javascript
vue-hook-form使用详解
Apr 07 Javascript
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
js登录滑动验证的实现(不滑动无法登陆)
Jan 03 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
Jun 20 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 escape URL编码
2008/12/10 PHP
劣质的PHP代码简化
2010/02/08 PHP
PHP读取ACCESS数据到MYSQL的代码
2011/05/11 PHP
destoon各类调用汇总
2014/06/20 PHP
PHP如何通过表单直接提交大文件详解
2019/01/08 PHP
PHP实现数据四舍五入的方法小结【4种方法】
2019/03/27 PHP
$.ajax json数据传递方法
2008/11/19 Javascript
javascript写的日历类(基于pj)
2010/12/28 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
2015/09/14 Javascript
微信QQ的二维码登录原理js代码解析
2016/06/23 Javascript
关于javascript事件响应的基础语法总结(必看篇)
2016/12/26 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
json2.js 入门教程之使用方法与实例分析
2017/09/14 Javascript
jquery中done和then的区别(详解)
2017/12/19 jQuery
JS无限级导航菜单实现方法
2019/01/05 Javascript
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
javascript实现移动端红包雨页面
2020/06/23 Javascript
jQuery冲突问题解决方法
2021/01/19 jQuery
[01:21]DOTA2新纪元-7.0新版本即将开启!
2016/12/11 DOTA
探究Python多进程编程下线程之间变量的共享问题
2015/05/05 Python
Python中DJANGO简单测试实例
2015/05/11 Python
使用Flask集成bootstrap的方法
2018/07/24 Python
python如何求解两数的最大公约数
2018/09/27 Python
Python修改文件往指定行插入内容的实例
2019/01/30 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
印度尼西亚最好的小工具在线商店:Erafone.com
2019/03/26 全球购物
公安交警个人对照检查材料思想汇报
2014/10/01 职场文书
个人查摆问题及整改措施
2014/10/16 职场文书
2015大学生实训报告
2014/11/05 职场文书
2014年资料员工作总结
2014/11/18 职场文书
《我是什么》教学反思
2016/02/16 职场文书
2016年清明节期间群众祭祀活动工作总结
2016/04/01 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
2019最新版劳务派遣管理制度
2019/08/16 职场文书
Python集合的基础操作
2021/11/01 Python
Python requests用法和django后台处理详解
2022/03/19 Python