30s Array-- 其他篇(一) · 前端知識 -- 學習整理

[TOC] >[success] # 30s Array-- 特定規則生成新數組篇(一) ~~~ 1.本章節代碼通過整理30s 項目中數組篇章知識點，對涉及數組進行某些邏輯生成新數組的邏輯代碼片段的整理 ~~~ [整理內容來自30s 數組篇章](https://www.30secondsofcode.org/js/s/is-disjoint) >[info] ## 最后一項為數組合計切去掉原最后一項值 ~~~ 1.現在有個需求給一組數或者一個數組例如 1,?2,?3,?4 或 [1, 3, 6, 4]，返回的結果內容要變成[1, 3, 6, 10], 其原目標值的最后一項變為合計 ~~~ [原文參考](https://www.30secondsofcode.org/js/s/accumulate) >[danger] ##### 代碼案例 ~~~ 1.使用Array.prototype.reduce()，Array.prototype.slice(-1)和'一元+'操作者到每個值。配合數組的解構，讓數組中最后一項進行累加即可 2.關于一元操作符操作數組小案例,但是這個數組需要只有一項且只能是數字 const?aa?=?[6] console.log(+aa) // 6 // ----------------------------- const bb = [6,7] console.log(+bb) // NaN ~~~ ~~~ // 利用... 將參數轉換為數組 // 使用函數式編程思想封裝成函數 const accumulate = (...nums) => nums.reduce((acc,n)=>[...acc,n + +acc.slice(-1)],[]) accumulate(1, 2, 3, 4); // [1, 3, 6, 10] console.log(accumulate(...[1, 2, 3, 4])) // [1, 3, 6, 10] ~~~ >[danger] ##### 邏輯延伸生成新數組最后一項為其他項的總和 ~~~ 1.舉個例子例如現在有數組[1,2,3,4,5] 想生成的新數組為[ 1, 3, 6, 10, 15 ] ~~~ ~~~ var a = [1,2,3,4,5] var accumulate = (...nums)=> nums.reduce((acc,cur,index,arr)=>{ if(index === nums.length-1){ return [...arr,acc] } return acc + cur },0) console.log(accumulate(...a))// [ 1, 3, 6, 10, 15 ] ~~~ >[info] ## 求組數中數字內容的平均值 ~~~ 1.現在有個需求，已知一組數 1，2，3，4，5 相求他們的平均值 ~~~ >[danger] ##### 代碼實現 [原文來源](https://www.30secondsofcode.org/js/s/average) ~~~ 1.求平均值的思路就是，'數的總和'/'數的個數' ，求總和可以利用數組'reduce'方法 ~~~ ~~~ const average = (...nums)=> nums.reduce((acc,curr)=>acc+curr,0)/nums.length const num1 = average(1,2,3,4,5) const num2 = average(...[1,2,3,4,5]) console.log(num1) // 3 console.log(num2) // 3 ~~~ >[info] ## 將數字轉換為數字數組 ~~~ 1.有一個需求，當輸入的數字想要他的輸出結果以數組的形式進行展示例如 123 =》[1,2,3] ~~~ [原文鏈接](https://www.30secondsofcode.org/js/s/digitize) >[danger] ##### 代碼實現 ~~~ 1.需要先將數字轉換成字符串(因為字符才具備可迭代性質)，然后將這些字符串轉換會數字進行輸出 ~~~ ~~~ const {log} =console const digitize = n=>[...`${Math.abs(n)}`].map(i=>parseInt(i)) log(digitize(123)) // [ 1, 2, 3 ] log(digitize(-123)) // [ 1, 2, 3 ] log(digitize(-123.22)) // [ 1, 2, 3, NaN, 2, 2 ] 可以用fittler替換map解決這個問題 ~~~ >[info] ## 給定格式的數組變成對象或將對象變成指定格式數組 ~~~ 1.現在有一個二維數組[['a', 1], ['b', 2]] ，想轉換成對象 ~~~ [原文鏈接](https://www.30secondsofcode.org/js/s/object-from-pairs) [對象變數組](https://www.30secondsofcode.org/js/s/object-to-entries) [直接使用entries](https://www.30secondsofcode.org/js/s/object-to-pairs) ~~~ 1.數組轉換其他格式，或者需要上一次的值的時候優先想到'reduce' ~~~ >[danger] ##### 代碼說明 ~~~ const {log} =console const objectFromPairs = arr => arr.reduce((a, [key, val]) => ((a[key] = val), a), {}); log(objectFromPairs([['a', 1], ['b', 2]])) // { a: 1, b: 2 } ~~~ * 將對象變成數組 ~~~ const objectToEntries = obj => Object.keys(obj).map(k => [k, obj[k]]); objectToEntries ({ a: 1, b: 2 }); // [ ['a', 1], ['b', 2] ] ~~~ * 對象變數組直接使用'entries' ~~~ const objectToPairs = obj => Object.entries(obj) objectToPairs({ a: 1, b: 2 }); // [ ['a', 1], ['b', 2] ] ~~~ >[info] ## 將指定數量的元素移動到數組的末尾 ~~~ 1.將指定數量的元素移動到數組的末尾，例如'[5,6,7,8]' 中前兩項移動到尾部 [ 7, 8, 5, 6 ] ~~~ [原文](https://www.30secondsofcode.org/js/s/offset) >[danger] ##### 代碼說明 ~~~ const {log} =console const offset = (arr,offset) =>[...arr.slice(offset),...arr.slice(0,offset)] log(offset([5,6,7,8],2)) // [ 7, 8, 5, 6 ] ~~~ >[info] ## 計算數組中某個值的出現次數 ~~~ 1.計算數組中某個值的出現次數。 ~~~ >[danger] ##### 案例 ~~~ const {log} =console const countOccurrences = (arr, val) => arr.reduce((a, v) => (v === val ? a + 1 : a), 0); // 統計1在數組中的個數 countOccurrences([1, 1, 2, 1, 2, 3], 1); // 3 ~~~ >[info] ## 展平數組 ~~~ 1.遇到數組嵌套解決方案，例如[1, [2], [[3], 4], 5] = 》[ 1, 2, 3, 4, 5 ] ~~~ >[danger] ##### 30s 案例 [原文鏈接](https://www.30secondsofcode.org/js/s/deep-flatten) ~~~ const {log} =console const deepFlatten = arr => [].concat(...arr.map(v => (Array.isArray(v) ? deepFlatten(v) : v))); log(deepFlatten([1, [2], [[3], 4], 5])) // [1, 2, 3, 4, 5] ~~~ >[danger] ##### js 自帶api -- flat [mdn鏈接](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/flat) ~~~ const {log} =console // flat 不會改變原數組 const list2 = [1, [2], [[3], 4], 5] log(list2.flat(Infinity)) // [ 1, 2, 3, 4, 5 ] ~~~ >[danger] ##### 利用js concat可以展開一層嵌套問題 ~~~ 1.這種僅限解決一層問題，因為concat 參數可以是數組也可以是單個值 ~~~ ~~~ const {log} =console // 只能針對內部一層數組嵌套 const list1 = [1,2,[3,4],5] log([].concat(...list1)) // [ 1, 2, 3, 4, 5 ] ~~~ >[info] ## 數組內的項按照指定分隔符拼接 ~~~ 1.想將數組內的字符串按照指定分隔符進行拼接，其中最后一項使用另外指定的分割符，例如 ~~~ [原鏈接]([https://www.30secondsofcode.org/js/s/join](https://www.30secondsofcode.org/js/s/join)) >[danger] ##### 30s ~~~ const {log} =console const join = (arr, separator = ',', end = separator) => arr.reduce( (acc, val, i) => i === arr.length - 2 ? acc + val + end : i === arr.length - 1 ? acc + val : acc + val + separator, '' ); log( join(['pen', 'pineapple','s'], ',','$')) // pen,pineapple$s log( join(['pen', 'pineapple'], ',','$')) // pen$pineapple log( join(['pen', 'pineapple','s'], ',')) // pen,pineapple,s ~~~ >[info] ## 接受任意數量的可迭代對象或具有length屬性的對象，并返回最長的一個 ~~~ const longestItem = (...vals) => vals.reduce((a, x) => (x.length > a.length ? x : a)); longestItem('this', 'is', 'a', 'testcase'); // 'testcase' longestItem(...['a', 'ab', 'abc']); // 'abc' longestItem(...['a', 'ab', 'abc'], 'abcd'); // 'abcd' longestItem([1, 2, 3], [1, 2], [1, 2, 3, 4, 5]); // [1, 2, 3, 4, 5] longestItem([1, 2, 3], 'foobar'); // 'foobar' ~~~ [原鏈接](https://www.30secondsofcode.org/js/s/longest-item) >[info] ## 使用函數將數組的值映射到對象 [map-object](https://www.30secondsofcode.org/js/s/map-object) ~~~ const mapObject = (arr, fn) => arr.reduce((acc, el, i) => { acc[el] = fn(el, i, arr); return acc; }, {}); mapObject([1, 2, 3], a => a * a); // { 1: 1, 2: 4, 3: 9 } ~~~ >[info] ## 多個對象中相同key中的值合并 ~~~ 1.當有多個對象,想把這些對象合并成一個對象，其中如果多個對象中有相同的key，將這些相同key 的val 合并到一個數組中，舉個例子下面有三個對象 const object = { a: [{ z: 2 }, { y: 4 }], b: 1, c:'zzz' }; const other = { a: { z: 3 }, b: [2, 3], c: 'foo' }; const other1 = { a: { z: 3 }, b: [2, 3], c: 'foo' }; 最終想合并成： { a: [ { z: 2 }, { y: 4 }, { z: 3 }, { z: 3 } ], b: [ 1, 2, 3, 2, 3 ], c: [ 'zzz', 'foo', 'foo' ] } ~~~ [原鏈接](https://www.30secondsofcode.org/js/s/merge) >[danger] ##### 30s ~~~ 1.拿到這類問題先思考，有沒有更好的api去解決這類問題，不要率先停留在for 這類簡單解決方法上，讓代碼更加語義化，別人通過你使用的api 更加容易知道你在做一件什么事 2.多個對象一起處理，最好的方式都是在同一個數組中，在數組中又可以返回的是其他類型的api，優先想到reduce，并且符合可以和上一次操作作比較性質 ~~~ ~~~ const {log} =console const merge = (...objs) => [...objs].reduce( (acc, obj) => Object.keys(obj).reduce((a, k) => { acc[k] = acc.hasOwnProperty(k) ? [].concat(acc[k]).concat(obj[k]) : obj[k]; return acc; }, {}), {} ); const object = { a: [{ z: 2 }, { y: 4 }], b: 1, c:'zzz' }; const other = { a: { z: 3 }, b: [2, 3], c: 'foo' }; const other1 = { a: { z: 3 }, b: [2, 3], c: 'foo' }; log( merge(object, other,other1)) // 打印結果： { a: [ { z: 2 }, { y: 4 }, { z: 3 }, { z: 3 } ], b: [ 1, 2, 3, 2, 3 ], c: [ 'zzz', 'foo', 'foo' ] } ~~~ >[info] ## 數組對象按照指定key 進行規則排序 ~~~ 1.現在想將數組對象中的內容按照指定key，進行排序舉個例子： [ { name: 'fred', language: 'Javascript' }, { name: 'barney', language: 'TypeScript' }, { name: 'frannie', language: 'Javascript' }, { name: 'anna', language: 'Java' }, { name: 'jimmy' }, { name: 'nicky', language: 'Python' }, ] 想將改數組根據'language' 作為key按照['Javascript', 'TypeScript', 'Java'] 順序排序得到結果 [ { name: 'fred', language: 'Javascript' }, { name: 'frannie', language: 'Javascript' }, { name: 'barney', language: 'TypeScript' }, { name: 'anna', language: 'Java' }, { name: 'jimmy' }, { name: 'nicky', language: 'Python' } ] ~~~ [order-with](https://www.30secondsofcode.org/js/s/order-with) >[danger] ##### 30s ~~~ 1.用于Array.prototype.reduce()從order數組創建一個對象，將值作為鍵，并將其原始索引作為值。 2.使用Array.prototype.sort()給定的數組進行排序，跳過元素，其prop是空的或不是在order陣列。 ~~~ ~~~ const orderWith = (arr, prop, order) => { const orderValues = order.reduce((acc, v, i) => { acc[v] = i; return acc; }, {}); return [...arr].sort((a, b) => { if (orderValues[a[prop]] === undefined) return 1; if (orderValues[b[prop]] === undefined) return -1; return orderValues[a[prop]] - orderValues[b[prop]]; }); }; const users = [ { name: 'fred', language: 'Javascript' }, { name: 'barney', language: 'TypeScript' }, { name: 'frannie', language: 'Javascript' }, { name: 'anna', language: 'Java' }, { name: 'jimmy' }, { name: 'nicky', language: 'Python' }, ]; orderWith(users, 'language', ['Javascript', 'TypeScript', 'Java']); /* [ { name: 'fred', language: 'Javascript' }, { name: 'frannie', language: 'Javascript' }, { name: 'barney', language: 'TypeScript' }, { name: 'anna', language: 'Java' }, { name: 'jimmy' }, { name: 'nicky', language: 'Python' } ] */ ~~~ >[info] ## 模仿splice ~~~ 1.splice 的操作是改變原數組的，現在需求想有個一函數和splic具有一樣的功能但是不改變原數組 ~~~ [shank](https://www.30secondsofcode.org/js/s/shank) >[danger] ##### 30s ~~~ 1.splice具有新增刪除功能，對應具有新增刪除且不會改變原數組的api有'slice' 和 'concat' ~~~ ~~~ const {log} = console const shank = (arr, index = 0, delCount = 0, ...elements) => arr .slice(0, index) // 插入數據開始點 .concat(elements) // 要插入數據 .concat(arr.slice(index + delCount)); // 插入數據的結束點 const names = ['alpha', 'bravo', 'charlie']; const namesAndDelta = shank(names, 1, 0, 'delta'); // [ 'alpha', 'delta', 'bravo', 'charlie' ] const namesNoBravo = shank(names, 1, 1); // [ 'alpha', 'charlie' ] console.log(names); // ['alpha', 'bravo', 'charlie'] ~~~ >[info] ## 獲取數組，對象或字符串的大小 ~~~ 1.獲取數組，對象或字符串的大小 ~~~ [size](https://www.30secondsofcode.org/js/s/size) >[danger] ##### 30s ~~~ 1.如果是對象類型我們依次去看有沒有size(Map),length(Array)，最后看key的長度 ~~~ ~~~ const size = val => Array.isArray(val) ? val.length : val && typeof val === 'object' ? val.size || val.length || Object.keys(val).length : typeof val === 'string' ? new Blob([val]).size : 0; size([1, 2, 3, 4, 5]); // 5 size('size'); // 4 size({ one: 1, two: 2, three: 3 }); // 3 size('中國') // 6 ~~~ >[info] ## 對象指定字段求和 ~~~ const sumBy = (arr, fn) => arr .map(typeof fn === 'function' ? fn : val => val[fn]) .reduce((acc, val) => acc + val, 0); sumBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], x => x.n); // 20 sumBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], 'n'); // 20 ~~~ [sum-by](https://www.30secondsofcode.org/js/s/sum-by)