js数组对象

数组对象

一种特殊的对象
1 js 其实没有真正的数组
只是用对象模拟数组
2 典型的数组

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

• 通过数字下标获取元素

  

  image.png

3 js的数组

• 元素数据类型可以不相同
• 内存不一定连续（对象是随机存储的）
• 不能通过数字下标，而是通过字符串下标
• 这意味着数组可以有任何key

let arr = [1,2];
arr['any'] = 'any';
arr[10] = 10;

image.png

image.png

新建

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')

image.png

image.png

伪数组

• let divList = document.querSelectorAll(‘div’)

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

  

  image.png

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

• arr1.concat(arr2)

  

  image.png

截取一个数组的一部分

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

1 使用delete
let arr = [‘a’, ‘b’, ‘c’];
delete arr[‘0’]

image.png

不推荐
2 修改length

let arr = [1,2,3];
arr.length = 1;

image.png

不推荐使用
3 正确的删除操作
shift

arr = [1,2,3]
arr.shift()

pop

arr = [1,2,3]
arr.pop()

splice
arr.splice(index, 1)// 删除index的一个元素
arr.splice(index, 1, ‘x’)// 删除位置添加’x’
arr.splice(index, 1, ‘x’, ‘y’, ‘z’)// 在删除的位置添加’x’,’y’

arr = [1,2,3,4,5,6];
arr.splice();

• 查看所有属性名

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

image.png

由于数组对象，类似对象，可以随意添加属性，所以新增的属性会被遍历出来

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

for(let i = 0; i 

自己让i从0增长到length-1

arr.forEach(
  function (item, index){
    console.log(`${index}: ${item}`)
  }
)

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

image.png

自己实现简易forEach

function forEach(array, fn){
    for(let i = 0; i 

查看单个属性

• 跟对象一样

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

• 索引越界

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

• 查看是否有某个元素

arr.indexOf('value')

如果存在返回非-1的值

let arr2 = [12,23,45]
arr2.find(
  (x) => {
    return x%5 === 0;
   }
)

返回第一个满足条件的值

let arr2 = [12,23,45]
arr2.findIndex(
  (x) => {
    return x%5 === 0;
   }
)

返回第一个满足条件的下标

• 在尾部添加

arr.push(1,2,3)

• 在头部添加

arr.unshift('x','y')

• 在指定位置添加

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

• 数组反转

let arr = [1,2,3]
arr.reverse()

image.png

let arr = [1,2,5,4];
arr.sort();
arr.sort(function(a,b) {
  if(a > b){
    return 1
  } else{
    return -1
  }
})
let arr = [
{
name: '明',
age: 22
},
{
name: '张',
age:36
},
{
name: 'w',
age: 21
}
]
arr.sort(
function(a, b){
  return a.age - b.age
}
)

image.png

• map

let arr = [1,2,3,4,5,6]
arr.map(
(item) => {
  return item ** 2
}
)

image.png

• filter

arr.filter(
(item) => item%2 === 0
)

image.png

• reduce

arr.reduce(
(sum, item) => {
  return sum + item
},
0
)

image.png

reduce实现map

arr.reduce(
(result, item) => {
    return result.concat(item * item)
},
[]
)

image.png

reduce实现filter

arr.reduce(
(result, item) => {
    return result.concat(item % 2 === 0 ? item: [])
}, []
)