最适合网络开发者的网站

JS 教程

JS 首页 JS 简介 JS 去哪儿 JS 输出 JS 语句 JS 语法 JS 评论 JS 变量 JS 让 JS 常量 JS 运算符 JS 算术 JS 作业 JS 数据类型 JS 函数 JS 对象 JS 活动 JS 字符串 JS 字符串方法 JS 字符串搜索 JS 字符串模板 JS 数字 JS 数字方法 JS 数组 JS 数组方法 JS 数组排序 JS 数组迭代 JS 数组常量 JS 日期 JS 日期格式 JS 获取日期方法 JS 日期设置方法 JS 数学 JS 随机 JS 布尔值 JS 比较 JS 条件 JS 开关 JS 循环 JS 循环 JS 循环 JS 循环 JS 中断 JS 可迭代对象 JS 集 JS 地图 JS Typeof JS 类型转换 JS 按位 JS 正则表达式 JS 错误 JS 作用域 JS 提升 JS 严格模式 JS this 关键字 JS 箭头函数 JS 类 JS JSON JS 调试 JS 风格指南 JS 最佳实践 JS 错误 JS 性能 JS 保留字

JS 版本

JS 版本 JS 2009(ES5) JS 2015(ES6) 小学 2016 小学 2017 小学 2018 JS IE/Edge JS 历史

JS 对象

对象定义 对象属性 对象方法 对象显示 对象访问器 对象构造函数 对象原型 对象可迭代对象 对象集 对象映射 对象引用

JS 函数

函数定义 函数参数 函数调用 函数调用 功能应用 函数绑定 函数闭包

JS 类

课程简介 类继承 静态类

JS 异步

JS 回调 JS 异步 JS 承诺 JS 异步/等待

JS HTML DOM

DOM 简介 DOM 方法 DOM 文档 DOM 元素 DOM HTML DOM 表单 DOM CSS DOM 动画 DOM 事件 DOM 事件监听器 DOM 导航 DOM 节点 DOM 集合 DOM 节点列表

JS 浏览器 BOM

JS 窗口 JS 屏幕 JS 位置 JS 历史 JS 导航器 JS 弹出警告 JS 时机 JS Cookies

JS Web API

Web API 简介 Web 表单 API 网络历史记录 API Web 存储 API Web Worker API Web 获取 API 网络地理定位 API

JS AJAX

AJAX 简介 AJAX XMLHttp AJAX 请求 AJAX 响应 AJAX XML 文件 AJAX PHP AJAX ASP AJAX 数据库 AJAX 应用程序 AJAX 示例

JS JSON

JSON 简介 JSON 语法 JSON 与 XML JSON 数据类型 JSON 解析 JSON 字符串化 JSON 对象 JSON 数组 JSON 服务器 JSON 格式的 PHP JSON 的 HTML JSON JSONP

JS 与 jQuery

jQuery 选择器 jQuery HTML jQuery CSS jQuery DOM

JS 图形

JS 图形 JS 画布 JS Plotly JS Chart.js JS 谷歌图表 JS D3.js

JS 示例

JS 示例 JS HTML DOM JS HTML 输入 JS HTML 对象 JS HTML 事件 JS 浏览器 JS 编辑器 JS 练习 JS 测验 JS 证书

JS 参考

JavaScript 对象 HTML DOM 对象

JavaScript。W3Schools 英文版。初学者课程

尿素

JavaScript 数组

数组是一个特殊的变量,它可以保存多个值:

const cars = ["萨博", "沃尔沃", "宝马"];
亲自尝试 »

为什么要使用数组?

如果您有一个项目列表(例如,汽车名称列表),则将汽车存储在单个变量中可能如下所示:

让 car1 = "萨博";
让 car2 = "沃尔沃";
让 car3 = "宝马";

但是,如果你想循环遍历汽车并找到特定的一辆,该怎么办?如果你有的汽车不只是 3 辆,而是 300 辆,该怎么办?

解决方案是一个数组!

数组可以保存单个名称下的多个值,您可以通过引用索引号来访问这些值。


创建数组

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

句法:

常量 数组名称 = [项目1, 项目2, ...];      

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

学习更多关于 常量 本章中使用数组:JS 数组常量.

例子

const cars = ["萨博", "沃尔沃", "宝马"];
亲自尝试 »

空格和换行并不重要。声明可以跨越多行:

例子

const 汽车 = [
“萨博”
“沃尔沃”
“宝马”
];
亲自尝试 »

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

例子

const 汽车 = [];
汽车[0] =“萨博”;
汽车[1] = "沃尔沃";
汽车[2] = "宝马";
亲自尝试 »

使用 JavaScript 关键字 new

下面的示例也创建一个数组,并为其分配值:

例子

const cars = new Array("萨博", "沃尔沃", "宝马");
亲自尝试 »

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

无需使用 new Array().

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


访问数组元素

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

const cars = ["萨博", "沃尔沃", "宝马"];
让汽车 = 汽车[0];
亲自尝试 »

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

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


更改数组元素

此语句更改 cars:

汽车[0] = "欧宝";

例子

const cars = ["萨博", "沃尔沃", "宝马"];
汽车[0] = "欧宝";
亲自尝试 »

访问完整阵列

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

例子

const cars = ["萨博", "沃尔沃", "宝马"];
document.getElementById("demo").innerHTML = 汽车;
亲自尝试 »

数组是对象

数组是一种特殊类型的对象。 typeof JavaScript 中的运算符为数组返回“对象”。

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

