持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第8天，点击查看活动详情

JS数组不是典型数组

JS没有真正的数组，都是对象模拟的数组。

典型的数组

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

JS数组

元素的数据类型可以不相同
内存不一定是连续的（对象是随机储存的）
不能通过数字下标，而是通过字符串下标
数组可以有许多的Key

创建一个数组

新建

let arr=[1,2,3];
let arr=new Array(1,2,3);
let arr=new Array(3);

转化

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

伪数组

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

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

arr1.concat(arr2);

截取一个数组的一部分

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

删元素

根对象一样

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'

查看所有元素

查看所有属性名

let arr=[1,2,3,4,5];arr.x='xxx'
* Object.keys(arr)

for(let key in arr){console.log（'${key}:{arr[key]}'）}

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

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

i从0增长到length-1

let arr = [1, 2, 3, 4, 5];
arr.forEach(function (item, index) {
  console.log("$[index]:$[item]");
});

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

自己写forEach

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

查看单个属性

跟对象一样

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

索引越界

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

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

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

使用条件查找元素

arr.find(item=>item%2===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)

数组变换

map

m=>n

fliter

多变少

reduc

n变1

JavaScript数组