JavaScript 数组
JavaScript 数组是一个包含了多个值的对象,数组用于在单个变量中存储多个值。
JavaScript 数组是一个包含了多个值的对象,数组用于在单个变量中存储多个值。
什么是数组?
数组是一种特殊的变量,一次可以保存多个值。
如果有一个汽车品牌列表,存储在单个变量中可能如下所示:
let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";
但是,如果您想遍历汽车并找到指定的汽车怎么办?如果不是 3 辆车而是 300 辆,这种单个变量存储的方式还可行吗?
数组可以很方便的解决这个问题。一个数组可以在一个变量下保存多个值,可以通过位置索引号来访问这些值。
创建数组
使用数组字面量是创建 JavaScript 数组的最简单方法。
语法:
const arrayName = [item1, item2, ...];
创建一个汽车品牌列表数组:
const cars = ["Saab", "Volvo", "BMW"];
一个声明可以跨越多行:
const cars = [
"Saab",
"Volvo",
"BMW"
];
您还可以先创建一个数组,然后按索引位置设置元素:
const cars = [];
cars[0] = "Saab";
cars[1] = "Volvo";
cars[2] = "BMW";
通过 new Array()
也可以达到和上面一样的效果:
const cars = new Array("Saab", "Volvo", "BMW");
一般没有必要使用 new Array()
创建数组,使用数组字面量更简单,可读性更高,执行速度更快。
访问数组的元素
您可以通过索引来访问数组元素:
const cars = ["Saab", "Volvo", "BMW"];
console.log("cars[0] =", cars[0]); // 输出 cars[0] = Saab
!! **注意:**数组索引从 0 开始。[0]
是第一个元素,[1]
是第二个元素,以此类推。
更改数组元素
可以直接使用索引更改数字指定位置的内容。
此语句更改中 cars
数组第一个元素的值:
const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
console.log("cars[0] =", cars[0]); // 输出 cars[0] = Opel
数组元素类型可以不同
JavaScript 是若类型的语言,一个数组中的元素可以是不同类型的。你可以在一个数组中放一个数组、一个字符串、一个对象、一个数组,甚至可以放一个函数。
您可以在数组中拥有对象。您可以在数组中拥有函数。您可以在数组中有数组:
myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;
数组属性和方法
JavaScript 数组内置了很多属性和方法帮我们方便的操作数组,比如添加或删除元素、返回子数组、转为字符串等。
长度属性
数组的 length
属性返回数组的长度(数组元素的数量)。
const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log("fruits 数组中有", fruits.length, "个元素"); // 输出: fruits 数组中有 4 个元素
length
属性始终比数组的最大索引大 1。
访问第一个数组元素
const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log("fruits 数组的第一个元素是:", fruits[0]); // 输出: fruits 数组的第一个元素是: Banana
访问最后一个数组元素
const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log("fruits 数组的最后一个元素是:", fruits[fruits.length - 1]); // 输出: fruits 数组的最后一个元素是: Mango
循环数组元素
遍历数组最安全的方法是使用 for
循环:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;
text = "<ul>";
for (let i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";
您还可以使用 Array.forEach()
函数遍历数组:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function myFunction(value) {
text += "<li>" + value + "</li>";
}
添加数组元素
向数组添加新元素的最简单方法是使用 push()
方法:
const fruits = ["Banana", "Orange", "Apple"];
fruits.push("Lemon"); // 向数组的最后添加一个元素 Lemon
也可以使用以下 length
属性将新元素添加到数组最后:
const fruits = ["Banana", "Orange", "Apple"];
fruits[fruits.length] = "Lemon"; // Adds "Lemon" to fruits
数组和对象的区别
在 JavaScript 中,数组使用编号索引,对象使用命名索引。
数组是一种特殊的对象,带有编号的索引。
何时使用数组?何时使用对象?
- 当想要存储一个单纯的列表时,使用数组
- 当想要描述一个物体的特征时,使用对象
避免使用 new Array()
不需要使用 JavaScript 的内置数组构造函数 new Array()
。
应使用 []
来创建数组,而不要使用 new Array()
使用 new Array()
创建输入容易引入不易发现的错误。
当 new Array()
只有一个参数时,参数的含义是创建数组的长度。
当 new Array()
有一个以上的参数时,参数的含义是:要创建的数组中的元素。
如何识别数组?
由于对数组进行 typeof
运算只返回 object
, 那么怎么判断一个变量是否数组呢?
这里有 2 中方法判断一个变量是不是数组:
-
使用
Array.isArray()
判断是否数组:Array.isArray()
是 ECMAScript 5 定义了一个新方法,用来判断一个变量是不是数组。如果是数组,返回true
。const fruits = ["Banana", "Orange", "Apple"]; console.log(Array.isArray(fruits)); // 输出: true
-
使用
instanceof Array
判断是否数组instanceof
对象是否是由给定的构造函数创建运算符返回 true:const fruits = ["Banana", "Orange", "Apple"]; console.log(fruits instanceof Array); // 输出: true
常用的数组方法
数组对象提供了很多实用的方法来操作数组和其中的元素,请跳转到 JavaScript 数组方法章节获取更多信息。