主页
  • 主页
  • 分类
  • 热文
  • 教程
  • 面试
  • 标签
JavaScript

JavaScript 基础

JavaScript 主页
JavaScript 概述
JavaScript 特性
JavaScript 启用
JavaScript 展示位置
JavaScript 语法
JavaScript hello_world
JavaScript console.log()
JavaScript 注释
JavaScript 变量
JavaScript let 语句
JavaScript 常量
JavaScript 数据类型
JavaScript 类型转换
JavaScript 严格模式
JavaScript 保留关键字

JavaScript 操作符

JavaScript 操作符
JavaScript 算术运算符
JavaScript 比较操作符
JavaScript 逻辑运算符
JavaScript 位运算符
JavaScript 赋值运算符
JavaScript 条件运算符
JavaScript typeof 运算符
JavaScript Nullish 合并运算符
JavaScript delete 运算符
JavaScript 逗号运算符
JavaScript 分组运算符
JavaScript Yield 运算符
JavaScript 扩展运算符
JavaScript 指数运算符
JavaScript 运算符优先级

JavaScript 控制流

JavaScript if...else 语句
JavaScript while 循环
JavaScript for 循环
JavaScript for...in 循环
JavaScript for...of 循环
JavaScript 循环控制
JavaScript break 语句
JavaScript continue 语句
JavaScript switch 语句
JavaScript 可迭代对象

JavaScript 函数

JavaScript 函数
JavaScript 函数表达式
JavaScript 函数参数和参数值
JavaScript 默认参数
JavaScript Function() 构造函数
JavaScript 函数提升
JavaScript 自执行函数
JavaScript 箭头函数
JavaScript 函数调用
JavaScript call() 方法
JavaScript apply() 方法
JavaScript bind() 方法
JavaScript 闭包
JavaScript 作用域
JavaScript 全局变量
JavaScript 智能函数参数

JavaScript 对象

JavaScript Number 对象
JavaScript Boolean 对象
JavaScript String 对象
JavaScript 数组对象
JavaScript 日期对象
JavaScript DataView 对象
JavaScript 处理程序
JavaScript Math 对象
JavaScript 正则表达式
JavaScript Symbol 类型
JavaScript Set 对象
JavaScript WeakSet 对象
JavaScript Map 对象
JavaScript WeakMap 对象
JavaScript 可迭代对象
JavaScript Reflect 对象
JavaScript TypedArray
JavaScript 模板字面量
JavaScript 标记模板

JavaScript 面向对象

JavaScript 对象
JavaScript 类
JavaScript 对象属性
JavaScript 对象方法
JavaScript 静态方法
JavaScript 显示对象
JavaScript 对象访问器属性
JavaScript 对象构造器
JavaScript 原型(Prototype)
JavaScript ES5 对象方法
JavaScript 封装
JavaScript 继承
JavaScript 抽象
JavaScript 多态
JavaScript 解构赋值
JavaScript 数组解构
JavaScript 嵌套解构
JavaScript 可选链
JavaScript 全局对象
JavaScript mixins
JavaScript 代理(Proxy)

JavaScript Cookies

JavaScript Cookies操作
JavaScript Cookie 属性
JavaScript 删除 Cookies

JavaScript 浏览器 BOM

JavaScript 浏览器对象模型(BOM)
JavaScript 窗口对象
JavaScript Document 对象
JavaScript 屏幕对象
JavaScript Window History 对象
JavaScript Navigator 对象
JavaScript Location 对象
JavaScript Console 对象

JavaScript Web APIs

JavaScript Web API
JavaScript History API
JavaScript 存储 API
JavaScript Forms API
JavaScript Worker API
JavaScript Fetch API
JavaScript 定位 API

JavaScript 事件

JavaScript 事件
JavaScript DOM 事件
JavaScript addEventListener()
JavaScript 鼠标事件
JavaScript 键盘事件
JavaScript 表单事件
JavaScript 窗口事件
JavaScript 事件委托
JavaScript 事件冒泡
JavaScript 事件捕获
JavaScript 自定义事件

JavaScript 错误处理

JavaScript 错误处理
JavaScript try-catch
JavaScript 调试
JavaScript 自定义错误
JavaScript 扩展错误

JavaScript 重要关键字

JavaScript this'关键字
JavaScript void 关键字
JavaScript new 关键字
JavaScript var 关键字

JavaScript HTML DOM

