[TOC] >[success] # 30s Array --過濾篇章(一) ~~~ 1.本章節代碼通過整理30s 項目中數組篇章知識點，對涉及數組根據某些條件進行過濾知識點進行整理 ~~~ >[info] ## 找到數組中不符合特定條件的一組值 ~~~ 1.當過濾多個條件的時候，記住使用 解構傳參的思路解決 ~~~ ~~~ const {log} = console const filtersItem =(arr,...args)=> arr.filter(val=> !args.includes(val)) log(filtersItem([5,7,8,8,8,7,6],5,7)) // [ 8, 8, 8, 6 ] ~~~ >[info] ## Boolean 最為回調函數 ~~~ 1.現在有個一需求，數組中存在undefined 0 null 這些轉換為布爾類型值為false項，想在使用fillter some every 等這些數組方法一步到位的過濾 ~~~ [all](https://www.30secondsofcode.org/js/s/all) >[danger] ##### 代碼案例 一 ~~~ 1.使用Boolean作為回調函數的默認值 ~~~ ~~~ const list1 = [null,undefined,0,'',2] const filter = (arr,fn =Boolean)=>arr.filter(fn) const filterCopy = filter(list1,(item) => item) console.log(filterCopy) // [2] const filterCopy1 = filter(list1) console.log(filterCopy1) // [2] // const all = (arr,fn=Boolean)=>arr.every(fn) const list = [1,2,3,4,5] let flag = all(list) // true console.log(flag) flag = all(list,(item)=>item>2) console.log(flag) // false ~~~ >[danger] ##### 案例二 ~~~ 1.數組中至少一個元素布爾類型是true ~~~ [any](https://www.30secondsofcode.org/js/s/any) ~~~ const any = (arr,fn=Boolean)=>arr.some(fn) let flag = any([1,0,0,0,0]) console.log(flag) // true ~~~ >[info] ## 按照指定間隔取出對應數組中的項 ~~~ 1.根據指定間隔作為過濾條件生成新數組 ~~~ [原文鏈接](https://www.30secondsofcode.org/js/s/every-nth) >[danger] ##### 代碼實現 ~~~ const {log} =console const everyNth = (arr, nth) => arr.filter((e, i) => (i+1) % nth === 0); log(everyNth([1, 2, 3, 4, 5, 6], 2)) // [ 2, 4, 6 ] // 另一種實現思路 // const everyNth = (arr, nth) => arr.filter((e, i) => i % nth === nth - 1); ~~~ >[info] ## 返回對象數組中的最大值 或最小值 ~~~ 1.現在知道一個對象數組，想返回這個對象數組中指定key里面的最大值例如： [{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }] 返回 8 ~~~ >[danger] ##### 代碼實現 [原文鏈接](https://www.30secondsofcode.org/js/s/max-by) [最小值的參考鏈接](https://www.30secondsofcode.org/js/s/min-by) ~~~ // 返回最大值 // 使用Math.max最大值最小值就使用'Math.min' // 利用map 將對象數組要比較的值 集中到一個數組中 const maxBy = (arr,fn)=>Math.max(...arr.map(typeof fn === 'function' ?fn:val=>val[fn])) log(maxBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], o => o.n)) // 8 log(maxBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], 'n')) // 8 ~~~ >[info] ## 取出數組中指定位置的值 ~~~ 1.最簡單的方法根據腳標來獲取對應元素值，問題想更靈活給可以倒序取出這里使用了'slice' ~~~ [原文鏈接](https://www.30secondsofcode.org/js/s/nth-element) >[danger] ##### 代碼說明 ~~~ 1.這里選用了'slice',沒有用'splice'主要原因就是'splice'會改變原數組 ~~~ ~~~ const {log} =console const test = [1,2,3,4] const nthElement = (arr,n=0) => (n===-1?arr.slice(n):arr.slice(n,n+1))[0] log(nthElement(test)) // 1 log(nthElement(test,-2)) // 3 // 原數組沒有改變 log(test) // [ 1, 2, 3, 4 ] ~~~ >[info] ## 取出只包含唯一項 ~~~ 1.有個需求去掉數組中相同項 ~~~ [filter-non-unique](https://www.30secondsofcode.org/js/s/filter-non-unique) >[danger] ##### 代碼實現 ~~~ 1.可以最簡單的方法使用Set 方法，下面方法的思路就是，利用indexOf 和lastIndexOf，從數組頭 和數組 尾來查看是不是都在數組同一個位置，舉個例子[1,2,1] => 1從頭看第一個是腳標0，從尾看第一個是腳標2， 2從頭尾第一個腳標位置都是 1 ~~~ ~~~ const {log} =console const filterNonUnique = arr => arr.filter(i => arr.indexOf(i) === arr.lastIndexOf(i)); log(filterNonUnique([1, 2, 2, 3, 4, 4, 5])) // [ 1, 3, 5 ] ~~~ >[info] ## 過濾出數組中不重復的項 ~~~ 1.現在有一個數組[1,1,2,3,3,5,6,6],其中2,5是唯一不重復的值，因此打印出的結果[2,5],現在有一個對象數組 [{ id: 0, value: 'a' },{ id: 1, value: 'b' },{ id: 2, value: 'c' },{ id: 1, value: 'd' },{ id: 0, value: 'e' }]，選出id 的唯一值[ { id: 2, value: 'c' } ] ~~~ [原文鏈接](https://www.30secondsofcode.org/js/s/filter-non-unique-by) >[danger] ##### 我的第一印象的寫法 ~~~ 1.找到 數組中不重復的值 思路，想用當前項去數值中值挨個比較，看有沒有一樣的 但是這個一樣的值是排除自己本身，如果有一樣的就停止循環進入下一輪循環 ~~~ ~~~ const?{log}?=console const filterNonUniqueBy = function(arr,fn){ const newArr = [] for(let outterIndex=0; outterIndex< arr.length;outterIndex++ ){ const outerValue = arr[outterIndex] let flag = true for(let innerIndex=0;innerIndex< arr.length;innerIndex++){ const innerValue = arr[innerIndex] // 可以這么寫 方便理解 寫出 if( outterIndex !==innerIndex && fn(outerValue,innerValue)){ flag = false break } } if(flag){ newArr.push(outerValue) } } return newArr } log(filterNonUniqueBy( [ { id: 0, value: 'a' }, { id: 1, value: 'b' }, { id: 2, value: 'c' }, { id: 1, value: 'd' }, { id: 0, value: 'e' } ], (a, b) => a.id == b.id )) // [ { id: 2, value: 'c' } ] ~~~ >[danger] ##### 30s 寫法 ~~~ 1.解決思路，利用'filter' 過濾，過濾的內容是當前項不能和其他項有相同的值，注意'every'里面的條件 '(i === j) === fn(v, x, i, j)' 如果是當前項 i 和 j的腳標是一個值為true ，因為是一個值因此回調函數比較 也是true ，所以true === true，如果 i和j不是同一個值腳標為false，回調函數條件比較也不是一個值 得到false,所以false ===false 為true 說明不是一個值，但是如果腳標不同為false 但是回調比較為 true，false === true 為false 說明這個值不是唯一的，every 要求每個值都是true 因此說明當前 這個值不是唯一的，反之則是唯一 ~~~ ~~~ const filterNonUniqueBy = (arr, fn) => arr.filter((v, i) => arr.every((x, j) => (i === j) === fn(v, x, i, j))); log(filterNonUniqueBy( [ { id: 0, value: 'a' }, { id: 1, value: 'b' }, { id: 2, value: 'c' }, { id: 1, value: 'd' }, { id: 0, value: 'e' } ], (a, b) => a.id == b.id )) // [ { id: 2, value: 'c' } ] ~~~ >[info] ## 實現一個findLastIndex 方法 ~~~ 1.舉個例子數組'[1, 2, 3, 4]',找到這個數組中最后一位奇數的坐標位置,應該得到數組項'3'的位置也就是2 ~~~ [原文鏈接](https://www.30secondsofcode.org/js/s/find-last-index) >[danger] ##### 30s 寫法 ~~~ 1.用于Array.prototype.map()將每個元素及其索引和值映射到數組。 2.使用Array.prototype.filter()刪除元素為其fn返回falsy值 3.使用Array.prototype.pop()獲得的最后一個元素的過濾陣列英寸 4.-1如果沒有匹配的元素，則返回 ~~~ ~~~ const {log} =console const findLastIndex = (arr, fn) => (arr .map((val, i) => [i, val]) .filter(([i, val]) => fn(val, i, arr)) .pop() || [-1])[0]; log(findLastIndex([1, 2, 3, 4], n => n === 5)) // -1 (default value when not found) log(findLastIndex([1, 2, 3, 2], n => n === 2)) // 3 ~~~