文章来源于网上收集和自己原创，若侵害到您的权利，请您及时联系并删除

数组

知道什么是数组及其应用的场景，掌握数组声明及访问的语法。

1.数组是什么？

数组：(Array)是一种可以按顺序保存数据的数据类型

【为什么要数组】：
思考：如果我想保存一个班里所有同学的姓名怎么办？

使用场景：如果有多个数据可以用数组保存起来，然后放到一个变量中，管理非常方便。

2. 数组的基本使用

2.1 定义数组和数组单元

声明语法

let 数组名 = [数据1，数据2, ... ,数据n]

let arr = new Array(数据1，数据2, ... ,数据n)

<script>
  // 1. 语法，使用 [] 来定义一个空数组
  // 定义一个空数组，然后赋值给变量 classes
  // let classes = [];

  // 2. 定义非空数组
  let classes = ['小明', '小刚', '小红', '小丽', '小米']
</script>

通过 [] 定义数组，数据中可以存放真正的数据，如小明、小刚、小红等这些都是数组中的数据，我们这些数据称为数组单元，数组单元之间使用英文逗号分隔。

2.2 访问数组和数组索引

数组是按顺序保存，所以每个数据都有自己的编号
计算机中的编号从0开始，所以小明的编号为0，小刚编号为1，以此类推
在数组中，数据的编号也叫索引或下标
数组可以存储任意类型的数据

使用数组存放数据并不是最终目的，关键是能够随时的访问到数组中的数据（单元）。其实 JavaScript 为数组中的每一个数据单元都编了号，通过数据单元在数组中的编号便可以轻松访问到数组中的数据单元了。

我们将数据单元在数组中的编号称为索引值，也有人称其为下标。

索引值实际是按着数据单元在数组中的位置依次排列的，注意是从 0 开始的，如下图所示：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

观察上图可以数据单元【小明】对应的索引值为【0】，数据单元【小红】对应的索引值为【2】

<script>
  let classes = ['小明', '小刚', '小红', '小丽', '小米']
  
  // 1. 访问数组，语法格式为：变量名[索引值]
  document.write(classes[0]) // 结果为：小明
  document.write(classes[1]) // 结果为：小刚
  document.write(classes[4]) // 结果为：小米
  
  // 2. 通过索引值还可以为数组单重新赋值
  document.write(classes[3]) // 结果为：小丽
  // 重新为索引值为 3 的单元赋值
  classes[3] = '小小丽'
  document.wirte(classes[3]); // 结果为： 小小丽
</script>

2.3 数据单元值类型

数组做为数据的集合，它的单元值可以是任意数据类型

<script>
  // 6. 数组单值类型可以是任意数据类型

  // a) 数组单元值的类型为字符类型
  let list = ['HTML', 'CSS', 'JavaScript']
  // b) 数组单元值的类型为数值类型
  let scores = [78, 84, 70, 62, 75]
  // c) 混合多种类型
  let mixin = [true, 1, false, 'hello']
</script>

2.4 数组长度属性

重申一次，数组在 JavaScript 中并不是新的数据类型，它属于对象类型。

<script>
  // 定义一个数组
  let arr = ['html', 'css', 'javascript']
  // 数组对应着一个 length 属性，它的含义是获取数组的长度
  console.log(arr.length) // 3
</script>

一些术语

元素：数组中保存的每个数据都叫数组元素
下标：数组中数据的编号
长度：数组中数据的个数，通过数组的length属性获得

2.5 遍历数组（`重点`）

遍历输出数组里面的元素

用循环把数组中每个元素都访问到,一般会用for循环遍历

语法：

for(let i = 0;i < 数组名.length; i++){
    
    
	数据名[i]
}

let nums = [10,20,30,40,50]
for(let i = 0;i < nums.length; i++){
    
    
	document.write(nums[i])
}

练习：

数组求和
需求：求数组 [2,6,1,7, 4] 里面所有元素的和以及平均值
分析：
①：声明一个求和变量 sum。
②：遍历这个数组，把里面每个数组元素加到 sum 里面。
③：用求和变量 sum 除以数组的长度就可以得到数组的平均值。
数组求最大值和最小值
需求：求数组 [2,6,1,77,52,25,7] 中的最大值
分析：
①：声明一个保存最大元素的变量 max。
②：默认最大值可以取数组中的第一个元素。
③：遍历这个数组，把里面每个数组元素和 max 相比较。
④：如果这个数组元素大于max 就把这个数组元素存到 max 里面，否则继续下一轮比较。
⑤：最后输出这个 max
拓展：
自己求一下最小值