JavaScript HTML DOM
JavaScript DOM 方法
JavaScript 文档对象
JavaScript DOM 元素
JavaScript 文档表单
JavaScript 更改 HTML
JavaScript 更改 CSS
JavaScript DOM 动画
JavaScript DOM 导航
JavaScript DOM 集合
JavaScript 节点列表

JavaScript 杂项

JavaScript Ajax
JavaScript 异步迭代
JavaScript Atomics 对象
JavaScript 剩余参数
JavaScript 页面重定向
JavaScript 对话框
JavaScript 打印网页
JavaScript 表单验证
JavaScript 创建动画
JavaScript 多媒体
JavaScript 图像地图
JavaScript 浏览器兼容性
JavaScript JSON
JavaScript 多行字符串
JavaScript 浅拷贝
JavaScript 日期格式
JavaScript 获取日期方法
JavaScript 调用栈
JavaScript 引用类型
JavaScript 设置日期方法
JavaScript 模块
JavaScript IndexedDB
JavaScript clickjacking(点击劫持)
JavaScript 动态导入
JavaScript BigInt
JavaScript 柯里化(Currying)
JavaScript 图形库
JavaScript Blob
JavaScript Unicode
JavaScript 绘制图形
JavaScript 防抖
JavaScript 性能
JavaScript 编码规范

基础

JavaScript 主页
JavaScript 概述
JavaScript 特性
JavaScript 启用
JavaScript 展示位置
JavaScript 语法
JavaScript hello_world
JavaScript console.log()
JavaScript 注释
JavaScript 变量
JavaScript let 语句
JavaScript 常量
JavaScript 数据类型
JavaScript 类型转换
JavaScript 严格模式
JavaScript 保留关键字

操作符

JavaScript 操作符
JavaScript 算术运算符
JavaScript 比较操作符
JavaScript 逻辑运算符
JavaScript 位运算符
JavaScript 赋值运算符
JavaScript 条件运算符
JavaScript typeof 运算符
JavaScript Nullish 合并运算符
JavaScript delete 运算符
JavaScript 逗号运算符
JavaScript 分组运算符
JavaScript Yield 运算符
JavaScript 扩展运算符
JavaScript 指数运算符
JavaScript 运算符优先级

控制流

JavaScript if...else 语句
JavaScript while 循环
JavaScript for 循环
JavaScript for...in 循环
JavaScript for...of 循环
JavaScript 循环控制
JavaScript break 语句
JavaScript continue 语句
JavaScript switch 语句
JavaScript 可迭代对象

函数

JavaScript 函数
JavaScript 函数表达式
JavaScript 函数参数和参数值
JavaScript 默认参数
JavaScript Function() 构造函数
JavaScript 函数提升
JavaScript 自执行函数
JavaScript 箭头函数
JavaScript 函数调用
JavaScript call() 方法
JavaScript apply() 方法
JavaScript bind() 方法
JavaScript 闭包
JavaScript 作用域
JavaScript 全局变量
JavaScript 智能函数参数

对象

JavaScript Number 对象
JavaScript Boolean 对象
JavaScript String 对象
JavaScript 数组对象
JavaScript 日期对象
JavaScript DataView 对象
JavaScript 处理程序
JavaScript Math 对象
JavaScript 正则表达式
JavaScript Symbol 类型
JavaScript Set 对象
JavaScript WeakSet 对象
JavaScript Map 对象
JavaScript WeakMap 对象
JavaScript 可迭代对象
JavaScript Reflect 对象
JavaScript TypedArray
JavaScript 模板字面量
JavaScript 标记模板

面向对象

JavaScript 对象
JavaScript 类
JavaScript 对象属性
JavaScript 对象方法
JavaScript 静态方法
JavaScript 显示对象
JavaScript 对象访问器属性
JavaScript 对象构造器
JavaScript 原型(Prototype)
JavaScript ES5 对象方法
JavaScript 封装
JavaScript 继承
JavaScript 抽象
JavaScript 多态
JavaScript 解构赋值
JavaScript 数组解构
JavaScript 嵌套解构
JavaScript 可选链
JavaScript 全局对象
JavaScript mixins
JavaScript 代理(Proxy)

Cookies

JavaScript Cookies操作
JavaScript Cookie 属性
JavaScript 删除 Cookies

浏览器 BOM

JavaScript 浏览器对象模型(BOM)
JavaScript 窗口对象
JavaScript Document 对象
JavaScript 屏幕对象
JavaScript Window History 对象
JavaScript Navigator 对象
JavaScript Location 对象
JavaScript Console 对象

