JS 数组常用操作全集

谁借莪１个温暖的怀抱￠ 2023-03-02 05:14 27阅读 0赞

### 文章目录 ###

*   *   *  1、push()方法
         *  2、unshift()方法
         *  3、pop() 方法
         *  4、shift() 方法
         *  5、filter() 方法
         *  6、join()方法
         *  7、 indexOf() 方法
         *  8、reverse() 方法
         *  9、slice(start, end) 切片方法
         *  10、splice(start, selectcount, ...items) 方法
         *  11、includes()方法，
         *  12、find()方法
         *  13、concat() 方法
         *  14、sort(orderfunction)方法
         *  15、map()方法
         *  16、forEach()函数
         *  17、 some()函数
         *  18、 every()函数
         *  19、findIndex()函数
         *  20、fill()函数
         *  21、copyWithin()函数
         *  22、from()函数
         *  23、of()函数
         *  24、entries()函数
         *  25、values() 迭代器
         *  26、keys() 返回迭代器
         *  27、reduce()函数
         *   *  1、数组求和，求乘积
             *  2、计算数组中每个元素出现的次数
             *  3、数组去重
             *  4、将二维数组转化为一维
             *  5、将多维数组转化为一维
             *  6、对象里的属性求和
         *  28、reduceRight()

### 1、push()方法 ###

往数组最后添加一个或者多个元素, 返回值是增加之后的数组的 length，而原数组元素也会被改变

>  var testArray =  [1200,1100,2100,20];
    > testArray.push(40,21);
    6
    >  testArray;
    [ 1200, 1100, 2100, 20, 40, 21 ]

### 2、unshift()方法 ###

往数组头添加一个或者多个元素，返回数组长度

> testArray.unshift(703,361)
    8
    >  testArray
    [ 703, 361, 1200, 1100, 2100, 20, 40, 21 ]
    >

### 3、pop() 方法 ###

将删除 arrayObject 的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值。

> testArray.pop()
    21
    >  testArray
    [ 703, 361, 1200, 1100, 2100, 20, 40 ]
    >

### 4、shift() 方法 ###

用于把数组的第一个元素从其中删除，并返回第一个元素的值，如果数组已经为空，则 shift() 不改变数组，并返回 undefined 值

> testArray.shift()
    703
    >  testArray
    [ 361, 1200, 1100, 2100, 20, 40 ]
    >

### 5、filter() 方法 ###

迭代方法， 对数组的每一项都运行给定的函数， 其实就是arrayObject.filter( callback) ，给他一个callback函数，

而 callback回调函数传入三个参数 (item, index, originArray) 分别是`‘item：当前执行的元素’ 、‘index：当前元素下标’、‘originArray：原数组’`

如果返回值是true，保留该元素，false不保留， 完成后返回一个新的数组

>  testArray
    [ 361, 1200, 1100, 2100, 20, 40 ]
    
    >  var filterRes = testArray.filter(function(e,i,arry){ return arry[i]<200})
    > filterRes
    [ 20, 40 ]
    >

### 6、join()方法 ###

join() 方法用于把数组中的所有元素通过指定的分隔符进行字符串拼接并返回，默认使用`,`号分割，不改变原数组。

> var resJoin = testArray.join('-')
    > resJoin
    '361-1200-1100-2100-20-40'
    >

### 7、 indexOf() 方法 ###

寻找数组内出现某个元素第一次出现的索引的方法 lastIndexOf() 从后往前找，最后出现元素的索引的方法 返回的都是索引值，如果没有找到返回 -1 indexOf第二个参数是从哪个索引开始查找

> testArray
    [ 361, 1200, 1100, 2100, 20, 40 ]
    > testArray.indexOf(20)
    4
    > testArray.lastIndexOf(361)
    0
    > testArray.indexOf('test')
    -1
    > testArray.lastIndexOf('test')
    -1
    >

### 8、reverse() 方法 ###

数据反转排序

> testArray.reverse()
    [ 40, 20, 2100, 1100, 1200, 361 ]
    
    >

### 9、slice(start, end) 切片方法 ###

返回一个从start 到end(不包含该元素)的一个新数组，该方法不会修改原数组， 看如下案例从 第一个元素截取到第三个，但不包含第三个元素

