zoukankan      html  css  js  c++  java
  • JavaScript数组去重的10种方法

    「数组去重」的确是个老生常谈的问题了,但是你真正的掌握了吗?平时开发中是不是用最简单粗暴的方法来去重?注意到它的性能问题了吗?当面试官对你回答的四个去重方法都不满意时你可以想出更简单且性能能更好的方法吗?

    下面介绍几种常用的方法,从简单到更简单,从性能差到性能好,开始!

    1. for循环(两次) + 新数组

    let arr = [1, 'a', 'a', 'b', 'd', 'e', 'e', 1, 0, 2, 2, 3];
    function unique(arr){
    let newArr = [arr[0]];
    for(let i = 1; i < arr.length; i++){
    let flag = false;
    for(var j = 0; j < newArr.length; j++){
    if(arr[i] == newArr[j]){
    flag = true;
    break;
    }
    }
    if(!flag){
    newArr.push(arr[i]);
    }
    }
    return newArr;
    }
    console.log(unique(arr)); // [1, "a", "b", "d", "e", 0, 2, 3]

    2. for循环(一次) + 新数组 + 新对象

    let arr = [1, 'a', 'a', 'b', 'd', 'e', 'e', '1', 0, 2, 2, 3];
    function unique(arr){
    let newArr = [];
    let obj = {};
    for (let i = 0; i < arr.length; i++) {
    if (!obj[typeof arr[i] + arr[i]]) {
    obj[typeof arr[i] + arr[i]] = 1;
    newArr.push(arr[i]);
    }
    }
    return newArr;
    }
    console.log(unique(arr)); // [1, "a", "b", "d", "e", "1", 0, 2, 3]

    3. for循环(一次) + sort()排序 + 新数组

    let arr = [1, 'a', 'a', 'b', 'd', 'e', 'e', 1, 0, 2, 2, 3];
    function unique(arr){
    arr.sort();
    let newArr = [arr[0]];
    for(let i = 1; i < arr.length; i++){
    if(arr[i] !== newArr[newArr.length - 1]){
    newArr.push(arr[i]);
    }
    }
    return newArr;
    }
    console.log(unique(arr)); // [0, 1, 2, 3, "a", "b", "d", "e"],这个不错哈,而且排序了

    4. forEach + indexOf() + 新数组

    let arr = [1, 'a', 'a', 'b', 'd', 'e', 'e', 1, 0, 2, 2, 3];
    function unique(arr){
    let newArr = [];
    arr.forEach((item, index, array) => {
    if(array.indexOf(item) === index) {
    newArr.push(item);
    }
    });
    return newArr;
    }
    console.log(unique(arr)); // [1, "a", "b", "d", "e", 0, 2, 3]

    5. filter + indexOf()

    let arr = [1, 'a', 'a', 'b', 'd', 'e', 'e', 1, 0, 2, 2, 3];
    function unique(arr){
    return arr.filter((item, index, array) => array.indexOf(item) === index);
    }
    console.log(unique(arr)); // [1, "a", "b", "d", "e", 0, 2, 3]

    6. filter + Map()

    let arr = [1, 'a', 'a', 'b', 'd', 'e', 'e', 1, 0, 2, 2, 3];
    function unique(arr){
    const seen = new Map();
    return arr.filter((item) => !seen.has(item) && seen.set(a, 1));
    }
    console.log(unique(arr)); // [1, "a", "b", "d", "e", 0, 2, 3]

    7. Set() + Array.from

    let arr = [1, 'a', 'a', 'b', 'd', 'e', 'e', 1, 0, 2, 2, 3];
    function unique(arr){
    return Array.from(new Set(arr));
    }
    console.log(unique(arr)); // [1, "a", "b", "d", "e", 0, 2, 3]

    8. Set() + [...()]

    let arr = [1, 'a', 'a', 'b', 'd', 'e', 'e', 1, 0, 2, 2, 3];
    function unique(arr){
    return [...(new Set(arr))];
    }
    console.log(unique(arr)); // [1, "a", "b", "d", "e", 0, 2, 3]

    9. reduce + includes()

    let arr = [1, 'a', 'a', 'b', 'd', 'e', 'e', 1, 0, 2, 2, 3];
    function unique(arr){
    return arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);
    }
    console.log(unique(arr)); // [1, "a", "b", "d", "e", 0, 2, 3]

    10. 第三方库

    jQuery: $.unique
    underscore: _.unique

    仔细一看,去重的方法真的挺多的哈,如果支持ES6建议使用以上第7种或第8种的Set()方法,如果支持ES5且只需兼容一般浏览器建议使用第五种,不仅代码简洁,而且性能优越,我一般使用第5种filter()方法,你呢?

  • 相关阅读:
    Python 创建包含列表的元组
    Python 创建特殊元组tuple
    Bean named 'XXX' is expected to be of type [XXX] but was actually of type [com.sun.proxy.$Proxy7
    小米手机安装Google框架
    前端框架
    Microsoft Project项目管理工具
    Spring AOP无法拦截Controller的原因
    sql分页优化
    npm和Node.js简介
    启动OpenOffice服务
  • 原文地址:https://www.cnblogs.com/lewiscutey/p/8269567.html
Copyright © 2011-2022 走看看