JavaScript 之 核心语法 [ 数组 ]

数组

描述

• 表示可以储存一个或多个数据值的有序集合
• 数组中储存的数据中可以称为元素
• 数组中可以储存任何类型的数据

语法

• 字面量方式 - var 数组名称 = [ 元素， 元素 ， ... ]
• 构造函数方式 - var 数组名称 = new Array( 元素, 元素, ... )
• 函数方式 - var 数组名称 = Array( 元素, 元素, ... )

length（长度）

• 表示数组的长度（数组中储存元素的个数）
• 当使用构造函数方式或函数方式来定义数组，数组中的元素只有一个，并且为number类型时，表示定义数组的长度
• 字面量方式不能定义数组的长度

定义数组

字面量方式

/* 字面量方式 */
var arr1 = [];// 定义数组 - 数组中没有任何元素，称为空数组
console.log( arr1 );// 显示 - []
var arr2 = [ 100, '啊哈哈', true ];
console.log( arr2 );// 显示 - [ 100, '啊哈哈', true ]
var arr9 = [10];// 不能定义数组的长度
console.log( arr9 );// 显示 - [ 10 ]

构建函数方式

/* 构造函数方式 */
var arr3 = new Array();
console.log( arr3 );// 显示 - []
var arr4 = new Array( 100, '呀吼吼吼', true );
console.log( arr4 );// 显示 - [ 100, '呀吼吼吼', true ]
var arr5 = new Array( 10 );// 定义数组的长度
console.log( arr5 );// 显示 - [ <10 empty items> ]

函数方式

/* 函数方式 */
var arr6 = Array();
console.log( arr6 );// 显示 - []
var arr7 = Array( 100, '我的苍天呐', true );
console.log( arr7 );// 显示 - [ 100, '我的苍天呐', true ]
var arr8 = Array( 10 );// 定义数组的长度
console.log( arr8 );// 显示 - [ <10 empty items> ]

数组的类型

• 可以分为索引数组和关联数组

索引数组

• 表示数组中储存元素的位置用数字值来表示
• 数字值（也可以叫索引值）是从 0 开始
• 可以根据索引值来添加数组中的元素
• JavaScript中定义数组的默认类型为索引数组

/* 索引数组 */
/* 定义一个空数组 */
var arr1 = [];
console.log( arr1 );// 显示 []
/* 为空数组中添加元素 */
arr1[0] = 100;// 根据索引值添加
arr1[1] = '啊哈哈';
arr1[2] = true;
console.log( arr1 );// 显示 [ 100, '啊哈哈', true ]

稀疏数组

• 是索引数组的另一种表现形式
• 稀疏数组的数组长度和数组中的有效内容不一致
• 稀疏数组的位置允许不连续，没有定义的位置默认为空（undefined）

/* 稀疏数组 */
var arr2 = [];
/* 为空数组中添加元素 */
arr2[0] = 100;// 允许不按照索引值的顺序进行添加
arr2[4] = 300;
arr2[8] = 500;
console.log( arr2 );// 显示 [ 100, <3 empty items>, 300, <3 empty items>, 500 ]
console.log( arr2.length );// 显示 9（有效数据只有三个）

关联数组

• 表示数组中储存元素的位置用字符串来表示
• 数组的长度（length）对关联数组没有效果

/* 关联数组 */
var arr3 = [];
/* 为空数组中添加元素 */
arr3['name'] = '啊哈哈';// 使用字符串方式添加元素
arr3['nian'] = 100;
arr3['gong'] = '深山';
console.log( arr3 );// 显示 [ name: '啊哈哈', nian: 100, gong: '深山' ]
console.log( arr3.length );// 显示 0（length无效）

数组的调用

• 表示提取数组中数据值进行显示
• 如果访问的元素位置未定义过 或 位置为空，提取的数据为 undefined ，语法不报错

索引数组

• 通过索引值来提取对应的元素

/* 索引数组 */
var arr1 = [ '啊哈哈', 100, true ];
/* 调用具体位置的元素 */
console.log( arr1[0] );// 显示对应数据内容  啊哈哈
/* 调用未定义位置的元素 */
console.log( arr1[4] );// 显示 undefined

稀疏数组

• 通过索引值来提取对应的元素

/* 稀疏数组 */
var arr2 = [];
arr2[0] = 100;
arr2[4] = 300;
arr2[8] = 500;
/* 调用具体位置的元素 */
console.log( arr2[0] );// 显示对应数据内容  100
/* 调用未定义位置的元素 */
console.log( arr2[5] );// 显示 undefined

关联数组

• 通过字符串来提取对应的元素

/* 关联数组 */
var arr3 = [];
arr3['name'] = '啊哈哈';
arr3['nian'] = 100;
arr3['gong'] = '深山';
/* 调用具体位置的元素 */
console.log( arr3['name'] );// 显示对应数据内容  啊哈哈
/* 调用未定义位置的元素 */
console.log( arr3['nm'] );// 显示 undefined

数组的修改

• 表示对数组中的数据值进行修改
• 通过数组的索引值找到对应元素的位置，在通过对指定数据进行重新赋值来完成数组修改

