JS数组

Mianxiong
62 阅读2分钟
  • 数组是一种特殊的对象
  • JS的数组实际上是对象，只不过它的下标是0，1，2，length

JS的数组

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

58.png

59.png

60.png

创建数组 let arr = [1,2,3] let arr = new Array(1,2,3) let arr = new Array(3)

61.png

63.png

64.png

伪数组

伪数组的原型链中并没有数组的原型

65.png

  • let divList = document.querySelectorAll('div')， divList是一个伪数组

  • 伪数组的原型链中并没有数组的原型

66.png

  • Array.from可以把不是数组的东西变成数组

68.png

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

69.png

103.png

  • arr1.slice(1) // 从第二个元素开始
  • arr1.slice(0) //全部截取,经常用于复制一个数组
  • 注意，JS只提供浅拷贝

70.png

71.png

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

删元素

  • 使用delete（不推荐），奇怪的是，数组的长度并没有变 72.png
  • 改length（不推荐）

73.png

推荐方法：

删除头部的元素

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

74.png

删除尾部的元素

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

75.png 删除中间的元素

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

76.png

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

77.png

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

78.png

遍历数组

查看所有属性名

let arr = [1,2,3,4,5];
arr.x = 'xxx'
Object.keys(arr)
for(let key in arr) { //适合对象，不适合数组,同样，for...in是来访问对象的
    console.log(`${key}:${arr[key]}`)
}

79.png

Object.values(arr) //[1,2,3,4,5,"x"]

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

81.png

82.png

arr.forEach(function(item,index) {
    console.log(`${index}: ${item}`)
})
//也可以用forEach/map等原型上的函数

forEach的基本原理

83.png

function forEach(array,fn) {
    for(let i=0;i<array.length;i++) {
        fn(array[i],i,array)
    }
}
//forEach用for访问array的每一项
//对每一项调用fn(array[i],i,array)
  • for循环和forEach的区别：
  • for循环支持break和continue，forEach中没有
  • for循环只有块级作用域，forEach有函数作用域

查看单个属性

  • arr[0]：0会变成字符串
  • arr[arr.length] === undefined
  • arr[-1] === undefined
for(let i=0;i<=arr.length;i++) {
    console.log(arr[i].toString())
}
//报错：Cannot read property 'toString' of undefined

undefined不是一个对象，不是一个对象就没有toString

  • 查找某个元素是否在数组里
arr.indexOf(item) //存在返回索引，否则返回-1

84.png

  • 使用条件查找元素
arr.find(item=>item%2 === 0) //找第一个偶数

找第一个除以5余数为0的数

85.png

  • 使用条件查找元素的索引
arr.findIndex(item=>item%2===0) //找第一个偶数的索引

增加元素

  • 在尾部加元素
arr.push(newItem) //修改arr，返回新长度
arr.push(item1,item2) //修改arr，返回新长度

86.png

  • 在头部加元素
arr.unshift(newItem) //修改arr，返回新长度
arr.unshift(item1,item2) //修改arr，返回新长度

87.png

  • 在中间添加元素
arr.splice(index,0,'x') // 在index处插入'x'
arr.splice(index,0,'x','y')

89.png

修改数组中的元素

  • 反转顺序
arr.reverse()//修改原数组

91.png

//反转字符串的方法
var s = 'abcde'
s.split('').reverse().join('')

自定义顺序

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

92.png

93.png

94.png

95.png

97.png

数组变换

  • map：n变n，map会返回一个新的数组，不会改变原数组 对每一个item，把item变成item*item

99.png

  • filter：n变少

101.png

  • reduce：n变1

102.png

reduce实现item*item

104.png

reduce模仿filter

105.png 简化

106.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},
    ]
}    

//答案
let arr = [
    {名称:'动物',id:1,parent:null},
    {名称:'狗',id:2,parent:1},
    {名称:'猫',id:3,parent:1}
]
console.log(arr)
let arrNew = 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:[]})
console.log(arrNew)

资料来源：饥人谷

avatar
文章
阅读
粉丝