JS数组

Bug_makre
468 阅读3分钟

1.JS其实没有真正的数组

\quad 在JS中，只是用对象模拟数组，JS的数组不是典型的数组。

典型的数组：

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

JS中的数组：

  • 元素的数组类型可以不同
  • 内存不一定是连续的
  • 不能通过数字下标，而是通过字符串下标。虽然看起来可以用数字下标获取数组对象，但是实际上还是转换为字符串。
  • 所以，JS中的数组，可以有任何key。比如：arr["xxx"] = 1

2.创建一个数组

新建数组：

  • let arr = [1,2,3]
  • let arr = new Array(1,2,3) // 1,2,3声明字符串的内容
  • let arr = new Array(3) // 3声明了字符串的长度 从其他类型转换而来：
  • let arr = '1,2,3'.split(',')
  • Array.from('123') Array.from方法，需要对象满足两个条件：
  • 1.有 0，1，2，3......等下标
  • 2.有length属性 举例：

合并两个数组：arr1.concat(arr2)//合并数组不会改变原来数组中的内容

截取数组的一部分:arr1.slice(1) //截取第二个元素后面的所有元素，截取数组也不会改变原数组的值
使用slice(0)常用于数组的复制

伪数组：

  • let divArray = document.querySelectorAll('div')
  • 伪数组的原型链中并没有数组的原型。举例：

3 数组的增删改查

3.1 删除数组元素
  • 使用delete删除元素，举例：
let arr = new Array(1,2,3);
delete arr['0'];// 注意：删除后，arr的length还是3

数组元素都被删除，但是长度不为0的数组，称为稀疏数组。这种方式不推荐使用。

  • 通过修改数组的length删除元素，举例: 但是，不要通过这种方式删除数组元素。

  • 删除头部的元素 array.shift() //arr被修改，并返回被删除的元素

  • 删除尾部的元素 array.pop() //array被修改，并返回被删除元素

  • 删除中间的元素

arr.splice(index,1) //删除从index(数组下标从0开始)开始的一个元素
arr.splice(index,1,'x')//删除，并在删除位置添加'x'
arr.splice(index,1,'x','y')//删除，并在删除位置添加'x','y'
3.2 遍历数组

\quad我们知道，可以通过Object.keys()方法以及Object.values()方法分别获取对象的键值列表，也可以通过for循环的方式：

for(let key in arr){
   console.log(key)
}

遍历对象，但是由于对象中的键值可以自由设置，所以这种方式访问数组不太合适。这时候就需要使用：

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

或者像Java那样，使用对象的forEach方法：

arr.forEach(function(x,y){
    console.log(`${y}:${x}`) //y代表数组的下标，x代表数组下标对应的值
})
//forEach方法还有第三个参数，该参数代表数组本身

\quad 当需要查找某个元素是否在数组中，一方面可以通过遍历数组，另一方面，也可以使用：

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

或者查询符合条件的元素：

arr.find(item => item %2 === 0) //找数组中的第一个偶数
arr.findIndex(item => item%2 === 0) //找数组中第一个偶数的下标
3.3 增加数组中的元素
  • 在尾部加元素
arr.push(newItem) //修改arr，返回长度
arr.push(item1,item2...) //修改arr，返回新长度
  • 在头部加元素
arr.unshift(newItem) //修改arr，返回新长度
arr.unshift(item1,item2...) //修改arr，返回新长度
  • 在中间加元素
arr.splice(index,0,'x') //往index处，删除0个元素，并插入'x'
arr.splice(index,0,'x','y')
3.5 修改数组中的元素
  • 反转顺序
arr.reverse() //反转数组
  • 自定义顺序
arr.sort((a,b) => a-b)
3.6 数组的变换(不会改变原数组)
  • map (n变n) 举例：
  • filter (n变少) 举例：
  • reduce (n变1) 举例：求数组元素之和 0是返回结果的初始值，每个数组元素都会和sum相加，并将返回值作为sum进行下一次迭代。这个方法比较难理解，再举一个例子： 空数组作为初始值，每次使用reduce时，则将新的返回值作为初始值，传递给下一次reduce。reduce的功能非常强大，基本上map,filter可以做到的，reduce都可以做到。比如，使用reduce过滤元素：
avatar
文章
阅读
粉丝