精华内容
下载资源
问答
  • ES6实现数组去重

    万次阅读 2018-03-08 23:41:25
    ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。 Array.from方法可以将 Set 结构转为...利用这些特点可以得出两种数组去重的方法: 方法一:利用展开运算符和Set成员的唯一...

    ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。

    Array.from方法可以将 Set 结构转为数组。
    例如:

    const items = new Set([1, 2, 3, 4, 5]);
    const array = Array.from(items);
    

    利用这些特点可以得出两种数组去重的方法:

    方法一:利用展开运算符和Set成员的唯一性

    let arr = [1, 2, 3, 2, 1];
    
    function unique(arr){
        return [...new Set(arr)];
    }
    
    console.log(unique(arr))  // [1, 2, 3]
    

    方法二:利用Array.from和Set成员的唯一性

    let arr = [1, 2, 3, 2, 1];
    
    function unique(arr){
        return Array.from(new Set(arr));
    }
    console.log(unique(arr))   // [1, 2, 3]
    

    注:ES5数组去重
    方法一: 利用对象key唯一性

    var arr = [1, 2, 3, 2, 1];
    
    Array.prototype.unique = function(){
       var res = [];
       var json = {};
        for(var i = 0; i < this.length; i++){
            if(!json[this[i]]){
                res.push(this[i]);
                json[this[i]] = true;
            }
        }
        return res;
    }
    console.log(arr.unique())  // [1, 2, 3]
    

    方法二:利用indexOf

    var arr = [1, 2, 3, 2, 1];
    
    function unique(arr){
       var res  = [];
         for(var i = 0; i < arr.length; i++){
             if(res.indexOf(arr[i]) === -1){
                 res.push(arr[i])
             }
         }
         return res;
     }
     
     console.log(unique(arr));  // [1, 2, 3]
    
    展开全文
  • 如何使用ES6实现数组去重,第一种方法 "Set",第二种方法 “Filter”,第二种方法 “Filter”,有详细实现过程。
    const array = ['?', 1, 2, 3, '?','?', 3];
    
    // 第一种方法 "Set"
    [...new Set(array)]
    
    // 第二种方法 “Filter”
    array.filter((item, index) => array.indexOf(item) === index);
    
    // 第三种方法 "Reduce"
    array.reduce((unique, item) => unique.includes(item) ? unique : [...unique, item], []);
    
    // 输入:
    // ["?", 1, 2, 3]
    

    一、使用 Set

    ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。

    1. 我们通过传递一个数组来创建一个新的集合,因为 “Set” 只允许唯一的值,所以重复的项将被删除。
    2. 重复项已被删除,接下来使用扩张运算符(…)将它转换回数组。
    const array = ['?',1,2,'?','?',3];
    
    // 第一步
    const uniqueSet = new Set(array);
    // Set {"?", 1, 2, 3}
    
    // 第二步
    const backToArray = [...uniqueSet];
    // ["?", 1, 2, 3]
    

    也可以使用 Array.from 将一个集合转换成数组:

    const array = ['?',1,2,'?','?',3];
    Array.from(new Set(array));
    
    // ["?", 1, 2, 3]
    

    二、使用 filter

    为了理解这种实现方式,我们先来看下这两个方法的作用:indexOffilter

    indexOf

    indexOf 方法可返回给定元素在数组中首次出现的位置

    const array = ['?',1,2,'?','?',3];
    
    array.indexOf('?');  // 0
    array.indexOf(1);     // 1
    array.indexOf(2);     // 2
    array.indexOf(3);     // 5
    

    filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。

    我们通过判断元素当前索引与数组元素首次出现的位置是否相同,来作为筛选条件

    让我们来看看循环数组时发生了什么

    const array = ['?',1,2,'?','?',3];
    
    array.filter((item, index) => {
    	console.log(
    	// 输出元素 item
    	item,
    	// 输出 index
    	index,
    	// 输出 indexOf
    	array.indexOf(item),
    	// 输出过滤条件
    	array.indexOf(item) === index,
    	);
    	
    	return array.indexOf(item) === index
    });
    

    下面是console.log的输出。index 与 indexOf 不匹配的称为重复项。不包含在过滤后的数组中。
    在这里插入图片描述
    同样,我们可以使用 filter() 方法从数组中找出重复的值

    const array = ['?',1,2,'?','?',3];
    
    array.filter({item, index} => array.indexOf(item) !== index);
    
    // ['?','?']
    

    三、使用 reduce

    reduce() 方法对数组中的每个元素执行一个由我们提供的reducer函数(升序执行),将其结果汇总为一个值。

    在本例子中,我们的reducer函数是去检查我们的最终数组是否包含当前元素。
    如果没有,则添加到最终数组中。否则,跳过该数组并返回原最终数组。

    reduce 有点难理解,让我们通过查看每一步的输出去更好的理解:

    const array = ['?',1,2,'?','?',3];
    
    array.reduce((unique, item) => {
    	console.log(
    	// 输出item
    	item,
    	// 输出最终数组
    	unique,
    	// 输出判断条件(当输出 `false` ,把该元素push到最终数组)
    	unique.includes(item),
    	// 输出函数reducer函数结果
    	unique.includes(item) ? unique : [...unique, item],
    	);
    	return unique.includes(item) ? unique : [...unique, item]
    }, []);  // 累加器的初始值是个空数组
    
    // 最终输出:
    // ["?", 1, 2, 3]
    

    下面是console.log的输出结果:
    在这里插入图片描述

    展开全文
  • es6实现数组去重

    2018-12-04 15:36:47
    首先针对简单的数组 [1, 2, 3, 3, 4, 4, 5] 进行去重。 let testArr = [1, 2, 3, 3, 4, 4, 5] let newArr = Array.from(new Set(testArr)) console.log(newArr) 控制台输出结果: 下面针对数组对象进行去重。 ...

    首先针对简单的数组 [1, 2, 3, 3, 4, 4, 5] 进行去重。

    let testArr = [1, 2, 3, 3, 4, 4, 5]
    let newArr = Array.from(new Set(testArr))
    console.log(newArr)

    控制台输出结果:

    下面针对数组对象进行去重。

    比如我这里有个数组:

        [
          {
            id: 1111,
            name: 'aaa'
          },
          {
            id: 2222,
            name: 'bbb'
          },
          {
            id: 1111,
            name: 'aaa'
          },
          {
            id: 3333,
            name: 'ccc'
          }
        ]

    要实现根据 id 去重,应该得到的结果是这样的:

        [
          {
            id: 1111,
            name: 'aaa'
          },
          {
            id: 2222,
            name: 'bbb'
          },
          {
            id: 3333,
            name: 'ccc'
          }
        ]

    那么在es6里应该怎么做呢?

    其实一句话就能搞定:

    testArr = testArr.filter((s => a => !s.has(a.id) && s.add(a.id))(new Set(testArr)))

    或者

    testArr = testArr.filter((s => a => !s.has(a.id) && s.set(a.id, a.name))(new Map()))

    完整代码如下: 

        let testArr = [
          {
            id: 1111,
            name: 'aaa'
          },
          {
            id: 2222,
            name: 'bbb'
          },
          {
            id: 1111,
            name: 'aaa'
          },
          {
            id: 3333,
            name: 'ccc'
          }
        ]
        testArr = testArr.filter((s => a => !s.has(a.id) && s.add(a.id))(new Set(testArr)))
        // 或者
        // testArr = testArr.filter((s => a => !s.has(a.id) && s.set(a.id, a.name))(new Map())) 
        console.log(testArr)

    控制台输出:

     

    展开全文
  • ES6数组去重的三个简单办法

    万次阅读 多人点赞 2019-06-19 00:43:09
    简单说一下利用ES6实现数组去重的三个办法。 第一种: 利用Map对象和数组的filter方法 贴上相关代码 打印后的结果 通过打印我们发现,确实实现了我们想要的效果。那么下面简单来解释一下。 1.Map对象是ES6提供的一...

    ES6数组去重的三个简单办法

    简单说一下利用ES6实现数组去重的三个办法。
    第一种: 利用Map对象和数组的filter方法

    贴上相关代码
    在这里插入图片描述
    打印后的结果
    在这里插入图片描述
    通过打印我们发现,确实实现了我们想要的效果。那么下面简单来解释一下。
    1.Map对象是ES6提供的一个新的数据结构,其中has的办法是返回一个布尔值,表示某个值是否存在当前的Mp对象之中,set的办法是给Map对象设置key/value。
    2.filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
    所以说,Map对象结合filter方法可以达到数组去重的效果~

    第二种:利用Set对象和数组的Array.from方法

    同样贴上相关代码片段
    在这里插入图片描述
    打印运行后的结果
    在这里插入图片描述
    简单来说,第二种方法比第一种还简单。同样来简单解释一下。
    1.Set是ES6新提供的数据结构,类似于数组,但是本身没有重复值。
    2.Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)。
    所以set结合Array.from同样可以达到数组去重的效果。不过需要注意的是,主流浏览器像Chrome,Firfox,Opera,Safari,包括微软的Edge,都是支持的,但是唯独IE系列不支持。

    第三种:利用Set+扩展运算符 …

    第三种办法可以说是更简单
    贴上相关代码
    在这里插入图片描述
    打印后运行的结果
    在这里插入图片描述

    这就是利用ES6新特性达到数组去重的三种办法,这三种办法有个共同的好处就是代码简洁,对于undefined和NaN也同样可以达到去重的效果~~
    如果你有其他办法也欢迎一起分享一下~
    展开全文
  • 数组去重是个经典的案例,虽然经常有看到,但是并没有完全去理解,今天好好做下笔记,温习温习。 1 Array.prototype.unique3 = function(){ 2 var res = []; 3 var json = {}; 4 for(var i = 0;i<...
  • ES6实现数组去重,很好用

    千次阅读 2018-06-20 11:28:27
    Set :可以接收一个数组或者是类数组对象,自动去重。Array.from:把类数组对象、可迭代对象转化为数组。向 Set 加入值的时候,不会发生类型转换,所以2011和"2011"是两个不同的值。参照阮大神的...
  • get 方法: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&...1.数组去重&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;script&gt;
  • ES6数组去重 使用ES6提供的Set方法,可以快速实现素组去重 let arr = [1,2,3,4,2,1,5,3]; let newArr = new Set(arr) ---> Set(5) {1, 2, 3, 4, 5} arr = [...newArr] ---> [1,2,3,4,5] ES6字符串去重 使用...
  • 主要介绍了JS实现数组去重及数组内对象去重功能,结合实例形式分析了ES5与ES6两种版本针对数组去重的相关操作技巧,需要的朋友可以参考下
  • ES6数组去重

    2019-12-30 16:42:58
    ES6新增的set和map集合类型,其中set用于...则可以利用set来实现数组去重 const s = new Set([1,1,2,2,1,3,2,3,4,5]); console.log(s); // Set(5) {1, 2, 3, 4, 5} const arr = [...s]; console.log(arr); //...
  • ES6 提供了新的数据结构 Set。它类似于数组,但是成员...结合以上所述可以很方便实现数组去重 function unique(arr){ return Array.from(new Set(arr)) } unique([1,3,4,3,6,9,5,4,3])//结果:[1, 3, 4, 6, 9, 5] .
  • 使用newSet实现数组去重必须结合forof,如果使用for循环就实现不了 var arr = new Set([1, 2, 1, 1, 2, 3, 3, 4, 4]); for (var el of arr) { console.log(el) }   转载于:...
  • ES6的新方法实现数组去重 ES6里新添加了两个很好用的东西,set和Array.from。 set是一种新的数据结构,它可以接收一个数组或者是类数组对象,自动去重其中的重复项目。 在这我们可以看见,重复的项目已经被去掉了,...
  • ES5及之前大多都是用遍历和算法来实现数组去重,在ES6有一个更为简便的方式。
  • 字符串去重跟数组去重大同小异,将字符串转成数组即可使用数组去重方法。ES5常用方式: function unique(array) { var result = []; for(var i = 0; i &lt; array.length; i++) { if (result.indexOf(array[i...

空空如也

空空如也

1 2 3 4 5 ... 16
收藏数 318
精华内容 127
关键字:

es6实现数组去重