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,一经查实,立即删除!

相关文章

Vue中watch的简单应用

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

placeholder的兼容处理方法

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

运行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…

详解 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 权限…

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

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

GoJs Pictures 官方介绍文档

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

怎样购买及安装ssl安全证书

查找资料记录&#xff0c;不是我的项目笔记 现在越来越多的网站都开始用安全链接了&#xff0c;在国外的话&#xff0c;如果不是一个安全链接&#xff0c;用户很大程度上会拒绝使用&#xff0c;所有安全链接是未来的趋势&#xff0c;楼主第一次配安全证书的时候&#xff0c;刚刚…

(转载)Git使用教程:最详细、最傻瓜、最浅显、真正手把手教!

转载自 Git使用教程 预警&#xff1a;因为详细&#xff0c;所以行文有些长&#xff0c;新手边看边操作效果出乎你的预料&#xff09;一&#xff1a;Git是什么&#xff1f; Git是目前世界上最先进的分布式版本控制系统。 工作原理 / 流程&#xff1a; Workspace&#xff1a;工作…

soureTree中如何设置git 用户名与密码 SourceTree提交修改用户详细图文方法

mac上软件更新&#xff1a; 现在没有网络小模块了&#xff0c;在同行右边高级里面有默认用户名删除即可&#xff01;&#xff01;&#xff01;&#xff01; sourceTree 切换Git登录用户&#xff0c;之前在SourceTree提交远程服务用的是同事的账号&#xff0c;同事离职后账号也…

box-sizing的使用

box-sizing 人们慢慢的意识到传统的盒子模型不直接&#xff0c;所以他们新增了一个叫做 box-sizing 的CSS属性。当你设置一个元素为 box-sizing: border-box; 时&#xff0c;此元素的内边距和边框不再会增加它的宽度。这里有一个与前一页相同的例子&#xff0c;唯一的区别是两…

更新node最新版本方法和 npm install -g n 运行错误

使用xshell连接linux服务器后&#xff0c;首先输入node -v查看当前使用的版本 如果上面查看的版本比较低&#xff0c;则可以开始升级 清除npm cache 升级之前还需要安装n模块&#xff0c;n模块是专门用来管理nodejs的版本 输入npm install -g n n模块安装完成之后&#x…

Atom React或前端插件推荐

分享一些Atom个人在用的插件,喜欢请点赞 1. color-picker 取色工具 2. pigments 编辑器中直接查看代码所代表的颜色&#xff0c;工具虽小但是很实用。 3. minimap 仿sublime text的缩略代码查看&#xff0c;想找的地方一目了然。 4. highlight-selected 选择某段代码自动高…

Tapable.plugin is deprecated. Use new API on `.hooks` instead

问题描述 在使用extract-text-webpack-plugin给webpack打包时出现报错 Tapable.plugin is deprecated. Use new API on .hooks instead 1 问题原因 extract-text-webpack-plugin目前版本不支持webpack4。 解决方案 使用extract-text-webpack-plugin的最新的beta版 npm inst…

多重表(广义表)

在深入浅出数据结构系列前面的文章中&#xff0c;我们一直在讨论“线性表”&#xff0c;其形式如下&#xff1a; 由a1,a2,a3,……a(n-1)个元素组成的序列&#xff0c;其中每一个元素ai(0<i<n)都是一个“原子”&#xff0c;“原子”的意思就是说元素本身是一个个体&#x…

简单教你React父子组件间平级组件间传值

国庆充电特辑&#xff1a; 堵车堵死&#xff0c;废话不多说直接上菜。 1.父组件对子组件传值 利用props属性传值 class Component extends React.Component {constructor (props) {super(props);}render() {return (<div><h1>I am {this.props.name}</h1>…

Requests库的主要方法:requests.request为requests.get和requests.post两个的汇总,只是需要传方法...

1. requests.request(method,url,**kwargs&#xff09; method&#xff1a;请求方式&#xff0c;对应get/put/post等七种&#xff1a;拟获取页面的url链接&#xff1a;控制访问参数&#xff0c;共13个method&#xff1a;请求方式rrequests.request(GET,url,**kwargs) r reques…