乐趣区

关于前端学习:Javascript数组数据类型Array

jiezi

  • 意识数组

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

  • 数组的创立

    • 字面量创立形式：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)
    1. 删除原有数组的最初一个数据
    语法：` 数组名.pop()`
返回值：被删除的那个数据
应用：`arr.pop()`
    1. 在原有数组的头部进行增加数据
    语法：` 数组名.unshift(数据 1, 数据 2,···)`
返回值：增加数据后数组的新长度
应用：`arr.unshift(1,2,3)`
    1. 删除原有数组的第一个数据
    语法：` 数组名.shift()`
返回值：被删除的那个数据
应用：`arr.shift()`

  • ES 3.0 操作方法

    1. 数组数据反转
    语法：数组名.reverse()
返回值：数据反转后的数组
应用：arr.reverse()
    1. 数组数据排序
      语法①：数组名.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})
    1. 截取数组数据
      语法①：数组名.splice(开始索引, 截取个数)
  参数：参数二不写示意从开始索引截取到数组开端
  返回值：截取的那一段数据的数组
  应用：arr.splice(0,5)

  语法②：数组名.splice(开始索引, 截取个数, 数据 1, 数据 2···)
  参数：从都三个参数为对截取区间的数据进行批改
  返回值：截取的那一段数据的数组
  应用：arr.splice(0,1,1)
    1. 在原数组开端进行追加数据
      语法：数组名.concat(数组, 数据···)
  参数：参数能够是一个数组，也能够是多个数据
  返回值：追加数据后的数组
  应用：arr.concat(0,1,1,arr2)
    1. 获取数组中某一段数据
      语法：数组名.slice(开始索引, 完结索引)
  参数：参数 1 不写示意从数组结尾地位开始，参数 2 不写示意到数组开端完结，参数写正数示意从 length + 负整数 的地位，区间数据包含开始，不包含完结
  返回值：获取区间数据的数组
  应用：arr.slice(0,5)
    1. 将数组内的数据应用符号进行拼接
      语法：数组名.join('连贯符号')
  参数：当参数为空时，默认应用逗号进行拼接
  返回值：数组数据拼接后的字符串内容
  应用：arr.join('-')

  • ES 5.0 操作方法

    1. 从数组结尾向开端进行查找指定数据所在的索引地位
      找到第一个数据后不再持续向后查找，下一次持续从 0 索引进行开始查找
      语法①：数组名.indexOf(数据)
  返回值：数据存在返回所在的索引，数据不存在返回 -1
  应用：arr.indexOf(120)

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

  语法②：数组名.indexOf(数据, 开始查找索引)
  返回值：数据存在返回所在的索引，数据不存在返回 -1
  应用：arr.indexOf(120,5)
    1. 遍历数组办法：用于代替 for 语句循环遍历数组
      语法：数组名.forEach(function(item,index, arr){执行代码})
  参数：item 参数示意数组中每一个数组，index 参数示意数组中每一个 item 的下标(选填参数)，arr 参数示意原始数组(选填参数)
  返回值：无返回值
  应用：arr.forEach(function(item,index,arr){console.log(item,index,arr)
      })
    1. 数组数据的映射：将原数组数据复制一份到一个新数组中
      语法：数组名.map(function(item,index, arr){执行代码})
  参数：item 参数示意数组中每一个数组，index 参数示意数组中每一个 item 的下标(选填参数)，arr 参数示意原始数组(选填参数)
  返回值：与原数组内容雷同的一个新数组
  应用：var arr2 = arr.map(function(item,index,arr){return item})
    1. 数组数据过滤器：不满足条件的数据会被过滤掉
      语法：数组名.filter(function(item,index, arr){执行代码})
  参数：item 参数示意数组中每一个数组，index 参数示意数组中每一个 item 的下标(选填参数)，arr 参数示意原始数组(选填参数)
  返回值：存储满足条件的数据的一个新数组
  应用：var arr2 = arr.filter(function(item,index,arr){return item >120})
    1. 判断数组内数据是否全副满足条件
      语法：数组名.every(function(item,index,arr){执行代码})
  参数：item 参数示意数组中每一个数组，index 参数示意数组中每一个 item 的下标(选填参数)，arr 参数示意原始数组(选填参数)
  返回值：数组中数据全副满足条件返回 true，有任意数据不满足返回 false
  应用：var res = arr.every(function(item,index,arr){return item >120})
    1. 判断数组中是否存在满足条件的数据
    语法：数组名.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)
    1. 数组内容填充
      语法：数组名.fill(填充内容, 填充开始地位, 填充完结地位)
  参数：只写一个参数时，示意全副进行填充, 参数三不写时示意填充至数组开端
  留神点：数组必须有长度
  返回值：填充好内容后的数组
  应用：arr.fill(2,5,8)
    1. 判断一个数据是否在数组中
      语法：数组名.includes(数据)
  返回值：数组中存在该数据返回 true，数组中不存在该数据返回 false
  应用：arr.includes(100)
    1. 多维数组扁平化
      语法：数组名.flat(扁平层数)
  参数：须要扁平几层就写几，Infinity 示意有多少层扁平多少层
  返回值：扁平化之后的数组
  应用：arr.flat(Infinity)
    1. 映射数组后扁平多维数组(只能扁平一层)
      语法：数组名.flatMap(function(item, index, arr){执行代码})
  参数：item 参数示意数组中每一个数组，index 参数示意数组中每一个 item 的下标(选填参数)，arr 参数示意原始数组(选填参数)
  返回值：映射数组扁平后的新数组
  应用：var arr2 = arr.flatMap(function(item,index,arr){return item})
    1. 查找数组中满足条件的数据
      语法：数组名.find(function(item){执行代码})
  参数：item 参数示意数组中的每一个数据
  返回值：当数组中的元素在测试条件时返回 true，返回符合条件的元素，之后的值不会再执行函数；如果没有符合条件的元素则返回 undefined
  应用：var res=arr.find(function(item){return item>100})
    1. 查找数组中满足条件的数据所在的下标
      语法：数组名.findIndex(function(item){执行代码})
  参数：item 参数示意数组中的每一个数据
  返回值：当数组中的元素在测试条件时返回 true，返回符合条件的元素下标，之后的值不会再执行函数；如果没有符合条件的元素则返回 -1
  应用：var res=arr.findIndex(function(item){return item==120})
退出移动版