JavaScript青少年简明教程:数组

news2024/9/9 4:23:53

JavaScript青少年简明教程:数组

JavaScript 的数组是用于存储多个值的有序集合。数组是最常用的数据结构之一,提供了多种方法来操作和管理集合中的元素。

JavaScript数组的特性:

1. 动态大小:与许多其他编程语言不同,JavaScript的数组不需要在声明时指定大小;数组的大小会根据需要动态调整。

2. 异质元素:JavaScript的数组可以包含不同类型的元素在同一个数组中。即一个数组中可以同时包含数字、字符串等。如:let mixedArray = [1, 'two', true, null, undefined, { name: 'object' }];

3. 基于0的索引:JavaScript数组的索引是从0开始的,即数组中的第一个元素索引是0,第二个元素索引是1,以此类推。

4. 数组方法:数组方法(Array Methods)是JavaScript中用于处理数组(Array)对象的一系列内置函数。这些方法可以对数组进行各种操作,例如添加、删除、查找、修改、排序和迭代等。JavaScript为数组提供了丰富的内建方法,如 .push() 添加元素,.pop() 移除最后一个元素,.shift() 移除第一个元素,.unshift() 在数组前添加元素,以及 .slice(), .splice(), .map(), .filter() 等多种处理和查询数组的方法。

数组是有序的集合,可以储存多个数据。例如:

const colors = ['red', 'green', 'blue'];
console.log(colors[0]); // 输出 'red'

数组长度

可用length 属性返回数组的长度(元素的个数)。例如:

let fruits = ['apple', 'banana', 'orange'];
console.log(fruits.length); // 3

创建数组

有几种方式可以创建数组:

1). 使用数组字面量

使用方括号 [] 创建数组。

const fruits = ['Apple', 'Banana', 'Cherry'];

字面量(Literal)指的是直接在代码中表示的固定值。它是数据类型的一个具体值,用于表示变量可以赋值的东西,如数字、字符串、布尔值等。字面量直观地展示了它们自身的值,并直接编写在代码中,而不需要进行任何计算或引用才能得到。

最常见和简单的创建数组的方法是使用数组字面量。

2) 使用 Array 构造函数

可以使用 Array 构造函数创建数组。Array 构造函数是一个内置对象,用于创建一个新的数组实例。当你使用 new Array() 来创建数组时,你实际上是在调用这个构造函数。

const fruits = new Array('Apple', 'Banana', 'Cherry');

访问数组元素

数组元素通过索引访问,索引从 0 开始。例如:

const fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits[0]); // Apple
console.log(fruits[1]); // Banana

修改数组元素

可以通过索引修改数组中的元素。例如

fruits[1] = 'Blueberry';
console.log(fruits); // ['Apple', 'Blueberry', 'Cherry']

数组遍历

有多种方式可以遍历数组,例如:

const fruits = ['Apple', 'Banana', 'Cherry'];
// for循环
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

// for...of循环
for (let fruit of fruits) {
  console.log(fruit);
}

// forEach方法
fruits.forEach(fruit => console.log(fruit));

JavaScript数组提供了多种方法来操作和管理集合中的元素。

添加、删除元素方法:

push()
push 方法在数组末尾添加一个或多个元素,并返回新的长度。
fruits.push('Durian');
console.log(fruits); // ['Apple', 'Blueberry', 'Cherry', 'Durian']

pop()
pop 方法从数组末尾移除最后一个元素,并返回该元素。
const lastFruit = fruits.pop();
console.log(lastFruit); // Durian
console.log(fruits); // ['Apple', 'Blueberry', 'Cherry']

unshift()
unshift 方法在数组开头添加一个或多个元素,并返回新的长度。
fruits.unshift('Orange');
console.log(fruits); // ['Orange', 'Apple', 'Blueberry', 'Cherry']

shift()
shift 方法从数组开头移除第一个元素,并返回该元素。
const firstFruit = fruits.shift();
console.log(firstFruit); // Orange
console.log(fruits); // ['Apple', 'Blueberry', 'Cherry']

查找数组元素方法:
find()
find 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
const cherry = fruits.find(fruit => fruit === 'Cherry');
console.log(cherry); // Cherry

findIndex()
findIndex 方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回 -1。
const cherryIndex = fruits.findIndex(fruit => fruit === 'Cherry');
console.log(cherryIndex); // 2

includes()
includes 方法确定数组是否包含某个元素,返回一个布尔值。
const hasBanana = fruits.includes('Banana');
console.log(hasBanana); // false

