深入浅出JavaScript数组：创建与操作详解

核心要点

• JavaScript数组拥有length属性，可进行操作，并具有编号属性，名称范围在0到4294967294（含）之间。JavaScript不支持关联数组。
• JavaScript数组的创建方式多样，建议使用数组字面量创建新数组。数组可以是密集型（长度等于编号属性的数量）或稀疏型（长度大于编号属性的数量）。
• JavaScript数组的长度可以改变。如果设置的新长度小于当前长度，则数组中位置大于新长度的任何编号属性都将被移除。
• JavaScript提供方法来添加、移除和替换数组中的条目。添加条目方法包括push、unshift和splice；移除条目方法包括pop、shift和splice。

学习如何操作JavaScript数组。我们将涵盖数组创建过程、更改数组长度以及添加、移除和替换条目。Array对象的length属性是许多JavaScript新手不理解的一个属性。许多人错误地认为length准确地告诉你数组中有多少个条目，而这仅对某些数组成立。一些初学者甚至没有意识到length是数组的可写属性。为了阐明length属性的工作原理，让我们看看当我们自己更改其值或运行更新数组也导致长度更改的操作时会发生什么。让我们从头开始。JavaScript数组有一个名为length的属性，并且可以选择具有编号属性，其名称介于0和4294967294（含）之间。它还有一些用于操作属性的方法，我们将在检查length属性的工作原理时研究其中一些方法。请注意，JavaScript不支持关联数组，因此虽然您可以向数组添加命名属性，但它们不构成数组的一部分，并且将被所有数组方法忽略。它们也不会影响长度。为了更容易地显示在处理各种语句时数组属性会发生什么，我们将在每段代码之后运行以下函数。这会将数组的长度和所有编号属性记录到浏览器的控制台。

var test = function(array) {
  console.log('length:'  array.length);
  array.forEach(function(element, index, array) {
    console.log(index   ':'   element);
  });
};

本文由Chris Perry和Marcello La Rocca共同评审。感谢所有SitePoint的同行评审员，使SitePoint的内容尽善尽美!

在JavaScript中创建数组

我们将首先研究在JavaScript中创建数组的不同方法。前两个示例创建的数组只设置了长度，根本没有编号条目。后两个示例从0创建到长度减1的编号条目。长度大于编号属性数量的数组称为稀疏数组，而长度等于编号属性数量的数组称为密集数组。

// 创建一个没有编号条目的数组

var arr = new Array(5);
test(arr);
// length: 5

var arr = [];
arr.length = 5;
test(arr);
// length: 5

请注意，在创建新数组时，首选数组字面量表示法（使用空括号定义新数组）。

var arr = ['a', 'b', 'c', 'd', 'e'];
test(arr);
// length:5, 0:a, 1:b, 2:c, 3:d, 4:e

var arr = [undefined, undefined, undefined, undefined, undefined];
test(arr);
// length:5, 0:undefined, 1:undefined, 2:undefined, 3:undefined, 4:undefined

处理编号属性的数组方法（在本例中为forEach）只会处理存在的属性。如果您改为使用for或while循环处理数组，则循环也会尝试处理不存在的属性，并且数组会将不存在的条目标识为undefined。然后，您的代码将无法区分上述最后一个示例和前两个示例。如果您不确定自己是否正在处理密集数组，则应始终使用数组方法来处理数组。

更改JavaScript数组的长度

以下示例查看如果我们为数组设置一个小于当前长度的新长度会发生什么。

var arr = ['a', 'b', 'c', 'd', 'e', 'f'];
test(arr);
// length:6, 0:a, 1:b, 2:c, 3:d, 4:e, 5:f

arr.length = 5;
test(arr);
// length:5, 0:a, 1:b, 2:c, 3:d, 4:e

var arr = ['a','b','c','d','e','f',,,];
test(arr);
// length:8, 0:a, 1:b, 2:c, 3:d, 4:e, 5:f

arr.length = 7;
test(arr);
// length:7, 0:a, 1:b, 2:c, 3:d, 4:e, 5:f

请注意，使用[]表示法创建数组时，每个条目都由一个值后跟一个逗号组成。如果省略值，则不会为该位置创建属性。只有当为该属性提供值时，才能省略最后一个逗号，否则长度将减少一个。

从JavaScript数组中移除条目

JavaScript提供了三种方法pop、shift和splice，可以从数组中移除条目，从而减少数组的长度。在每种情况下，移除的值（或值）都由调用返回。

