js[数组、对象数组去重和删除指定值];[判断空对象]

js日常应用总结一:

一、数组、对象数组去重

1、【数组】利用 ES6 Set 去重(ES6 中最常用)

特点:不考虑兼容性,这种去重的方法代码最少。这种方法还无法去掉 {} 空对象,后面的高阶方法会添加去掉重复 {} 的方法。

function unique (arr) {
  return Array.from(new Set(arr))
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]

2、 【数组,对象数组】利用 for 嵌套 for,然后 splice 去重(ES5 中最常用)

特点:双层循环,外层循环元素,内层循环时比较值。值相同时,则删去这个值。NaN和{}没有去重两个null直接消失了

function unique(arr){            
        for(var i=0; i<arr.length; i++){
            for(var j=i+1; j<arr.length; j++){
                if(arr[i]==arr[j]){         //第一个等同于第二个,splice方法删除第二个
                    arr.splice(j,1);
                    j--;
                }
            }
        }
return arr;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
//[1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {}, {}]  

3、【数组】利用 indexOf 去重

特点:新建一个空的结果数组,for 循环原数组,判断结果数组是否存在当前元素,如果有相同的值则跳过,不相同则 push 进数组。NaN、{}没有去重

function unique(arr) {
    var array = [];
    for (var i = 0; i < arr.length; i++) {
        if (array .indexOf(arr[i]) === -1) {
            array .push(arr[i])
        }
    }
    return array;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
// [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {}, {}] 

4、 【数组】利用 sort()去重

 特点:利用 sort() 排序方法,然后根据排序后的结果进行遍历及相邻元素比对。NaN、{}没有去重

function unique(arr) {
    arr = arr.sort()
    var arrry= [arr[0]];
    for (var i = 1; i < arr.length; i++) {
        if (arr[i] !== arr[i-1]) {
            arrry.push(arr[i]);
        }
    }
    return arrry;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
// [0, 1, 15, "NaN", NaN, NaN, {}, {}, "a", false, null, true, "true", undefined]     

5、【数组】利用 includes()去重

特点:通过 includes() 检测数组是否有某个值,{}没有去重

function unique(arr) {
    var array =[];
    for(var i = 0; i < arr.length; i++) {
            if( !array.includes( arr[i]) ) {//includes 检测数组是否有某个值
                    array.push(arr[i]);
              }
    }
    return array
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]   

6、【数组,对象数组】利用filter() 方法去重

特点:利用 filter过滤的方法通过索引比对,{}没有去重

function unique(arr) {
  return arr.filter(function(item, index, arr) {
    //当前元素,在原始数组中的第一个索引==当前索引值,否则返回当前元素
    return arr.indexOf(item, 0) === index;
  });
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, "NaN", 0, "a", {}, {}]

 对象数组根据对象中的某个值去重

const arr = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 1, name: 'Alice' },
  { id: 3, name: 'Charlie' },
];
const uniqueArr = arr.filter((obj, index, self) =>
  index === self.findIndex((t) => t.id === obj.id)
);
console.log(uniqueArr);
// 输出: [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' } ]

 

7、 【数组】利用 Map 数据结构去重

特点:创建一个空 Map 数据结构,遍历需要去重的数组,把数组的每一个元素作为 key 存到 Map 中。由于 Map 中不会出现相同的 key 值,所以最终得到的就是去重后的结果。NaN,{}没有去重

function arrayNonRepeatfy(arr) {
  let map = new Map();
  let array = new Array();  // 数组用于返回结果
  for (let i = 0; i < arr.length; i++) {
    if(map .has(arr[i])) {  // 如果有该key值
      map .set(arr[i], true); 
    } else { 
      map .set(arr[i], false);   // 如果没有该key值
      array .push(arr[i]);
    }
  } 
  return array ;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
//[1, "a", "true", true, 15, false, 1, {}, null, NaN, NaN, "NaN", 0, "a", {}, undefined]

 二、数组、对象数组删除某个值

1、【数组】使用 splice() 方法删除

splice() 方法可以删除数组中的元素,并可选地插入新元素。

它的语法为:array.splice(start, deleteCount, item1, item2, ...)

let array = [1, 2, 3, 4, 5];
let index = array.indexOf(3); // 找到要删除的值的索引
if (index > -1) {
    array.splice(index, 1); // 删除该值
}

2、【数组、对象数组】 使用filter()方法删除

当你想要删除特定的值时,这种方法更加简洁。

let array = [1, 2, 3, 4, 5];
let valueToRemove = 3;
array = array.filter(item => item !== valueToRemove);
// 假设有一个对象数组
let items = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' }
];
// 要删除的项的ID
let idToDelete = 2;
// 过滤掉ID为2的项,创建一个新数组
let filteredItems = items.filter(item => item.id !== idToDelete);
console.log(filteredItems);
// 输出: [{ id: 1, name: 'Item 1' }, { id: 3, name: 'Item 3' }]

 

3、【数组】 使用slice()concat()方法删除

当你想要创建一个新数组而不改变原数组时使用

let array = [1, 2, 3, 4, 5];
let valueToRemove = 3;
let newArray = array.slice().concat(); // 创建数组的副本
let index = newArray.indexOf(valueToRemove);
if (index > -1) {
    newArray.splice(index, 1); // 在副本上删除值
}

4、备注pop() 方法、shift() 方法

pop() 方法会删除数组中的最后一个元素,并返回该元素的值;arr.pop()

shift() 方法会删除数组中的第一个元素,并返回该元素的值;arr.shift()

三、如何判断一个对象是空对象

1、使用 ES6 新增的方法 Object.keys()来判断

判断属性名的数量是否为0。如果属性名的数量为0,表示对象是空对象

function isEmptyObject(obj) {
  return Object.keys(obj).length === 0;
}

2、 使用 JSON 自带的.stringify 方法来判断

function isEmptyObject(obj) {
  return JSON.stringify(obj) === '{}';
}

3、使用for...in循环遍历对象的属性

判断对象是否有可遍历的属性。如果没有可遍历的属性,表示对象是空对象

function isEmptyObject(obj) {
  for (var key in obj) {
    return false;
  }
  return true;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/755930.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

通天星CMSV6车载监控平台CompanyList信息泄露漏洞

1 漏洞描述 通天星CMSV6车载视频监控平台是东莞市通天星软件科技有限公司研发的监控平台,通天星CMSV6产品覆盖车载录像机、单兵录像机、网络监控摄像机、行驶记录仪等产品的视频综合平台。通天星科技应用于公交车车载、校车车载、大巴车车载、物流车载、油品运输车载、警车车…

昇思25天学习打卡营第5天|MindSpore-ResNet50图像分类

MindSpore-ResNet50图像分类 CIFAR-10数据集 CIFAR-10数据集是一个广泛使用的图像分类数据集,它包含了60,000张32x32的RGB彩色图像,分为10个类别,每个类别有6,000张图像。这些类别包括飞机(airplane)、汽车(automobile)、鸟类(bird)、猫(cat)、鹿(deer)、狗(dog…

最新测评!不可错过的三款网络代理服务商

在如今数字化高速发展的时代&#xff0c;网络代理服务已经成为许多企业和个人在进行网络活动时不可或缺的工具。为了给大家提供更具参考价值的推荐&#xff0c;我们的测评团队经过深入研究和实际测试&#xff0c;精心挑选了三款表现出色的网络代理服务商——极光HTTP、全民HTTP…

软件工程 例题

用例图 1. 某个学生成绩管理系统的部分参与者和用例总结如下。 教务管理人员: 登录系统教师、学生名单管理学期教学计划管理成绩管理。课程分配&#xff0c;每次课程分配时都必须打印任课通知书 学生&#xff1a; 登录系统选课。 教师: 登录系统成绩管理&#xff0c;并…

昇思25天学习打卡营第3天|网络构建

学习目标&#xff1a;熟练掌握网络构建方法 了解mindspore.nn 实例构建简单的神经网络 网络模型中各层参数 昇思大模型平台 AI实验室 学习记录&#xff1a; 一、关于mindspore.nn 在MindSpore中&#xff0c;Cell类是构建所有网络的基类&#xff0c;也是网络的基本单元。cell…

如何集成CppCheck到visual studio中

1.CPPCheck安装 在Cppcheck官方网站下载最新版本1.70&#xff0c;官网链接&#xff1a;http://cppcheck.sourceforge.net/ 安装Cppcheck 2.集成步骤 打开VS&#xff0c;菜单栏工具->外部工具->添加&#xff0c;按照下图设置&#xff0c;记得勾选“使用输出窗口” 2.…

高效数据采集监控平台 一体化平台 数据可视化!

提高工作效率&#xff0c;一直是各种厂家在寻找的方法。任何一种有效且实用的方法都值得去尝试。数据采集监控平台是一种能高效处理数据的方式&#xff0c;其主要工作内容是从各个产生数据的仪器设备传感器中采集数据、对数据进行集中整理整合、分析、显示、绘制图表、存储、传…

ubuntu22.04速装中文输入法

附送ubuntu安装chrome wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb sudo dpkg -i google-chrome-stable_current_amd64.deb

如何做互联网项目需求评估?

关于互联网项目需求评估&#xff0c;我们可以按照以下步骤进行&#xff1a; 一、确定项目主题和目标受众&#xff1a;这篇文章首先要明确你要评估的互联网项目的主题是什么&#xff0c;你的目标受众是谁&#xff1f;你需要对项目的背景和目的有清晰的了解。 二、项目规模和内…

将TensorFlow嵌入到Jupyter Notebook中,个人学习记录

起因是学习吴恩达机器学习过程中&#xff0c;在神经网络tensorflow的部分&#xff0c;需要在Jupyter Notebook中跑相关的代码&#xff0c;于是在网上找了很多资料&#xff0c;终于跑成功了。该笔记仅为个人学习记录&#xff0c;如有任何问题请见谅。 import numpy as np impor…

如何3分钟上手传得神乎其神的AI绘画!一篇文章带你搞懂!

前言 今年 AI 绘画绝对是大火的概念之一&#xff0c;这次加入了生财 AI 绘画小航海的船&#xff0c;今天是体验的第1天&#xff0c;那么 AI 绘画是什么呢&#xff1f; 简单来说就是利用 AI 实现绘画&#xff0c;在特定的软件或者程序中&#xff0c;输入一定的关键词或者指令&…

【地理库 Turf.js】

非常全面的地理库 &#xff0c; 这里枚举一些比较常用&#xff0c;重点的功能&#xff0c; 重点功能 提供地理相关的类&#xff1a;包括点&#xff0c;线&#xff0c;面等类。 测量功能&#xff1a;点到线段的距离&#xff0c;点和线的关系等。 判断功能&#xff1a; 点是否在…

哈尔滨高校大学智能制造实验室数字孪生可视化系统平台项目的验收

哈尔滨高校大学智能制造实验室数字孪生可视化系统平台项目的验收&#xff0c;标志着这一技术在教育领域的应用取得了新的突破。项目旨在开发一个数字孪生可视化系统平台&#xff0c;用于哈尔滨高校大学智能制造实验室的设备模拟、监测与数据分析。项目的主要目标包括&#xff1…

【Sklearn-驯化】sklearn中决策树cart的用法,看这篇就够了

【Sklearn-驯化】sklearn中决策树cart的用法&#xff0c;看这篇就够了 本次修炼方法请往下查看 &#x1f308; 欢迎莅临我的个人主页 &#x1f448;这里是我工作、学习、实践 IT领域、真诚分享 踩坑集合&#xff0c;智慧小天地&#xff01; &#x1f387; 免费获取相关内容文档…

【深海王国】小学生都能玩的语音模块?ASRPRO打造你的第一个智能语音助手(3)

Hi~ (o^^o)♪, 各位深海王国的同志们&#xff0c;早上下午晚上凌晨好呀~ 辛勤工作的你今天也辛苦啦(/≧ω) 今天大都督继续为大家带来系列——小学生都能玩的语音模块&#xff0c;帮你一周内快速学会语音模块的使用方式&#xff0c;打造一个可用于智能家居、物联网领域的语音助…

算法设计与分析--随机算法作业

随机算法作业1. 顶点覆盖问题问题描述参考答案解答 2. 负载均衡算法问题描述参考答案解答 3. MAX 3-SAT题目描述参考答案解答 随机算法–徐小华 随机算法作业 1. 顶点覆盖问题 问题描述 考虑下述 顶点覆盖问题 的简单随机算法&#xff1a; 开始时 S ∅ While S 不是一个顶…

基于Pico和MicroPython点亮ws2812彩色灯带

基于Pico和MicroPython点亮ws2812彩色灯带 文章目录 基于Pico和MicroPython点亮ws2812彩色灯带IntroductionPracticeConclusion Introduction 点亮发光的LED灯是简单有趣的实验&#xff0c;点亮多个ws2812小灯串联起来的灯带&#xff0c;可对多个彩色小灯进行编程&#xff0c;…

上位机图像处理和嵌入式模块部署(mcu 项目1:上位机编写)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 前面&#xff0c;我们说过要做一个报警器。如果只是简单做一个报警器呢&#xff0c;这个基本上没有什么难度。这里&#xff0c;我们就适当提高一下…

敏捷开发笔记(第9章节)--开放-封闭原则(OCP)

目录 1&#xff1a;PDF上传链接 9.1 开放-封闭原则&#xff08;OCP&#xff09; 9.2 描述 9.3 关键是抽象 9.3.1 shape应用程序 9.3.2 违反OCP 糟糕的设计 9.3.3 遵循OCP 9.3.4 是的&#xff0c;我说谎了 9.3.5 预测变化和“贴切的”结构 9.3.6 放置吊钩 1.只受一次…

qt实现打开pdf(阅读器)功能用什么库比较合适

关于这个问题&#xff0c;网上搜一下&#xff0c;可以看到非常多的相关博客和例子&#xff0c;可以先看看这个总结性的博客&#xff08;https://zhuanlan.zhihu.com/p/480973072&#xff09; 该博客讲得比较清楚了&#xff0c;这里我再补充一下吧&#xff08;qt官方也给出了一些…