ES6ES6~ES12前端开发那些事儿

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

2021-05-07  本文已影响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]
上一篇下一篇

猜你喜欢

热点阅读