JS 数据处理技巧及小算法汇总(转载)

1、根据属性来更新一个数组中的对象

 const arr = [ {id: 1, score: 1}, {id: 2, score: 2}, {id: 3, score: 4}];
//更新的值
const newValue = {id: 3, score: 3}

 

  更新数组中id为3的score值。

  Es6 装逼写法如下:

const result = initial.map(x => x.id === newValue.id ? newValue : x); //是不是很装B??

 console.log(updated) // => [ { id: 1, score: 1 }, { id: 2, score: 2 }, { id: 3, score: 3 } ]

  

  首先数组是利用数组map方法去遍历arr的每一个值,然后进行于newValue的id进行对比,不同返回原来的项,相同返回newValue.

  不装逼清晰点写法:

const updated = arr.map(function(item){return item.id == newValue.id ? newValue : item ;
});

 console.log(updated) // => [ { id: 1, score: 1 }, { id: 2, score: 2 }, { id: 3, score: 3 } ]

   2、数组去重

  对于大神来说,我有一百种方法处理这个问题。

 

   方案 A

复制代码

// 遍历数组,建立新数组,利用indexOf判断是否存在于新数组中,不存在则push到新数组,最后返回新数组 
function unique(ar) {var ret = [];for (var i = 0, j = ar.length; i < j; i++) {if (ret.indexOf(ar[i]) === -1) {ret.push(ar[i]);}}return ret;
}

复制代码

  方案B

复制代码

//遍历数组,利用object对象保存数组值,判断数组值是否已经保存在object中,未保存则push到新数组并用object[arrayItem]=1的方式记录保存,这个效率比A高
function unique(ar) {var tmp = {},ret = [];for (var i = 0, j = ar.length; i < j; i++) {if (!tmp[ar[i]]) {tmp[ar[i]] = 1;ret.push(ar[i]);}}return ret;
}

复制代码

  方案C

//ES6
const numbers = [1, 2, 1, 1, 2, 1, 3, 4, 1 ];
const uniq = [...new Set(numbers)] // => [ 1, 2, 3, 4 ];
const uniq2 = Array.from(new Set(numbers)) // => [ 1, 2, 3, 4 ];

  稍等,我还有方案D

  方案D

复制代码

//filter 
function unique (arr) {var res = arr.filter(function (item, index, array) {return array.indexOf(item) === index; //array.indexOf(item) === index 说明这个元素第一次出现,后面这个item再出现他的item肯定不是index了
}) return res; }

复制代码

   欢迎大家留言区给出剩下96种方案。

 

三、根据属性删除数组中的一个对象

 // 根据属性删除数组中的对象,利用filter进行过滤数组中id相同的项const initial = [ {id: 1, score: 1}, {id: 2, score: 2}, {id: 3, score: 4}];const removeId = 3;const without3 = initial.filter(x => x.id !== removeId);console.log(without3) // => [ { id: 1, score: 1 }, { id: 2, score: 2 } ]

四、删除一个对象上的属性(key)

//利用es6的 ...运算符将其他属性和a属性分开来,这波操作很亮眼 !
const obj = {a: 1, b: 2, c: 3};
const {a, ...newObj} = obj;
console.log(newObj) // => {b: 2, c: 3};


     

五、两个Set对象相减

//利用filter对s1进行过滤 ,去掉s2中存在的数字
const s1 = [ 1, 2, 3, 4, 5 ];const s2 = [ 2, 4 ];const subtracted = s1.filter(x => s2.indexOf(x) < 0);console.log(subtracted);//[1,3,5]

 同理这样是可以去出一个数组中指定的元素

复制代码

//去掉s3中的2和4const s3 = [ 1, 2, 3, 4, 5, 4, 5, 6, 2, 2, 4 ];const s2 = [ 2, 4 ];const subtracted1 = s3.filter(x => s2.indexOf(x) < 0);console.log(subtracted1); // [1, 3, 5, 5, 6]

复制代码

六、判断一个单词是否是回文

