zoukankan      html  css  js  c++  java
  • js 数组去重的几种方式及原理

    let arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
    / 该方法最佳
    // 该hasOwnProperty()方法返回一个布尔值,指示对象是否具有指定的属性作为其自己的属性
    // const object1 = new Object();
    // object1.property1 = 42;

    // console.log(object1.hasOwnProperty('property1'));
    // // expected output: true

    // console.log(object1.hasOwnProperty('toString'));
    // // expected output: false

    // console.log(object1.hasOwnProperty('hasOwnProperty'));
    // // expected output: false
    // 该方法与第二种使用的indexOf的特性有异曲同工之妙,同样是用filter做过滤,判断当前obj是否有遍历的参数
    // 没有就添加进去,有的话就跳过
    function unique4(params) {
    let obj = {};
    return arr.filter((item,index,arr)=>{
    return obj.hasOwnProperty(typeof item + item)?false:(obj[typeof item + item] = true)
    })
    }
    console.log(unique4(arr))

    // 利用ES6 set 去重
    function unique1(arr) {
    return Array.from(new Set(arr))
    }
    console.log(unique1(arr))

    // Array.from() 方法从一个类似数组或可迭代对象中创建一个新的数组实例。
    // console.log(Array.from('foo'));
    // expected output: Array ["f", "o", "o"]

    // console.log(Array.from([1, 2, 3], x => x + x));
    // expected output: Array [2, 4, 6]

    // Set 对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用。下边是地址
    // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set


    // 数组去重
    // 方法。 indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
    // 利用indexOf 检索的字符串值没有出现,则该方法返回 -1。
    function unique2(params) {
    let temp = [];
    let len = params.length;
    for(let i = 0; i < len; i++) {
    if(temp.indexOf(params[i]) === -1) {
    temp.push(params[i]);
    }
    }
    return temp;
    }
    console.log(unique2(arr))

    // item 必须。当前元素的值 index  可选。当前元素的索引值 arr可选。当前元素属于的数组对象
     
    // 特别点:利用filter作为for循环,使用indexOf(item,0)拿到当前索引的下标,做对比
    function unique3(params) {
    return params.filter((item,index,arr)=>{
    return arr.indexOf(item,0) === index;
    })
    }
    console.log(unique3(arr))




     

    // includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回false。
    // var array1 = [1, 2, 3];
    // console.log(array1.includes(2));
    // expected output: true

    // var pets = ['cat', 'dog', 'bat'];
    // console.log(pets.includes('cat'));
    // expected output: true

    // console.log(pets.includes('at'));
    // expected output: false

    function unique5(params) {
    // if(!Array.isArray(arr)) { // 用于确定传递的值是否是一个 Array。
    // console.log('type error');
    // return
    // }
    let array = [];
    let len = params.length;
    for(let i = 0; i < len; i++) {
    if(!array.includes(arr[i])) {
    array.push(arr[i]);
    }
    }
    return array;
    }
    console.log(unique5(arr))

    // 该reduce()方法在数组的每个成员上执行reducer函数(您提供),从而生成单个输出值。
    const array1 = [1, 2, 3, 4];
    // const reducer = (accumulator, currentValue) => accumulator + currentValue;

    // 1 + 2 + 3 + 4
    // console.log(array1.reduce(reducer));
    // expected output: 10

    // 5 + 1 + 2 + 3 + 4
    // console.log(array1.reduce(reducer, 5));
    // expected output: 15
    // 该方法的思路依然是reduce作循环,利用includes判断是否有这个参数,没有的话就放进返回数组里
    function unique6(params) {
    return params.reduce((prev,cur)=> prev.includes(cur)? prev: [...prev,cur],[]);
    }
    console.log(unique6(arr));


    // set() 方法为 Map 对象添加或更新一个指定了键(key)和值(value)的(新)键值对。
    // has()返回一个布尔值,指示项是否存在具有指定键的项。

    // 思路:首先在空的map实例中判断是否有当前Boolean值,如有没有进入else
    // 将当前值存入map,再当前值push进入array,
    // 如果当前值存在map里,就将当前值再放入map中
    function unique7(params) {
    let map = new Map();
    let array = new Array();
    let len = params.length;
    for(let i = 0; i < len; i++) {
    if(map.has(params[i])) {
    map.set(params[i], true)
    }else {
    map.set(params[i], false)
    array.push(params[i])
    }
    }
    return array;
    }
    console.log(unique7(arr));

    // 该sort()方法对数组中的元素进行排序并返回该数组。默认排序顺序是在将元素转换为字符串,
    // 然后比较它们的UTF-16代码单元值序列时构建的。

    // 由于它取决于实现,因此无法保证排序的时间和空间复杂性

    function unique8(params) {
    // if(!Array.isArray(params)) {
    // console.log('type error!')
    // return;
    // }
    params = params.sort();
    let array = [params[0]];
    let len = params.length;
    for(let i = 1; i < len; i++) {
    if(params[i] !== arr[i-1]) {
    array.push(arr[i])
    }
    }
    return array;
    }
    console.log(unique8(arr));//NaN、{}没有去重
     

    function unique9(params){
    for(let i=0; i<params.length; i++){
    for(let j=i+1; j<params.length; j++){
    if(params[i]==params[j]){ //第一个等同于第二个,splice方法删除第二个
    params.splice(j,1);
    j--;
    }
    }
    }
    return params;
    }
    console.log(unique9(arr));//NaN、{}没有去重
     
     
     
     
    参考地址: https://segmentfault.com/a/1190000016418021
  • 相关阅读:
    ES6学习笔记(五)函数的扩展
    ES6学习笔记(四)数值的扩展
    ES6学习笔记(二)变量的解构与赋值
    ES6学习笔记(一)新的变量定义命令let和const
    JS对象继承与原型链
    JS构造函数、对象工厂、原型模式
    获取地图的坐标
    大屏页面
    如何更新git?
    ES6——多个箭头函数
  • 原文地址:https://www.cnblogs.com/neilniu/p/9635055.html
Copyright © 2011-2022 走看看