JS 数组

Hello_Tang
150 阅读3分钟

注：数组对象是一种特殊的对象，JS没有真正的数组只是用对象模拟数组

JS的数组不是典型的数组

典型的数组

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

a.png

但JS的数组不这样

  • 元素的数据类型可以不同
  • 内存不一定是连续的(对象是随机存储的)
  • 不能通过数字下标,而是通过字符串下标
  • 这意味着数组可以有任何key
  • 比如
 let arr =[1,2,3]
  arr[ 'xxx']=1

z.png

创建一个数组

新建数组

  • let arr =[1,2,3]（常用方法）
  • let arr = new Array(1,2,3)let arr= new Array(3)

已有数组中添加

1.png

转化

  • let arr ='1,2,3'.split(',')
  • let arr = '123'.split('') a.png
  • Array.from('123')
  • 使用Array.from需要满足两个条件（有123下标）和（添加length长度） a.png

伪数组

  • 例：let divList = document.querySelectorAll('div')
  • 伪数组的原型链中并没有数组的原型
  • 伪数组中没有所有数组所共有的属性
  • 比如：push pop shift

2.png

创建一个数组（续）

合并两个数组，得到新数组

  • arr1.concat(arr2)

3.png

截取一个数组的一部分

  • arr1.slice(1) //从第二个元素开始
  • arr1.slice(0)//全部截取
  • 注意,JS只提供浅拷贝

4.png

增删改查--数组中的元素

删

删元素

跟对象一样

  • let arr= ['a' , 'b' , 'C']
  • delete arr['O']
  • arr // [empty, 'b', 'C']
  • 神奇，数组的长度并没有变
  • 稀疏数组-当全部删除长度为3时 5.png

如果直接改length可以删元素吗

  • let arr = [1,2,3,4,5]
  • arr.length= 1
  • 我X，居然可以?! JS真神奇
  • 重要:不要随便改length 6.png

删元素（续）

一个对象提供的函数就叫API

删除头部的元素

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

删除尾部的元素

  • arr.pop() // arr被修改，并返回被删元素 b.png

删除中间的元素

  • arr.splice(index,1)//删除index的一个元素v arr.splice(index,1, 'x') //并在删除位置添加'x'
  • arr.splice(index,1, '×', 'y') //并在删除位置添加'x', 'y' 8.png

查

查看所有元素

查看数字(字符串)属性名和值

for(let i = 0; i < arr. length; i++){
   console.log(`${i}: ${arr[i]}`)
}

for有beack功能当i=2时就停止查看

9.png

查看单个属性

跟对象一样

  • let arr= [111,222,333]
  • arr[0]

索引越界

  • arr[arr.length] =-= undefined
  • arr[-1]=== undefined
  • 报错:Cannot read property 'toString' of undefined 举例
for( let i = 0; i<= arr. length; i++){
console.log(arr[i].toString())
}

11.png

查看单个属性(续)

  • 查找某个元素是否在数组里
  • arr.indexOf(item)//存在返回索引，否则返回-1 a.png
  • 使用条件查找元素
  • arr.find(item => item % 2===O)//找第一个偶数并返回值
  • 使用条件查找元素的索引
  • arr.findIndex(item => item % 2=== 0)//找第一个偶数的索引 22.png

增

增加数组中的元素

在尾部加元素

  • arr.push(newltem) //修改arr，返回新长度
  • arr.push(item1, item2) //修改arr，返回新长度 33.png

在头部加元素

  • arr.unshift(newltem) //修改arr，返回新长度
  • arr.unshift(item1, item2) //修改arr，返回新长度 a.png

在中间添加元素

  • arr.splice(index,0, '×') //在index处插入'x'
  • arr.splice(index,0,'x', 'y')

a.png

  • 修改某一个元素可以用splice，也可以用 arr[index] = xxx

改

修改数组中的元素

反转顺序

  • arr.reverse()//修改原数组 55.png
  • 举例：假如字符串需要反转 66.png

自定义顺序

  • arr.sort((a,b)=>a-b) // 88.png
  • 成绩排名举例： 77.png

数组变换（续)

a.png

  • map --n变n // 对数组加工变为自身的倍数
  • filter --n变少 // 筛选出2的倍数
  • reduce --n变1 // 求数组的和
  • 演示

99.png

  • 举例 把0,1,2,2,3,3,3,4,4,4,4,6变成周日周一周二周三周四周五周六
方法一：笨办法
let arr = [0,1,2,2,3,3,3,4,4,4,4,6]
let arr2 = arr.map(item=>{
if(item===0){
return '周日'
}else
if(item===1){
return '周一'
}else
if(item===2){
return '周二'
}else
if(item===3){
return '周三'
}else
if(item===4){
return '周四'
}else
if(item===6){
return '周六'
}
})
console.log(arr2)

方法二：
 let arr = [0, 1, 2, 2, 3, 3, 3, 4, 4, 4, 4, 6]
        let arr2 = arr.map((i) => { return { 0: '周日', 1: '周一', 2: '周二', 3: '周三', 4: '周四', 6: '周六' }[i] })
        console.log(arr2)

方法3：
let arr = [0,1,2,2,3,3,3,4,4,4,4,6]
let arr2 = arr.map((i)=>{
  const hash = {0:'周日',1:'周一',2:'周二',3:'周三',4:'周四',5:'周五',6:'周六'}
  return hash[i]
})
console.log(arr2) // ['周日', '周一', '周二', '周二', '周三', '周三', '周三', '周三', '周四', '周四', '周四', '周四' ]
avatar
文章
阅读
粉丝