/* 索引数组 */
var arr1 = [];
arr1[0] = 100;
arr1[1] = 200;
console.log( arr1 );// 显示 [ 100, 200 ]
/* 对指定元素数据进行修改 */
arr1[0] = 400;
console.log( arr1 );// 显示 [ 400, 200 ]

/* 关联数组 */
var arr2 = [];
arr2['name'] = '啊哈哈';
arr2['nian'] = 100;
arr2['gong'] = '深山';
console.log( arr2 );// 显示 [ name: '啊哈哈', nian: 100, gong: '深山' ]
/* 对指定元素数据进行修改 */
arr2['name'] = '呀吼吼吼';
console.log( arr2 );// 显示 [ name: '呀吼吼吼', nian: 100, gong: '深山' ]

数组的删除

• 表示对数组中的数据值进行删除
• 使用delete运算符来删除数据值
• 但是只删除数据值，不删除数据值所占的位置空间
• 数组进行删除后会变成稀疏数组

var arr = [ 100, '哈哈哈', true ];
/* 使用delete运算符来对指定数据内容进行删除 */
delete arr [ 1 ];
/* 删除后会只删除数据内容，但不会删除数据所占的位置 */
console.log( arr );//显示结果：[ 100, <1 empty item>, true ]
console.log( arr.length );//显示数组中的数据个数  3

数组的复制

• 表示一个数组对另一个数组进行复制
• 复制分为深复制和浅复制

深复制

• 是复制数组中的数据值
• 如果对复制的数据内容进行修改，不会对复制的数组中的数据值进行修改

/* 深复制：是指对数组中的数据值进行复制 */
var arr1 = [ 100, '呀吼吼', true ];
var arr2 = [];
/* 使用循环语句对数组遍历，获得数组中的数据内容 */
for ( var a = 0; a < arr1.length; a++ ) {
    arr2 [ a ] = arr1 [ a ];//将获得的数据内容复制到另一个数组中
}
/* 显示复制效果 */
console.log( arr2 );// [ 100, '呀吼吼', true ]
/* 如果对复制的数据进行修改原本的数据不会被修改 */
arr2[ 1 ] = '哇哈哈';// 修改数据
console.log( arr2 );// 修改后效果：[ 100, '娃哈哈', true ]
console.log( arr1 );// 修改后效果：[ 100, '呀吼吼', true ]

浅复制

• 是复制在数组中储存的内容地址
• 如果对复制的数据内容进行修改，会同时修改被复制的数组中的数据值

/* 浅复制：是指对数组中存放的内容地址进行复制 */
var arr3 = [ 100, '呀吼吼', true ];
var arr4 = [];
arr4 = arr3;
console.log( arr3 );//显示效果：[ 100, '呀吼吼', true ]
/* 但是要注意如果对数据进行修改会同时修改 */
arr4[ 1 ] = '哇哈哈';//修改数据
console.log( arr4 );//修改后效果：[ 100, '娃哈哈', true ]
console.log( arr3 );//修改后效果：[ 100, '娃哈哈', true ]

数组的遍历

• 通过循环语句来获取数组中的全部数据内容

/* for语句遍历索引数组 */
var arr1 = [ '啊哈哈', 100, true, undefined, null ];
for ( var i = 0; i < arr1.length; i++ ) {
    console.log( arr1[i] );
}

for...in语句

语法

for ( var 变量 in 数组 ) {
    语句块
}

• 变量 - 表示得到的数组中的数据内容

/* for...in语句遍历索引数组 */
for ( var s in arr1 ) {
    console.log( arr1[s] );
}

for语句与for...in语句的对比

• for语句

  • 循环的开始和结束，可以由开发人员决定
  • 由于稀疏数组的数组长度和数组的有效内容不一致，遍历出的数据值，不能过滤掉无效数据值
  • 由于关联数组的数组长度无效，所以无法使用for语句进行循环遍历

• for...in语句

  • 循环只能从开始到结束
  • 在遍历稀疏数组时可以过滤掉无效数据值，直接得到有效数据值
  • for...in语句可以对关联数组进行遍历

/* 稀疏数组 */
var arr2 = [];
arr2[0] = 100;
arr2[4] = 300;
arr2[8] = 500;
/* for语句遍历稀疏数组 */
for ( var a = 0; a < arr2.length; a++ ) {
    /* 得到全部数据值，包括无效数据值 */
    console.log( arr2[a]);
}
/* for...in语句遍历稀疏数组 */
for ( var b in arr2 ) {
    /* 可以得到数组中的有效数据值 */
    console.log( arr2[b] );
}

/* 关联数组 */
var arr3 = [];
arr3['name'] = '啊哈哈';
arr3['nian'] = 100;
arr3['gong'] = '深山';
/* for语句遍历关联数组 */
for ( var x = 0; x < arr3.length; x++ ) {
    /* 关联数组没有数组长度，所以无法遍历 */
    console.log( arr3[x] );
}
/* for...in语句遍历关联数组 */
for ( var y in arr3 ) {
    /* 可以遍历到数组中的数据值 */
    console.log( arr3[y] );
}