> testArray
    [ 40, 20, 2100, 1100, 1200, 361 ]
    > testArray.slice(1,testArray.length-3)
    [ 20, 2100 ]
    > testArray
    [ 40, 20, 2100, 1100, 1200, 361 ]
    >

解：  
这个可以看着 start : 从`0`开始 end: 是从`1`开始 计算的

### 10、splice(start, selectcount, …items) 方法 ###

start 从哪个索引开始， selcetCount 删除几个， items 删除后要加入的元素

> testArray
    [ 40, 20, 2100, 1100, 1200, 361 ]
    > testArray.splice(3,1,999)
    [ 1100 ]
    > testArray
    [ 40, 20, 2100, 999, 1200, 361 ]
    >

### 11、includes()方法， ###

参数为查找的值，如果数组中有被查找的值，则输出“true”

> testArray
    [ 40, 20, 2100, 999, 1200, 361 ]
    > testArray.includes(2100)
    true
    >

### 12、find()方法 ###

返回第一个满足过滤方法的元素，一个都没有满足的就返回undefined，遇到一个满足的元素后遍历就停止了

> const testStrArray = [{ name:"Dex",age:20},{ name:"Lily",age:18},{ name:"Lielie",age:23}]
    > 
    > const obtainRes = testStrArray .find((item)=>{ 
    ...
    ... return item.age == 18
    ...
    ... })
    
    > obtainRes
    {  name: 'Lily', age: 18 }
    >

### 13、concat() 方法 ###

concat() 方法用于连接两个或多个数组。该方法不会改变原数组，仅会返回被连接数组的一个副本。

> const originArr = [{ name:'Jack',age:26}]
    > const resConcat = testStrArray.concat(originArr)
    > resConcat
    [ {  name: 'Dex', age: 20 },
      {  name: 'Lily', age: 18 },
      {  name: 'Lielie', age: 23 },
      {  name: 'Jack', age: 26 } ]
    >

### 14、sort(orderfunction)方法 ###

按指定的参数对数组进行排序

> resConcat
    [ {  name: 'Lily', age: 18 },
      {  name: 'Dex', age: 10 },
      {  name: 'Lielie', age: 23 },
      {  name: 'Jack', age: 26 } ]
      
      // 降序
    > resConcat.sort((a,b) => b.age - a.age)
    [ {  name: 'Jack', age: 26 },
      {  name: 'Lielie', age: 23 },
      {  name: 'Lily', age: 18 },
      {  name: 'Dex', age: 10 } ]
    
    // 升序
    > resConcat.sort((a,b) => a.age - b.age)
    [ {  name: 'Dex', age: 10 },
      {  name: 'Lily', age: 18 },
      {  name: 'Lielie', age: 23 },
      {  name: 'Jack', age: 26 } ]
    >

### 15、map()方法 ###

对数组的每一项都运行给定的函数，返回每次函数调用的结果组成一个新数组，不会更改原数组

> testArray
    [ 40, 20, 2100, 999, 1200, 361 ]
    > var resMap = testArray.map(item => item * 2)
    
    > resMap
    [ 80, 40, 4200, 1998, 2400, 722 ]
    > testArray
    [ 40, 20, 2100, 999, 1200, 361 ]
    >

### 16、forEach()函数 ###

遍历数组的每一个元素

> testArray.forEach(item => { 
    ... console.log(item)
    ... })
    40
    20
    2100
    999
    1200
    361
    
    >

### 17、 some()函数 ###

对数组的每一项都运行给定的函数，任意一项都返回 ture,则返回 true

> var compare = function(item, index, originArr){ 
    ... return item > 100
    ... }
    > testArray
    [ 40, 20, 2100, 999, 1200, 361 ]
    > testArray.some(compare)
    true
    >   
    > [80,99,98,20].some(compare)
    false
    >

### 18、 every()函数 ###

对数组的每一项都运行给定的函数，每一项都返回 ture, 才返回 true（这个和some()正好相反）

> var compare = function(item, index, originArr){ 
    ... return item > 100
    ... }
    > testArray
    [ 40, 20, 2100, 999, 1200, 361 ]
    > testArray.every(compare)
    false
    >     
    > [101,102,103].every(compare)
    true
    >