3. 二维数组

二维数组是数组中的数组

3.1 创建二维数组

3.1.1 直接初始化

全部元素的值都已知，可直接定义并初始化

// 用 new Array对象创建一个二维数组，且元素的值都已知
let arr1 = new Array(new Array(1,2,3,4),new Array(2,3,4,5),new Array(3,4,5,6));
console.log(arr1[1])	// 元素是一个数组
console.log(arr1[0][1])		// 元素是1



// 用字面量值[] 创建一个 3行3列 的二维数组，且元素的值都已知
let arr1 = [
	[1,2,3,4],
	[2,3,4,5],
	[3,4,5,6],
]
console.log(arr1[0])	// 元素是一个数组
console.log(arr1[1][2])		// 元素是5

3.1.2 循环创建

二维数组中元素的值是未知的，不能直接初始化二维数组（数组需要用户输入）

let row = 2,column = 3
let arr = []	// 声明一维数组
for(let i = 0; i < row; i++){
    
    
	arr[i] = [];
	for (let j = 0; j < column; j++){
    
    
		arr[i][j] = prompt("请输入第" + (i * column + j + 1) + "个数")
	}
}

console.log(arr)

3.2 二维数组的遍历


// 用 for循环求和
let arr = [
	[1,4,6,8],
	[23,5,4,7],
	[12,34,9,11],
]
let sum = 0
for(let i = 0; i < arr.length; i++){
    
    	// 遍历二维数组的每个元素
	for(let j = 0; j < arr.length; j++){
    
    	// 求二维数组的所有元素
		sum += arrr[i][j]
	}
}
console.log("二维数组：" + arr)	// 输出二维数组
console.log("二维数组中所有元素的和：" + sum)		// 输出元素之和


// 用 for...in语句求和
let arr2 = [
	[1,4,6,8],
	[23,5,4,7],
	[12,34,9,11],
]
let sum2 = 0
for(let i in arr2){
    
    	// 遍历二维数组的每个元素
	for(let j in arr2[i]){
    
    	// 求二维数组的所有元素
		sum2 += arrr2[i][j]
	}
}
console.log("二维数组：" + arr2)	// 输出二维数组
console.log("二维数组中所有元素的和：" + sum2)		// 输出元素之和

4. 操作数组

数组做为对象数据类型，不但有 length 属性可以使用，还提供了许多方法,数组本质是数据集合, 操作数据无非就是 增 删 改 查 语法:
在这里插入图片描述

push 动态向数组的尾部添加一个单元
unshit 动态向数组头部添加一个单元
pop 删除最后一个单元
shift 删除第一个单元
splice 动态删除任意单元

使用以上4个方法时，都是直接在原数组上进行操作，即成功调任何一个方法，原数组都跟着发生相应的改变。并且在添加或删除单元时 length 并不会发生错乱。

4.1 新增

利用push向数组添加元素(数据)

数组.push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度 (重点)

语法：

arr.push(元素1, ..., 元素n)

如：

let arr = ["red","green"]
arr.push("black")
console.log(arr)	// ["red","green","black"]

let arr = ["red","green"]
arr.push("black","yellow")
console.log(arr)	// ["red","green","black","yellow"]

arr.unshift(新增的内容) 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度

语法：

arr.unshift(元素1, ..., 元素n)

如：

let arr = ["red","green"]
arr.unshift("black")
console.log(arr)	// ["black","red","green"]

let arr = ["red","green"]
arr.unshift("black","yellow")
console.log(arr)	// ["black","yellow","red","green"]

总结

想要数组末尾增加数据元素利用那个方法？
arr.push()
可以添加一个或者多个数组元素
返回的是数组长度
想要数组开头增加数据元素利用那个方法？
arr.unshift()
可以添加一个或者多个数组元素
返回的是数组长度
重点记住那个？
arr.push()

案例
数组筛选
需求：将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组
分析：
①：声明一个新的数组用于存放新数据newArr
②：遍历原来的旧数组，找出大于等于 10 的元素
③：依次追加给新数组 newArr

案例
数组去0
需求：将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中的 0 去掉后，形成一个不包含 0 的新数组
分析：
①：声明一个新的数组用于存放新数据newArr
②：遍历原来的旧数组，找出不等于0的元素
③：依次追加给新数组 newArr

