JS数组

流莉呀
157 阅读3分钟

数组对象

  • 一种特殊的对象

  • JS没有真正的数组，知识用对象模拟数组

JS的数组不是典型的数组

典型的数组

  • 元素的数据类型相同

  • 使用连续的内存存储

  • 通过数字下标获取元素

JS数组不是这样

  • 元素的数据类型可以不同

  • 内存不一定是连续的（对象是随机存储的）

  • 不能通过数字下标，而是通过字符串下标

  • 这意味着数组可以有任何key，比如

let arr =[1,2,3]
arr['xxx'] = 1

image.png

创建一个数组

新建

  • let arr = [1,2,3] 常规写法

  • let arr = new Array(1,2,3) 标准写法

  • let arr = new Array(3) 3表示字符串长度

转化

  • let arr = '1,2,3'.split(',')

  • let arr = '123'.split('')

  • Array.from('123')

2.png

  • 注意：Array.from 在某种条件下把一个东西变成一个数组： 条件一：一个对象有0,1,2这样的下标；条件二： 有一个length属性。

伪数组

  • let divList = document.querySelextorAll('div)

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

总结：没有数组共有属性的 [数组] 就是伪数组

创建一个数组

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

  • arr.concat(arr2)

3.png

截取一个数组的一部分

  • arr.slice(1) //从第二个元素开始

  • arr.slice(0) //全部截取

  • 注意：JS只是提供浅拷贝

4.png

增删改查（数组中的元素）

删对象一样（不推荐）

let arr = ['a','b','c']
delete arr ['0']
arr //[empty,'b','c']
  • 数组的长度并没有改变，这是叫做稀疏数组

如果直接改length可以删除吗（不推荐）

let arr = [1,2,3,4,5]
arr.length = 1
  • 重要：不要随便改length

删元素

删除头部的元素

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

删除尾部元素

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

删除中间的元素

  • arr.splice(index,1) //删除index的一个元素

  • arr.splice(index,1,'x') //并在删除位置添加'x'

  • arr.splice(index, 1, 'x','y') //并在删除位置添加'x' ,'y'

  • 注意： index<length的长度，1 代表删除的个数

查看所有的元素

查看所有的属性名（适合对象，不适合数组）

let arr = [1,2,3,4,5]; arr.x = 'xxx'
Object.key(arr)
for(let key in arr){console.log(`${key}:${arr[key]}`)}

5.png

查看数字（字符串）属性名和值

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

6.png

  • 你要自己让 i 从 0 增长到length-1
arr.forEach(function (item,index){
    console.log(`${index} : ${item}`)
})

7.png

也可以用forEach/map 等原型上的函数

自己写forEach才能理解

function forEach(array,fn){
   for(let i=0;i<array.length; i++)}{
    fn(array[i],i ,array)}
}

8.png

  • forEach用for访问array的每一项

  • 对每一项调用fn(array[i],i,array)

注意： for循环和forEach的区别： 用for循环时可以随时break或者continue停止，forEach的话要从头走到尾，没有办法终止

查看单个属性

跟对象一样

  • let arr = [111,222,333]

  • arr[0]

索引越界

  • arr[arr.length] === undefind

  • arr[-1] === undefind

举例

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

  • 报错：Cannot read property'toString of undefined

  • 意思是你读取了undefined的toString属性，不是toString是undefined；x.toString()其中x如果是undefined就报这个错。

查看单个属性（续）

查找某个元素是否在数组里

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

使用条件查找元素

  • arr.find(item =>item%2 === 0) //找到第一个偶数

  • 或者arr.find(function(item){return x%5 ===0})

使用条件查找元素的索引

  • arr.findIndex (item=>item%2 === 0 ) //找到第一个偶数的索引

增加数组中的元素

在尾部加元素

  • arr.push(newItem) //修改arr，返回新长度

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

在头部加元素

  • arr.unshift(newItem) //修改arr，返回新长度

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

在中间加元素

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

  • arr.splice(index,0,'x','y')

修改数组中的元素

反转顺序

  • arr,reverse() //修改原数组

自定义数组

  • arr.sort((a,b)=>a-b)

9.png

10.png

数组转换

map：

  • n变n

  • arr.map(item =>item*item)//数组内的数变平方

  • 案例：把数字变星期

let arr = [0,1,2,2,3,3,3,4,4,4,4,6]
let arr2 = arr.map(补全代码)
console.log(arr2) // ['周日', '周一', '周二', '周二', '周三', '周三', '周三', '周四', '周四', '周四', '周四','周六']
  • 答
let arr = [0,1,2,2,3,3,3,4,4,4,4,6]
let arr2 = arr.map(item =>{return {0:'周日', 1:'周一', 2:'周二', 3:'周三', 4:'周四', 5:'周五', 6:'周六'}[item]})
console.log(arr2)

或者

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)

filten

  • n变少

  • arr.filten(item => item%2 === 0 ?true:false)

  • 案例：找出大于60的分数

let scores = [95,91,59,55,42,82,72,85,67,66,55,91]
let scores2 = scores.filter(补全代码)
console.log(scores2) //  [95,91,82,72,85,67,66, 91]
  • 答
let scores = [95,91,59,55,42,82,72,85,67,66,55,91]
let scores2 = scores.filter(n => n>= 60)
console.log(scores2) //  [95,91,82,72,85,67,66, 91]

reduce

  • n变1
arr.reduce((sum,item)
   =>{return sum+item},0)
  • 案例：算出所有的奇数和
let scores = [95,91,59,55,42,82,72,85,67,66,55,91]
let sum = scores.reduce((sum, n)=>{
  补全代码
},0)
console.log(sum) // 奇数之和：598
  • 答
let scores = [95,91,59,55,42,82,72,85,67,66,55,91]
let sum = scores.reduce((sum, n)=>{
  return n%2===0? sum:sum+n
 },0)
console.log(sum)
avatar
文章
阅读
粉丝