JavaScript数组的属性和方法

length 属性

length 属性返回数组的长度（数组元素的数目）。

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;                       // fruits 的长度是 4

Array.forEach() 方法

语法：

array.forEach(function(currentValue, index, array) {
  // 执行的代码
});
在这个例子中：

currentValue 是数组当前元素的值。
index 是数组当前元素的索引（可选）。
array 是当前元素属于的数组（可选）。

forEach() 的主要特点：

对数组的每个元素执行提供的回调函数。
回调函数不会改变原数组。
没有返回值。

当与箭头函数结合起来时

原来

fruits.forEach(myFunction);
text += "</ul>";

function myFunction(value) {
  text += "<li>" + value + "</li>";
}

结合箭头函数后

fruits.forEach(value => {              // 使用 forEach 方法和箭头函数遍历数组

text += `<li>${value}</li>`;           // 将当前数组元素用 <li> 标签包裹，并追加到 text 字符串中

});

Array.map()方法

map() 方法通过对每个数组元素执行函数来创建新数组。

map() 方法不会对没有值的数组元素执行函数。

map() 方法不会更改原始数组。

                

这个例子将每个数组值乘以2：

实例

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

function myFunction(value, index, array) {
  return value * 2;
}

与箭头函数结合后

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map((value, index, array) => value * 2);

console.log(numbers2); // 输出: [90, 8, 18, 32, 50]

请注意，该函数有 3 个参数：

• 项目值
• 项目索引
• 数组本身

当回调函数仅使用 value 参数时，可以省略索引和数组参数：

实例

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

function myFunction(value) {
  return value * 2;
}

 push() 方法：

在结尾处添加数组元素

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");                // 向 fruits 添加一个新元素 (Lemon)        

返回

Banana,Orange,Apple,Mango

也可以返回新数组的长度

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x =  fruits.push("Kiwi");   //  x 的值是 5

也可以使用 length 属性向数组添加新元素：

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";     // 向 fruits 添加一个新元素 (Lemon)z
 

注

在 JavaScript 中，数组可以动态调整大小，并且你可以向数组添加元素，甚至可以直接设置一个索引远超当前数组长度的元素。这种操作会在数组中创建未定义的“洞”或“稀疏数组”。

让我们详细解释这个概念：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[6] = "Lemon"; // 向 fruits 添加一个新元素 (Lemon)

初始状态下，fruits 数组是
["Banana", "Orange", "Apple", "Mango"]

修改后的数组 fruits 是
["Banana", "Orange", "Apple", "Mango", undefined, undefined, "Lemon"]

这里的 undefined 表示数组中的“洞”，这些位置没有任何值。

特点和影响

• 稀疏数组: 这种有未定义位置（洞）的数组被称为稀疏数组（Sparse Array）。

• 性能: 稀疏数组可能在某些操作上比密集数组（Dense Array）慢，因为 JavaScript 引擎在处理稀疏数组时需要处理这些洞。

• length 属性: 数组的 length 属性会显示数组中最大索引 + 1 的值，即使有洞存在。

• 迭代: 在使用 forEach、map、filter 等方法迭代数组时，这些洞通常会被跳过。

pop方法：

从数组中删除最后一个元素：

实例
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();              // 从 fruits 删除最后一个元素（"Mango"）

pop() 方法返回“被弹出”的值：

实例
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.pop();      // x 的值是 "Mango"

shift() 方法

会删除首个数组元素，并把所有其他元素“位移”到更低的索引。

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();            // 从 fruits 删除第一个元素 "Banana"

shift() 方法返回被“位移出”的字符串：

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x=fruits.shift();             // x为 "Banana"

unshift() 方法

（在开头）向数组添加新元素，并“反向位移”旧元素：

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    // 向 fruits 添加新元素 "Lemon"

unshift() 方法返回新数组的长度。

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    // 返回 5

splice() 方法

可用于向数组添加新项,也可以在不留洞的情况下移除元素

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");

返回
原数组：
Banana,Orange,Apple,Mango

新数组：
Banana,Orange,Lemon,Kiwi

第一个参数（2）定义了应添加新元素的位置（拼接）。

第二个参数（2）定义应删除多少元素。

其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。