浅析JavaScript中的array数组类型系统_javascript技巧

前面的话

数组是一组按序排列的值,相对地,对象的属性名称是无序的。从本质上讲,数组使用数字作为查找键,而对象拥有用户自定义的属性名。javascript没有真正的关联数组,但对象可用于实现关联的功能

Array()仅仅是一种特殊类型的Object(),也就是说,Array()实例基本上是拥有一些额外功能的Object()实例。数组可以保存任何类型的值,这些值可以随时更新或删除,且数组的大小是动态调整的

除了对象之外,数组Array类型可能是javascript中最常用的类型了。而且,javascript中的数组与其他多数语言中的数组有着相当大的区别。本文将介绍javascript中的数组Array类型

创建数组

  有两种创建数组的方法:使用字面量语法和使用Array()构造函数

【字面量】

  使用数组字面量是创建数组最简单的方法,在方括号中将数组元素用逗号隔开即可

var empty = []; //没有元素的数组
var primes = [2,3,5,7,11]; //有5个数值的数组

  虽然javascript数组与其他语言中的数组都是数据的有序列表,但与其他语言不同的是,javascript数组的每一项可以保存任何类型的数据

var misc = [1.1,true, "a"]; //3个不同类型的元素

  数组字面量中的值不一定要是常量,它们可以是任意的表达式

var base = 1024;
var table = [base,base+1,base+2,base+3];

  它可以包含对象字面量或其他数组字面量

var b = [ [1,{x:1,y:2}],[2,{x:3,y:4}] ];

  如果数组的元素还是数组,就形成了多维数组

var a = [[1, 2], [3, 4]];

  [注意]使用数字字面量表示法时,不会调用Array构造函数

【构造函数】

  有三种方式调用构造函数

  【1】没有参数,创建一个空数组

//该方法创建一个没有任何元素的空数组,等同于数组直接量[]
var a = new Array(); 

  【2】有一个数值参数,该参数用于指定数组的长度

var a = new Array(10);
console.log(a);//[]
console.log(a[0],a.length);//undefined 10

  [注意]若存在一个其他类型的参数,则会创建包含那个值的只有一项的数组

var a = new Array('10');
console.log(a);//['10']
console.log(a[0],a.length);//10 1

  【3】有多个参数时,参数表示为数组的具体元素

var a = new Array(1,2,3);
console.log(a);//[1,2,3]
console.log(a[0],a[1],a[2]);//1 2 3

  使用Array()构造函数时,可以省略new操作符

var a1 = Array();
var a2 = Array(10);
var a3 = Array(1,2,3);
console.log(a1,a2,a3);//[] [] [1,2,3] 

数组本质

  数组是按次序排列的一组值,本质上,数组是一种特殊的对象

typeof [1, 2, 3] // "object"

  数组的特殊性体现在,它的键名是按次序排列的一组整数(0,1,2…)。由于数组成员的键名是固定的,因此数组不用为每个元素指定键名,而对象的每个成员都必须指定键名

var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr));// ["0", "1", "2"]
var obj = {
name1: 'a',
name2: 'b',
name3: 'c'
};

  数组是对象的特殊形式,使用方括号访问数组元素就像用方括号访问对象的属性一样

  javascript语言规定,对象的键名一律为字符串,所以,数组的键名其实也是字符串。之所以可以用数值读取,是因为非字符串的键名会被转为字符串,然后将其作为属性名来使用

o={}; //创建一个普通的对象
o[1]="one"; //用一个整数来索引它
//数值键名被自动转成字符串
var arr = ['a', 'b', 'c'];
arr['0'] // 'a'
arr[0] // 'a'

  但是,一定要区分数组索引和对象的属性名:所有的索引都是属性名,但只有在0~232-2(4294967294)之间的整数属性名才是索引

var a = [];
//索引
a['1000'] = 'abc';
a[1000] // 'abc'
//索引
a[1.00] = 6;
a[1] // 6

  [注意]单独的数值不能作为标识符(identifier)。所以,数组成员只能用方括号法表示

var arr = [1, 2, 3];
arr[0];//1
arr.0;//SyntaxError

 可以使用负数或非整数来索引数组。但由于其不在0~2的32次方-2的范围内,所以其只是数组的属性名,而不是数组的索引,明显的特征是不改变数组的长度

