js中 30 种数组方法

三十中数组方法

1.concat()

连接两个数组，返回一个拼接好的新数组，不改变原数组。

    const arr1 = ['1',1,'test1','a1','b1']
    const arr2 = ['2',2,'test2','a2','b2']
    console.log(arr1.concat(arr2))//['1',1,'test1','a1','b1','2',2,'test2','a2','b2']

2.copyWithin()

array.copyWithin(target, start, end)，从start开始复制，到end结尾（不包括end），将复制下来的元素放在target位置上，会改变原数组

    const arr1 = ['1',1,'test1','a1','b1']
    const arr3 = arr1.copyWithin(0,1,3)
    console.log(arr3)//[1, 'test1', 'test1', 'a1', 'b1']

3.entries()

将数组转换为可迭代对象，可以使用for of进行循环，不改变原数组

   const arr1 = ['1',1,'test1','a1','b1']
    const arr3 = arr1.entries()//Array Iterator {}
    for(let i of arr3){
        console.log(i)//[0, '1'],[1, 1],[2, 'test1'],[3, 'a1'],[4, 'b1']
    }

4.every()

判断所有元素是否符合条件，返回值为布尔值，不改变原数组

const arr1 = ['1',1,'test1','a1','b1']
const arr3 = arr1.every((i)=>{
    return typeof(i)==='string'
})//false

5.fill()

array.fill(value, start, end)，从start开始，到end结尾（不包括end）的所有元素都换成value，value为静态值，会改变原数组

const arr1 = ['1',1,'test1','a1','b1']
const arr3 = arr1.fill('测试fill',1,3)
console.log(arr3)//['1', '测试fill', '测试fill', 'a1', 'b1']

6.filter()

创建新数组，其中填充了所有通过测试的数组元素，通过函数方式传入：

array.filter(function(currentValue,index,arr),thisValue)

其中 currentValue 为必传参数，表示当前元素值；

index 和 arr 为可选参数，表示当前元素的索引和当前数组本身；

thisValue 也是可选参数，表示要传递给函数以用作其 "this" 值的值，如果此参数为空，则值 "undefined" 将作为其 "this" 值传递。

    const arr1 = ['1',1,'test1','a1','b1']
    const arr3 = arr1.filter((i)=>{
        return i>0
    })
    console.log(arr3)//['1', 1]

 filter(Boolean) 这种写法，可以直接过滤掉数组内为 false 的元素。

const arr1 = ['1',0,'test1','a1','b1']
const arr3=arr1.filter(Boolean)//['1', 'test1', 'a1', 'b1']

7.find()

接收一个函数,返回第一个符合条件的值，不改变原数组

    const arr1 = ['1',1,'test1','a1','b1']
    
    const arr3 = arr1.find((i)=>{
       return  i === 'test1'
    })
    console.log(arr3)//test1

8.findIndex()

接收一个函数,返回第一个符合条件的值的索引，不改变原数组

    const arr1 = ['1',1,'test1','a1','b1']
    const arr3 = arr1.findIndex((i)=>{
       return  i === 'test1'
    })
    console.log(arr3)//2

9.forEach()

按顺序为数组中的每个元素调用一次函数

    const arr1 = ['1',1,'test1','a1','b1']
    arr1.forEach((i)=>{
       i = i+'forEach';
        console.log(i)//1forEach,1forEach,test1forEach,a1forEach,b1forEach
    })

10.from()

form()，Array.from(object, mapFunction, thisValue)，从具有 length 属性或可迭代对象的任何对象返回 Array 对象。用法：Array.from()

    const arr1 = ['1',1,'test1','a1','b1']
    const str1 = 'test from'
    const arr2 = Array.from(str1)//['t', 'e', 's', 't', ' ', 'f', 'r', 'o', 'm']
    const arr3 = Array.from(str1,(i)=>{
        return i=i+'from'
    })// ['tfrom', 'efrom', 'sfrom', 'tfrom', ' from', 'ffrom', 'rfrom', 'ofrom', 'mfrom']

11.includes()

返回布尔值，判断数组内有没有某个元素，两个参数，第一个为搜索的值，第二个为起始位置（可选）。

   const arr1 = ['1',1,'test1','a1','b1']

   const arr2 = arr1.includes(1,1)//true
   const arr3 = arr1.includes(1,2)//false

12.indexOf()

检测数组中有无某元素，有则返回下标，没有返回-1，可传第二个参数，为搜索的起始位置，如果有多个元素则只返回第一个符合的下标。

    const arr1 = ['1',1,'test1','a1','b1']

    const arr2 = arr1.indexOf('a1')//3
    const arr3 = arr1.indexOf('aa')//-1

13.isArray()

检查对象是否为数组，返回布尔值。用法：Array.isArray()

    const arr1 = ['1',1,'test1','a1','b1']
    const str1 = 'test isArray'
    console.log(Array.isArray(arr1))//true
    console.log(Array.isArray(str1))//false

