首页 > web前端 > js教程 > 理解 JavaScript 中的数组

理解 JavaScript 中的数组

Susan Sarandon
发布: 2024-12-21 19:48:21
原创
494 人浏览过

Understanding Arrays in JavaScript

JavaScript 中的数组

在 JavaScript 中,数组 是一种特殊类型的对象,用于存储有序的数据集合。数组可以保存不同数据类型的多个值,包括数字、字符串、对象,甚至其他数组。


1.创建数组

A.使用数组文字

创建数组最常见的方法是使用方括号 []。

示例

const fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]
登录后复制
登录后复制
登录后复制

B.使用 new Array() 构造函数

此方法创建一个空数组或具有指定元素的数组。

示例

const numbers = new Array(5); // Creates an array with 5 empty slots
console.log(numbers.length); // Output: 5
const colors = new Array("Red", "Green", "Blue");
console.log(colors); // Output: ["Red", "Green", "Blue"]
登录后复制
登录后复制

2.访问数组元素

使用从零开始的索引访问数组元素。

示例

const fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]
登录后复制
登录后复制
登录后复制
  • 更新元素
const numbers = new Array(5); // Creates an array with 5 empty slots
console.log(numbers.length); // Output: 5
const colors = new Array("Red", "Green", "Blue");
console.log(colors); // Output: ["Red", "Green", "Blue"]
登录后复制
登录后复制

3.常用数组方法

A.添加和删​​除元素

  • push():将一个元素添加到数组末尾。
const fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[0]); // Output: Apple
console.log(fruits[2]); // Output: Cherry
登录后复制
  • pop():删除最后一个元素。
fruits[1] = "Blueberry";
console.log(fruits); // Output: ["Apple", "Blueberry", "Cherry"]
登录后复制
  • unshift():在开头添加一个元素。
fruits.push("Mango");
console.log(fruits); // Output: ["Apple", "Banana", "Cherry", "Mango"]
登录后复制
  • shift():删除第一个元素。
fruits.pop();
console.log(fruits); // Output: ["Apple", "Banana"]
登录后复制

B.寻找元素

  • indexOf():查找元素的索引。
fruits.unshift("Strawberry");
console.log(fruits); // Output: ["Strawberry", "Apple", "Banana"]
登录后复制
  • includes():检查数组中是否存在元素。
fruits.shift();
console.log(fruits); // Output: ["Apple", "Banana"]
登录后复制

C.转换数组

  • map():通过转换每个元素来创建一个新数组。
console.log(fruits.indexOf("Banana")); // Output: 1
登录后复制
  • filter():使用通过测试的元素创建一个新数组。
console.log(fruits.includes("Cherry")); // Output: false
登录后复制
  • reduce():将数组缩减为单个值。
const numbers = [1, 2, 3];
const squared = numbers.map((num) => num ** 2);
console.log(squared); // Output: [1, 4, 9]
登录后复制

D.组合和切片数组

  • concat():组合两个或多个数组。
const evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log(evenNumbers); // Output: [2]
登录后复制
  • slice():返回数组的一部分。
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // Output: 6
登录后复制
  • splice():从数组中添加或删除元素。
const moreFruits = ["Peach", "Grape"];
const allFruits = fruits.concat(moreFruits);
console.log(allFruits); // Output: ["Apple", "Banana", "Peach", "Grape"]
登录后复制

4.迭代数组

  • for 循环
const sliced = allFruits.slice(1, 3);
console.log(sliced); // Output: ["Banana", "Peach"]
登录后复制
  • for...of 循环
allFruits.splice(1, 1, "Orange");
console.log(allFruits); // Output: ["Apple", "Orange", "Peach", "Grape"]
登录后复制
  • forEach() 方法
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
登录后复制

5.多维数组

数组可以包含其他数组,创建矩阵或多维结构。

示例

for (let fruit of fruits) {
  console.log(fruit);
}
登录后复制

6.数组排序和反转

  • sort():对数组进行就地排序。
fruits.forEach((fruit) => console.log(fruit));
登录后复制
  • reverse():反转元素的顺序。
const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];
console.log(matrix[1][2]); // Output: 6
登录后复制

7.数组解构

解构允许您将数组中的值提取到变量中。

示例

const fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]
登录后复制
登录后复制
登录后复制

8.总结

  • 数组用于在 JavaScript 中存储有序的数据集合。
  • 使用索引访问元素。
  • 使用push()、map()、filter()和reduce()等数组方法进行操作和转换。
  • 数组用途广泛,对于处理 JavaScript 中的动态数据集合至关重要。

嗨,我是 Abhay Singh Kathayat!
我是一名全栈开发人员,拥有前端和后端技术方面的专业知识。我使用各种编程语言和框架来构建高效、可扩展且用户友好的应用程序。
请随时通过我的商务电子邮件与我联系:kaashshorts28@gmail.com。

以上是理解 JavaScript 中的数组的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板