JS数组

月光冷青衫
495 阅读8分钟

前言

该文章记录一些数组基本知识，慢慢将会添加到一些数组高级知识，所有内容均从网上整理而来，加上自己得理解做一个整合，方便工作中使用。

一. 数组

  • 数组(Array)
    • 数组是一种复合型数据类型，在数组中可以存储不同类型的数据
    • 数组中存储的数据是有序的，每个数据都有唯一的索引，通过索引操作对应数据，索引从0开始；也可以是变量，动态替换
    • 数组中存储的数据也称元素
  • 创建数组
    • 通过new Array()
    • 通过数组字面量
    //通过new Array()
let students = new Array()

//通过字面量[]
let teachers = []
  • 添加元素
    • 语法： 数组[索引] = 元素
    • 非连续性数组
    let arr = []
arr[0] = 0
arr[1] = 1
arr[99] = 99
console.log(arr) //输出: (100) [0, 1, empty × 97, 99]
//数组会按索引存储，没有赋值都会存空，浪费内存
  • 读取元素
    • 数组[索引]
    • 如果读取数组不存在的元素，不会报错，返回undefined
  • 数组属性
    • length : 数组存储的元素个数
    //length是可以修改的
let arr = [1,2,3,4]
console.log(arr.length) //输出:4

arr.length=2  //修改length，比原来小，则剪切数组
console.log(arr) //输出：(2) [1, 2]

arr.length=10  //修改length，比原来大，则填充空值增长数组
console.log(arr) //输出：[1, 2, empty × 8]

二. 数组的方法

1. 静态方法

  • Array.isArray(变量) //判断变量是否是数组，返回true/false
  • Array.from(arrayLike , [mapFn] , [thisArg]) //将伪数组/可迭代对象转化为真正的数组
    • arrayLike：想要转换成数组的伪数组对象或可迭代对象。
    • mapFn：可选，如果指定了该参数，新数组中的每个元素会执行该回调函数
    • thisArg：可选参数，执行回调函数 mapFn 时 this 对象。
       //字符串被拆分成数组
   let result = Array.from('abc')
   console.log(result)//输出：['a', 'b', 'c']
   
   //数组会生成一个新数组
   let arr = [1, 2, 3]
   let result1 = Array.from(arr)
   console.log(result1)//输出：[1, 2, 3]
   console.log(result1 === arr)//输出：false

   let result2 = Array.from(arr, item => item * 2)
   console.log(result2) //[2, 4, 6]
   
   //Map类型转成数组
   let map = new Map([['name', '胡歌'], ['sex', '男']])
   let result3 = Array.from(map.values())
   console.log(result3) // ['胡歌', '男']

   //Set类型转化数组
   const set = new Set(['foo', 'bar', 'baz']);
   let result4 = Array.from(set);
   console.log(result4) // ['foo', 'bar', 'baz']

2. 实例对象的方法

let arr = [ ]

2-1. arr.at(i)

  • i 是索引，传入索引获取对应的元素，i 可以是负数
const array = [5, 12, 8, 130, 44];
console.log(array.at(2)) //输出 8
console.log(array.at(-1)) //输出 44

2-2. arr.concat( 数组1，数组2，数组3，··· )

  • 将arr数组和添加的数组合并成一个数组，不改变原数组
let arr = [1, 2, 3, 4]
let arr2 = [7, 8]

let newarr = arr.concat(arr2)
console.log(newarr) //输出 [1, 2, 3, 4, 7, 8] ,将arr2内容拼接在arr后面，返回一个新数组

let newarr2 = arr.concat(arr)
console.log(newarr2) //输出[1, 2, 3, 4, 1, 2, 3, 4] ,可以将同一个数组重复一边

//es6 简写方法
let newarr3 = [...arr, ...arr2]

2-3. arr.findIndex((element)=>{···})

  • 获取元素在该数组中第一次出现的索引，没有则返回-1
  • 参数：search-要查询的内容 formIndex-查询的起始位置
let arr = ['胡歌', '霍建华', '胡歌']
let res = arr.findIndex(item=> item=='胡歌')
console.log(res) //输出 0 ，即元素第一次出现的索引

let res = arr.findIndex(item=>item=='李白')
console.log(res) //输出 -1 ，没有找到相同元素返回-1

2-4. arr.jion(separator)

  • 将数组中所有元素拼接成字符串，不改变原数组
  • 参数：separator-每个元素之间添加该内容，默认是","
let arr = ['胡歌', '霍建华', '胡歌']

let res = arr.join(',')
console.log(res) //输出：胡歌,霍建华,胡歌

let res = arr.join('')
console.log(res) //输出：胡歌霍建华胡歌

let res = arr.join('-')
console.log(res) //输出：胡歌-霍建华-胡歌

//arr.toString() 也是将数组转换为字符串

2-5. arr.slice(start,end)

  • 截取数组中某部分，不改变原数组
  • 参数：start-截取开始位置(包含) end-截取结束位置(不包含)
let arr = ['a', 'b', 'c', 'd', 'e', 'f']

let res = arr.slice(0, 3)//从索引0开始，截取到索引3，不包括索引3
console.log(res) //输出：['a', 'b', 'c']

let res = arr.slice(2) //从索引2开始截取，没有end就是截取剩下全部
console.log(res) //输出：['c', 'd', 'e', 'f']

let res = arr.slice() //不传参就是浅拷贝一份原数组
console.log(res) //输出：['a', 'b', 'c', 'd', 'e', 'f']

let res = arr.slice(-3,-1) //从倒数第三开始截取，倒数第一结束，不包括倒数第一
console.log(res) //输出：['d', 'e']

2-6. 数组增/删，改变原数组

  • arr.push(value,value2,···) //向原数组末尾添加元素，返回数组新的长度
  • arr.unshift(value,value2,···) //向原数组开头添加元素，返回数组新的长度
  • arr.pop() //删除原数组最后一个元素，返回被删除元素
  • arr.shift() //删除原数组第一个元素，返回被删除元素
  • arr.splice( start,deletCount,item1,item2,··· )
    • 可以删除、添加、插入、替换
    • 参数：
      • start-修改开始位置
      • deletCount-删除个数,可选值，如果不填，默认删除开始位置后面所有
      • item-要插入的值,可以值
let arr = ['a', 'b', 'c', 'd']

arr.push('e', 'f')
console.log(arr) // ['a', 'b', 'c', 'd', 'e', 'f']

arr.unshift('huge')
console.log(arr) // ['huge', 'a', 'b', 'c', 'd', 'e', 'f']

arr.pop()
console.log(arr) // ['huge', 'a', 'b', 'c', 'd', 'e']

arr.shift()
console.log(arr) // ['a', 'b', 'c', 'd', 'e']
--------------
let myFish = ["angel", "clown", "mandarin", "sturgeon"];

//从索引2的位置开始删除所有元素
var removed = myFish.splice(2);
// 运算后的 myFish: ["angel", "clown"]
// 被删除的元素：["mandarin", "sturgeon"]

//[从索引 2 的位置开始删除 0 个元素，插入“drum”]
let removed = myFish.splice(2, 0, "drum");
// 运算后的 myFish: ["angel", "clown", "drum", "mandarin", "sturgeon"]
// 被删除的元素：[], 没有元素被删除

2-7. arr.reverse()，反转数组，改变原数组

  • arr.reverse() //改变数组顺序，颠倒数组
let arr = ['a', 'b', 'c', 'd']
arr.reverse()
console.log(arr) //['d', 'c', 'b', 'a']

2-8. arr.sort()，数组排序，改变原数组

  • arr.sort(compareFn) //传入函数，根据要求排序
//不传参时，不适应数字排序，会按照unicode编码排序,适用字符串
let arr = ["a","c","b"]
arr.sort()
console.log(arr) // ["a","b","c"]

//顺序
let arr = [1, 4, 3, 3, 7, 3, 4, 1, 3]
arr.sort((a, b) => a - b)
console.log(arr) // [1, 1, 3, 3, 3, 3, 4, 4, 7]

//倒序
let arr = [1, 4, 3, 3, 7, 3, 4, 1, 3]
arr.sort((a, b) => b - a)
console.log(arr) // [7, 4, 4, 3, 3, 3, 3, 1, 1]

2-9. arr.forEach() 遍历数组

  • arr.forEach((element,index,arr)=>{})
    • 需要回调函数作为参数，数组元素有多少，回调函数执行多少次
    • 回调函数参数
      • element 当前遍历的元素
      • index 当前遍历元素的索引
      • arr 被遍历的数组(这个参数极少用)
      let names=["胡歌","李白","李商隐"]
names.forEach((item,i)=>{
  console.log(item)
})
//依次输出：胡歌 李白 李商隐

2-10. arr.filter() 过滤数组

  • arr.filter((element,index,arr)=>{})
    • 遍历数组，每个元素都执行一次回调函数，根据返回值判断是否将该元素添加到新数组中
    • 不改变原数组，返回一个满足条件的新数组
    • 回调函数参数
      • element 当前遍历的元素
      • index 当前遍历元素的索引
      • arr 被遍历的数组(这个参数极少用)
    • 回调函数必须要return true/false；true表示满足条件返回到新数组，false不满足条件 
       let names=["胡歌","李白","李商隐"]
 let newarr = names.filter((item,i)=>{
   return item.length>2
 })
 console.log(newarr) //输出 ["李商隐"]

2-11. arr.map() 根据原数组返回一个新数组

  • arr.map((element,index,arr)=>{})
    • 遍历数组，每个元素都执行一次回调函数，return一个结果添加到新数组中
    • 不改变原数组，返回一个新数组
    • 回调函数参数
      • element 当前遍历的元素
      • index 当前遍历元素的索引
      • arr 被遍历的数组(这个参数极少用)
    • 回调函数必须要return 结果，该结果就是新数组的元素 
       let names=[1,2,3,4,5]
 let newarr = names.map(item=>{
   return item*10
 })
 console.log(newarr) //输出 [10, 20, 30, 40, 50]

2-12. arr.reduce() 整合所有元素为一个值

  • arr.reduce((previousValue,currentValue,currentIndex)=>{},initialValue)
    • 遍历数组，每个元素都执行一次回调函数，return一个结果添加到新数组中
    • 不改变原数组，返回一个新数组
    • 回调函数参数
      • previousValue 上一次遍历的元素
      • currentValue 当前遍历的元素
      • currentIndex 当前遍历的元素的索引
      • initialValue 作为第一次执行回调函数时previousValue的值，如果没有设置，则第一次执行回调函数时previousValue取第一个元素的值，currentValue取第二个元素的值
    • 回调函数必须要return 结果，否则就是undefined 
       let names=[1,2,3,4,5]
 
 //没有设置initialValue，则是每个元素相加
 let val = names.reduce((pre,cur)=>{
   return pre+cur
 })
 console.log(val) //输出 15
 
 //设置initialValue = 5，则5+数组中的元素
 let val2 = names.reduce((pre,cur)=>{
   return pre+cur
 },5)
 console.log(val) //输出 20

2-13. arr.every() 判断所有元素是否通过回调函数，返回布尔值

  • arr.every((element,index)=>{ })
    • 遍历数组，判断每个元素是否满足回调函数，不满足停止遍历，返回false;都满足返回true
    • 回调函数必须 return
let arr = [2, 34, 56, 13, 6]
//判断数组所有元素是否大于10
let res = arr.every((element, index) => {
    return element > 10
})
console.log(res)  //返回false

2-14. arr.some() 判断是否有一个元素通过回调函数，返回布尔值

  • arr.some((element,index)=>{ })
    • 遍历数组，判断是否有一个元素满足回调函数，有元素满足就立即停止遍历，返回true;都不满足返回false
    • 回调函数必须 return
let arr = [2, 34, 56, 13, 6]
//判断数组是否有元素大于10
let res = arr.some((element, index) => {
  return element > 10
})
console.log(res)  //返回true

2-15. arr.find() 找到第一个满足条件的元素

  • arr.find((element,index)=>{ })
    • 遍历数组，找到第一个满足条件的元素，有元素满足就立即停止遍历，返回该元素;都没找到返回undefined
    • 回调函数必须 return，返回的就是满足条件的第一个元素
let arr = [2, 34, 56, 13, 6]
//判断数组是否有元素大于10
let res = arr.find((element, index) => {
  return element > 10
})
console.log(res)  //返回34

2-15. arr.flat() 扁平化数组

  • arr.flat(depth)
    • depth 可选项，默认值是1,指定要扁平化几层嵌套数组
    • 返回一个包含数组与子数组中所有元素的新数组
 //扁平化一级子数组
 let arr = [2, 34, [6, 1], [[11, 22], 2], 6]
 let res = arr.flat()
 console.log(res) //输出 [2, 34, 6, 1, Array(2), 2, 6] ，一级数组被展开了，二级数组只展开了一级

 //扁平化到二级子数组
 let res2 = arr.flat(2)
 console.log(res2)  // 输出 [2, 34, 6, 1, 11, 22, 2, 6]
avatar
文章
阅读
粉丝