回文是指把相同的词汇或句子,在下文中调换位置或颠倒过来,产生首尾回环的情趣,叫做回文。例如 12345654321  abcdedbcba 等。

//利用reverse 进行字符串反转,然后和原字符串对比是否相等
function isPalindrom(str) {  return str == str.split('').reverse().join('');
}

七、统计一个字符串出现最多的字母

复制代码

//统计每个字母出现的次数,然后存起来,然后进行比较
function maxTimesChar(str) {  if(str.length == 1) {return str;}let charObj = {};for(let i=0;i<str.length;i++) {if(!charObj[str.charAt(i)]) {charObj[str.charAt(i)] = 1;}else{charObj[str.charAt(i)] += 1;}}let maxChar = '',maxValue = 1;for(var k in charObj) {if(charObj[k] >= maxValue) {maxChar = k;maxValue = charObj[k];}}return maxChar;}

复制代码

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

让行内元素(如图片)在div中水平垂直居中 (干货)

&#xff08;1&#xff09;第一种&#xff1a;用vertical-align <div class"method1"><span class"tiptop"></span><img class"test" src"img/Dota2.jpg" alt"dota2"> </div><style> …

对Canvas的研究

1。标签定义图形&#xff0c;比如图表和其他图像&#xff0c;您必须使用脚本来绘制图形。 什么是 canvas? HTML5 <canvas> 元素用于图形的绘制&#xff0c;通过脚本 (通常是JavaScript)来完成. <canvas> 标签只是图形容器&#xff0c;您必须使用脚本来绘制图形。 …

Vue中watch的简单应用

Vue.js 有一个方法 watch&#xff0c;它可以用来监测Vue实例上的数据变动。 如果对应一个对象&#xff0c;键是观察表达式&#xff0c;值是对应回调&#xff0c;值也可以是方法名&#xff0c;或者是对象&#xff0c;包含选项。 下面写两个demo&#xff0c;参考demo来了解一下 …

小程序中textarea点击按钮事件

textarea 的 blur 事件会晚于页面上的 tap 事件&#xff0c;如果需要在 button 的点击事件获取 textarea&#xff0c;可以使用 form 的 bindsubmit。 <view class"section"><form bindsubmit"bindFormSubmit"><textarea placeholder"f…

placeholder的兼容处理方法

placeholder是html5新增的一个属性&#xff0c;极大的减轻了表单提示功能的实现&#xff0c;但是对于IE6-IE9真的是只能靠自己写啦&#xff01; 但是在自己写时会掉进了一个坑里&#xff0c;还好用了一会时间还是爬出来啦。 最终的解决方法方法如下&#xff1a; 1 <form nam…

常用数据处理

1、树形数据转换 在处理商品分类数据、企业列表数据等情况下&#xff0c;后台会返回到前台所有的数据。我们需要根据parentId,数据ID将数据转换为树形数据进行渲染。 /*** 树形数据转换* param {*} data* param {*} id* param {*} pid*/ export function treeDataTranslate(d…

运行Xcode时出现 Lazy loading NSBundle MobileCoreServices.framework和 Loaded MobileCoreServices.framework

运行Xcode时出现 Lazy loading NSBundle MobileCoreServices.framework和 Loaded MobileCoreServices.framework 解决方案&#xff1a; 1、打开项目的 Product-->Scheme --> Edit Scheme--> Run-->Arguments-->Environment Variables添加Name为OS_ACTIVITY_MO…

less中的for循环

