Javascript——数组数据类型（Array）

• 认识数组

  数组是使用一个单独的变量名来存储一系列的值

• 数组的创建

  • 字面量创建方式：var 数组名 = []
  • 内置构造函数创建方式：var 数组名 = new Array()

• 两种创建数组方式的区别

  • 字面量创建方式，在[]中直接书写数据即可，多个数据时，使用,进行分隔
  • 内置构造函数创建方式，new Array()时，表示创建一个空数组，new Array(正整数)时，表示设置数组的长度，new Array(数据1,数据2,···)时，表示数组中存入的数据

• 数组的length属性

  • 数组的length属性表示一个数组的长度，可通过length属性获取和设置数组的长度
  • 当数组原来的长度比设置后的长度小时，后面的数组将被删除
  • 当数组的数据添加比length+1或+n位置时，中间位置索引会使用空补齐
  • 伪数组也可以使用length属性

  // 获取一个数组的长度
  var lenth = 数组名.length
  // 设置一个数组的长度
  数组名.length = 整数

• 数组数据的排列方式

  • 数组按照索引进行排列，索引从 0 开始，依次递增，最后一位数组的索引为 数组名.length - 1，
  • 通过数组名[索引]可获取或修改对应索引上的数据，如果索引位置没有数据则得到undefined，修改时，如果索引位置大于length+1时，中间位置用空补齐

• 遍历数组数据

  • 遍历方式一：

  var arr=[1,2,3,4,5,6,7,8,9]
  for(var i=0;i<arr.length;i++){
    console.log(arr[i])
  }

  • 遍历方式二：

  // key变量表示一个数组所在的索引
  var arr=[1,2,3,4,5,6,7,8,9]
  for(var key in arr){
    console.log(arr[key])
  }

• 数组常用的操作方法

• 伪数组无法使用数组的操作方法

