数组的常用方法

104 阅读3分钟

1、遍历方法 foreach

foreach的功能是对数组进行遍历,在遍历的时候如果是引用数据类型可以对里面的项进行添加、修改、删除但是不能赋值,如果是基本数据类型不可以修改

let arr = [1,[1,2,3],{name:'hyq',age:18,word:'code'}]
  arr.forEach((item, index) => {
    if (index === 0) {
      item = 'test'
    } else if (index === 1) {
      item.push(333)
      item.splice(1,1,444,555)
    } else if (index === 2) {
      item.habit = 'play'
      delete item.word
      item.age = 25
      item = 'test'
    }
 })

console.log(arr) // [ 1, [ 1, 444, 555, 3, 333 ], { name: 'hyq', age: 25, habit: 'play' } ]

2、改造方法 map

map的功能是改造数组,它会遍历每一项并且对每一项进行改造,然后把改造后的结果返回到一个新数组中。

map如果没有return,返回的结果就是由undefined 组成的数组;

map如果遍历空数组,返回的结果为空数组

let arr2 = [1,[1,2,3],{name:'hyq',age:18,word:'code'}]
const resultArr =  arr2.map((item, index) => {
    if (index === 0) {
      item = 'test'
    } else if (index === 1) {
      item = {
        name:'hyq'
      }
    } else if (index === 2) {
      item = 2
    }
    return item
 })
console.log(resultArr) // [ 'test', { name: 'hyq' }, 2 ]

3、筛选方法 filter

筛选满足条件的项,如果没有则返回空数组。

要有return,没有return返回空数组

 let arr3  = [1, 2, 3, 4]
 arr3 = arr3.filter(item=>{
         return item > 2
  })
 console.log(arr3) // [ 3, 4 ]
 
 let arr4  = [1, 2, 3, 4]
 arr4 = arr4.filter(item=>{
      item > 2
 })
 console.log(arr3) // []
 

4、判断方法 some、every

(1)some

如果数组中有一个元素满足条件,返回true,否则返回false。

没有return,返回false

const arr5  = [1, 2, 3, 4, 5]
  const flag5 = arr5.some((item) => {
    return item > 4
  })
  console.log(flag5) // true

const arr6  = [1, 2, 3, 4, 5]
  const flag6 = arr5.some((item) => {
    return item > 10
  })
  console.log(flag6) // false
  

(2)every

如果数组中所有元素满足条件,返回true,否则返回false

没有return,返回false

const arr7  = [1, 2, 3, 4, 5]
  const flag7 = arr7.some((item) => {
    return item > 4
  })
  console.log(flag7) // false

const arr8  = [1, 2, 3, 4, 5]
  const flag8 = arr8.some((item) => {
    return item > 0
  })
 console.log(flag8) // true

5、查找方法 find

返回满足条件的第一个值,如果没有满足条件的返回undefined。

没有return返undefined

  const arr9  = [1, 2, 3, 4, 5]
  const result = arr9.find((item) => {
      return item >2 
  })
  console.log(result) // 3
 
 let arr10  = [1, 2, 3, 4]
 const result2 = arr10.find(item=>{
     return item > 5
 })
 console.log(result2) // undefined
 

6、添加、删除、替换方法 splice

共3个参数

参数1: 索引,添加或删除的索引

参数2:删除的数量,为0表示不删除,如果没有就是从索引开始一直删到结束

参数3:添加的元素、可以是多个

1个参数就是从索引开始删到结束, 2个参数就是从索引开始删,删除几个, 3个参数就是从索引开始删,删除几个,并且从索引开始插入新元素

// 从索引2开始删除一直到结尾
let arr11 = [1,2,3,4,5]
arr11.splice(2)
console.log(arr11) // [ 1, 2 ]

// 从索引2开始删除1个
let arr12 = [1,2,3,4,5]
arr12.splice(2,1)
console.log(arr12) // [ 1, 2, 4, 5 ]

// 从索引1插入11,22,33
let arr13 = [1,2,3,4,5]
arr13.splice(1,0,11,22,33)
console.log(arr13) // [1, 11, 22, 33, 2,  3,  4,  5]

// 替换索引1的值为111
let arr14 = [1,2,3,4,5]
arr14.splice(1,1,111)
console.log(arr14) // [ 1, 111, 3, 4, 5 ]

小结:2个参数就是删除,3个以及3个以上除了删除功能还有添加功能(如果不想删除第2个参数为0即可)