var a = [1,2,3];
//属性名
a[-1.23]=true;
console.log(a.length);//3
//索引
a[10] = 5;
console.log(a.length);//11
//属性名
a['abc']='testing';
console.log(a.length);//11

稀疏数组

  稀疏数组就是包含从0开始的不连续索引的数组

  【1】制造稀疏数组最直接的方法就是使用delete操作符

var a = [1,2,3,4,5];
delete a[1];
console.log(a[1]);//undefined
console.log(1 in a);//false

  【2】数组的逗号之间可以省略元素值,通过省略元素值也可以制造稀疏数组

var a =[1,,3,4,5];
console.log(a[1]);//undefined
console.log(1 in a);//false

  [注意]省略的元素值和值为undefined的元素值是有区别的

var a =[1,,3,4,5];
console.log(a[1]);//undefined
console.log(1 in a);//false
var a =[1,undefined,3,4,5];
console.log(a[1]);//undefined
console.log(1 in a);//true

  如果在数组的末尾使用逗号时,浏览器之间是有差别的。标准浏览器会忽略该逗号,而IE8-浏览器则会在末尾添加undefined值

//标准浏览器输出[1,2],而IE8-浏览器输出[1,2,undefined]
var a = [1,2,];
console.log(a);
//标准浏览器输出2,而IE8-浏览器输出3
var a = [,,];
console.log(a.length);

  足够稀疏的数组通常在实现上比稠密的数组更慢,内存利用率更高,在这样的数组中查找元素的时间与常规对象属性的查找时间一样长

数组长度

  每个数组有一个length属性,就是这个属性使其区别于常规的JavaScript对象。针对稠密(也就是非稀疏)数组,length属性值代表数组中元素的个数,其值比数组中最大的索引大1

[].length //=>0:数组没有元素
['a','b','c'].length //=>3:最大的索引为2,length为3

  当数组是稀疏数组时,length属性值大于元素的个数,同样地,其值比数组中最大的索引大1

[,,,].length; //3
(Array(10)).length;//10
var a = [1,2,3];
console.log(a.length);//3
delete a[1];
console.log(a.length);//3

 数组的特殊性主要体现在数组长度是可以动态调整的:

  【1】如果为一个数组元素赋值,索引i大于等于现有数组的长度时,length属性的值将设置为i+1

var arr = ['a', 'b'];
arr.length // 2
arr[2] = 'c';
arr.length // 3
arr[9] = 'd';
arr.length // 10
arr[1000] = 'e';
arr.length // 1001

  【2】设置length属性为小于当前长度的非负整数n时,当前数组索引值大于等于n的元素将从中删除

a=[1,2,3,4,5]; //从5个元素的数组开始
a.length = 3; //现在a为[1,2,3]
a.length = 0; //删除所有的元素。a为[]
a.length = 5; //长度为5,但是没有元素,就像new 

Array(5)

  [注意]将数组清空的一个有效方法,就是将length属性设为0

var arr = [ 'a', 'b', 'c' ];
arr.length = 0;
arr // []

  【3】将数组的length属性值设置为大于其当前的长度。实际上这不会向数组中添加新的元素,它只是在数组尾部创建一个空的区域

var a = ['a'];
a.length = 3;
console.log(a[1]);//undefined
console.log(1 in a);//false

  如果人为设置length为不合法的值(即0——232-2范围以外的值),javascript会报错

// 设置负值
[].length = -1// RangeError: Invalid array length
// 数组元素个数大于等于2的32次方
[].length = Math.pow(2,32)// RangeError: Invalid array length
// 设置字符串
[].length = 'abc'// RangeError: Invalid array length

  由于数组本质上是对象,所以可以为数组添加属性,但是这不影响length属性的值

var a = [];
a['p'] = 'abc';
console.log(a.length);// 0
a[2.1] = 'abc';
console.log(a.length);// 0

数组遍历

  使用for循环遍历数组元素最常见的方法

var a = [1, 2, 3];
for(var i = 0; i < a.length; i++) {
console.log(a[i]);
}

  当然,也可以使用while循环

var a = [1, 2, 3];
var i = 0;
while (i < a.length) {
console.log(a[i]);
i++;
}
var l = a.length;
while (l--) {
console.log(a[l]);
}

  但如果数组是稀疏数组时,使用for循环,就需要添加一些条件