Web APIs

JavaScript Web API
JavaScript History API
JavaScript 存储 API
JavaScript Forms API
JavaScript Worker API
JavaScript Fetch API
JavaScript 定位 API

事件

JavaScript 事件
JavaScript DOM 事件
JavaScript addEventListener()
JavaScript 鼠标事件
JavaScript 键盘事件
JavaScript 表单事件
JavaScript 窗口事件
JavaScript 事件委托
JavaScript 事件冒泡
JavaScript 事件捕获
JavaScript 自定义事件

错误处理

JavaScript 错误处理
JavaScript try-catch
JavaScript 调试
JavaScript 自定义错误
JavaScript 扩展错误

重要关键字

JavaScript this'关键字
JavaScript void 关键字
JavaScript new 关键字
JavaScript var 关键字

HTML DOM

JavaScript HTML DOM
JavaScript DOM 方法
JavaScript 文档对象
JavaScript DOM 元素
JavaScript 文档表单
JavaScript 更改 HTML
JavaScript 更改 CSS
JavaScript DOM 动画
JavaScript DOM 导航
JavaScript DOM 集合
JavaScript 节点列表

杂项

JavaScript Ajax
JavaScript 异步迭代
JavaScript Atomics 对象
JavaScript 剩余参数
JavaScript 页面重定向
JavaScript 对话框
JavaScript 打印网页
JavaScript 表单验证
JavaScript 创建动画
JavaScript 多媒体
JavaScript 图像地图
JavaScript 浏览器兼容性
JavaScript JSON
JavaScript 多行字符串
JavaScript 浅拷贝
JavaScript 日期格式
JavaScript 获取日期方法
JavaScript 调用栈
JavaScript 引用类型
JavaScript 设置日期方法
JavaScript 模块
JavaScript IndexedDB
JavaScript clickjacking(点击劫持)
JavaScript 动态导入
JavaScript BigInt
JavaScript 柯里化(Currying)
JavaScript 图形库
JavaScript Blob
JavaScript Unicode
JavaScript 绘制图形
JavaScript 防抖
JavaScript 性能
JavaScript 编码规范

JavaScript 数组对象


上一章 下一章

JavaScript 的数组对象让你能够在一个单一的变量中存储多个值。数组用于存储一系列相同或不同数据类型的元素集合。JavaScript 数组是动态的,所以在定义数组时不需要指定数组的长度。JavaScript 数组的大小可以在创建后减少或增加。

语法

使用以下语法在 JavaScript 中创建数组对象:

const arr = new Array(val1, val2, val3, ..., valN)

参数

val1, val2, val3, ..., valN — 它接受多个值作为参数初始化数组。

返回值

它返回一个数组对象。

注意 — 当你向 Array() 构造函数传递单个数字参数时,它定义了一个包含未定义值的参数长度的数组。数组允许的最大长度是 4,294,967,295。

你也可以使用数组字面量在方括号内添加多个逗号分隔的元素来创建数组:

const fruits = [ "apple", "orange", "mango" ];

你可以使用序数来访问和设置数组中的值,如下所示:

  • fruits[0] 是第一个元素
  • fruits[1] 是第二个元素
  • fruits[2] 是第三个元素

JavaScript 数组参考

在 JavaScript 中,数组对象允许在一个单一的变量名下存储多个元素集合。它提供了各种方法和属性来对数组执行操作。以下是 Array 类的属性和方法列表。

JavaScript 数组属性

以下是一个数组对象的属性列表以及它们的描述:

序号 名称 描述
1 constructor 返回创建对象的数组函数的一个引用。
2 length 反映数组中的元素数量。

JavaScript 数组方法

以下是一个数组对象的方法列表以及它们的描述:

数组静态方法

这些方法是使用 Array 类本身调用的:

序号 名称 描述
1 from() 创建数组的浅拷贝。
2 isArray() 根据参数是否为数组返回布尔值。
3 of() 从多个参数创建数组。
数组实例方法

这些方法是使用 Array 类的实例调用的:

序号 名称 描述
1 at() 获取特定索引处的元素。
2 concat() 返回由这个数组与其他数组(和/或值)合并组成的新数组。
3 copyWithin() 将数组的一部分复制到同一数组的不同位置。
4 entries() 获取数组的每个条目。
5 every() 如果数组中的每个元素都满足提供的测试函数,则返回 true。
6 fill() 使用静态值填充数组。
7 filter() 创建一个新数组,其中包含对提供过滤函数返回 true 的所有此数组的元素。
8 find() 查找满足条件的元素。
9 findIndex() 查找满足条件的元素的索引。
10 findLast() 从最后查找满足条件的元素。
11 findLastIndex() 从最后查找满足条件的元素的索引。
12 flat() 扁平化数组。
13 flatMap() 扁平化数组后获取新数组。
14 forEach() 对数组中的每个元素调用函数。
15 includes() 如果数组包含特定元素则返回布尔值。
16 indexOf() 返回数组中等于指定值的第一个(最小)索引,如果没有找到则返回 -1。
17 join() 将数组的所有元素连接成一个字符串。
18 keys() 返回包含每个数组元素的键的数组迭代器。
19 lastIndexOf() 返回数组中等于指定值的最后一个(最大)索引,如果没有找到则返回 -1。
20 map() 创建一个新数组,其结果是通过在此数组的每个元素上调用提供的函数得出的。
21 pop() 从数组中移除最后一个元素并返回那个元素。
22 push() 向数组的末尾添加一个或多个元素并返回新数组的长度。
23 reduce() 同时对数组的两个值(从左到右)应用函数以将其减少为单个值。
24 reduceRight() 同时对数组的两个值(从右到左)应用函数以将其减少为单个值。
25 reverse() 反转数组中元素的顺序——第一个变成最后一个,最后一个变成第一个。
26 shift() 从数组中移除第一个元素并返回那个元素。
27 slice() 提取数组的一个部分并返回一个新数组。
28 some() 如果此数组中至少有一个元素满足提供的测试函数则返回 true。
29 toSorted() 按特定顺序对数组的元素进行排序。
30 sort() 对数组的元素进行排序。
31 splice() 向数组添加和/或移除元素。
32 toLocaleString() 将数组元素转换成字符串。
33 toReversed() 返回数组的反转。
34 toSpliced() 此方法返回一个新的数组,在给定索引处移除了某些元素和/或替换了元素。
35 toString() 返回代表数组及其元素的字符串。
36 unshift() 向数组的前端添加一个或多个元素并返回新数组的长度。
37 values() 获取包含每个数组索引的值的迭代器。
38 with() 此方法返回一个新的数组,其中在给定索引处的元素替换为给定的值。

JavaScript 数组对象基本示例

在下面的示例中,我们展示了 JavaScript 数组对象的基本方法和属性的使用:

示例(创建 JavaScript 数组对象)

在下面的示例中,数组 ‘strs’ 使用作为 Array() 构造函数参数传递的字符串值进行初始化。

‘cars’ 数组包含 20 个未定义的元素。如果你传递多个数值,它定义了一个包含这些元素的数组,但在将单个数值作为参数传递给 Array() 构造函数时需要小心。

<html>
<head>
   <title> JavaScript - Array() constructor </title>
</head>
<body>
   <p id="demo"> </p>
   <script>
      const output = document.getElementById("demo");

      let strs = new Array("Hello", "World!", "Tutorials Point");
      output.innerHTML += "strs ==> " + strs + "<br>";

      let cars = new Array(20);
      output.innerHTML += "cars ==> " + cars + "<br>";
   
</script>
</body>
</html>

输出:

strs ==> Hello,World!,Tutorials Point
cars ==> ,,,,,,,,,,,,,,,,,,,

示例(使用数组字面量创建数组)

在下面的示例中,我们创建了不同的数组。arr1 数组包含数字,arr2 数组包含字符串,arr3 数组包含布尔值。

<html>
<head>
   <title> JavaScript - Array literals </title>
</head>
<body>
   <p id="output"> </p>
   <script>
      const output = document.getElementById("output");

      const arr1 = [10, 40, 50, 60, 80, 90];  // 数字数组
      const arr2 = ["Hello", "Hi", "How", "are", "you?"]; // 字符串数组
      const arr3 = [true, false, true, true]; // 布尔值数组

      output.innerHTML += "arr1 ==>  " + arr1 + "<br>";
      output.innerHTML += "arr2 ==>  " + arr2 + "<br>";
      output.innerHTML += "arr3 ==>  " + arr3 + "<br>";
   
</script>
</body>
</html>

输出:

arr1 ==> 10,40,50,60,80,90
arr2 ==> Hello,Hi,How,are,you?
arr3 ==> true,false,true,true

访问 JavaScript 数组元素

数组索引从 0 开始。因此,你可以使用其索引来访问数组元素:

let number = arr[index]

在上述语法中,arr 是一个数组,而 index 是我们需要从中访问数组元素的数字。

JavaScript 数组操作示例

在下面的示例中,我们创建了一个数字数组,并从数组的第 0 和第 2 个索引处访问了元素。第 0 个索引处的元素是 1,第 2 个索引处的元素是 6。

<html>
<head>
   <title> JavaScript - 访问数组元素 </title>
</head>
<body>
   <p id="output"> </p>
   <script>
      const nums = [1, 5, 6, 8, 90];
      document.getElementById("output").innerHTML =
      "第 0 个索引处的元素是 : " + nums[0] + "<br>" +
      "第 2 个索引处的元素是 : " + nums[2];
   
</script>
</body>
</html>

输出:

第 0 个索引处的元素是 : 1
第 2 个索引处的元素是 : 6

JavaScript 数组长度

数组的 length 属性用于查找数组的长度。

let len = arr.length;

示例

在下面的示例中,length 属性返回 5,因为数组包含 5 个元素。

<html>
<head>
   <title> JavaScript - 数组长度 </title>
</head>
<body>
   <p id="output"> </p>
   <script>
      const nums = [1, 5, 6, 8, 90];
      document.getElementById("output").innerHTML = 
      "数组长度是 : " + nums.length;
   
</script>
</body>
</html>

输出:

数组长度是 : 5

向数组添加新元素

你可以使用 push() 方法在数组的末尾插入元素。另一种解决方案是在等于数组长度的索引处插入数组。

arr.push(ele)

或者,

arr[arr.length] = ele;

在上述语法中,ele 是要插入到数组中的新元素。这里,如果数组长度是 N,则数组包含从 0 到 N - 1 索引的元素。因此,我们可以在第 N 个索引处插入新元素。

示例

在下面的示例中,我们使用 push() 方法将 6 插入到数组中。同时,我们也使用了 length 属性将元素插入到末尾。

<html>
<body>
   <p id="output"> </p>
   <script>
      const output = document.getElementById("output");
      const nums = [1, 2, 3, 4, 5];
      nums.push(6); // 在末尾插入 6
      output.innerHTML += "更新后的数组是 : " + nums + "<br>";
      nums[nums.length] = 7; // 插入 7
      output.innerHTML += "更新后的数组是 : " + nums + "<br>"
   
</script>
</body>
</html>

输出:

更新后的数组是 : 1,2,3,4,5,6
更新后的数组是 : 1,2,3,4,5,6,7

更新 JavaScript 数组元素

要更新任何数组元素,可以访问数组索引并更改其值。

arr[index] = ele;

在上述语法中,index 是我们需要更新值的索引,用 ele 替换。

示例

在下面的示例中,我们在数组的第一个索引处更新了元素。

<html>
<body>
   <p id="output"> </p>
   <script>
      const nums = [1, 2, 3, 4, 5];
      nums[0] = 100; // 更新第一个元素
      document.getElementById("output").innerHTML = 
      "更新后的数组是 : " + nums;
   
</script>
</body>
</html>

输出:

更新后的数组是 : 100,2,3,4,5

遍历 JavaScript 数组

你可以使用循环遍历每个数组元素。然而,存在一些内置的方法来遍历数组,我们将在后面的章节中看到。

for (let p = 0; p < nums.length; p++) {
   // 使用 nums[p] 访问数组
}

示例

在下面的代码中,数组包含 5 个数字。我们使用 for 循环遍历数组并打印每个元素。

然而,while 和 do-while 循环也可以用来遍历数组。

<html>
<body>
   <p id="demo"> </p>
   <script>
      const output = document.getElementById("demo");
      const nums = [1, 2, 3, 4, 5];
      for (let p = 0; p < nums.length; p++) {
         output.innerHTML += "nums[" + p + "] ==> " + nums[p] + "<br>";
      }
   
</script>
</body>
</html>

输出:

nums[0] ==> 1
nums[1] ==> 2
nums[2] ==> 3
nums[3] ==> 4
nums[4] ==> 5
上一章 下一章
阅读号二维码

关注阅读号

联系二维码

联系我们

© 2024 Yoagoa. All rights reserved.

粤ICP备18007391号

站点地图