美文网首页ES6ES6~ES12前端开发那些事儿
ES6方向:数组实用方法整理以及总结归纳

ES6方向:数组实用方法整理以及总结归纳

作者: 听书先生 | 来源:发表于2021-05-07 18:04 被阅读0次

    [1]、整理

    1、在数组Array原型对象上新增删除指定元素的方法remove()

    在实际的开发中,可能数组自带的一些方法无法满足我们的开发需要,因此需要在原型对象上增加一些我们需要的方法,已达到提升开发效率的目标。
    forEach()遍历实现删除:

            // 在数组的原型对象上新增删除的方法
            Array.prototype.remove = function(arr, value) {
                let newArr = [];
                arr.forEach(item => {
                    if (item !== value) {
                        newArr.push(item);
                    }
                })
                return newArr;
            }
    
            // 定义一个数组
            let testArr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
            console.log(testArr.remove(testArr, 2));
    

    使用map()方法实现数据的删除:(元素删除了,但是存在undefined占位,需要自行再继续处理)

            // 在数组的原型对象上新增删除的方法
            Array.prototype.remove = function(arr,value){
            let newArr = arr.map( item => {
                    if(item !== value){
                        return {
                            ...item
                        }
                    }
                })
                return newArr;
            }
            
            // 定义一个数组
            let testArr = [1,2,3,4,5,6,7,8,9];
            console.log(testArr.remove(testArr,2));
    
    删除后的数组.png
    2、数组的合并(两个或多个数组的合并)

    数组的合并有很多方法实现,concat()也能够实现数组的合并,这个方法不会改变原数组,返回的是一个新的合并后的数组。但是ES6的拓展运算符也是能够实现的。

          let arr = [1, 2, 3, 4, 5, 6, 7];
          let arr2 = [1, 2, 3, 4, 15, 16, 17];
          //数组合并
          console.log([...arr, ...arr2]);
    
    3、数组的交集(两个数组或多个数组公共的区域部分)

    过滤下来符合要求的数组成员。

          let arr = [1, 2, 3, 4, 5, 6, 7];
          let arr2 = [1, 2, 3, 4, 15, 16, 17];
          //数组取交集
          console.log([...arr].filter(item => arr2.includes(item)));
    
    4、数组的并集

    实际上就是数组的合并去对合并后的数组进行去重

          let arr = [1, 2, 3, 4, 5, 6, 7];
          let arr2 = [1, 2, 3, 4, 15, 16, 17];
          //数组的并集
          console.log([...new Set([...arr, ...arr2])]);
    
    5、数组的差集

    数组的差集的实现过程就是并集中去掉交集的部分就是剩下的差集

          let arr = [1, 2, 3, 4, 5, 6, 7];
          let arr2 = [1, 2, 3, 4, 15, 16, 17];
          // 数组的差集(差集指的是合并的数组中除去所有交集的部分)
          let arr3 = [...new Set([...arr, ...arr2])].filter(item => !arr.includes(item) || !arr2.includes(item))
          console.log(arr3)
    
    6、数组转为对象
          // 数组转为对象
          let obj = { ...arr };
          console.log(obj);
    
    7、数组扁平化处理

    嵌套数组扁平化的处理,有多种实现方法,可以使用递归法去解决,也可以直接使用flat()处理
    递归法:

        let list = [];
        // 使用递归实现数组扁平化
        fn(arr) {
          for (var i = 0; i < arr.length; i++) {
            if (Array.isArray(arr[i])) {
              fn(arr[i]);
            } else {
              list.push(arr[i]);
            }
          }
          return list;
        },
    

    flat():

    let arr = [1,2,[3,4,5,[6,7,8]]];
    console.log(arr.flat(Inifity));
    
    8、检查所有数组元素是否都符合条件要求
    let arr4 = [1, 4, 2, 8, 6, 9, 7];
    let arr = arr4.every(item => item < 10)
    console.log(arr)
    
    9、检查是否存在元素符合条件要求
    let arr5 = [1, 2, 3, 4, 5];
    let arr = arr5.some(item => item > 5)
    console.log(arr)
    
    10、find 查找符合条件的元素
    let arr6 = [1, 2, 3, 4, 5, 6];
    // 存在的话直接返回要找的那个元素数据,否则为undefined
    let arr1 = arr6.find(item => item === 3)
    console.log('打印:',arr1);
    let arr2 = arr6.find(item => item === 7)
    console.log('打印:',arr2);
    
    11、findIndex查找数组对应元素的索引下标
    // 查找数组对应元素的索引下标
    let arr7 = [1, 2, 3, 4, 5, 6, 7];
    // 查找对应的元素,如果元素存在,返回索引下标值,不存在,返回-1
    let num = arr7.findIndex(item => item == 8)
    console.log(num);
    

    [2]、数组自带的相关方法

    1、toString()

    把数组转换为数组值的字符串

    let arr = ['a','b','c'];
    let str = arr.toString();
    console.log(str)
    // a,b,c
    
    2、join()

    将所有数组元素按某种形式结合为一个字符串

    let arr = ['a','b','c'];
    console.log(arr.join(''));
    // abc
    
    3、pop()

    pop()是数组末尾元素的删除方法,返回是弹出的那个元素

    let arr = ['a','b','c'];
    arr.pop();
    // c
    
    4、shift()

    shift()是数组头部删除的方法,所有其他元素“位移”到更低的索引

    let arr = ['a','b','c'];
    arr.shift();
    // a
    
    5、push()

    向数组添末尾加一个新的元素,需要留意它的返回值是一个新数组的长度

    let arr = ['a','b','c'];
    arr.push('d');
     
    // 4
    
    6、unshift()

    向数组头部添加新元素,并“反向位移”旧元素

    let arr = ['a','b','c'];
    arr.unshift('d');
     
    // 4
    
    7、splice()

    个人非常喜欢的方法,三个参数

    • 新元素被添加的位置索引
    • 删除多少个元素
    • 新元素值

    删除数组某个位置上的元素

    let arr = [1,2,3,4];
    
    arr.splice(1,1); //删除1号位置的1个元素
    
    // [2]
    

    数组某个位置上的新增元素

    let arr = [1,2,3,4];
    
    arr.splice(1,0,9); //1号位置删除0个新增1个元素9
    
    // [1, 9, 2, 3, 4]
    
    8、concat()

    通过合并连接现有数组来创建一个新数组

    let arr8 = [1,2,3,4];
    let arr9 = [5,6,7,8];
    console.log(arr8.concat(arr9));
    // [1, 2, 3, 4, 5, 6, 7, 8]
    
    9、sort()
    let arr8 = [3,2,1,4];
    console.log(arr8.sort());
    // [1, 2, 3, 4]
    

    相关文章

      网友评论

        本文标题:ES6方向:数组实用方法整理以及总结归纳

        本文链接:https://www.haomeiwen.com/subject/gdledltx.html