快捷搜索:  汽车  科技

在javascript里什么是数组(JavaScript基础之数组)

在javascript里什么是数组(JavaScript基础之数组)把数据存储在数组里面,是为了将来能使用的,所以要从里面把数据取出来。数据取值同样使用索引取值let scores = [59 70 10]; // 录入第4个和第5个学生的成绩 scores[3] = 99; scores[4] = 100; console.log(scores);获取数组元素学生的成绩我们已经可以存储到数组中了,那如何把存储到数据中的成绩获取出来计算总成绩呢?数组中的数据使用索引(下标)管理,数组中的每一个数据都有一个序号(索引),但是要记住数组中的序号(索引)是从0开始的。// 索引从0开始 数组名称[索引] = 新值;示例let scores = [59 70 10]; // 修改第一个数据 scores[0] = 65; // 修改最后一个数据 scores[2] = 60; console.log(scores);上面代码中,数组只有3个元素,最大

本章目标
  • 掌握数组的定义和使用
  • 掌握循环数组的方式
  • 掌握获取数组中元素个数的方法
本章任务
  • 能够计算班级所有学生的总成绩和平均成绩
  • 能够求数组中的最大值
  • 能够对数组排序
数组为什么要学习数组

之前学习的数据类型,只能存储一个值(比如:Number/String。我们想存储班级中所有学生的考试成绩,此时该如何存储?

数组的概念

所谓数组,就是将多个元素(通常是同一类型)按一定顺序排列放到一个集合中,那么这个集合我们就称之为数组。

数组的定义

数组是一个有序的列表,可以在数组中存放任意的数据,并且数组的长度可以动态地调整。

// 定义一个空的数组,数组的字面量 let arr = []; // 定义一个数组,存储5个学生的姓名 let names = ['刘备' '关羽' '赵云' '诸葛亮' '曹操']; // 定义了一个数组,存储5个学生的成绩 let scores = [60 89 100 55 70]; 数组存值

如果在给学生录入成绩的时候,输入错误,我们还可以更改学生的成绩。

数组中的数据使用索引(下标)管理,数组中的每一个数据都有一个序号(索引),但是要记住数组中的序号(索引)是从0开始的。

  • 语法

// 索引从0开始 数组名称[索引] = 新值;

  • 示例

let scores = [59 70 10]; // 修改第一个数据 scores[0] = 65; // 修改最后一个数据 scores[2] = 60; console.log(scores);

上面代码中,数组只有3个元素,最大的索引值为2。

如果班级里有5个学生的话,后两个学生的成绩该如何录入呢?

let scores = [59 70 10]; // 录入第4个和第5个学生的成绩 scores[3] = 99; scores[4] = 100; console.log(scores);获取数组元素

学生的成绩我们已经可以存储到数组中了,那如何把存储到数据中的成绩获取出来计算总成绩呢?

把数据存储在数组里面,是为了将来能使用的,所以要从里面把数据取出来。数据取值同样使用索引取值

  • 语法

数组名称[下标] // 下标又称为索引,数组的下标是从0开始的

  • 示例

let scores = [59 70 10]; // 获取第一个学生 console.log(scores[0]); // 计算总成绩 let sum = socres[0] scores[1] scores[2];

把 数组名称[索引]格式当成一个变量使用

在上面代码的基础上,如果打印索引是3的元素,结果会是什么呢?

let scores = [59 70 10]; console.log(scores[3]); // undefined

可以发现,打印数组中不存在的元素,和使用定义未赋值的变量效果是一样的,输出的结果都是 undefined。

遍历数组

在获取数组元素中求总成绩的时候,我们把数组中的元素一个一个取出来累加求和,之前的数组中只有3个人的成绩,如果数组中存储的是30个人或者300个人的成绩,这个时候该如何求总成绩呢?

这个时候可以使用循环的方式来解决。

let scores = [60 59 80 100]; let sum = 0; // 在遍历数组的时候经常使用 for 循环 for (let i = 0; i <= 3; i ) { sum = scores[i]; } console.log(sum);

注意:数组中总共有4个元素,在遍历数组的时候索引从0开始,循环到数组的最大索引。此时的最大索引值是3。

我们求一个班的成绩可以这样实现,只要找到数组的最大索引就可以遍历数组。如果要求每一个班级的学生总成绩该如何做呢?不同班级的人数是不同的。

我们只需要知道数组的长度(数组中的元素个数)就可以计算数组中的最大索引

  • 获取数组的元素个数
    • 数组名称.length

let scores = [60 59 80 100]; console.log(arr.length); // 4

获取到数组长度 数组.length,数组中的大索引值(最后一个索引值),只需要使用 数组.length - 1就可以获得,因为数组的索引是从0开始的。

let scores = [60 59 80 100]; let sum = 0; // 在遍历数组的时候经常使用 for 循环 for (let i = 0; i <= scores.length - 1; i ) { sum = scores[i]; } console.log(sum);

这里的条件还可以改成 i < scores.length

let scores = [60 59 80 100]; let sum = 0; // 在遍历数组的时候经常使用 for 循环 for (let i = 0; i < scores.length; i ) { sum = scores[i]; } console.log(sum);清空数组

let arr = ['red' 'green' 'blue']; arr = []; // or arr.length = 0;案例

  • 求一个数组中所有数字的总和和平均值
  • 求数组中所有数字的最大值
  • 求数组中最大值的索引
  • 通过 prompt 让用户输出5个学生的成绩,存储到数组中,并求总成绩和平均成绩
冒泡排序

在javascript里什么是数组(JavaScript基础之数组)(1)

根据如图所示,我们要排序一组数,首先可以比较相邻的两个数,如果第一个数大于第二个数则交换位置,这样两两比较的之后,经过第一轮(这组数中两两比较结束)就可以获得这组数中的最大的那一个。而两两比较的次数总共需要 length - 1次。

假设数组为 [4 3 2 1],第一轮比较过程如下:

  • 4 3 2 1 > 3 4 2 1
  • 3 4 2 1 > 3 2 4 1
  • 3 2 4 1 > 3 2 1 4

我们把上面的这段话翻译成代码的形式,如下:

let arr = [10 20 30 50]; // 循环数组,进行两两比较 for (let j = 0; j < arr.length - 1; j ) { // 两两比较,把大的数往后移动 if (arr[j] > arr[j 1]) { // 交换两个数的位置 let tmp = arr[j]; arr[j] = arr[j 1]; arr[j 1] = tmp; } } console.log(arr);

刚刚比较结束之后只找到到最大的数,排序并没有结束,还需要重复执行上面的代码,再找到倒数第二大的值、倒数第三大的值。如果数组中有 n 数,这个过程需要重复 n - 1 次。

假设数组为 [4 3 2 1],第一轮比较过程如下:

  • 4 3 2 1 > 3 4 2 1
  • 3 4 2 1 > 3 2 4 1
  • 3 2 4 1 > 3 2 1 4

上述是第一轮的过程,第二轮

  • 3 2 1 4 > 2 3 1 4
  • 2 3 1 4 > 2 1 3 4

第三轮

  • 2 1 3 4 > 1 2 3 4

如果数组中有4个数字,总共需要三轮循环。

代码实现如下:

let arr = [10 20 30 50]; // 控制比较的轮数 for (let i = 0; i < arr.length - 1; i ) { // 进行两两比较的循环 for (let j = 0; j < arr.length - 1; j ) { // 两两比较,把大的数往后移动 if (arr[j] > arr[j 1]) { // 交换两个数的位置 let tmp = arr[j]; arr[j] = arr[j 1]; arr[j 1] = tmp; } } } console.log(arr);

到此数组排序结束,但是这个内层循环,每轮比较的过程中都会循环 length - 1次,刚进过刚刚的拆解分析,我们可以得到如下结论:

  • 第一轮,找最大值,两两比较次数 length - 1
  • 第二乱,找倒数第二大的数(最大值已经确认),两两比较次数 length - 2
  • 第三轮,找倒数第三大的数(倒数第一、二大的数已经确认),两两比较次数 length - 3

对内层循环进行优化,arr.length - i - 1

let arr = [10 20 30 50]; // 控制比较的轮数 for (let i = 0; i < arr.length - 1; i ) { // 进行两两比较的循环 for (let j = 0; j < arr.length i - 1; j ) { // 两两比较,把大的数往后移动 if (arr[j] > arr[j 1]) { // 交换两个数的位置 let tmp = arr[j]; arr[j] = arr[j 1]; arr[j 1] = tmp; } } }

对外层循环进行优化,我们之前使用的是一组特殊的数字 [4 3 2 1],这组数就需要把每一轮的循环执行完,才能排序结束。

如果待排序的一组数是 [ 4 1 2 3 ],这组数只需要一轮循环即可排序完成,还有可能是 [ 4 3 1 2]。总之根据带排序的数组,外层循环有可能不需要完全循环完毕。

那外层循环多少次呢?这个不好确定。这里我们使用一个小技巧来优化外层循环。

如果内层循环中发生了交换,也就是排序还没有结束,这个时候外层循环要继续,如果某一轮循环中内层循环中不再交换两两元素的位置,我们就可以确认此时排序已经结束,跟着这个特点,我们来对代码进行优化。

let arr = [10 20 30 50]; // 控制比较的轮数 for (let i = 0; i < arr.length - 1; i ) { // 每一轮开始之前,假设排序结束 let flag = true; // 进行两两比较的循环 for (let j = 0; j < arr.length - 1 - i; j ) { // 两两比较,把大的数往后移动 if (arr[j] > arr[j 1]) { // 交换两个数的位置 let tmp = arr[j]; arr[j] = arr[j 1]; arr[j 1] = tmp; // 如果发生两两交换,则排序没有结束 flag = false; } } // 如果排序结束,跳出外层循环 if (flag) { break; } } console.log(arr);

参考:

  • https://github.com/TonyLuo/Article
  • https://algorithm-visualizer.org/brute-force/bubble-sort
补充:数组的构造函数

数组在 JavaScript 中还可以使用另一种方式创建,这个方式我们称为 : 构造函数

// 使用 构造函数 创建数组 let arr = new Array(); // 存储数据 arr[0] = 10; arr[1] = 20; console.log(arr);

也可以在创建的同时存储数据

let arr = new Array(10 20); console.log(arr);

但是要注意,如果只有一个数据,不要使用这个方式存储数据

let arr = new Array(10); console.log(arr); // 输出 [empty × 10]

这是因为,如果只给一个数字构造函数,它会认为你想要设置数组的长度,而不是要把数据存储在数组中。所以不能使用这个方式存储一个数字数据。如果非要存一个数据,使用别的方式存储。

作业
  • 求数组中元素最小值
    • 假设数组中的第一个元素是最小值
  • 翻转数组
    • 实现效果
      • 假设数组为 ['a' 'b' 'c' 'd']
      • 输出结果 ['d' 'c' 'b' 'a']
    • 实现思路
      • 倒序遍历原数组,初始值i = arr.length - 1,条件 i >= 0,i--
      • 给新数组中的每一个元素赋值,可以通过 length 属性作为索引
  • 将字符串数组用 | 或其他符号分割成字符串
    • 实现效果
      • 假设数组为 ['a' 'b' 'c' 'd']
      • 输出结果 a|b|c|d
    • 实现思路
      • 先取出数组中的第一个元素存储到变量 s 中
      • 从数组中的第二个元素开始遍历,在遍历到的元素前拼接分隔符,追加到变量s中
      • s = '|' arr[i]
  • 将1-100中3的倍数放入到一个数组中
  • 仿 siri 项目中实现求和的功能
    • 当输入1进行求和的时候,首先让用户输入,他要计算多少个数字的和
    • 再依次输入每个数字
    • 最后打印求和的结果

猜您喜欢: