数组是一种特殊的变量,它可以保存多个值:
const cars = ["Saab", "Volvo", "BMW"];
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p id="demo"></p>
<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
如果您有一个项目列表(例如,汽车名称列表),则存储 单变量中的汽车可能如下所示:
let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";
但是,如果您想循环浏览汽车并找到特定的一辆,该怎么办? 如果您没有 3 辆车,而是 300 辆怎么办?
解决方案是数组!
数组可以在一个名称下保存多个值,并且您可以 通过引用索引号来访问值。
使用数组文字是创建 JavaScript 数组的最简单方法。
句法:
const array_name = [item1, item2, ...];
使用 const 关键字声明数组是一种常见的做法。
在章节:JS Array Const 中了解有关数组的 const 的更多信息。
const cars = ["Saab", "Volvo", "BMW"];
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p id="demo"></p>
<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
空格和换行符并不重要。一个声明可以跨越多行:
const cars = [
"Saab",
"Volvo",
"BMW"
];
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p id="demo"></p>
<script>
const cars = [
"Saab",
"Volvo",
"BMW"
];
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
您还可以创建一个数组,然后提供元素:
const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p id="demo"></p>
<script>
const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
以下示例还创建一个数组,并为其赋值:
const cars = new Array("Saab", "Volvo", "BMW");
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p id="demo"></p>
<script>
const cars = new Array("Saab", "Volvo", "BMW");
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
上面的两个例子的作用完全相同。
无需使用new Array()
。
为了简单性、可读性和执行速度,请使用数组文字方法。
您可以通过引用索引号来访问数组元素:
const cars = ["Saab", "Volvo", "BMW"];
let car = cars[0];
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Bracket Indexing</h2>
<p>JavaScript array elements are accessed using numeric indexes (starting from 0).</p>
<p id="demo"></p>
<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];
</script>
</body>
</html>
注意:数组索引从0开始。
[0] 是第一个元素。 [1] 是第二个元素。
此语句更改 cars
中第一个元素的值:
cars[0] = "Opel";
const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Bracket Indexing</h2>
<p>JavaScript array elements are accessed using numeric indexes (starting from 0).</p>
<p id="demo"></p>
<script>
const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
JavaScript 方法 toString()
将数组转换为 (逗号分隔)数组值的字符串。
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
结果 :
Banana,Orange,Apple,Mango自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The toString() Method</h2>
<p>The toString() method returns an array as a comma separated string:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
</script>
</body>
</html>
使用JavaScript,可以通过引用数组来访问完整的数组 姓名:
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p id="demo"></p>
<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
数组是一种特殊类型的对象。 JavaScript 中的 typeof
运算符返回“object” 数组。
但是,JavaScript 数组最好被描述为数组。
数组使用数字来访问其“元素”。在这个 例如,人[0]
约翰返回:
const person = ["John", "Doe", 46];
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>Arrays use numbers to access its elements.</p>
<p id="demo"></p>
<script>
const person = ["John", "Doe", 46];
document.getElementById("demo").innerHTML = person[0];
</script>
</body>
</html>
对象使用名称来访问其“成员”。在这个例子中, person.firstName
约翰返回:
const person = {firstName:"John", lastName:"Doe", age:46};
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Objects</h1>
<p>JavaScript uses names to access object properties.</p>
<p id="demo"></p>
<script>
const person = {firstName:"John", lastName:"Doe", age:46};
document.getElementById("demo").innerHTML = person.firstName;
</script>
</body>
</html>
JavaScript 变量可以是对象。数组是特殊类型的对象。
因此,您可以在其中包含不同类型的变量 相同的数组。
您可以在数组中包含对象。您可以在数组中包含函数。你可以 数组中有数组:
myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;
JavaScript 数组的真正优势在于内置的数组属性和 方法:
cars.length // Returns the number of elements
cars.sort() // Sorts the array
数组方法将在接下来的章节中介绍。
数组的 length
属性返回数组的长度(数组的个数) 元素)。
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.length;
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The length Property</h2>
<p>The length property returns the length of an array:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let size = fruits.length;
document.getElementById("demo").innerHTML = size;
</script>
</body>
</html>
length
属性始终比最高数组索引大 1。
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[0];
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Bracket Indexing</h2>
<p>JavaScript array elements are accesses using numeric indexes (starting from 0).</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits[0];
</script>
</body>
</html>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[fruits.length - 1];
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Bracket Indexing</h2>
<p>JavaScript array elements are accesses using numeric indexes (starting from 0).</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits[fruits.length-1];
</script>
</body>
</html>
循环数组的一种方法是使用 for
循环:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;
let text = "<ul>";
for (let i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
text
+= "</ul>";
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Looping an Array</h2>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;
let text = "<ul>";
for (let i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
您还可以使用 Array.forEach()
函数:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function
myFunction(value) {
text += "<li>" + value + "</li>";
}
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The forEach() Method</h2>
<p>Call a function for each array element:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
document.getElementById("demo").innerHTML = text;
function myFunction(value) {
text += "<li>" + value + "</li>";
}
</script>
</body>
</html>
向数组添加新元素的最简单方法是使用 push()
方法:
const fruits = ["Banana", "Orange", "Apple"];
fruits.push("Lemon"); // Adds a new element (Lemon) to fruits
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The push() Method</h2>
<p>The push method appends a new element to an array.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
fruits.push("Lemon");
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>
还可以使用 length
属性将新元素添加到数组中:
const fruits = ["Banana", "Orange", "Apple"];
fruits[fruits.length] = "Lemon"; // Adds "Lemon" to fruits
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p>The length property provides an easy way to append new elements to an array without using the push() method.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
fruits[fruits.length] = "Lemon";
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>
警告!
<p>添加具有高索引的元素可能会在数组中创建未定义的“洞”:
const fruits = ["Banana", "Orange", "Apple"];
fruits[6] = "Lemon"; // Creates undefined "holes" in fruits
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p>Adding elements with high indexes can create undefined "holes" in an array.</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple"];
fruits[6] = "Lemon";
let fLen = fruits.length;
let text = "";
for (i = 0; i < fLen; i++) {
text += fruits[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
许多编程语言支持具有命名索引的数组。
具有命名索引的数组称为关联数组 数组(或哈希)。
JavaScript 不支持具有命名索引的数组。
在 JavaScript 中,数组始终使用编号索引。
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length; // Will return 3
person[0]; // Will return "John"
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p id="demo"></p>
<script>
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
document.getElementById("demo").innerHTML =
person[0] + " " + person.length;
</script>
</body>
</html>
警告!!
如果使用命名索引,JavaScript 会将数组重新定义为对象。
之后,一些数组方法和属性会产生不正确的结果 结果。
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length; // Will return 0
person[0]; // Will return undefined
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p>If you use a named index when accessing an array, JavaScript will redefine the array to a standard object, and some array methods and properties will produce undefined or incorrect results.</p>
<p id="demo"></p>
<script>
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
document.getElementById("demo").innerHTML =
person[0] + " " + person.length;
</script>
</body>
</html>
在 JavaScript 中,数组使用编号索引。
在 JavaScript 中,对象使用命名索引。
数组是一种特殊的对象,具有编号索引。
JavaScript 不支持关联数组。
当您希望元素名称为 字符串(文本)。
当您希望元素名称为 数字。
JavaScript 有一个内置的数组构造函数 new Array()
。
但您可以安全地使用 []
代替。
这两个不同的语句都创建一个名为点的新空数组:
const points = new Array();
const points = [];
这两个不同的语句都创建一个包含 6 个数字的新数组:
const points = new Array(40, 100, 1, 5, 25, 10);
const points = [40, 100, 1, 5, 25, 10];
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Creating an Array</h2>
<p>Avoid using new Array(). Use [] instead.</p>
<p id="demo"></p>
<script>
//const points = new Array(40, 100, 1, 5, 25, 10);
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points[0];
</script>
</body>
</html>
new
关键字可能会产生一些意想不到的结果:
// Create an array with three elements:
const points = new Array(40, 100, 1);
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>Create an Array with three elements.</p>
<p id="demo"></p>
<script>
var points = new Array(40, 100, 1);
document.getElementById("demo").innerHTML = points;
</script>
</body>
</html>
// Create an array with two elements:
const points = new Array(40, 100);
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>Create an Array with two elements.</p>
<p id="demo"></p>
<script>
var points = new Array(40, 100);
document.getElementById("demo").innerHTML = points;
</script>
</body>
</html>
// Create an array with one element ???
const points = new Array(40);
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p>Avoid using new Array().</p>
<p id="demo"></p>
<script>
var points = new Array(40);
document.getElementById("demo").innerHTML = points;
</script>
</body>
</html>
const points = [40];
不等于:
const points = new Array(40);
// Create an array with one element:
const points = [40];
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p>Create an Array with one element.</p>
<p id="demo"></p>
<script>
var points = [40];
document.getElementById("demo").innerHTML = points;
</script>
</body>
</html>
// Create an array with 40 undefined elements:
const points = new Array(40);
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p>Avoid using new Array().</p>
<p id="demo"></p>
<script>
var points = new Array(40);
document.getElementById("demo").innerHTML = points[0];
</script>
</body>
</html>
一个常见的问题是:我如何知道变量是否是数组?
问题是 JavaScript 运算符 typeof
返回 “对象
”:
const fruits = ["Banana", "Orange", "Apple"];
let type = typeof fruits;
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The typeof Operator</h2>
<p>The typeof operator, when used on an array, returns object:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = typeof fruits;
</script>
</body>
</html>
typeof 运算符返回对象,因为 JavaScript 数组是一个 目的。
为了解决这个问题,ECMAScript 5 (JavaScript 2009) 定义了一个新方法 Array.isArray()
:
Array.isArray(fruits);
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The isArray() Method</h2>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple"];
document.getElementById("demo").innerHTML = Array.isArray(fruits);
</script>
</body>
</html>
如果创建了对象,则 instanceof
运算符返回 true 通过给定的构造函数:
const fruits = ["Banana", "Orange", "Apple"];
fruits instanceof Array;
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The instanceof Operator</h2>
<p>The instanceof operator returns true when used on an array:</p>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple"];
document.getElementById("demo").innerHTML = fruits instanceof Array;
</script>
</body>
</html>
有关完整的数组参考,请访问我们的:
完整的 JavaScript 数组参考。
该参考包含所有数组的描述和示例 属性和方法。