### 19、findIndex()函数 ###

传入一个回调函数，找到数组中符合当前搜索规则的第一个元素，返回它的下标，终止搜索。

> testFind
    [ {  name: 'Dex', age: 10 },
      {  name: 'Lily', age: 18 },
      {  name: 'Lielie', age: 23 },
      {  name: 'Jack', age: 26 } ]
    > testFind.findIndex( item => item.age >20)
    2
    >

### 20、fill()函数 ###

arr.fill(value, start, end) 用新元素替换掉数组内的元素，可以指定替换下标范围。

>  testFind
    [ 123,
      123,
      {  name: 'Lielie', age: 23 },
      {  name: 'Jack', age: 26 } ]
      
    > testFind.fill(129,0,3)
    [ 129, 129, 129, {  name: 'Jack', age: 26 } ]
    >

解：  
star： 从`0`开始  
end ：也是从`0`开始

### 21、copyWithin()函数 ###

`arr.copyWithin(target, start, end)`  
选择数组的某个下标，从该位置开始复制数组元素，默认从0开始复制。也可以指定要复制的元素范围。

> const copyTest = [1,2,3,4,5,6]
    > copyTest.copyWithin(3) // 从下标3开始拷贝，刚好将数组前面的1,2,3拷贝覆盖了后面的4,5,6
    [ 1, 2, 3, 1, 2, 3 ]
    >   
    > const copyTest1 = [1,2,3,4,5,6]
    > copyTest1.copyWithin(3,1) // 依然从下标3开始拷贝，但是指定粘贴的值从下标1开始，所以用2,3,4覆盖了后面的4,5,6
    [ 1, 2, 3, 2, 3, 4 ]
    >  
    > const copyTest2 = [1,2,3,4,5,6]
    > copyTest2.copyWithin(3,2,3)  // 依然从下标3开始拷贝，但是指定粘贴的值从下标2开始，而结束位置为3所以只用3替换了4 ，后面的5,6未被粘贴
    [ 1, 2, 3, 3, 5, 6 ]
    >

### 22、from()函数 ###

将类似数组的对象（array-like object）和可遍历（iterable）的对象转为真正的数组

> Array.from('Hello')
    [ 'H', 'e', 'l', 'l', 'o' ]
    >

### 23、of()函数 ###

用于将一组值，转换为数组。如同 new Array(1,2,3)

> Array.of('Hello','world',1,2,3)
    [ 'Hello', 'world', 1, 2, 3 ]
    >   
    > var ao = new Array(1,2,3)
    undefined
    > ao
    [ 1, 2, 3 ]
    >

### 24、entries()函数 ###

将每一个元素对应下标， 返回一个类似键值对的新数组

> var test = ['hi','no','yes']
    > for(let i of test.entries()){ 
    ... console.log(i)
    ... }
    [ 0, 'hi' ]
    [ 1, 'no' ]
    [ 2, 'yes' ]
    
    > var testJson = [{ name:'dex',age:20},{ name:'jack',age:18}]
    > for(let key of testJson.entries()){ 
    ... console.log(key)
    ... }
    [ 0, {  name: 'dex', age: 20 } ]
    [ 1, {  name: 'jack', age: 18 } ]
    undefined
    >

### 25、values() 迭代器 ###

返回元素值,还是迭代上面那个对象

> for(let key of testJson.values()){ 
    ... console.log(key)
    ... }
    {  name: 'dex', age: 20 }
    {  name: 'jack', age: 18 }
    >
    >
    > var testMap = new Map([['name','Lili'],['tel',13609890132]])
    > testMap
    Map {  'name' => 'Lili', 'tel' => 13609890132 }
    > for(let val of testMap.values()){ 
    ... console.log(val)
    ... }
    Lili
    13609890132
    undefined
    >

### 26、keys() 返回迭代器 ###

类似json 获取对应 的key

> testJson
    [ {  name: 'dex', age: 20 }, {  name: 'jack', age: 18 } ]
    > for(let key of testJson.keys()){ 
    ... console.log(key)
    ... }
    0
    1
    >   
    >   
    > var testMap = new Map([['name','Lili'],['tel',13609890132]])
    > testMap
    Map {  'name' => 'Lili', 'tel' => 13609890132 }
    > for(let key of testMap.keys()){ 
    ... console.log(key)
    ... }
    name
    tel
    >