14.join()

将数组以字符串形式返回，将以指定参数进行分隔，不改变原数组

    const arr1 = ['1',1,'test1','a1','b1']

    const arr2 = arr1.join('')//11test1a1b1
    const arr3 = arr1.join(',')//1,1,test1,a1,b1
    const arr4 = arr1.join(' ')//1 1 test1 a1 b1
    const arr5 = arr1.join('~')//1~1~test1~a1~b1

15.keys()

返回带有数组键的 Array Iterator 对象。可以之后进行遍历。

    const arr1 = ['1',1,'test1','a1','b1']
    const arrKey = arr1.keys();
    console.log(arrKey)//Array Iterator {}
    for(let i of arrKey){
        console.log(i)//0 1 2 3 4
    }

16.lastIndexOf()

从尾到头查找，只返回查找到的第一个元素的下标，没有返回-1。

    const arr1 = ['1',1,'test1','a1','b1','1']

    console.log(arr1.lastIndexOf(1))//1
    console.log(arr1.lastIndexOf(0))//-1
    console.log(arr1.lastIndexOf('1'))//5

17.map()

按顺序为数组中的每个元素调用一次提供的函数，并返回一个新数组。

array.map(function(currentValue,index,arr),thisValue)

其中 currentValue 为必传参数，表示当前元素值；

index 和 arr 为可选参数，表示当前元素的索引和当前数组本身；

thisValue 也是可选参数，表示要传递给函数以用作其 "this" 值的值，如果此参数为空，则值 "undefined" 将作为其 "this" 值传递。

    const arr1 = ['1',1,'test1','a1','b1']
    const arr2 = arr1.map((i)=>{
        return i+'map'
    })
    console.log(arr1)//['1', 1, 'test1', 'a1', 'b1']
    console.log(arr2)//['1map', '1map', 'test1map', 'a1map', 'b1map']

18.pop()

移除数组的最后一个元素，并返回该元素。

    const arr1 = ['1',1,'test1','a1','b1']
    const arr3 = arr1.pop()
    console.log('arr1:',arr1)// ['1', 1, 'test1', 'a1']
    console.log(arr3)//b1

19.push()

向数组末尾添加新项目，并返回新长度。

    const arr1 = ['1',1,'test1','a1','b1']

    const arr3 = arr1.push('testpush')
    console.log('arr1:',arr1)// ['1', 1, 'test1', 'a1', 'b1', 'testpush']
    console.log(arr3)//6

20.reduce()

从左到右累加，接收两个参数（函数，初始值），第一个函数参数必选，函数参数可传四个参数（total, currentValue, currentIndex, arr），前两个必选，不改变原数组

array.reduce(function(total, currentValue, currentIndex, arr),initialValue)

其中 total 和 currentValue 为必传参数，

total 表示初始值或函数先前返回的值；

currentValue 表示当前元素值；

index 和 arr 为可选参数，表示当前元素的索引和当前数组本身；

initialValue 也是可选参数，表示初始值。

    const arr1 = ['1',1,'test1','a1','b1']

    const arr2 = arr1.reduce((total,curr)=>{
        console.log('total',total) //reduce~,reduce~1,reduce~11,reduce~11test1,reduce~11test1a1
        console.log('curr',curr)//'1',1,'test1','a1','b1'
        return total+curr
    },'reduce~')//reduce~11test1a1b1

    const arr3 = arr1.reduce((total, curr) => {
        console.log('total', total) //reduce~,reduce~1,reduce~11,reduce~111,reduce~1111
        console.log('curr', curr)//'1',1,'test1','a1','b1'
        return total+1
    }, 'reduce~')//reduce~11111

21.reduceRight()

从右到左累加，其他的和 reduce() 一致。

    const arr1 = ['1',1,'test1','a1','b1']
    const arr3 = arr1.reduceRight((total,curr)=>{
        console.log('total',total) //reduceRight~,reduceRight~b1,reduceRight~b1a1,reduceRight~b1a1test1,reduceRight~b1a1test11
        console.log('curr',curr)//'b1','a1','test1',1,'1'
        return total+curr
    },'reduceRight~')//reduceRight~b1a1test111

22.reverse()

反转数组中元素的顺序，改变原数组。

    const arr1 = ['1',1,'test1','a1','b1']
    const arr3 = arr1.reverse()//['b1', 'a1', 'test1', 1, '1']
    console.log('arr1:', arr1)//['b1', 'a1', 'test1', 1, '1']

23.shift()

头部删除元素，返回被删除的元素

    const arr1 = ['1',1,'test1','a1','b1']
    const arr3 = arr1.shift()//1
    console.log('arr1:', arr1)// [1, 'test1', 'a1', 'b1']

24.slice()