//跳过不存在的元素
var a = [1,,,2];
for(var i = 0; i < a.length; i++){
if(!(i in a)) continue;
console.log(a[i]);
}

  还可以使用for/in循环处理稀疏数组。循环每次将一个可枚举的属性名(包括数组索引)赋值给循环变量。不存在的索引将不会遍历到

var a = [1,,,2];
for(var i in a){
console.log(a[i]);
} 

  由于for/in循环能够枚举继承的属性名,如添加到Array.prototype中的方法。由于这个原因,在数组上不应该使用for/in循环,除非使用额外的检测方法来过滤不想要的属性

var a = [1,,,2];
a.b = 'b';
for(var i in a){
console.log(a[i]);//1 2 'b'
}
//跳过不是非负整数的i
var a = [1,,,2];
a.b = 'b';
for(var i in a){
if(String(Math.floor(Math.abs(Number(i)))) !== i) continue;
console.log(a[i]);//1 2
}

  javascript规范允许for/in循环以不同的顺序遍历对象的属性。通常数组元素的遍历实现是升序的,但不能保证一定是这样的。特别地,如果数组同时拥有对象属性和数组元素,返回的属性名很可能是按照创建的顺序而非数值的大小顺序。如果算法依赖于遍历的顺序,那么最好不要使用for/in而用常规的for循环

类数组

  拥有length属性和对应非负整数属性的对象叫做类数组(array-like object)

//类数组演示
var a = {};
var i = 0;
while(i < 10){
a[i] = i*i;
i++;
}
a.length = i;
var total = 0;
for(var j = 0; j < a.length; j++){
total += a[j];
}

  有三个常见的类数组对象:

  【1】arguments对象

// arguments对象
function args() { return arguments }
var arrayLike = args('a', 'b');
arrayLike[0] // 'a'
arrayLike.length // 2
arrayLike instanceof Array // false

  【2】DOM方法(如document.getElementsByTagName()方法)返回的对象

// DOM元素
var elts = document.getElementsByTagName('h3');
elts.length // 3
elts instanceof Array // false

  【3】字符串

// 字符串
'abc'[1] // 'b'
'abc'.length // 3
'abc' instanceof Array // false

  [注意]字符串是不可变值,故当把它们作为数组看待时,它们是只读的。如push()、sort()、reverse()、splice()等数组方法会修改数组,它们在字符串上是无效的,且会报错

var str = 'abc';
Array.prototype.forEach.call(str, function(chr) {
console.log(chr);//a b c
});
Array.prototype.splice.call(str,1);
console.log(str);//TypeError: Cannot delete property '2' of [object String]

  数组的slice方法将类数组对象变成真正的数组

var arr = Array.prototype.slice.call(arrayLike);

  javascript数组方法是特意定义为通用的,因此它们不仅应用在真正的数组而且在类数组对象上都能正确工作。在ECMAScript5中,所有的数组方法都是通用的。在ECMAScript3中,除了toString()和toLocaleString()以外的所有方法也是通用的

var a = {'0':'a','1':'b','2':'c',length:3};
Array.prototype.join.call(a,'+');//'a+b+c'
Array.prototype.slice.call(a,0);//['a','b','c']
Array.prototype.map.call(a,function(x){return x.toUpperCase();});//['A','B','C']

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js
array数组类型
javascript array、javascript array map、javascript in array、javascript new array、javascript array pop,以便于您获取更多的相关知识。

时间: 2024-11-01 17:08:10

浅析JavaScript中的array数组类型系统_javascript技巧的相关文章

浅析JavaScript中浏览器的兼容问题_javascript技巧

浏览器兼容性问题是在实际开发中容易忽略而又最重要的一部分.我们在讲老版本浏览器兼容问题之前,首先要了解什么是能力检测,它是来检测浏览器有没有这种能力,即判断当前浏览器是否支持要调用的属性或者方法.下面做了一些简短的介绍. 1.innerText 和 innerContent 1)innerText 和 innerContent 的作用相同 2)innerText IE8之前的浏览器支持 3)innerContent 老版本的Firefox支持 4)新版本的浏览器两种方式都支持 1 // 老版本浏