切片和连接方法:
concat()
concat 方法合并两个或多个数组,不改变现有数组,返回一个新数组。
const moreFruits = ['Durian', 'Elderberry'];
const combinedFruits = fruits.concat(moreFruits);
console.log(combinedFruits); // ['Apple', 'Blueberry', 'Cherry', 'Durian

slice()
slice 方法返回一个新的数组对象,这一对象是一个从开始到结束(不包括结束)选择的原数组的浅拷贝。原始数组不会被修改。
const someFruits = fruits.slice(1, 3);
console.log(someFruits); // ['Blueberry', 'Cherry']

splice()
splice 方法通过删除或替换现有元素或者添加新元素来修改数组的内容。它返回由删除的元素组成的数组。
// 删除元素
const removedFruits = fruits.splice(1, 2);
console.log(removedFruits); // ['Blueberry', 'Cherry']
console.log(fruits); // ['Apple']

// 添加元素
fruits.splice(1, 0, 'Banana', 'Cherry');
console.log(fruits); // ['Apple', 'Banana', 'Cherry']

join()
join 方法将数组的所有元素连接成一个字符串,元素是通过指定的分隔符进行分隔的。
const fruitString = fruits.join(', ');
console.log(fruitString); // 'Apple, Banana, Cherry'

其它常用方法:
reverse()
reverse 方法将数组中元素的位置颠倒,并返回该数组。该方法会改变原数组。
fruits.reverse();
console.log(fruits); // ['Cherry', 'Banana', 'Apple']

sort()
sort 方法对数组的元素进行排序,并返回排序后的数组。默认排序顺序是根据字符串 Unicode 码点。
fruits.sort();
console.log(fruits); // ['Apple', 'Banana', 'Cherry']

例、统计数组中正数、负数和零的个数

以下是一个完整的例子,演示如何在JavaScript中统计数组中正数、负数和零的个数:

let numbers = [1, -10, 20, 0, 5, -6, 7, 0, -2, 0];

let positiveCount = 0;
let negativeCount = 0;
let zeroCount = 0;

numbers.forEach(function(number) {
    if (number > 0) {
        positiveCount++;
    } else if (number < 0) {
        negativeCount++;
    } else {
        zeroCount++;
    }
});

console.log('Positive numbers:', positiveCount);
console.log('Negative numbers:', negativeCount);
console.log('Zeroes:', zeroCount);

稀疏数组

JavaScript支持稀疏数组,即数组中可以有“空隙”。

let arr = [1, , , 4];

空位表示该位置上没有任何值,它在数组的长度和索引计算中会被跳过。例如:

let arr = [1, , , 4];

for (let i = 0; i < arr.length; i++) {
  if (i in arr) {
    console.log("索引 " + i + " 的值为: " + arr[i]);
  } 
}

输出:

索引 0 的值为: 1
索引 3 的值为: 4

多维数组

JavaScript 允许数组包含其他数组。JavaScript 中的多维数组实际上是“数组的数组”。JavaScript 不直接支持真正的多维数组,但可以通过嵌套数组(即数组中的元素是数组)来创建多维数组的结构。例如:

//创建一个 2x3 的二维数组
let twoDArray = [
    [1, 2, 3],
    [4, 5, 6]
];

// 访问元素
console.log(twoDArray[0][1]); // 输出: 2

又如:

//创建一个 3x3x3 的三维数组
let threeDArray = [
    [[1, 2, 3], [4, 5, 6], [7, 8, 9]],
    [[10, 11, 12], [13, 14, 15], [16, 17, 18]],
    [[19, 20, 21], [22, 23, 24], [25, 26, 27]]
];

// 访问元素
console.log(threeDArray[1][1][1]); // 输出: 14

数组解构

数组解构是 ES6(ECMAScript 2015)引入的一个强大特性,它提供了一种简洁的语法来从数组中提取值并赋给变量。

数组解构是一个非常有用的特性,它可以使代码更加简洁和易读。它特别适用于处理函数返回多个值的情况,以及在特定场景下快速提取数组中的值。

基本样式:

const [a, b, c] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

这个例子展示了最基本的数组解构。它将数组的值按顺序赋给变量 a, b, 和 c。

可以跳过你不需要的值,如:

const [a, , c] = [1, 2, 3];
console.log(a); // 1
console.log(c); // 3

