快速提示：如何在JavaScript中创建和处理数组

这篇文章由Chris Perry和Marcello La Rocca进行了同行评审。 感谢所有SitePoint的同行评审人员使SitePoint内容达到最佳状态！

Array对象的length属性是许多JavaScript新手都不了解的属性。 许多人错误地认为长度可以准确地告诉您数组中有多少个条目，而这仅适用于某些数组。 一些初学者甚至没有意识到length是数组的可写属性。 为了确切地阐明length属性的工作方式，让我们看一下当我们自己更改其值或运行一些更新数组的操作（也会导致长度更改）时发生的情况。

让我们从头开始。 JavaScript数组具有称为length属性，并且可以选择具有编号的属性，其名称在0到4294967294之间（包括0和4294967294）。 它还具有许多用于操纵属性的方法，在检查length属性的工作方式时，我们将介绍其中的一些方法。 请注意，JavaScript不支持关联数组 ，因此，尽管您可以将命名属性添加到数组中，但它们并不构成数组的一部分，并且将被所有数组方法忽略。 它们也不会影响长度。

为了更轻松地准确显示在处理各种语句时数组属性发生的变化，我们将在每段代码之后运行以下函数。 这会将数组的长度和所有编号的属性记录到浏览器的控制台中。

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

创建一个数组

我们将从研究使用JavaScript创建数组的不同方法开始。 这些示例中的前两个示例创建了仅设置长度且根本没有编号的条目的数组。 后两个创建的编号条目比长度少0到1。

长度大于编号属性数量的数组称为稀疏数组，而长度等于编号属性数量的数组称为密集数组 。

//Creates an array with no numbered entries

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循环处理数组while则循环还将尝试处理那些不存在的属性，并且该数组会将不存在的那些条目标识为undefined 。 这样，您的代码将无法区分以上示例的最后一个和前两个示例。 在不确定要处理密集数组时，应始终使用数组方法处理数组。

改变长度

以下示例介绍了如果我们为数组设置的新长度小于当前长度，会发生什么情况。

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提供了三种方法pop ， shift和splice ，它们可以从数组中删除条目，从而减少数组的长度。 在每种情况下，调用都会返回删除的一个或多个值。

// pop() removes the last element from an array
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() removes the first element from an array
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() can remove existing elements
var arr1 = ['a','b','c','d','e','f'];
var arr2 = arr1.splice(0,2); // remove 2 elements starting at index 0
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); // remove 2 elements starting at index 6
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() adds one or more elements to the end of an array
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() adds one or more elements to the beginning of an array
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'); // removes 0 elements from index 6, and inserts '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

替换条目

在我们为已经存在的条目分配新值的情况下，该条目仅获得一个新值，而数组的其余部分不受影响。 同样，通过组合已经研究过的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属性如何工作。 这可以大于或等于数组中的条目数。 在相等的地方，我们有一个密集的数组，在更大的地方，我们有一个稀疏的数组。 确切地说，特定数组方法的作用取决于在稀疏数组中是否确实存在与给定位置相对应的属性。 如果我们更改数组的长度，它将删除数组中大于新长度的所有编号属性。 如果长度等于编号属性的数量，并且我们增加了长度，则将密集数组转换为稀疏数组。 用于在数组中删除和添加属性的数组方法将在需要的地方移动现有条目，还将保留并移动属性之间的任何间隙。

From: https://www.sitepoint.com/quick-tip-create-manipulate-arrays-in-javascript/