深入浅析JavaScript中的作用域和上下文_javascript技巧

javascript中的作用域(scope)和上下文(context)是这门语言的独到之处,这部分归功于他们带来的灵活性.每个函数有不同的变量上下文和作用域.这些概念是javascript中一些强大的设计模式的后盾.然而这也给开发人员带来很大困惑.下面全面揭示了javascript中的上下文和作用域的不同,以及各种设计模式如何使用他们. 上下文(Context)和作用域(Scope) 首先需要知道的是,上下文和作用域是两个完全不同的概念.多年来,我发现很多开发者会混淆这两个概念(包括我自己),

JavaScript中的Array对象使用说明_javascript技巧

说它是一个动态数组,是因为动态的添加数据: 复制代码 代码如下: var myarr = new Array(); myarr[0] = 1; myarr[1] = 2; myarr[2] = 3; myarr[3] = 23; myarr[4] = 11; 使用for进行遍历: 说它是一个字典对象,是因为他可以以键值的形式进行访问: 复制代码 代码如下: var dictionary = new Array(); dictionary["谢龙宝"] = "xielongba

深入浅析JavaScript中的arguments对象(强力推荐)_javascript技巧

1.在JavaScript中,arguments对象是比较特别的一个对象,实际上是当前函数的一个内置属性.arguments非常类似Array,但实际上又不是一个Array实例.可以通过如下代码得以证实(当然,实际上,在函数funcArg中,调用arguments是不必要写成funcArg.arguments,直接写arguments即可). Array.prototype.testArg = "test"; function funcArg() { alert(funcArg.arg

浅析JavaScript中的类型和对象_javascript技巧

JavaScript是基于对象的,任何元素都可以看成对象.然而,类型和对象是不同的.本文中,我们除了讨论类型和对象的一些特点之外,更重要的是研究如何写出好的并且利于重用的类型.毕竟,JavaScript这种流行的脚本语言如果能够进行良好的封装,并形成一个庞大的类型库,对于重用是非常有意义的. 网上对于prototype的文章很多,一直没明白核心的思想.最后写了很多例子代码后才明白:prototype只能用在类型上. 以下是一些关于类型和对象的例子,大家看完例子后可能更容易理解类型和对象之间的联系

深入浅析JavaScript中with语句的理解_javascript技巧

JavaScript 有个 with 关键字, with 语句的原本用意是为逐级的对象访问提供命名空间式的速写方式. 也就是在指定的代码区域, 直接通过节点名称调用对象. with语句的作用是暂时改变作用域链.减少的重复输入. 其语法结构为: with(object){ //statements } 举一个实际例子吧: with(document.forms[]){ name.value = "lee king"; address.value = "Peking";

浅析JavaScript中作用域和作用域链_javascript技巧

学习js,肯定要学习作用域,js作用域和其他的主流语言的作用域还存在很大的区别. 一.js没有块级作用域. js没有块级作用域,就像这样: if(){ var a = 100: console.log(a) //输出100 } console.log(a) //输出100 js中像if,for,switch之类的语句,他们包含的代码块里面的变量,在代码块外面也能被读取,所以说,js没有块级作用域. 二.js的全局变量 js中规定,全局变量都可以看作是window的属性,而且全局变量能够被所有的代

浅析JavaScript中的隐式类型转换_javascript技巧

如果把通过函数或方法调用,明确的将某种类型转换成另一种类型称为显示转换 ,相反则称为隐式类型转换 .google和维基百科中没有找到"显示类型转换","隐式类型转换"的字眼.暂且这么称呼. 一. 运算中存在的隐式类型转换 1, "+"运算符 复制代码 代码如下: var a = 11, b = '22'; var c = a + b; 这里引擎将会先把a变成字符串"11"再与b进行连接,变成了"1122".

浅析JavaScript中的同名标识符优先级_javascript技巧

一,局部变量先使用后声明,不影响外部同名变量 复制代码 代码如下: var x = 1; // --> 外部变量x function fn(){     alert(x);  // --> undefined 局部变量x先使用     var x = 2; // 后声明且赋值 } fn(); alert(x); // --> 1<BR> 第一点,函数fn内第一句输出x,x是在第二句才定义的.这在JS中是允许的,这里的允许是指不会出现语法错误程序可以运行. 但在其它语言如C,J