码农教程 - 一技在手,衣食无忧! tools

目录

JavaScript 数组

❮ 上一节 下一节 ❯

数组是一种特殊的变量，它可以保存多个值：

const cars = ["Saab", "Volvo", "BMW"];
亲自试一试 »

为什么使用数组？

如果您有一个项目列表（例如，汽车名称列表），则将汽车存储在单个变量中可能如下所示：

let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";

但是，如果您想循环浏览汽车并找到特定的一辆，该怎么办？如果您没有 3 辆车，而是 300 辆怎么办？

解决方案是数组！

数组可以在一个名称下保存多个值，并且您可以通过引用索引号来访问这些值。

创建数组

使用数组文字是创建 JavaScript 数组的最简单方法。

语法：

const array_name = [ item1, item2, ...];      

使用以下方式声明数组是一种常见的做法const关键字。

学习更多关于const本章中的数组：JS 数组常量。

示例

const cars = ["Saab", "Volvo", "BMW"];
亲自试一试 »

空格和换行符并不重要。一个声明可以跨越多行：

示例

const cars = [
  "Saab",
  "Volvo",
  "BMW"
];
亲自试一试 »

您还可以创建一个数组，然后提供元素：

示例

const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";
亲自试一试 »

使用 JavaScript 关键字 new

以下示例还创建一个数组，并为其赋值：

示例

const cars = new Array("Saab", "Volvo", "BMW");
亲自试一试 »

上面的两个例子的作用完全相同。

没有必要使用new Array()。

为了简单性、可读性和执行速度，请使用数组文字方法。

访问数组元素

您可以通过引用来访问数组元素索引号：

const cars = ["Saab", "Volvo", "BMW"];
let car = cars[0];
亲自试一试 »

笔记：数组索引从 0 开始。

[0] 是第一个元素。 [1] 是第二个元素。

更改数组元素

该语句更改了第一个元素的值cars：

cars[0] = "Opel";

示例

const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
亲自试一试 »

将数组转换为字符串

JavaScript 方法toString()将数组转换为一串（逗号分隔）数组值。

示例

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

结果：

Banana,Orange,Apple,Mango
亲自试一试 »

访问完整数组

使用 JavaScript，可以通过引用数组名称来访问完整数组：

示例

const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
亲自试一试 »

数组是对象

数组是一种特殊类型的对象。这typeofJavaScript 中的运算符对于数组返回"object"。

但是，JavaScript 数组最好被描述为数组。

数组使用数字访问其"elements"。在这个例子中，person[0]返回 John：

数组：

const person = ["John", "Doe", 46];
亲自试一试 »

对象使用名称访问其"members"。在这个例子中，person.firstName返回 John：

目的：

const person = {firstName:"John", lastName:"Doe", age:46};
亲自试一试 »

数组元素可以是对象

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;
亲自试一试 »

这个length属性始终比最高数组索引大一。

访问第一个数组元素

示例

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[0];
亲自试一试 »

访问最后一个数组元素

示例

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[fruits.length - 1];
亲自试一试 »

循环数组元素

循环数组的一种方法是使用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>";
亲自试一试 »

您还可以使用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");  // Adds a new element (Lemon) to fruits
亲自试一试 »

也可以使用以下命令将新元素添加到数组中length属性：

示例

const fruits = ["Banana", "Orange", "Apple"];
fruits[fruits.length] = "Lemon";  // Adds "Lemon" to fruits
亲自试一试 »

警告 ！

添加具有高索引的元素可能会在数组中创建未定义的 "holes"：

示例

const fruits = ["Banana", "Orange", "Apple"];
fruits[6] = "Lemon";  // Creates undefined "holes" in fruits
亲自试一试 »

关联数组

许多编程语言支持具有命名索引的数组。

具有命名索引的数组称为关联数组（或哈希）。

JavaScript 确实如此不是支持具有命名索引的数组。

在 JavaScript 中，数组总是使用编号索引。

示例

const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length;    // Will return 3
person[0];        // Will return "John"
亲自试一试 »

警告 ！！
如果使用命名索引，JavaScript 会将数组重新定义为对象。

之后，一些数组方法和属性将产生结果不正确。

例子：

const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length;     // Will return 0
person[0];         // Will return undefined
亲自试一试 »

数组和对象之间的区别

在 JavaScript 中，数组使用编号索引。

在 JavaScript 中，物体使用命名索引。

数组是一种特殊的对象，具有编号索引。

何时使用数组。何时使用对象。

  • JavaScript 不支持关联数组。
  • 你应该使用物体当你想要元素名称时字符串（文本）。
  • 你应该使用数组当你想要元素名称时数字。

JavaScript new Array()

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];
亲自试一试 »

这个new关键字可能会产生一些意想不到的结果：

// Create an array with three elements:
const points = new Array(40, 100, 1);
亲自试一试 »
// Create an array with two elements:
const points = new Array(40, 100);
亲自试一试 »
// Create an array with one element ???
const points = new Array(40);  
亲自试一试 »

一个常见的错误

const points = [40];

不等于：

const points = new Array(40);
// Create an array with one element:
const points = [40];
亲自试一试 »
// Create an array with 40 undefined elements:
const points = new Array(40);  
亲自试一试 »

如何识别数组

一个常见的问题是：我如何知道变量是否是数组？

问题是 JavaScript 运算符typeof返回“object”：

const fruits = ["Banana", "Orange", "Apple"];
let type = typeof fruits;
亲自试一试 »

typeof 运算符返回对象，因为 JavaScript 数组是一个对象。

解决方案一：

为了解决这个问题 ECMAScript 5 (JavaScript 2009) 定义了一个新方法Array.isArray()：

Array.isArray(fruits);
亲自试一试 »

解决方案2：

这个instanceof如果对象是由给定构造函数创建的，则运算符返回 true：

const fruits = ["Banana", "Orange", "Apple"];

fruits instanceof Array;
亲自试一试 »

完整的数组参考

有关完整的数组参考，请访问我们的：

完整的 JavaScript 数组参考.

该参考包含所有数组属性和方法的描述和示例。

通过练习测试一下

练习:

获取值”Volvo“ 来自cars数组。

const cars = ["Saab", "Volvo", "BMW"];
let x = ;

开始练习

❮ 上一节 下一节 ❯