JS其实没有真正的数组

典型的数组

image.png

  • 元素的数据类型相同
  • 使用连续的内存存储

  • 通过数字下标获取元素

    JS的数组

    image.png

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

  • 内存不一定是连续的（对象是随机存储的）
  • 不能通过数字下标，而是通过字符串下标

  • 数组可以有任何key，比如let arr = [1,2,3] arr[‘xxx’] = 1

    创建数组

    新建

    1. let arr = [1,2,3]
    2. let arr = new Array(1,2,3) //1,2,3为数组元素
    3. let arr = new Array(3) //3为数组长度

    转化

    1. let arr = '1,2,3'.split(',')
    2. let arr = '123'.split('')
    3. Array.from('123')

    伪数组

    1. let divList = document.querySelectorAll('div')
    2. //伪数组的原型链中并没有数组的原型

    合并数组

    1. arr1.concat(arr2) //括号中可以是一个数组，也可以是数字

    截取数组的一部分

    1. arr.slice(1) //从数组下标为1的开始
    2. arr.slice(0) //复制整个数组
    3. //JS只提供浅拷贝

    增删改查

    删元素

    1. let arr = ['a','b','c']
    2. delete arr['0']
    3. arr //[empty,'b','c']
    4. //稀疏数组
    1. let arr = [1,2,3,4,5]
    2. arr.length = 1
    3. //此方法也可以删除数组元素，但是尽量不要随便修改length
    1. arr.shift() //删除头部元素，并返回被删除元素
    2. arr.pop() //删除尾部元素，并返回被删除元素
    3. arr.splice(index,1) //从index开始删除一个元素
    4. arr.splice(index,1,'x','y') //并在删除位置添加'x','y'

    查元素

    1. //查看所有属性名
    2. let arr = [1,2,3,4,5]; arr.x = 'xxx'
    3. Object.keys(arr)
    4. for (let key in arr) {console.log(`${i}:${arr[i]}`)}
    5. //查看数字（字符串）属性名和值
    6. for (let i = 0; i < arr.length; i++) {
    7. console.log(`${i}:${arr[i]}`)
    8. }
    9. arr.forEach(function(item,index){
    10. console.log(`${index}:${item}`)
    11. })

    forEach原理

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

  • forEach用for访问array的每一项

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

    查看单个属性

    1. let arr = [111,222,333]
    2. arr[0]
    3. arr[arr.length] === undefined
    4. arr[-1] === undefined
    1. arr.indexOf(item) //存在返回索引，否则返回-1
    2. arr.find(item => item % 2 === 0) //找第一个偶数，注意与filter区分
    3. arr.findIndex(item => item % 2 === 0) //找第一个偶数的索引

    增元素

    1. arr.push(item1,item2) //在尾部添加元素，返回新长度
    2. arr.unshift(item1,item2) //在头部添加元素，返回新长度
    3. arr.splice(index,0,'x','y') //在index处插入元素

    改元素

    1. arr.reverse() //反转数组，修改原数组
    2. arr.sort((a, b) => a - b) //数组排序

    数组变换

    image.png
    map n变n
    filter n变少
    reduce n变1