• 四类基本操作方法

  1. 在原有数组的尾部进行添加数据

  语法：数组名.push(数据1,数据2,···)
  返回值：添加数据后数组的新长度
  使用：`arr.push(1,2,3)

  2. 删除原有数组的最后一个数据

  语法：`数组名.pop()`
  返回值：被删除的那个数据
  使用：`arr.pop()` 

  3. 在原有数组的头部进行添加数据

  语法：`数组名.unshift(数据1,数据2,···)`
  返回值：添加数据后数组的新长度
  使用：`arr.unshift(1,2,3)`

  4. 删除原有数组的第一个数据

  语法：`数组名.shift()`
  返回值：被删除的那个数据
  使用：`arr.shift()`

• ES 3.0 操作方法

  1. 数组数据反转

  语法：数组名.reverse()
  返回值：数据反转后的数组
  使用：arr.reverse()

  2. 数组数据排序

    语法①：数组名.sort()
    排序方式：以每个数据中每一位的ASCII码进行排序
    返回值：排序后的数组
    使用：arr.sort()
  
    语法②：数组名.sort(function(a,b){return a-b})
    排序方式：将数据进行升序排列
    返回值：排序后的数组
    使用：arr.sort(function(a,b){return a-b})
  
    语法③：数组名.sort(function(a,b){return b-a})
    排序方式：将数据进行降序排列
    返回值：排序后的数组
    使用：arr.sort(function(a,b){return b-a})

  3. 截取数组数据

    语法①：数组名.splice(开始索引, 截取个数)
    参数：参数二不写表示从开始索引截取到数组末尾
    返回值：截取的那一段数据的数组
    使用：arr.splice(0,5)
  
    语法②：数组名.splice(开始索引, 截取个数, 数据1, 数据2···)
    参数：从都三个参数为对截取区间的数据进行修改
    返回值：截取的那一段数据的数组
    使用：arr.splice(0,1,1)

  4. 在原数组末尾进行追加数据

    语法：数组名.concat(数组, 数据···)
    参数：参数可以是一个数组，也可以是多个数据
    返回值：追加数据后的数组
    使用：arr.concat(0,1,1,arr2)

  5. 获取数组中某一段数据

    语法：数组名.slice(开始索引, 结束索引)
    参数：参数1不写表示从数组开头位置开始，参数2不写表示到数组末尾结束，参数写负数表示从 length + 负整数 的位置，区间数据包括开始，不包括结束
    返回值：获取区间数据的数组
    使用：arr.slice(0,5)

  6. 将数组内的数据使用符号进行拼接

    语法：数组名.join('连接符号')
    参数：当参数为空时，默认使用逗号进行拼接
    返回值：数组数据拼接后的字符串内容
    使用：arr.join('-')

• ES 5.0 操作方法

  1. 从数组开头向末尾进行查找指定数据所在的索引位置
     找到第一个数据后不再继续向后查找，下一次继续从0索引进行开始查找

    语法①：数组名.indexOf(数据)
    返回值：数据存在返回所在的索引，数据不存在返回 -1
    使用：arr.indexOf(120)
  
    语法②：数组名.indexOf(数据, 开始查找索引)
    返回值：数据存在返回所在的索引，数据不存在返回 -1
    使用：arr.indexOf(120,5)

  2. 从数组的末尾向前进行查找指定数据所在的索引位置
     找到第一个数据后不再继续向后查找，下一次继续从0索引进行开始查找

    找到第一个数据后不再继续向后查找，下一次继续从0索引进行开始查找
    语法①：数组名.indexOf(数据)
    返回值：数据存在返回所在的索引，数据不存在返回 -1
    使用：arr.indexOf(120)
  
    语法②：数组名.indexOf(数据, 开始查找索引)
    返回值：数据存在返回所在的索引，数据不存在返回 -1
    使用：arr.indexOf(120,5)

  3. 遍历数组方法：用于替代 for 语句循环遍历数组

    语法：数组名.forEach(function(item,index, arr){ 执行代码 })
    参数：item参数表示数组中每一个数组，index参数表示数组中每一个 item 的下标(选填参数)，arr参数表示原始数组(选填参数)
    返回值：无返回值
    使用：arr.forEach(function(item,index,arr){
            console.log(item,index,arr)
        })

  4. 数组数据的映射：将原数组数据复制一份到一个新数组中

    语法：数组名.map(function(item,index, arr){ 执行代码 })
    参数：item参数表示数组中每一个数组，index参数表示数组中每一个 item 的下标(选填参数)，arr参数表示原始数组(选填参数)
    返回值：与原数组内容相同的一个新数组
    使用：var arr2 = arr.map(function(item,index,arr){
            return item
        })

  5. 数组数据过滤器：不满足条件的数据会被过滤掉

    语法：数组名.filter(function(item,index, arr){ 执行代码 })
    参数：item参数表示数组中每一个数组，index参数表示数组中每一个 item 的下标(选填参数)，arr参数表示原始数组(选填参数)
    返回值：存储满足条件的数据的一个新数组
    使用：var arr2 = arr.filter(function(item,index,arr){
            return item >120
        })

  6. 判断数组内数据是否全部满足条件

    语法：数组名.every(function(item,index,arr){ 执行代码 })
    参数：item参数表示数组中每一个数组，index参数表示数组中每一个 item 的下标(选填参数)，arr参数表示原始数组(选填参数)
    返回值：数组中数据全部满足条件返回 true，有任意数据不满足返回 false
    使用：var res = arr.every(function(item,index,arr){
            return item >120
        })

  7. 判断数组中是否存在满足条件的数据

  语法：数组名.some(function(item,index,arr){ 执行代码 })
    参数：item参数表示数组中每一个数组，index参数表示数组中每一个 item 的下标(选填参数)，arr参数表示原始数组(选填参数)
    返回值：数组中数据中任意满足条件返回 true，有全部数据不满足返回 false
    使用：var res = arr.some(function(item,index,arr){
            return item >10000
        })

• ES 6.0 操作语法

  1. 将数组中一部分数据替换另一部分数据

    语法：数组名.copyWithin(填充目标位置, 填充内容开始位置, 填充内容结束位置)
    参数：参数一表示开始被替换的位置，参数二表示当作替换内容开始位置(默认为0)，参数三表示当作替换内容结束位置(默认为数组末尾)
    返回值：进行替换内容后的新数组
    使用：var arr2 = arr.copyWithin(2,5,8)

  2. 数组内容填充

    语法：数组名.fill(填充内容, 填充开始位置, 填充结束位置)
    参数：只写一个参数时，表示全部进行填充,参数三不写时表示填充至数组末尾
    注意点：数组必须有长度
    返回值：填充好内容后的数组
    使用：arr.fill(2,5,8)

  3. 判断一个数据是否在数组中

    语法：数组名.includes(数据)
    返回值：数组中存在该数据返回 true ，数组中不存在该数据返回 false
    使用：arr.includes(100)

  4. 多维数组扁平化

    语法：数组名.flat(扁平层数)
    参数：需要扁平几层就写几，Infinity表示有多少层扁平多少层
    返回值：扁平化之后的数组
    使用：arr.flat(Infinity)

  5. 映射数组后扁平多维数组(只能扁平一层)

    语法：数组名.flatMap(function(item, index, arr){ 执行代码 })
    参数：item参数表示数组中每一个数组，index参数表示数组中每一个 item 的下标(选填参数)，arr参数表示原始数组(选填参数)
    返回值：映射数组扁平后的新数组
    使用：var arr2 = arr.flatMap(function(item,index,arr){
            return item
        })

  6. 查找数组中满足条件的数据

    语法：数组名.find(function(item){ 执行代码 })
    参数：item 参数表示数组中的每一个数据
    返回值：当数组中的元素在测试条件时返回true，返回符合条件的元素，之后的值不会再执行函数；如果没有符合条件的元素则返回undefined
    使用：var res=arr.find(function(item){
            return item>100
        })

  7. 查找数组中满足条件的数据所在的下标

    语法：数组名.findIndex(function(item){ 执行代码 })
    参数：item 参数表示数组中的每一个数据
    返回值：当数组中的元素在测试条件时返回true，返回符合条件的元素下标，之后的值不会再执行函数；如果没有符合条件的元素则返回-1
    使用：var res=arr.findIndex(function(item){
            return item==120
        })