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.pswp.cn/news/247517.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/247517.shtml
英文地址,請注明出處:http://en.pswp.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…