JavaScript数组操作详解：创建、增删改查与三大属性解析

JavaScript数组操作详解：创建、增删改查与三大属性解析

近期在JavaScript开发中频繁使用数组，对其操作机制进行了深入研究，现将相关经验整理如下。

数组的创建与访问方法

1、数组的创建方式

var arrayObj = new Array(); // 初始化一个空数组
var arrayObj = new Array([size]); // 指定长度创建数组，需注意此处定义的是初始长度而非上限
var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); // 直接赋值创建数组

需要注意的是，即便在第二种方式中指定了长度，JavaScript数组本质上是动态变长的。即使预设长度为5，依然可以向超出该范围的索引存储数据，此时数组的length属性会自动随之增大。

2、数组元素的访问与修改

var testGetArrValue=arrayObj[1]; // 通过索引获取数组元素
arrayObj[1]= "这是新值"; // 通过索引修改数组元素的值

数组元素的添加与删除操作

3、数组元素的添加方法

arrayObj. push([item1 [item2 [. . . [itemN ]]]]);// 向数组末尾添加一个或多个元素，并返回更新后的数组长度
arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);// 向数组开头添加一个或多个元素，原有元素自动后移，并返回新长度
arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]);// 在指定位置插入新元素，原位置及之后的元素自动后移，该方法返回空数组

arrayObj.pop(); // 移除并返回数组最后一个元素
arrayObj.shift(); // 移除并返回数组第一个元素，其余元素自动前移
arrayObj.splice(deletePos,deleteCount); // 从指定位置deletePos开始删除deleteCount个元素，以数组形式返回被移除的元素

数组的截取、合并、拷贝与排序

5、数组的截取与合并操作

arrayObj.slice(start, [end]); // 返回从start开始到end（不包含end）的子数组，若省略end则截取至末尾
arrayObj.concat([item1[, item2[, . . . [,itemN]]]]); // 将多个数组、字符串或混合类型连接成一个新的数组并返回

arrayObj.slice(0); // 返回原数组的浅拷贝，生成一个新的数组对象，不指向原数组
arrayObj.concat(); // 无参数调用时返回原数组的浅拷贝，生成一个新的数组对象，不指向原数组

arrayObj.reverse(); // 反转数组元素顺序（首尾互换），返回原数组的引用地址
arrayObj.sort(); // 对数组元素进行排序，默认按字符串Unicode码点排序，返回原数组的引用地址

数组元素的字符串化转换

8、数组元素的字符串化转换

arrayObj.join(separator); // 将数组所有元素连接成一个字符串，元素间以separator指定的分隔符隔开
toLocaleString 、toString 、valueOf：这些方法可视为join的特殊形式，实际开发中使用频率较低

数组对象的三大核心属性解析

二、数组对象的3个核心属性

length属性的动态变化机制

1、length 属性详解

Length属性用于表示数组中元素的个数。由于数组索引从0开始，其有效索引范围是0到length-1。与其他强类型语言不同，JavaScript数组的length属性是可变的，这一点需特别注意。当将length设置为更大的值时，数组内容不变，仅length属性值增大；若将length设置为比当前更小的值，则索引大于或等于新length的元素将被丢弃。以下代码演示了改变length属性的效果：

var arr=[12,23,5,3,25,98,76,54,56,76];
// 定义一个包含10个数字的数组
alert(arr.length); // 输出数组长度10
arr.length=12; // 手动增大数组长度属性
alert(arr.length); // 输出更新后的长度12
alert(arr[8]); // 输出第9个元素的值，结果为56
arr.length=5; // 将长度缩减为5，索引大于等于5的元素被丢弃
alert(arr[8]); // 输出第9个元素，结果变为"undefined"
arr.length=10; // 将长度恢复为10
alert(arr[8]); //虽然长度被恢复为10，但第9个元素却无法收回，显示"undefined"

通过上述代码可以清晰看到length属性的行为特征。除了显式设置，length属性也可能被隐式修改。在JavaScript中，可以访问未声明的变量，同样也可以访问未定义的数组元素（即索引大于或等于当前length的元素）。此时，length属性会自动更新为所访问元素索引值加1。例如以下代码：

var arr=[12,23,5,3,25,98,76,54,56,76];
alert(arr.length);
arr[15]=34;
alert(arr.length);

代码首先定义了一个包含10个数字的数组，初始长度为10。随后通过赋值操作访问索引为15的元素（arr[15]=34），此时再次输出数组长度，结果为16。对于习惯强类型语言的开发人员而言，这一特性可能令人惊讶。实际上，使用new Array()创建的数组初始长度为0，正是通过对未定义元素的操作，才导致length属性发生变化。

综上所述，length属性具有动态调整容量的特性，深入理解该属性有助于在开发中灵活控制数组大小。

prototype属性的原型继承用法

2、prototype 属性

该属性返回对象类型原型的引用。prototype是Object对象的共有属性。

objectName.prototype

objectName参数代表object对象的名称。

说明： 利用prototype属性可为对象提供一组基本功能。新创建的实例将“继承”赋予该原型的操作。

对于数组对象，以下示例说明了prototype属性的具体用途。

示例为数组添加一个返回最大元素值的方法。需先定义该函数，将其加入Array.prototype，随后即可使用。

function array_max()
{
var i,
max = this[0];
for (i = 1; i < this.length; i++)
 {
 if (max < this[i])
max = this[i];
 }
return max;
}
Array.prototype.max = array_max;
var x = new Array(1, 2, 3, 4, 5, 6);
var y = x.max();

执行该代码后，变量y将保存数组x中的最大值，即6。

constructor属性的类型判断功能

3、constructor 属性

该属性表示创建对象的构造函数。

object.constructor //object为对象或函数的名称。

说明：constructor属性是所有拥有prototype的对象的成员。它包括除Global和Math对象以外的所有JScript内置对象。constructor属性保存了对构造特定对象实例的函数的引用。

例如：

x = new String("Hi");
if (x.constructor == String) // 执行处理（条件为真）。

或者

function MyFunc {
// 函数体。
}
y = new MyFunc;
if (y.constructor == MyFunc) // 执行处理（条件为真）。

针对数组的情况：

y = new Array();