// pop() 从数组中移除最后一个元素
var arr = ['a','b','c','d','e','f'];
var el = arr.pop();
test(arr); // length:5, 0:a, 1:b, 2:c, 3:d, 4:e
console.log(el); // f

// shift() 从数组中移除第一个元素
var arr = ['a','b','c','d','e','f'];
var el = arr.shift();
test(arr); // length:5, 0:b, 1:c, 2:d, 3:e, 4:f
console.log(el); // a

// splice() 可以移除现有元素
var arr1 = ['a','b','c','d','e','f'];
var arr2 = arr1.splice(0,2); // 从索引0开始移除2个元素
test(arr1); // length:4, 0:c, 1:d, 2:e, 3:f
test(arr2); // length:2, 0:a, 1:b

var arr1 = ['a','b','c','d','e','f',,,'i'];
var arr2 = arr1.splice(6,2); // 从索引6开始移除2个元素
test(arr1); // length:7, 0:a, 1:b, 2:c, 3:d, 4:e, 5:f, 6:i
test(arr2); // length:2

如何在数组中添加条目

我们可以通过简单地指定数组中尚不存在编号属性的位置来向数组中添加新条目。我们还可以使用JavaScript提供的三个方法之一（push、unshift和splice）来插入新条目，并在必要时移动旧条目。

var arr = ['a','b','c','d','e','f',,,'i'];
arr[11] = 'l';
test(arr);
// length:12, 0:a, 1:b, 2:c, 3:d, 5:f, 8:i, 11:l

// push() 将一个或多个元素添加到数组的末尾
var arr = ['a','b','c','d','e','f',,,,];
arr.push('j');
test(arr);
// length:10, 0:a, 1:b, 2:c, 3:d, 5:f, 9:j

// unshift() 将一个或多个元素添加到数组的开头
var arr = ['a','b','c','d','e','f',,,,];
arr.unshift('x');
test(arr);
// length:10, 0:x, 1:a, 2:b, 3:c, 4:d, 5:e, 6:f

arr1 = ['a','b','c','d','e','f',,,'i'];
arr2 = arr1.splice(6,0,'g','h'); // 从索引6移除0个元素，并插入'g'、'h'
test(arr1); // length:11, 0:a, 1:b, 2:c, 3:d, 5:f, 6:g, 7:h, 10:i
test(arr2); // length:0

在JavaScript数组中替换条目

如果我们将新值赋给已存在的条目，则该条目只会获得新值，而数组的其余部分不会受到影响。同样，通过组合我们已经研究过的splice()方法的变体，我们可以替换现有条目或填充数组中的空白。

var arr1 = ['a','b','c','d','e','f',,,'i'];
var arr2 = arr1.splice(6,2,'g','h');
test(arr1); // length:9, 0:a, 1:b, 2:c, 3:d, 4:e, 5:f, 6:g, 7:h, 8:i
test(arr2); // length:2

结论

上述示例应该让您更好地了解数组的length属性是如何工作的。这可以大于或等于数组中的条目数。如果相等，则我们有一个密集数组；如果大于，则我们有一个稀疏数组。特定数组方法的确切作用可能取决于稀疏数组中是否存在与给定位置对应的属性。如果我们更改数组的长度，它会移除数组中位置大于新长度的任何编号属性。如果长度等于编号属性的数量，并且我们增加了长度，那么我们将密集数组转换为稀疏数组。删除和添加数组中属性的数组方法会在必要时移动现有条目，并且还会保留和移动属性之间的任何间隙。

JavaScript数组常见问题解答 (FAQs)

如何在JavaScript中向数组添加元素？

在JavaScript中，您可以使用push()方法向数组添加元素。此方法将新项目添加到数组的末尾并返回新的长度。这是一个例子：

let fruits = ["apple", "banana"];
fruits.push("mango");
console.log(fruits); // ["apple", "banana", "mango"]

如何从JavaScript数组中移除元素？

JavaScript提供了几种方法来从数组中移除元素。pop()方法从数组中移除最后一个元素并返回该元素。shift()方法从数组中移除第一个元素并返回该元素。以下是如何使用这些方法：

let fruits = ["apple", "banana", "mango"];
let last = fruits.pop();
console.log(last); // "mango"
let first = fruits.shift();
console.log(first); // "apple"

（后续FAQ内容与原文一致，此处省略，避免重复）