JS第三天

JS第三天"/>

JS第三天

循环嵌套

利用循环的知识来对比一个简单的天文知识，我们知道地球在自转的同时也在围绕太阳公转，如果把自转和公转都看成是循环的话，就相当于是循环中又嵌套了另一个循环。

实际上 JavaScript 中任何一种循环语句都支持循环的嵌套，如下代码所示：

基本语法：

for（初始化; 循环条件;变量计数） {for (初始化; 循环条件；变量计数）{//  要重复执行的代码}
}

例如：

// 1. 外面的循环 记录第n天 
for (let i = 1; i < 4; i++) {document.write(`第${i}天 <br>`)// 2. 里层的循环记录 几个单词for (let j = 1; j < 6; j++) {document.write(`记住第${j}个单词<br>`)}
}

记住，外层循环一次，内部循环会循环全部

数组

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

数组是什么？

数组：(Array) 是一种数据类型，属于引用数据类型

作用: 在单个变量名下存储多个数据

例如我要保存咱们班同学的姓名，使用数组非常方便

数组的基本使用

定义数组

<script>// 1. 语法，使用 [] 来定义一个空数组// 定义一个空数组，然后赋值给变量 classes// let classes = []// 2. 定义非空数组let classes = ['小明', '小刚', '小红', '小丽', '小米']
</script>

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

访问数组和数组索引

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

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

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

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

<script>// 数组： 可以单个变量下存储多个数据// 1. 声明数组let names = ['小明', '小刚', '小红', '小丽', '小米']// let names = ['小明', '小刚', true, '小丽', 1]console.log(names)// 1.1 数组是按照顺序来存储的，每个数据都有自己的编号// 1.2 编号是从0开始的， 0 1 2 3... 也称为 索引 或者 下标// 1.3 数组里面可以存放任意的数据类型// 2. 数组取值  数组名[下标]console.log(names[0])  // '小明'console.log(names[1])  // '小刚'console.log(names[2])  // '小红'console.log(names[3])  // '小丽'console.log(names[4])  // '小米'
</script>

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

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

遍历数组

遍历数组：把数组中每个数据都访问到

数组长度： 数组.length

<script>let arr = ['迪丽热巴', '古力娜扎', '佟丽丫丫', '玛尔扎哈', '哈尼克孜']// console.log(arr[0])// console.log(arr[1])// console.log(arr[2])// console.log(arr[3])// 遍历数组： 把数组里面的数据每个都会访问到// for (let i = 0; i < 4; i++) {//   // console.log(i)  数组名[索引号]//   console.log(arr[i])// }// 1. 数组的长度 数组.length // console.log(arr.length)  // 4for (let i = 0; i < arr.length; i++) {console.log(arr[i])}// 2. 数组里面的数据也称为 数组元素
</script>

操作数组

数组本质是数据集合, 操作数据无非就是 增 删 改 查 语法

查询和修改数组

查询：

语法：数组[索引]

返回值：如果查询不到则返回 undefined

修改：

语法：数组[索引] = 新值

返回值：如果下标不存在，则是新增一个数组元素，并修改了数组长度（尽量避免）

<script>// 1. 查询数组元素let arr = ['迪丽热巴', '古丽扎娜']console.log(arr[0]) //  '迪丽热巴'console.log(arr[1]) //  '古丽扎娜'console.log(arr[2]) //  undefined// 2. 修改数组元素   数组[索引] = 新值arr[1] = '佟丽丫丫'// console.log(arr)arr[3] = '古丽扎娜'  // 如果索引号不存在，则是增加数组元素 （不提倡）console.log(arr)console.log(arr.length)  // 4 修改了数组长度
</script>

新增

// 数组新增元素
// 1. 可以向数组的末尾新增1个或者多个数组元素 数组.push(元素1...元素n)
let arr = ['迪丽热巴']
// console.log(arr.push('佟丽丫丫'))  // 返回的是新数组的长度 2
// arr.push('佟丽丫丫', '古丽扎娜')
// console.log(arr)  // 修改原数组// 2. 可以向数组的开头增加1个或者多个数组元素 数组.unshift(元素1,...元素n)
// console.log(arr.unshift('佟丽丫丫'))  // 返回的是新数组的长度 2
arr.unshift('佟丽丫丫', '古丽扎娜')
console.log(arr) // 修改原数组

删除

<script>// 删除元素// 1. 删除数组中的最后一个元素  数组.pop()  修改原数组let arr = ['red', 'green']
// arr.pop()
// console.log(arr.pop())  // 返回的是被删除的元素
// console.log(arr)// 2. 删除数组中的第一个元素 数组.shift() 修改原数组的
arr.shift()
// console.log(arr.shift())  // 返回的是被删除的元素
console.log(arr)
</script>

数组splice方法

数组.splice() 方法 可以添加也可以删除数组元素

说明：可以从指定位置删除或者增加的数组元素，注意它修改原数组

splice(start,deleteCount, item1, item2...)

1. start 起始位置:

• 指定修改的开始位置（从0计数）

2. deleteCount 删除个数:

• 表示要移除的数组元素的个数

• 可选的。如果省略则默认从指定的起始位置删除到最后

3. item1, item2...

• 新增的元素

<script>// splice 删除和增加数组元素let arr = ['迪丽热巴', '古力娜扎', '佟丽丫丫', '玛尔扎哈']
// 1. splice 删除  数组.splice(起始位置, 删除几个)
// arr.splice(1, 1) // 记住起始位置是索引号，从0 开始数
// arr.splice(1) // 如果第二个参数（删除几个）省略了，则默认删除到最后
// console.log(arr)// 2. splice 增加  数组.splice(起始位置, 删除几个, 新增元素1,...新增元素n)
arr.splice(1, 0, '刘德华', 'pink老师')
// 2.1 注意如果是新增，则起始位置是目标位置的索引号， 删除几个（第二个参数）不能省略我们写为 0， 后面写新增的元素
console.log(arr)// 3. splice 不是替换pop shift  unshift push.  arr.splice(0, 1)
// 开头结尾找前面 pop shift  unshift push
// splice管中间
</script>