最全数组方法

91 阅读4分钟

数组的使用方法:

image.png

一:常用

concat:

用户连接两或者多个数组,组成一个新数组,并且不会改变现有的数组

const array1 = ['a', 'b', 'c']

const array2 = ['d', 'e', 'f']

const array3 = array1.concat(array2) //['a', 'b', 'c', 'd', 'e', 'f']

every :

判断数组里的所有数组是否符合条件,符合返回true,不符合返回false,但是循环次数不等于数组的长度,因为当遇到不符合条件的值的时候就退出了循环,且不会检测空值

arr.every(i=>i>2) //false

some:

同every,但是有一个真的就会返回true

arr.some(i=>i>2) //true

filter:

过滤符合条件的数组,不检测空数组会报错,不改变原数组

arr.filter(i=>i>2) //[3,4]

find:

返回第一个满足条件的值,否则返回undefined,不改变原数组,不接受空数组,已经被遍历过的再更改,返回的还是初始值,不是修改后的值

arr.find(i=> i>2) //3

arr.find(i=> i>5) //undefined

findIndex:

返回第一次满足条件的下标,找到返回索引,没找到返回下标,遍历后又添加的值不算在查找范围里面

arr.findIndex(i=> i>2) //2

arr.findIndex(i=> i>5) //-1

findLastIndex:

从末尾开始查找第一个满足条件的下标,找到返回索引(索引还是正向的,没有从-1开始),没找到返回下标,遍历后又添加的值不算在查找范围里面

arr.findLastIndex(i=> i>2) //3

arr.findLastIndex(i=> i>5) //-1

includes:

判断一个数组是否包含指定值 ,包含返回true,不包含返回false

arr.includes(2) //true

indexOf:

找到指定元素的第一个索引,有的话返回下标,没有返回-1 const arr = [1, 2, 2, 3]

arr.indexOf(2) //1

join:

将数组拼接成字符串 常与split连用

arr.join() //'1,2,2,3'

arr.join('-') //'1-2-3-45'

reverse:

把数组进行翻转,且会改变原始的数组,不希望改变用toReverse(),或者用展开语法浅拷贝一下

arr.reverse() //4,3,2,1

shift

删除第一个元素,并返回删除后的值,会改变原数组

arr = [1,2,3,4]

arr.shift() //1

arr =[2,3,4]

pop:

删除数组的最后一个元素,返回删除值,会改变原数组 arr = [1,2,3,4]

arr.shift() //4

arr =[1,2,3]

slice:

对数组的浅拷贝,不改变原数组,返回一个新的数组,且slice不会提取到end的位置,也不会去掉空值

arr.slice(1,3) // [2,3]

push:

在数组的末尾添加元素,并返回数组的长度,会改变原数组

arr.push(100) //5

arr = [1,2,3,4,100]

foreach

 let arr1=[]
 let arr = [
        { name: "1", },
        { name: "2", },
        { name: "3", },
    ]
    arr.foreach((v, i) => {
       arr1.push({
        label: v.name,
        value: i,
    })

map

 let arr = [
        { name: "1", },
        { name: "2", },
        { name: "3", },
    ]
    let arr1 = arr.map((v, i) => {
        return {
            label: v.name,
            value: i,
        }
    })

forech和map的区别:

1.map有返回值,foreach没有

2.foreach会直接在当前的内存空间里去修改值,map会返回新的值,因此foreach会去修改原数组的值,而map不会

3.forech会跳过空数据,map不会跳过空数据

4.map后续可以结合其他数组方法使用

相同点:都是三个值,且没有特殊情况都遍历整个数组不会中途中断

reduce:

常用于归类,或得到想要的结果,可以传入3个参数,第一个参数是合计,第二个是元素值,(有传入)第三个参数为初始值

arr = [1,2,3,4]

let total = [ 0, 1, 2, 3 ].reduce(
  ( sum, num ) =>{
    return sum + num
  },0 )
  

不常使用

at:

相当于加强版的indexof(),用于根据数组的索引定位到对应的元素,可传入正整数或负整数 + const arr = [1,2,3,4]

arr.at(1) //2

arr.at(-1) //4

copyWithin:

const arr = [1,2,3,4]

arr.copyWithin(2,0) //[1,2,1,2]

entries:

返回数组的可迭代对象iterate,以键值对的形式展示出来。数组的索引是key,值是value

flat:

创建一个新数组,并按照指定深度,将所有子元素拼接到新数组中去。默认值为1

const arr = [1,2,3,[2,3]]

arr.flat() //[1,2,3,2,3]

const arr1 = [1,2,3,[2,[3]]]

arr1.flat(2) //[1, 2, 3, 2, 3]

flatmMap:

相当于先调用map,然后再调用flat()深度为1的方法

const result = arr1.flatMap((num) => (num === 2 ? [2, 2] : 1)); //[1,2,2,1]

fill:

用固定值填充数组

fill(val,star,end) arr.fill (2,0,2) //[2,2,3,4]

原文链接:juejin.cn/post/723180…