### 27、reduce()函数 ###

reduce 不会改变原数组，迭代数组的所有项，然后构建一个最终返回的值，从数组的第一项开始，逐个遍历到最后

arr.reduce(function(prev,cur,index,arr){ 
    ...
    }, init);
    
    或者
    
    arr.reduce(function(prev,cur,index,arr){ 
    ...
    },);

`arr`表示原数组；  
`prev`表示上一次调用回调时的返回值，或者初始值 init;  
`cur` 表示当前正在处理的数组元素；  
`index` 表示当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1；  
`init`表示初始值。

常用的参数只有两个：prev 和 cur。

来看个案例加深下理解

>  var arr = [1, 2, 3, 2, 5];
    >  
    >  var sum2 = arr.reduce(function(pre, cur, index, array) { 
    ... console.log(pre, cur,index, array)
    ... return pre+cur
    ... },10)
    10 1 0 [ 1, 2, 3, 2, 5 ]
    11 2 1 [ 1, 2, 3, 2, 5 ]
    13 3 2 [ 1, 2, 3, 2, 5 ]
    16 2 3 [ 1, 2, 3, 2, 5 ]
    18 5 4 [ 1, 2, 3, 2, 5 ]
    
    > sum2
    23
    >

#### 1、数组求和，求乘积 ####

var  arr = [1, 2, 3, 4];
    var sum = arr.reduce((x,y)=>x+y)
    var mul = arr.reduce((x,y)=>x*y)
    console.log( sum ); //求和，10
    console.log( mul ); //求乘积，24

#### 2、计算数组中每个元素出现的次数 ####

let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
    
    let nameNum = names.reduce((pre,cur)=>{ 
      if(cur in pre){ 
        pre[cur]++
      }else{ 
        pre[cur] = 1 
      }
      return pre
    },{ })
    console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}

#### 3、数组去重 ####

> arr3
    [
      1, 2, 3, 5,
      2, 3, 6
    ]
    > var arr5 = arr3.reduce((pre,cur)=>{ 
    ...  if(!pre.includes(cur)){ 
    .....  console.log('pre',pre,'cur',cur)
    .....  return pre.concat(cur)
    ..... }else{ 
    ..... console.log('else pre',pre)
    ..... return pre
    ..... }
    ... },[])
    pre [] cur 1
    pre [ 1 ] cur 2
    pre [ 1, 2 ] cur 3
    pre [ 1, 2, 3 ] cur 5
    else pre [ 1, 2, 3, 5 ]
    else pre [ 1, 2, 3, 5 ]
    pre [ 1, 2, 3, 5 ] cur 6
    > 
    > arr5  
    [ 1, 2, 3, 5, 6 ]   // 最终去重后的数组
    >

#### 4、将二维数组转化为一维 ####

let arr = [[0, 1], [2, 3], [4, 5]]
    let newArr = arr.reduce((pre,cur)=>{ 
        return pre.concat(cur)
    },[])
    console.log(newArr); // [0, 1, 2, 3, 4, 5]

#### 5、将多维数组转化为一维 ####

let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
    const newArr = function(arr){ 
       return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
    }
    console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]

#### 6、对象里的属性求和 ####

### 28、reduceRight() ###

不会改变原数组，迭代数组的所有项，从数组的最后一项开始，向前遍历到第一项

var arr = [1, 2, 3, 2, 5];
    >  var sum3 = arr.reduceRight(function(pre, cur, index, array) { 
    ... console.log(pre, cur,index, array)
    ... return pre+cur
    ... },10)
    10 5 4 [ 1, 2, 3, 2, 5 ]
    15 2 3 [ 1, 2, 3, 2, 5 ]
    17 3 2 [ 1, 2, 3, 2, 5 ]
    20 2 1 [ 1, 2, 3, 2, 5 ]
    22 1 0 [ 1, 2, 3, 2, 5 ]
    
    > sum3
    23                                                                   23
    >

好了常用的基本是这些了