使用 ... 语法可以将剩余的值收集到一个新数组中,如:

const [a, ...rest] = [1, 2, 3, 4, 5];
console.log(a);    // 1
console.log(rest); // [2, 3, 4, 5]

可以为变量设置默认值,以防数组中没有对应的值,如:

const [a, b, c = 3] = [1, 2];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

数组解构提供了一种简洁的方式来交换变量,如:

let a = 1, b = 2;
[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1

函数参数中的解构

解构也可以用在函数参数中:

function printCoords([x, y]) {
    console.log(`X: ${x}, Y: ${y}`);
}
printCoords([10, 20]); // X: 10, Y: 20

解构与 for...of 循环

解构可以很好地与 for...of 循环配合使用:

const pairs = [[1, 2], [3, 4], [5, 6]];
for (const [a, b] of pairs) {
    console.log(`${a} + ${b} = ${a + b}`);
}

输出:

1 + 2 = 3
3 + 4 = 7
5 + 6 = 11

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1961123.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

3.5.4、查找和排序算法-排序算法下

快速排序 快速排序的基本思想是&#xff1a;通过一趟排序将待排的序列划分为独立的两个部分&#xff0c;其中一部分序列的元素均不大于另一部分记录的关键字&#xff0c;然后再分别对这两部分序列继续进行快速排序&#xff0c;以达到整个序列有序。 大致步骤如下&#xff1a;…

2024西安铁一中集训DAY27 ---- 模拟赛((bfs,dp) + 整体二分 + 线段树合并 + (扫描线 + 线段树))

文章目录 前言时间安排及成绩题解A. 倒水&#xff08;bfs dp&#xff09;B. 让他们连通&#xff08;整体二分 按秩合并并查集 / kruskal重构树&#xff09;C. 通信网络&#xff08;线段树合并 二分&#xff09;D. 3SUM&#xff08;扫描线 线段树&#xff09; 前言 T1没做出…

6万字,让你轻松上手的大模型 LangChain 框架

本文为我学习 LangChain 时对官方文档以及一系列资料进行一些总结&#xff5e;覆盖对Langchain的核心六大模块的理解与核心使用方法&#xff0c;全文篇幅较长&#xff0c;共计50000字&#xff0c;可先码住辅助用于学习Langchain。** 一、Langchain是什么&#xff1f; 如今各类…

FPGA实现LCD12864控制

目录 注意&#xff01; a) 本工程采用野火征途PRO开发板&#xff0c;外接LCD12864部件进行测试。 b) 有偿提供代码&#xff01;&#xff01;&#xff01;可以定制功能&#xff01;&#xff01;&#xff01;有需要私信&#xff01;&#xff01;&#xff01; c) 本文测试采用…

操作系统02

文章目录 Linux 内核 vs Windows 内核内核Linux 的设计MultiTaskSMPELFMonolithic Kernel **Windows 设计** 内存管理虚拟内存内存分段内存分页多级页表TLB 段页式内存管理Linux 内存布局内存分配的过程是怎样的&#xff1f;哪些内存可以被回收&#xff1f;回收内存带来的性能影…

中国RoHS新增4项邻苯二甲酸酯管控,电子电气产品GB/T 26572-2011测试

中国RoHS 新增4项邻苯类物质 01 资讯内容 2024年6月29日&#xff0c;国家市场监督管理总局&#xff08;国家标准化管理委员会&#xff09;发布了2024年第14号中国国家标准公告&#xff0c;批准了109项国家标准和4项国家标准修改单。 其中&#xff0c;中国RoHS配套的标准GB/T 2…

人工智能和机器学习2 (复旦大学计算机科学与技术实践工作站)python调用百度AI、获取token,并利用opencv绘制分析图,做简单判断

前言 在现代科技的推动下&#xff0c;人工智能&#xff08;AI&#xff09;和机器学习&#xff08;ML&#xff09;逐渐成为各行各业的重要工具。百度AI开放平台作为全球领先的人工智能服务平台&#xff0c;为开发者提供了包括语音、图像、自然语言处理&#xff08;NLP&#xff…

Python常用内置库介绍

Python作为一门强大且易学的编程语言&#xff0c;内置了许多功能强大的库&#xff0c;让开发者能够更加便捷地完成各种任务。本文中&#xff0c;我将详细介绍Python中常用的内置库。 math&#xff1a;提供数学函数&#xff0c;如三角函数、对数函数等。 示例&#xff1a;计算平…

Pycharm conda 虚拟环境添加失败---windows

版本&#xff1a; conda&#xff1a;23.5.2 pycharm:2023.1.3 解决方案&#xff1a; 已验证&#xff1a; 使用系统解释器选择python.exe进行本地添加&#xff08;ps:该方式不会显示conda名称&#xff09; conda路径使用conda info查询 还有一个是在查找解决方法的时候看到比…

05-ArcGIS For JavaScript-RenderNode后处理效果

05-ArcGIS For JavaScript-RenderNode后处理效果 综述代码解析代码实现颜色混合完整代码结果高亮处理完整代码结果 结语 综述 ArcGIS For JavaScript 4.9版本提供了很多优秀的功能&#xff0c;其中提供了RenderNode类&#xff0c;既可以支持第三方渲染引擎的植入&#xff0c;例…

PowerShell报错 about_Execution_Policies 解决方法

在用express创建项目中显示项目创建失败&#xff0c;报错如图所示&#xff0c;显示无法加载文件&#xff0c;按照提示地址https:/go.microsoft.com/fwlink/?LinkID135170 中的 about_Execution_Policies看到页面显示是PowerShell执行策略的问题。有问题评论区留言&#xff0c;…

前端构建工具Vite

前端主流框架Vue大家应该都耳熟能详&#xff0c;很多的公司和项目都在使用&#xff0c;以前前端构建工具用的比较多的是webpack&#xff0c;后面渐渐地出现了Vite&#xff0c;它受到大家的喜爱和使用&#xff0c;那大家是否也很想知道它的由来以及优势&#xff0c;为什么越来越…

用户提交订单业务

文章目录 概要整体架构流程技术细节小结 概要 我们通常指的是在电子商务或在线零售环境中&#xff0c;顾客通过互联网完成商品或服务购买的过程。随着互联网技术的发展和普及&#xff0c;越来越多的消费者选择在线购物&#xff0c;这不仅因为其便捷性&#xff0c;还因为它提供…

Linux网络-小结

作者介绍&#xff1a;简历上没有一个精通的运维工程师。希望大家多多关注我&#xff0c;我尽量把自己会的都分享给大家&#xff0c;下面的思维导图也是预计更新的内容和当前进度(不定时更新)。 Linux服务器作为一个常用的网络服务器&#xff0c;主要的作用就是向客户端提供网络…

MySQL基础练习题14-产品销售分析1

题目&#xff1a;获取 Sales 表中所有 sale_id 对应的 product_name 以及该产品的所有 year 和 price 。 准备数据 分析数据 题目&#xff1a;获取 Sales 表中所有 sale_id 对应的 product_name 以及该产品的所有 year 和 price 。 准备数据 ## 创建库 create database db;…

实战:深入了解JDBC和分享JDBCUtil

Java 数据库连接 (JDBC) 是一个功能强大的 API&#xff0c;它弥补了 Java 应用程序与关系数据库之间的差距。通过利用 JDBC&#xff0c;您可以无缝地与数据库交互以存储、检索和操作数据。但是&#xff0c;要有效使用 JDBC&#xff0c;需要遵循最佳实践&#xff0c;以确保代码的…

GitHub Revert Merge Commit的现象观察和对PR的思考

文章目录 前言Pull Request 为什么会是这样&#xff1f;Pull Request Branch的差异 ?Two Dot Diff和Three Dot Diff 老生常谈&#xff1a; Merge 和 Rebasegit mergegit rebase Revert Main分支中的一个Merge Commit现象描述解决方案: Revert Feature分支中的一个Merge Commi…

RocketMQ入门到精通

RocketMQ入门到精通 一、介绍1.对比2.基础概念 二、环境搭建1.下载rocket2.新增系统变量&#xff1a;ROCKETMQ_HOME3.启动命名服务 nameserver4.启动broker服务器5.安装可视面板6.手动创建Topic7.手动创建消费者组 三、使用Springboot实现消息的收发1.引入jar包2.配置yml文件3.…

【Python机器学习】朴素贝叶斯——使用朴素贝叶斯过滤垃圾邮件

使用朴素贝叶斯解决一些现实生活中的问题时&#xff0c;需要先从文本内容中得到字符串列表&#xff0c;然后生成词向量。 使用朴素贝叶斯对电子邮件进行分类的过程&#xff1a; 1、收集数据&#xff1a;提供文本文件 2、准备数据&#xff1a;将文本文件解析成词条向量 3、分析…