.loop(count) when (counter > 0) { .loop((counter - 1)); // 递归调用自身width: (10px * counter); // 每次调用时产生的样式代码}转载于:https://www.cnblogs.com/zhouyideboke/p/11178271.html

详解 vue-cli 的打包配置文件代码(转)

一、前言 对于webpack基础不好&#xff0c;node指令不通的童鞋。估计对自己搭建Vue、react脚手架是相当头疼的&#xff0c;有种无从下手的感觉。然而&#xff0c;从头看这2块&#xff0c;耗时太长&#xff0c;而且说实话得练才行&#xff0c;不练练手看不明白。那大多数人就采取…

iOS之页面布局-踩坑的原由

iOS之页面布局 原文请点击 在《iOS 7 UI Transition Guide》中有在《iOS 7 UI Transition Guide》的Bar and Bar Buttons一节中有这么一段话 In iOS 7, the status bar is transparent, and other bars—that is, navigation bars, tab bars, toolbars, search bars, and sco…

工作中的javascript代码收集及整理

有个pub库放在blog的文件夹里面了,注意查查1.用javascript去除字符串左右空格,包括全角和半角//用javascript去除字符串左右空格,包括全角和半角String.prototype.trim function() { //其中表示为&#xff1a;对象.属性.方法函数方法var strTrim this.replace(/(^\s*)|(\s*$)/…

iOS11 更改状态栏、导航栏颜色的方法

ios上状态栏 就是指的最上面的20像素高的部分 状态栏分前后两部分&#xff0c;要分清这两个概念&#xff0c;后面会用到&#xff1a; 前景部分&#xff1a;就是指的显示电池、时间等部分&#xff1b; 背景部分&#xff1a;就是显示黑色或者图片的背景部分&#xff1b; (一)设…

i春秋DMZ大型靶场实验(四)Hash基础

下载工具包 打开目标机 通过目录爆破发现 phpmyadmin 在登录位置尝试注入 返现 可以注入 直接上sqlmap 上 bp 代理抓包 sqlmap.py -r bp.txt --dbs 利用sqlmap 跑出root 密码 root666888 登录 phpmyadmin t通过路径报错得到绝对路径 c:\\www\\1.php root 权限…

解决MAC系统升级导致COCOAPODS失效问题

使用pod install出现如下错误 -bash: /usr/local/bin/pod: /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/ruby: bad interpreter: No such file or directory 这是Mac升级系统导致&#xff0c;当你的Mac系统升级为 high siera的时候&#xff0c;别忘记更新…

ASP.NET中进行消息处理(MSMQ) 二

在我上一篇文章《ASP.NET中进行消息处理(MSMQ)一》里对MSMQ做了个通俗的介绍&#xff0c;最后以发送普通文本消息和复杂的对象消息为例介绍了消息队列的使用。 本文在此基础上继续介绍MSMQ的相关知识点&#xff0c;最后还是通过一个示例程序来分析MSMQ在实际项目开发中的应用。…

js常用的数组方法

js常用的数组方法 1.filter() 不会改变原始数组&#xff0c;新数组中的元素是过滤指定数组中符合条件的所有元素 两种写法区别&#xff1a;有return 的加了{}&#xff0c;否则没有return不需要加{} var aa [1, 2, 3, 4, 4, 5, 6, 6]; var bb aa.filter((item, index, sel…

iOS 适配HTTPS方法

一切为了迎合苹果 在WWDC 2016开发者大会上&#xff0c;苹果宣布了一个最后期限&#xff1a;到2017年1月1日 App Store中的所有应用都必须启用 App Transport Security安全功能。App Transport Security&#xff08;ATS&#xff09;是苹果在iOS 9中引入的一项隐私保护功能&…

模板—tarjan求割边

int dfn[MAXN],low[MAXN],cnt; void tarjan(int x,int edg) {low[x]dfn[x]cnt;for(int if(x);i;in(i))if(!dfn[v(i)]){tarjan(v(i),i);low[x]min(low[x],low[v(i)]);if(low[v(i)]>dfn[x])isbridge[i]isbridge[i^1]1;}else if(i!(edg^1))low[x]min(low[x],dfn(v(i))); } 转载…

GoJs Pictures 官方介绍文档

图片 使用Picture类显示图像。 最常见的用法是使用URL字符串设置Picture.source属性&#xff0c;以及通过GraphObject.desiredSize&#xff08;图对象的所需尺寸&#xff09;获取或通过设置GraphObject.width&#xff08;图对象的宽&#xff09;和GraphObject.height&#xff0…