javascript中length属性的探索

例子1:


代码如下:

var obj={0:'a',1:'b'}
alert(obj.length); //undefined
var arr=['a','b']
alert(arr.length); // 2

从上面的例子看,类数组对象中的length属性并不和它储存的数据数量直接挂钩,无论是索引属性(0,1)还是length属性都作为对象的普通属性存在,它们之间并没有任何关系,js引擎并不会根据储存数据的数量来自动计算类数组对象的长度。
但是类数组对象的length所确实和存储的数据量没有任何关系么?例子2说明并非如此:
例子2:


代码如下:

function myarr(){}
var m=new myarr();
Array.prototype.push.apply(m,['cson','lai','xiaoc']);
alert(m.length);//IE8以下:undefined 其他浏览器:3
alert(m[2]);//IE8以下:undefined 其他浏览器:‘xiaoc'

从例子2可以看到,除了IE8以下版本,在通过强制使用数组方法为类数组对象添加元素时,对象的length属性也会被计算。而IE8以下版本貌似不支持强制使用数组方法为类数组对象添加元素。
例子3:
该例子在例子2的myarr构造函数中添加一个初始化操作,在类数组对象初始化时添加一个元素,怪异的事情发生了:


代码如下:

function myarr(){this[0]='cc';}
var m=new myarr();
Array.prototype.push.apply(m,['cson','lai','xiaoc']);
alert(m.length);//ie8以下:undefined 其他:3
alert(m[2]);//ie8以下:undefined 其他:xiaoc

ie8以下版本浏览器继续貌似不支持强制使用数组方法,这个再下一个例子中会作讨论。而对于其他浏览器,length属性输出为3,而索引为2的元素是'xiaoc‘,显然js引擎完全忽略了类数组对象原来所存在的索引为0的元素‘cc'!马上我们再看下一个例子,这个例子在例子3的基础上多加一个对length属性的初始化:


代码如下:

function myarr(){this[0]='cc'; this.length=1;}//多加一个length的初始化
var m=new myarr();
Array.prototype.push.apply(m,['cson','lai','xiaoc']);
alert(m.length);//输出4
alert(m[2]);//输出'lai‘

奇怪的事再次发生,这次所有浏览器(包括ie6 7)都正确输出4,索引为2的元素正确输出为'lai‘,可见IE 6 7添加了length属性的初始化之后,可以正常使用数组方法了。
现在再试试把length属性初始化为不合法类型:
例子4:


代码如下:

function myarr(){this[0]='cc'; this.length="bo";}//length设置为不能转换为number的不合法类型
var m=new myarr();
Array.prototype.push.apply(m,['cson','lai','xiaoc']);
alert(m.length);//输出 3
alert(m[2]);// 输出'xiaoc‘

代码如下:

function myarr(){this[0]='cc'; this.length="1";}//length设置为能转换为数字的不合法类型
Array.prototype.push.apply(m,['cson','lai','xiaoc']);
alert(m.length);//输出4
alert(m[2]);//输出'lai‘

从上面的所有例子来看,我们可以作出一个推断,在使用数组方法时(这里以push为例),大概是这样的流程:
IE6 7:
可见IE6 7并非不支强制持使用数组方法添加元素,但是会先判断length属性是否存在,如果不存在,则返回,不做任何操作。如果length属性为不合法值,则尝试转换为number类型,如果转换失败则length设置为0,这就可以解析例子2,3里输出的undefined和例子4的正确输出。

其他浏览器:
其他浏览器会根据length属性作不同操作,如果length属性不存在,则设置length为0,如果length属性为不合法值,则尝试转换为number类型,如果转换失败则也length设置为0。

正因为length属性对于数组方法有如此决定性的作用,因此js引擎禁止了对length属性写入不合法值:


代码如下:

var arr=['1','2','3'];
arr.length='undefined';//报错invalid array length

从上面的例子中,我们可以得出一个结论:当我们使用类数组对象时,为了避各种length计算不正确引起的怪异问题,我们应该在初始化类数组对象时初始化length属性的值,如果在初始化时添加了元素但却没有设置length属性的值,在使用数组方法时,IE6 7会忽略所有操作,其他浏览器则会忽略初始化时添加的元素。