4.2 删除

能够删除数组元素(数据)

数组. pop() 方法从数组中删除最后一个元素，并返回该元素的值

语法

arr.pop()

如：

let arr = ["red","green"]
arr.pop()
console.log(arr)	// ["red"]

数组. shift() 方法从数组中删除第一个元素，并返回该元素的值

语法

arr.shift()

如：

let arr = ["red","green"]
arr.shift()
console.log(arr)	// ["green"]

案例
需求使用场景：

随机抽奖，中奖的用户就需要从数组里面删除，不允许重复抽奖
点击删除按钮，相关的数据会从商品数据中删除

后期课程我们会用到删除操作，特别是 splice

在这里插入图片描述
3. 数组. splice() 方法删除指定元素

语法：

arr.splice(start,deleteCount)

arr.splice(起始位置,删除几个元素)

解释：

start 起始位置:
指定修改的开始位置（从0计数）
deleteCount:
表示要移除的数组元素的个数可选的。如果省略则默认从指定的起始位置删除到最后

如：

let arr = ["red","green"]
arr.splice(0,1)
console.log(arr)	// ["green"]

总结

想要数组末尾删除1个数据元素利用那个方法？带参数吗？
arr.pop()
不带参数
返回值是删除的元素
想要数组开头删除1个数据元素利用那个方法？带参数吗？
arr.shift()
不带参数
返回值是删除的元素
想要指定删除数组元素用那个？开发常用吗？有那些使用场景？
arr.splice(起始位置, 删除的个数)
开发很常用，比如随机抽奖，比如删除指定商品等等

<script>
  // 定义一个数组
  let arr = ['html', 'css', 'javascript']

  // 1. push 动态向数组的尾部添加一个单元
  arr.push('Nodejs')
  console.log(arr)
  arr.push('Vue')

  // 2. unshit 动态向数组头部添加一个单元
  arr.unshift('VS Code')
  console.log(arr)

  // 3. splice 动态删除任意单元
  arr.splice(2, 1) // 从索引值为2的位置开始删除1个单元
  console.log(arr)

  // 4. pop 删除最后一个单元
  arr.pop()
  console.log(arr)

  // 5. shift 删除第一个单元
  arr.shift()
  console.log(arr)
</script>

5. 数组排序 - 冒泡排序

冒泡排序是一种简单的排序算法。
它重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。
这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。
比如数组 [2,3,1,4,5] 经过排序成为了 [1,2,3,4,5] 或者 [5,4,3,2,1]

分析：
在这里插入图片描述

数组. sort() 方法可以排序

let arr = [4, 2, 5, 1, 3]
// 1.升序排列写法
arr.sort(function (a, b) {
    
    
return a - b
})
console.log(arr) // [1, 2, 3, 4, 5]
// 降序排列写法
arr.sort(function (a, b) {
    
    
return b - a
})
console.log(arr) // [5, 4, 3, 2, 1]

6. 综合案例

根据数据生成柱形图
需求：用户输入四个季度的数据，可以生成柱形图
分析：

需要输入4次，所以可以把4个数据放到一个数组里面
利用循环，弹出4次框，同时存到数组里面
遍历改数组，根据数据生成4个柱形图，渲染打印到页面中
柱形图就是div盒子，设置宽度固定，高度是用户输入的数据
div里面包含显示的数字和第n季度

JavaScript -【第四周】

数组

1.数组是什么？

2. 数组的基本使用

2.1 定义数组和数组单元

2.2 访问数组和数组索引

2.3 数据单元值类型

2.4 数组长度属性

2.5 遍历数组（`重点`）

3. 二维数组

3.1 创建二维数组

3.1.1 直接初始化

3.1.2 循环创建

3.2 二维数组的遍历

4. 操作数组

4.1 新增

4.2 删除

5. 数组排序 - 冒泡排序

6. 综合案例

猜你喜欢

JavaScript -【第四周】

数组

1.数组是什么？

2. 数组的基本使用

2.1 定义数组和数组单元

2.2 访问数组和数组索引

2.3 数据单元值类型

2.4 数组长度属性

2.5 遍历数组（重点）

3. 二维数组

3.1 创建二维数组

3.1.1 直接初始化

3.1.2 循环创建

3.2 二维数组的遍历

4. 操作数组

4.1 新增

4.2 删除

5. 数组排序 - 冒泡排序

6. 综合案例

猜你喜欢

2.5 遍历数组（`重点`）