JS 数组

桃浪初
191 阅读3分钟

JS 数组

JS 数组 与 典型数组

典型的数组有这几个特点：

  • 元素的数据类型相同
  • 使用连续的内存存储
  • 通过数字下标获取元素

JS 数组

JS 的数组实际上是通过对象模拟的，因此

  • 元素的数据类型可以不同
  • 内存不一定是连续的（因为对象是随机存储的）
  • 下标为字符串
  • 这意味着数组可以有任何 key

数组的创建

创建数组

  let arr = [1,2,3] //简写形式
  let arr = new Array(1,2,3) 
  let arr = new Array(3) // ‘3’指的是字符串的长度

转化

  let str1 = '1,2,3'
  str1.split(',')
  
  let str = '123'
  str2.split('')
  
  Array.from('123')
  Array.from({0:'a',1:'b',2:'c',length:3})

伪数组

  let divList = document.querySelector('div')

伪数组的原型链中并没有数组的原型，而是直接指向了对象的原型

合并两个数组，得到新数组：arr1.concat(arr2)

截取一个数组的一部分：

  arr1.slice(1)// 从第二个元素开始
  arr1.slice(2)// 全部截取 常用于复制数组

注意： JS 只提供浅拷贝

浅拷贝：将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用 深拷贝：创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”

数组的增删改查

删除元素

  1. 和对象一样用delete(不推荐)

image.png

注意，这种方式删除后长度不变（稀疏数组）

  1. 直接改 length （不推荐）

  2. 使用 shift 删除开始的元素

    arr.shift() //arr 被修改，并返回被删元素

image.png

  1. 使用 pop 删除末尾的元素
    arr.pop()//arr 被修改，并返回被删元素

image.png

  1. 使用 splice 删除中间的元素
   arr.splice(index,1)//删除 index 的第一个元素；
   arr.splice(index,1,'x') // 并在删除位置添加'x'
   arr.splice(index,1,'x','y')// 并在删除位置添加'x','y'

image.png

查看元素

  1. 查看所有属性名
    (1) 使用查看对象的方式
 Object.keys(arr)
 
 for(let i in arr){
   console.log(i)
 }

但是这两种方式查看属性名会一同列出所有的属性名

image.png

(2) for循环：手动指定从 0 循环到 length-1

   for(let i = 0; i < arr.length;i++){
      console.log(`${i}:${arr[i]}`)
   }// `${}`语法可以在字符串中插入变量

image.png

(3) 使用 forEach()

  forEach( function(item,index){
    console.log(`${index}:${item}`)
  })

image.png

forEach() 的原理：

   fucntion forEach(array,fn){
     for(let i=0; i<array.length;i++){
      fn(array[i],i,array)
     }
   }
   forEach([1,2,3,4,5],function(item,index,array)
   {console.log(item,index,array)})

(2) 和 (3) 的区别：for 循环中可以用 break/continue 来控制遍历的随时结束 而用 forEach() 不行

  1. 查看单个属性
  let arr = [111,222,333]
  arr[0]

索引越界的情况:

  arr[arr.length] === undefined
  arr[-1] === undefined

image.png

  1. 查找元素

(1) 查找某个元素是否在数组里：

  arr.indexOf(item) // 存在返回索引，否则返回-1

(2) 使用条件查找元素

  arr.find(item=>item%2 === 0) //只返回找到的第一个偶数

(3) 使用条件查找元素的索引

  arr.findeIndex(item => item%2 === 0) // 只返回第一个偶数的索引

增加元素

  1. 在尾部增加元素
  arr.push(newItem)// 修改 arr，返回新长度
  arr.push(item1,item2)// 修改 arr,返回新长度
  1. 在头部增加元素
  arr.unshift(newItem) // 修改 arr, 返回新长度
  arr.unshift(item1,item2)// 修改 arr,返回新长度
  1. 在中间添加元素
  arr.splice(index,0,'x')// 在 index 处插入'x',删掉0个元素
  arr.push(index,0,'x','y')

修改元素

  1. 普通修改

    可以直接使用arr[index]='x'或者arr.splice(index,1,'x')

  2. 反转顺序

  arr.reverse() // 修改原数组

如何把字符串'ABCDE'反转顺序？
—— 先转换成数组再反转再转换为字符串

 let str='ABCDE'
 str.split('').reverse().join('')
  1. 自定义顺序
 arr.sort() // 默认从小到大排序
 arr.sort((a,b)=>a-b)

image.png

image.png

可以简写为： 
arr.sort((a,b)=>{
    return a.score-b.score
})

数组变换

map (n 变 n)

image.png

fliter (n 变少)

image.png

reduce (n 变 1)

image.png

image.png

数据变换题目：

  let arr = [
  {名称:'动物',id:1,parent:null},
  {名称:'狗',id:2,parent:1},
  {名称:'猫',id:3,parent:1}
  ]

把以上数组变成以下对象：

 {
   id:1,名称:'动物',children:[
   {id:2,名称:'狗',children:null},
   {id:3,名称:'猫',children:null}
   ]
  }

答案：

arr.reduce((result, item) => {
  if (item.parent === null) {
      result.id = item.id
      result['名称'] = item['名称']
  } else {
      result.children.push(item)
      delete item.parent
      item.children = null 
  }
  return result
}, { id: null, children: [] })
avatar
文章
阅读
粉丝