数组

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

数组是什么？

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

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

数组的基本使用

定义数组和数组单元

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

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

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

访问数组和数组索引

使用数组存放数据并不是最终目的，关键是能够随时的访问到数组中的数据（单元）。其实 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>

数据单元值类型

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

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

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

数组长度属性

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

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

操作数组

基础方法

数组做为对象数据类型，不但有 length 属性可以使用，还提供了许多方法：

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

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

<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>

高阶方法

join方法用于把数组中的所有元素转换成一个字符串。数组元素是通过参数里面指定的分隔符进行分隔的，参数为空，则，分隔。

const arr = ['hello', 'world']
console.log(arr.join(' '))  // 'hello world'

forEach是一个非常常用的数组方法，用于遍历数组并对每个元素执行某个函数。可以有三个参数：

• currentValue 是当前正在处理的数组元素。
• index 是当前正在处理的数组元素的索引。
• array 是forEach被调用的数组本身。

const array = [1, 2, 3, 4, 5];  

array.forEach(function(value, index) {  
  console.log(`当前值：${value}, 索引：${index}`);  
});

map 遍历数组处理数据，返回新数组。map重点在于有返回值，forEach没有返回值。

const arr = ['red', 'blue', 'green']
const new = arr.map(function(value, index) {
    console.log(value)    // 数组元素
    console.log(index)  // 数组索引号
    return value + '颜色'
})
console.log(new) //['red颜色', 'blue颜色', 'green颜色']

reduce返回累计处理的结果，经常用于求和。

基本语法：arr.reduce(function(上一次值，当前值){}, 初始值)

const arr = [1, 2, 3]
// 没有初始值，默认为0
arr.reduce(function (prev, current){
    return prev + current
})   // 6

// 有初始值加上初始值
arr.reduce((prev, current) => prev + current, 10)  // 16