数组使用 数字 访问其“元素”。在此示例中,person[0] 返回 John:

大批:

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

对象使用 名称 访问其“成员”。在此示例中,person.firstName 返回 John:

目的:

const person = {firstName:"John", lastName:"Doe", 年龄:46};
亲自尝试 »

数组元素可以是对象

JavaScript 变量可以是对象。数组是特殊的对象。

因此,您可以在同一个数组中拥有不同类型的变量。

数组中可以包含对象。数组中可以包含函数。数组中可以包含数组:

myArray[0] = 日期.现在;
myArray[1] = myFunction;
myArray[2] = myCars;

数组属性和方法

JavaScript 数组的真正优势在于内置的数组属性和方法:

cars.length // 返回元素的数量
cars.sort() // 对数组进行排序

数组方法将在下一章中介绍。


length 属性

length 数组的属性返回数组的长度(数组元素的数量)。

例子

const 水果 = ["香蕉", "橙子", "苹果", "芒果"];
让长度 = 水果.长度;
亲自尝试 »

length 属性总是比最高数组索引多一。


访问第一个数组元素

例子

const 水果 = ["香蕉", "橙子", "苹果", "芒果"];
让水果 = 水果[0];
亲自尝试 »

访问最后一个数组元素

例子

const 水果 = ["香蕉", "橙子", "苹果", "芒果"];
让水果 = 水果[水果.长度 - 1];
亲自尝试 »

循环数组元素

循环遍历数组的一种方法是使用 for 环形:

例子

const 水果 = ["香蕉", "橙子", "苹果", "芒果"];
让 fLen = 水果.长度;

让文本 = “<ul> “;
对于(设 i = 0;i &lt; fLen;i++){
文本 += “<li> “ + 水果[i] + “</li> “;
}
文本 += “</ul> “;
亲自尝试 »

您还可以使用 Array.forEach() 功能:

例子

const 水果 = ["香蕉", "橙子", "苹果", "芒果"];

让文本 = “<ul> “;
水果.forEach(myFunction);
文本 += “</ul> “;

函数 myFunction(值){
文本 += “<li> “ + 值 + ”</li> “;
}
亲自尝试 »

添加数组元素

向数组添加新元素的最简单方法是使用 push() 方法:

例子

const 水果 = ["香蕉", "橙子", "苹果"];
fruit.push("Lemon"); // 向 fruit 添加一个新元素 (Lemon)
亲自尝试 »

也可以使用以下方法将新元素添加到数组中 length 财产:

例子

const 水果 = ["香蕉", "橙子", "苹果"];
水果[水果.长度] = “柠檬”; // 将“柠檬”添加到水果中
亲自尝试 »

警告 !

添加具有高索引的元素可能会在数组中创建未定义的“洞”:

例子

const 水果 = ["香蕉", "橙子", "苹果"];
水果[6] = "柠檬"; // 在水果中创建未定义的“洞”
亲自尝试 »

关联数组

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

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

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

在 JavaScript 中, 数组 总是使用编号索引.  

例子

const 人 = [];
person[0] = "约翰";
人[1] = "Doe";
人[2] = 46;
person.length; // 将返回 3
person[0]; // 将返回“John”
亲自尝试 »

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

此后,一些数组方法和属性将产生 错误结果.

例子:

const 人 = [];
人["firstName"] = "约翰";
人["lastName"] = "Doe";
人["年龄"] = 46;
person.length; // 将返回 0
person[0]; // 将返回未定义
亲自尝试 »

数组和对象之间的区别

在 JavaScript 中, 数组 使用编号索引.  

在 JavaScript 中, 对象 使用命名索引.

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


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

  • JavaScript 不支持关联数组。
  • 你应该使用 对象 当你希望元素名称为字符串(文本).
  • 你应该使用 数组 当你希望元素名称为数字.

JavaScript 新数组()

JavaScript 有一个内置的数组构造函数 new Array().

但你可以安全地使用 [] 反而。

这两个不同的语句都创建了一个名为 points 的新空数组:

const points = new Array();
const 点 = [];

这两个不同的语句都创建一个包含 6 个数字的新数组:

const points = new Array(40, 100, 1, 5, 25, 10);
const 点 = [40, 100, 1, 5, 25, 10];
亲自尝试 »

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

// 创建一个包含三个元素的数组:
const points = new Array(40, 100, 1);
亲自尝试 »
// 创建一个包含两个元素的数组:
const points = new Array(40, 100);
亲自尝试 »
// 创建一个包含一个元素的数组???
const points = new Array(40);
亲自尝试 »

常见错误

const 点 = [40];

与以下内容不同:

const points = new Array(40);
// 创建一个包含一个元素的数组:
const 点 = [40];
亲自尝试 »
// 创建一个包含 40 个未定义元素的数组:
const points = new Array(40);
亲自尝试 »

如何识别数组

一个常见的问题是:如何知道一个变量是否是一个数组?

问题在于 JavaScript 运算符 typeof 返回“object":

const 水果 = ["香蕉", "橙子", "苹果"];
让类型 = 水果类型;
亲自尝试 »

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

解决方案 1:

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

Array.isArray(水果);
亲自尝试 »

解决方案 2:

instanceof 如果对象由给定的构造函数创建,则运算符返回 true:

const 水果 = ["香蕉", "橙子", "苹果"];

水果数组实例;
亲自尝试 »

完整数组参考

有关完整的 Array 参考,请访问:

完整的 JavaScript 数组参考.

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

通过练习测试自己

锻炼:

获取值“Volvo“ 来自 cars 大批。

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