另外再介绍length属性带来的另一个问题:
请看例子5:


代码如下:

function myarr(){}
myarr.prototype=new Array();
var m=new myarr();
m.push('cson','lai','xiaoc');
alert(m.length);//IE6 7:0 其他:3
alert(m[2]);//所有浏览器:'xiaoc‘

当使用原型继承数组时,IE 6 7下length会始终为0,无论你有多少个元素,其他浏览器则正常。
即使强制设置length属性,IE6 7 下死活为0:


代码如下:

function myarr(){}
myarr.prototype=new Array();
var m=new myarr();
m.length=10;
alert(m.length);//IE6 7:0 其他:10

因此得出结论:IE6 7下对象原型继承数组时length属性会一直为0,因此如果类数组对象需要使用数组的方法,不要去继承数组,而应该使用Array.prototype.xxx.apply(obj,[]);的方法,并且记得正确初始化length属性的值。

(0)

相关推荐

  • 浅析javascript中function 的 length 属性

    [1,2,3].length  可以得到 3, "123".length  也可以得到 3,这个略懂js的都知道. 但是  eval.length,RegExp.length,"".toString.length,1..toString.length  会得到什么呢? 分别得到 1,2,0,1,这些数字代表什么呢? 这个是群里很多新人朋友一直问的一个问题,其实函数的 length 得到的是形参个数.我们来简单看个例子: 复制代码 代码如下: function tes

  • JavaScript Length 属性的总结

    关于javascript length属性的总结请看以下内容详解. 一.StringObject中的length length属性是返回字符串的字符数目. 例如: // 普通字符串 var str = "abcdef"; console.log(str.length); // 6 // 数组 var str1 = new Array(1,2,3,4); console.log(str1.length); // 4 // 数组与字符串 var str2 = str1 + str; //

  • JavaScript function 的 length 属性使用介绍

    [1,2,3]. length 可以得到 3 , "123" . length 也可以得到 3 ,这个略懂js的都知道. 但是 eval. length ,RegExp. length ,"".toString. length ,1..toString. length 会得到什么呢? 分别得到 1 , 2 , 0 , 1 ,这些数字代表什么呢? 其实函数的 length 得到的是形参个数. 我们来简单看个例子: function test(a,b,c) {} tes

  • js利用数组length属性清空和截短数组的小例子

    1.使用length清空数组: 复制代码 代码如下: <script>    var arr1 = ['aaa','bbbb','http://www.jb51.net'];    alert(arr1);    arr1.length = 0;    alert(arr1); //数组为空</script> 2.使用length截短数组: 复制代码 代码如下: <script>    var arr1 = ['aaa','bbbb','c','d','e'];   

  • Javascript中函数名.length属性用法分析(对比arguments.length)

    本文实例分析了Javascript中函数名.length属性用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&g

  • Javascript学习笔记之数组的遍历和 length 属性

    尽管数组在 Javascript 中是对象,但是不建议使用 for in 循环来遍历数组,实际上,有很多理由来阻止我们对数组使用 for in 循环. 因为 for in 循环将会枚举原型链上的所有属性,并且唯一阻止的方法是使用 hasOwnProperty 来判断,这将比普通的 for 循环要慢不少. 遍历 为了达到最佳性能来遍历一个数组,最好的方式就是使用经典的 for 循环. 复制代码 代码如下: var list = [1, 2, 3, 4, 5, ...... 100000000];

  • JavaScript中length属性的使用方法

    此属性返回字符串中的字符数. 语法 string.length 下面是参数的详细信息: A string 返回值: 返回字符串中的字符数. 例子: <html> <head> <title>JavaScript String length Property</title> </head> <body> <script type="text/javascript"> var str = new Strin

  • TextArea设置MaxLength属性最大输入值的js代码

    标准的DHTML文档中TEXTAREA的MAXLENGTH属性默认情况下不起作用,只有当事件发生时才起作用 如下:http://spiderscript.net/site/spiderscript/examples/ex_textarea_maxlength.asp 但TEXT中有且起作用<input type="text" maxlength="20">, 那么在TEXTAREA中怎么实现输入内容不能超过多少个字符呢. 方法1.如果只需要截取多少个字符

  • javascript中length属性的探索

    例子1: 复制代码 代码如下: var obj={0:'a',1:'b'} alert(obj.length); //undefined var arr=['a','b'] alert(arr.length); // 2 从上面的例子看,类数组对象中的length属性并不和它储存的数据数量直接挂钩,无论是索引属性(0,1)还是length属性都作为对象的普通属性存在,它们之间并没有任何关系,js引擎并不会根据储存数据的数量来自动计算类数组对象的长度. 但是类数组对象的length所确实和存储的数

  • 详解Javascript中prototype属性(推荐)

    在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不是基于'类的',而是通过构造函数(constructor)和原型链(prototype chains)实现的.但是在ES6中提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板.通过class关键字,可以定义类.基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能

  • 浅谈JavaScript中的属性:如何遍历属性

    在JavaScript中,遍历一个对象的属性往往没有在其他语言中遍历一个哈希(有些语言称为字典)的键那么简单.这主要有两个方面的原因:一个是,JavaScript中的对象通常都处在某个原型链中,它会从一个或多个的上层原型上继承一些属性.第二个原因是,JavaScript中的属性不光有值,它还有一些除了值以外的其他特性,其中一个影响属性遍历的特性就是[[Enumerable]],如果该值为true,则称这个属性是可枚举的,否则反之. 知道了这些,我们就可以把属性的遍历分为四种情况. 注:示例代码中

  • Javascript中prototype属性实现给内置对象添加新的方法

    本文实例讲述了Javascript中prototype属性实现给内置对象添加新的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>prototype

  • 详解JavaScript中的属性和特性

    JavaScript中属性和特性是完全不同的两个概念,这里我将根据自己所学,来深入理解JavaScript中的属性和特性. 主要内容如下: 理解JavaScript中对象的本质.对象与类的关系.对象与引用类型的关系 对象属性如何进行分类 属性中特性的理解 第一部分:理解JavaScript中对象的本质.对象与类的关系.对象与引用类型的关系 对象的本质:ECMA-262把对象定义为:无序属性的集合,其属性可以包含基本值.对象或者函数.即对象是一组没有特定顺序的值,对象的每个属性或方法都有一个名字,

  • Javascript中Event属性搜集整理

    altKey, button, cancelBubble, clientX, clientY, ctrlKey, fromElement, keyCode, offsetX, offsetY, propertyName, returnValue, screenX, screenY, shiftKey, srcElement, srcFilter, toElement, type, x, y 1.altKey 描述: 检查alt键的状态. 语法: event.altKey 可能的值: 当alt键按

  • 详解 javascript中offsetleft属性的用法

    此属性可以返回当前元素距离某个父辈元素左边缘的距离,当然这个父辈元素也是有讲究的. (1).如果父辈元素中有定位的元素,那么就返回距离当前元素最近的定位元素边缘的距离. (2).如果父辈元素中没有定位元素,那么就返回相对于body左边缘距离. 语法结构: obj.offsetleft 特别说明:此属性是只读的,不能够赋值. 代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8">

  • JavaScript中对象属性的添加和删除示例

    复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> /* * 用.为对象添加属性 用关键字delete删除属性 用[]添加属性 和.的不同 r.name==r["name

  • javascript中的altKey 和 Event属性大全

    下面给大家介绍javascript中altkey属性,具体介绍如下所示: altKey属性的定义和用法: 此属性返回一个布尔值.指示在指定的事件发生时,Alt键是否被按下并保持住了. 语法结构: event.altKey=true|false|1|0 浏览器支持: 1.IE浏览器支持此属性. 2.火狐浏览器支持此属性. 3.Opera浏览器支持此属性. 4.谷歌浏览器支持此属性. 实例代码: <!DOCTYPE html> <html> <head> <meta

随机推荐