JS数组相关

数组介绍

• 数组是js中的一种复杂类型数据array
• 一组有序数据的列表
  • 私人解释：可以装载有序数据的“盒子”
• 数组中可以存储多个任意类型的数据
  • 注意：一般一个数组中存储的数据类型都是一致的

创建数组

1. 字面量创建
   • 语法：变量 = []
     • 得到一个空数组
   • 语法：变量 = [数据, 数据, 数据...]
     • 得到一个有数据的数组
       • 数组中每个数据之间通过逗号分隔
       • 注意：逗号之间没有数据则会产生空数据empty

var arr1 = []
var arr2 = ['a', 'b', 'c', 'd', 'e']
var arr3 = ['a', , 'b'] // 输出：['a', 空(empty), 'b']

2. 内置构造函数创建
   • 语法：new Array(数据)
     • 如果传入的数据是是一个正整数（包含0），则会创建一个空数据数组，但是具有长度（传入的值就是长度）
       • 如果传入的数据为数值类型且不是正整数（包含0），则会报错
       • 报错信息：Invalid array length
     • 传入其他内容则表示创建一个数组，传入的是数组数据
       • 可以传入多个数据
     • 不传参数得到空数组

var arr1 = new Array(5) // [empty × 5]
var arr2 = new Array('5') // ['5']
var arr3 = new Array() // 空数组
var arr6 = new Array(0) // 空数组
var arr4 = new Array(-1) // 报错：Invalid array length
var arr5 = new Array(5.1) // 报错：Invalid array length
var arr7 = new Array(1, 2, 3, 4) // [1, 2, 3, 4]

3. 静态方法of创建
   • 语法：Array.of(数值)
     • 无论传入什么类型（包含任何值）的数据，结果都是一个数组，数组数据为传入的数据
   • 与new Array()的区别是，如果只传递一个数值，则of方法得到的是只有一个数据的数组（传入的数值就是数组数据）

var arr1 = Array.of() // []
var arr2 = Array.of(10) // [10]
var arr3 = Array.of(-10) // [-10]
var arr4 = Array.of(10.1) // [10.1]
var arr5 = Array.of(10, 20, 30) // [10, 20, 30]

数组特性

• 数组：是一组有序数据的列表
  • 数组的有序指的是数据在数组中按照数据的下标排列
• 数组具有索引和长度特性
  1. 数组索引index特性：
     • 数组的索引取值：
       • 是从0开始的连续自然数0 1 2 3 ...
     • 数组的索引就是数组数据的下标
     • 数组的索引是可读可写属性
       1. 可读
          • 语法：数组[索引]
          • 返回值：索引对应的数组数据，如果索引不存在则返回undefined
            • 如果索引对应的数组数据没有值，则返回的也是undefined

       var arr = ['a', 'b', 'c', 'd', , 'e']
       console.log(arr[0]) // 'a'
       console.log(arr[1]) // 'b'
       console.log(arr[4]) // undefined
       console.log(arr[10]) // undefined
       

       2. 可写
          • 语法：数组[索引] = 值
          • 作用：
            • 如果数组对应的索引有数据，则是修改数据
            • 如果数组对应的索引没有数据，则是新增数据

       var arr = ['a', 'b', 'c']
       arr[0] = 'aaa' // 修改
       arr[3] = 'ddd' // 新增
       arr[6] = 'ggg' // 新增
       console.log(arr) // ['aaa', 'b', 'c', 'ddd', 空 × 2, 'ggg']
       

  2. 数组长度length特性：
     • 表示数组的数据个数
     • 也是一个可读可写的数组属性
       • 可读
         • 语法1：数组.length
         • 语法2：数组['length']
         • 返回值：以数值的形式返回数组中数据的个数
       • 可写
         • 语法：数组.length = 数值
           • 如果设置的数值与数组原长度一致，则数组没有变化
           • 如果设置的数值比数组原长度更小，则数组从后往前删除数据，直到长度与设置的数值一致
           • 如果设置的数值比数组原长度更大，则数组新增空数据empty，直到长度与设置的数值一致
           • 如果设置的数值为0，则清空数组数据
           • 如果设置的数值不能转换为正整数则报错

       var arr = ['a', 'b', 'c', 'd', 'e']
       
       // 读取
       console.log(arr.length) // 5
       console.log(arr['length']) // 5
       
       // 设置
       arr.length = 3
       console.log(arr) // ['a', 'b', 'c']
       arr.length = 7
       console.log(arr) // ['a', 'b', 'c', 空 × 4]
       arr.length = 0
       console.log(arr) // []
       

• 数组长度与数组索引的关系
  • 数组索引最大值 +1 就是数组长度
    • 数组长度 -1 就是数组索引最大值
  • 因为数组的索引和数组的长度都是可读可写属性
    • 所以当数组长度发生变化时，可能会导致数组的索引也发生变化
    • 所以当数组索引发生变化时，可能会导致数组的长度也发生变化

  var arr = ['a', 'b', 'c', 'd']
  
  // 根据数组的长度读取数组的最后一个数据
  var lastIndex = arr.length - 1
  console.log(arr[lastIndex]) // 'd'
  console.log(arr[arr.length - 1]) // 'd'
  
  // 利用数组长度动态给数组最后追加一个数据
  arr[arr.length] = 'e'
  arr[arr.length] = 'f'
  console.log(arr) // ['a', 'b', 'c', 'd', 'e', 'f']
  

• 利用数组长度及索引特性，使用for循环遍历数组
  • 遍历数组：逐个获取数组数据
    • 数组索引是由0开始的连续自然数（一组有规律的数字）
    • 数组索引的最大值是数组长度 -1

  for (var i = 0; i < 数组.length; i++) {
      // i表示数组索引
      // 数组[i]表示：i索引对应的数据
      console.log(i, '---', 数组[i])
  }
  

  // 可以使用for-in语法遍历数组，但是一般很少使用
  for (var k in 数组) {
      console.log(typeof k) // 'string'
      console.log(k, '---', 数组[k])
  }
  

• 扩展：
  • 数组[变量] = 值
  • 会尝试将变量的值隐式转换为整数，如果可以转换为正整数，则作为数组的索引使用
    • 如果不能转换为正整数则会当作数组的普通属性使用（添加一个键值对数据）

  var arr = ['a', 'b', 'c']
  
  // 此处将'2'转换为整数2当做索引使用了
  arr['2'] = 'ttt'
  console.log(arr) // ['a', 'b', 'ttt']
  
  arr['5.1'] = 'ttt'
  arr[5.1] = 'qqq'
  arr[-5] = 'qqq'
  console.log(arr) // ['a', 'b', 'ttt', 5.1: 'qqq', -5: 'qqq']
  

数组塌陷

• 在循环删除数组数据时
  • 删除数组数据后，数组数据的索引会发生变化
  • 不便于后续的循环
• 解决方案：
  1. 正序遍历数组时，在删除数组数据后将循环变量的值–
  2. 倒序遍历数组不会有问题

// 删除arr数组中所有的3
var arr = [1, 2, 3, 3, 3, 3, 4];

// 方案1
for (var i = 0; i < arr.length; i++) {
    if (arr[i] === 3) {
        arr.splice(i, 1);
        i--;
    }
}
console.log(arr); // [1, 2, 4]

// 方案2
for (var i = arr.length - 1; i >= 0; i--) {
    if (arr[i] === 3) arr.splice(i, 1);
}
console.log(arr); // [1, 2, 4]