选取元素，从start开始，到end结尾（不包括end），为负数时则从尾到头选取。

    const arr1 = ['1',1,'test1','a1','b1']

    const arr2 = arr1.slice(0,2)//['1', 1]
    const arr3 = arr1.slice(0,8)//['1', 1, 'test1', 'a1', 'b1']
    const arr4 = arr1.slice(-2)// ['a1', 'b1']
    const arr5 = arr1.slice(-3,-1)// ['test1', 'a1']

只有一个参数时 

const arr1 = ['1',1,'test1','a1','b1']

const arr2 = arr1.slice(2)
console.log(arr2)//['test1', 'a1', 'b1']

复制数组，不传参数：

const arr1 = ['1',1,'test1','a1','b1']
 
const arr2 = arr1.slice()
console.log(arr2)//['1', 1, 'test1', 'a1', 'b1']

25.some()

判断数组内是否有元素符合条件，返回布尔值，不改变原数组。

    const arr1 = ['1',1,'test1','a1','b1']
    const arr3 = arr1.some((i)=>{
        return i>0
    })//true

26.sort()

排序，出现数字时，传入函数

可以注意到 arr2 直接使用.sort()排序时结果并不正确，此时需要传入一个比较函数进行处理，例中的 a-b 是升序排列，而 b-a 就变为了降序排列。

    const arr2 = [1,11,21,31,101]
    const arr3 = [1,4,2,8,6]
    arr2.sort()
    arr3.sort()
    console.log('arr2:', arr2)//[1, 101, 11, 21, 31]
    console.log('arr3:', arr3)// [1, 2, 4, 6, 8]
    const arr4 = arr2.sort((a,b)=>{
        return a-b
    })
    console.log(arr4)//[1, 11, 21, 31, 101]

27.splice()

可以进行删除和新增操作，改变原数组。

array.splice(index, howmany, item1, ....., itemX)

index 必传，表示为需要操作的位置；

howmany 可选，表示删除的元素数量；

item1, ....., itemX，可选，表示新增的元素

    const arr1 = ['1',1,'test1','a1','b1']
    //一个参数时：指定操作位置，该下标后元素删除，包含该位置自身元素
    arr1.splice(2)//['1', 1]
    arr1.splice(-2)//['1', 1, 'test1']
    //两个参数时：从参数一位置，删除参数二个元素
    arr1.splice(2,2)//['1', 1, 'b1']，从下标为2处删除两个元素
    //三个及以上参数：从参数一位置，删除参数二个元素，增加参数三的值
    arr1.splice(3,1,'newValue')//['1', 1, 'test1', 'newValue', 'b1']
    arr1.splice(3,1,'newValue1','newValue2','newValue3')//['1', 1, 'test1', 'newValue1', 'newValue2', 'newValue3', 'b1']

28.toString()

返回包含所有数组值的字符串，以逗号分隔，不改变原数组。

    const arr1 = ['1',1,'test1','a1','b1']
    const arr3 = arr1.toString()//1,1,test1,a1,b1

29.unshift()

将新项添加到数组的开头，并返回新的长度，改变原数组

    const arr1 = ['1',1,'test1','a1','b1']
    const arr3 = arr1.unshift('test unshift')//6
    console.log('arr1:', arr1)//['test unshift', '1', 1, 'test1', 'a1', 'b1']

30.valueOf()

返回数组本身

    const arr1 = ['1',1,'test1','a1','b1']
    const arr3 = arr1.valueOf()//['1', 1, 'test1', 'a1', 'b1']

改变原数组的方法

• copyWithin()  三个参数，复制元素并放入数组；
• fill() 三个参数，向数组内添加静态元素；
• pop() 尾删，返回删除元素；
• push() 尾插，返回数组新长度；
• reverse() 反转数组内元素；
• shift() 头删，返回删除元素；
• sort() 排序，数字选择传入比较函数；
• splice() index，howmany，item...根据参数数量进行删除和插入元素；
• unshift() 头插，返回数组新长度；

不改变原数组的方法

• concat() 连接两个数组；
• entries() 将数组转换为可迭代对象；
• every() 传入函数参数，判断所有元素是否符合函数内条件，返回布尔值；
• filter() 传入函数参数，将所有符合函数内条件的元素作为新数组返回；
• find() 传入函数参数，返回第一个符合条件的值；
• findIndex() 传入函数参数，返回第一个符合条件的值的索引；
• join() 将数组以字符串形式返回，并以指定参数进行分隔；
• keys() 返回带有数组键的 Array Iterator 对象。
• map() 传入函数参数，将所有元素进行函数内处理后作为新数组返回；
• reduce() 传入函数参数，数组缩减为单个值，从左到右处理。
• reduceRight() 同上，从右到左处理。
• slice() 两个参数，选取元素；
• some() 传入函数参数，判断是否有元素是否符合函数内条件，返回布尔值；
• toString() 返回包含所有数组值的字符串，以逗号分隔