英文 | https://levelup.gitconnected.com/20-javascript-snippets-that-will-make-you-a-better-developer-68dfe4bf5019
翻譯 | 楊小愛
開發人員每天面臨的幾乎所有問題都可以通過解決一組較小的問題來解決，針對單個明确定義的問題的小解決方案。這些解決方案可以最好地描述為“純函數”。
盡管這些函數中的大多數是在不同的庫中實作的，但重要的是要了解如何以及何時将困難的問題分解為更小的問題。這種解決問題的思維方式将提高我們的開發效率，并使我們成為更好的開發人員。
今天的文章中，我分享的是我經常用來解決各種問題的 20 個有用的“純函數”的無序集合，希望對你也有用。
下面，我們開始吧。
01、GetValue
給定一個對象或數組，函數将傳回指定路徑的值，否則為 null。
const getValue = (obj, path) => path
.replace(/\[([^[\]]*)]/g, '.$1.')
.split('.')
.filter(prop => prop !== '')
.reduce((prev, next) => (
prev instanceof Object ? prev[next] : undefined
), obj);
getValue({ a: { b: c: 'd' } }, 'a.b.c'); // = d
getValue({ a: { b: c: [1, 2] } }, 'a.b.c[1]'); // = 2 02、Clamp
確定值在指定範圍内，否則“clamp”到最接近的最小值和最大值。
const clamp = (min, max, value) => {
if (min > max) throw new Error('min cannot be greater than max');
return value < min
? min
: value > max
? max
: value;
}
}
clamp(0, 10, -5); // = 0
clamp(0, 10, 20); // = 10 03、Sleep
在執行下一個操作之前等待指定的持續時間（以毫秒為機關）。
const sleep = async (duration) => (
new Promise(resolve =>
setTimeout(resolve, duration)
)
);
await sleep(1000); // waits 1 sec 04、GroupBy
根據鍵控功能對對象中的相關項進行分組和索引。
const groupBy = (fn, list) => (
list.reduce((prev, next) => ({
...prev,
[fn(next)]: [...(prev[fn(next)] || []), next]
}), {})
);
groupBy(vehicle => vehicle.make, [
{ make: 'tesla', model: '3' },
{ make: 'tesla', model: 'y' },
{ make: 'ford', model: 'mach-e' },
]);
// {
// tesla: [ { make: 'tesla', ... }, { make: 'tesla', ... } ],
// ford: [ { make: 'ford', ... } ],
// } 05、Collect By
根據鍵控功能建立包含相關項目的子清單。
import groupBy from './groupBy';
const collectBy = (fn, list) =>
Object.values(groupBy(fn, list));
collectBy(vehicle => vehicle.make, [
{ make: 'tesla', model: '3' },
{ make: 'tesla', model: 'y' },
{ make: 'ford', model: 'mach-e' },
]);
// [
// [ { make: 'tesla', ... }, { make: 'tesla', ... } ],
// [ { make: 'ford', ... } ],
// ] 06、Head
擷取清單的第一個元素。這個函數對于編寫幹淨易讀的代碼很有用。
const head = list => list[0];
head([1, 2, 3]); // = 1
head([]); // = undefined 07、Tail
擷取清單中除第一個元素之外的所有元素。這個函數對于編寫幹淨易讀的代碼很有用。
const tail = list => list.slice(1);
tail([1, 2, 3]); // = [2, 3]
tail([]); // = [] 08、Flatten
通過遞歸地從嵌套子清單中提取所有項目來建立一個平面清單。
const flatten = list => list.reduce((prev, next) => ([
...prev,
...(Array.isArray(next) ? flatten(next) : [next])
]), []);
flatten([[1, 2, [3, 4], 5, [6, [7, 8]]]]); // = [1, 2, 3, 4, 5, 6, 7, 8] 09、Intersection By
查找鍵控函數定義的兩個清單中存在的所有值。
const intersectionBy = (fn, listA, listB) => {
const b = new Set(listB.map(fn);
return listA.filter(val => b.has(fn(val)));
};
intersectionBy(v => v, [1, 2, 3], [2, 3, 4]); // = [2, 3]
intersectionBy(v => v, [{ a: 1 }, { a: 2 }], [{ a: 2}, { a: 3 }, { a: 4 }]); // = [{ a: 2 }]; 10、IndexBy
通過鍵控函數确定的值對清單中的每個元素進行索引。
const indexBy = (fn, list) =>
list.reduce((prev, next) => ({
...prev,
[fn(next)]: next
}, {});
indexBy(val => val.a, [{ a: 1 }, { a: 2 }, { a: 3 }]);
// = { 1: { a: 1 }, 2: { a:2 }, 3: { a: 3 } } 11、DifferenceBy
查找第一個清單中不存在于第二個清單中的所有項目，由鍵控功能确定。
import indexBy from './indexBy';
const differenceBy = (fn, listA, listB) => {
const bIndex = indexBy(fn, listb);
return listA.filter(val => !bIndex[fn(val)]);
});
differenceBy(val => val, [1,2,3], [3,4,5]); // = [1,2]
differenceBy(
vehicle => vehicle.make,
[{ make: 'tesla' }, { make: 'ford' }, { make: 'gm' }],
[{ make: 'tesla' }, { make: 'bmw' }, { make: 'audi' }],
); // = [{ make: 'ford' }, { make: 'gm' }] 12、Recover With
如果給定函數抛出錯誤，則傳回預設值。
const recoverWith = async (defaultValue, fn, ...args) => {
try {
const result = await fn(...args);
return result;
} catch (_e) {
return defaultValue;
}
}
recoverWith('A', val => val, 'B'); // = B
recoverWith('A', () => { throw new Error() }); // = 'A' 13、Distance
計算兩點 p1 和 p2 之間的距離。
const distance = ([x0, y0], [x1, y1]) => (
Math.hypot(x1 - x0, y1 - y0)
);
distance([0, 1], [5, 4]); // = 5.8309518948453 14、Drop While
從清單中删除元素，從第一個元素開始，直到滿足 som 謂詞。
const dropWhile = (pred, list) => {
let index = 0;
list.every(elem => {
index++;
return pred(elem);
});
return list.slice(index-1);
}
dropWhile(val => (val < 5), [1,2,3,4,5,6,7]); // = [5,6,7] 15、Sum By
給定一些産生每個元素的單獨值的函數，計算清單中所有元素的總和。
const sumBy = (fn, list) =>
list.reduce((prev, next) => prev + fn(next), 0);
sumBy(product => product.price, [
{ name: 'pizza', price: 10 },
{ name: 'pepsi', price: 5 },
{ name: 'salad', price: 5 },
]); // = 20 16、升序
給定一個評估函數，建立一個升序比較器函數。
const ascending = (fn) => (a, b) => {
const valA = fn(a);
const valB = fn(b);
return valA < valB ? -1 : valA > valB ? 1 : 0;
}
const byPrice = ascending(val => val.price);
[{ price: 300 }, { price: 100 }, { price: 200 }].sort(byPrice);
// = [{ price: 100 }, { price: 200 }, { price: 300 }] 17、降序
給定一個評估函數，建立一個降序比較器函數。
const descending = (fn) => (a, b) => {
const valA = fn(b);
const valB = fn(a);
return valA < valB ? -1 : valA > valB ? 1 : 0;
}
const byPrice = descending(val => val.price);
[{ price: 300 }, { price: 100 }, { price: 200 }].sort(byPrice);
// = [{ price: 300 }, { price: 200 }, { price: 100 }] 18、Find Key
在滿足給定predicate的索引中找到第一個鍵值。
const findKey = (predicate, index) => Object
.keys(index)
.find(key => predicate(index[key], key, index));
findKey(
car => !car.available,
{
tesla: { available: true },
ford: { available: false },
gm: { available: true }
},
); // = "ford" 19、Bifurcate By
将給定清單的值拆分為兩個清單，一個包含predicate函數評估為真值的值，另一個包含假值。
const bifurcateBy = (predicate, list) =>
list.reduce((acc, val, i) => (
acc[predicate(val, i) ? 0 : 1].push(val), acc),
[[], []]
);
bifurcateBy(val => val > 0, [-1, 2, -3, 4]);
// = [[2, 4], [-1, -3]] 20、Pipe
執行從左到右的功能組合。所有額外的參數都将傳遞給清單中的第一個函數，是以可以有任何數量。結果将在第二個傳遞，第二個的結果将傳遞給第三個，……以此類推，直到處理完所有函數。
const pipe = (functions, ...args) => (
functions.reduce(
(prev, next) => Array.isArray(prev) ? next(...prev) : next(prev),
args
)
);
pipe([Math.abs, Math.floor, val => -val], 4.20); // = -4
pipe([(a, b) => a - b, Math.abs], 5, 10); // = 5 最後的想法
盡管所有這些功能對于幫助我們解決正在處理的問題非常有用，但最重要的是，我們要知道如何将複雜困難的問題進行分解，這樣就可以獨立解決每個明确的小問題。一旦你掌握了這個解決問題的小技巧，那麼你已經在成為一名優秀的開發者的路上了！
如果你覺得我今天分享的内容對你有所幫助，請點贊我，同時，将這篇文章分享給你身邊做開發的朋友，也許能夠幫助到他。
最後，感謝你的閱讀，祝程式設計愉快！
