é
åãšãããããAdvent Calendar2018 – 23æ¥ç®
é
åçæ匷 ã®ã¡ãœããã§ããïŒïŒïŒ
ãŸã䟿å©ãšãããäžèœãªã®ã§ããã²ãå©çšé ãããã
ã¡ãã£ãšãããã¥ãããã ãã©ããããªâæãã§ãã
const arr = [11, 22, 33];
const obj = arr.reduce((acc, value, index) => {
acc[`number${index}`] = value;
return acc;
}, {});
console.log(obj);
// { number0: 11, number1: 22, number2: 33 }
äžããã³ãŒã«ããã¯é¢æ°ã®æ¬¡ã«ç¬¬2åŒæ°ãããç¹ã«æ³šç®ã
ã€ã³ã¿ãŒãã§ã€ã¹ãšäœ¿ãæ¹
result = arr.reduce(callback[, initialValue])
// callback = (accumulator, currentValue[, currentIndex, array]) => accumulator;
åŒæ°
ã³ãŒã«ããã¯é¢æ°ãšåæå€ã®2ã€ã§ãã
第2åŒæ°ã®åæå€ã«ãäŸãã°ããã«ç©ºã®ãªããžã§ã¯ããäžãããããŸãã
第1åŒæ°ã®ã³ãŒã«ããã¯é¢æ°ãæåã«åãåã第1åŒæ°ã¯ããã®åæå€ã«ãªããŸãããã®å€ãæäœã㊠return ãããšã2åç®ä»¥éã®ã³ãŒã«ããã¯åŒã³åºãã®ç¬¬1åŒæ°ã«ã¯ãã® return ããå€ãäžããããŸãã
æ»ãå€
é ã«ç¹°ãè¿ããã³ãŒã«ããã¯é¢æ°ãæåŸã« return ããå€ãã reduce() å
šäœã®æ»ãå€ã«ãªããŸãã
åæå€ããã®ãŸãŸè¿ããŠã¿ãäŸ
initial ãã³ãŒã«ããã¯é¢æ°ã®ç¬¬1åŒæ° acc ãšããŠäžããããŠãæ¯åããã return ããã®ã§ä»¥éãåãã€ã³ã¹ã¿ã³ã¹ãåãåããæçµçã«çµæãããã«ãªããŸãã
const arr = [11, 22, 33];
const initial = {};
const result = arr.reduce((acc, _, index) => {
console.log(index, acc === initial);
return acc;
}, initial);
console.log('result', result === initial);
// 0 true
// 1 true
// 2 true
// result true
ååã ãåæå€ãåãåã£ãŠã¿ãäŸ
return æã«æ°ããã€ã³ã¹ã¿ã³ã¹ãçæããŠã¿ãŸãã2åç®ã¯ãããåãåãã®ã§ false ããŸãæ°ããã€ã³ã¹ã¿ã³ã¹ã«ãªã£ãŠ3åç®ãåãã false ã§ãã
const arr = [11, 22, 33];
const initial = {};
const result = arr.reduce((acc, _, index) => {
console.log(index, acc === initial);
return { ...acc };
}, initial);
console.log('result', result === initial);
// 0 true
// 1 false
// 2 false
// result false
æ°å€ãå¢ãããŠã¿ãäŸ
ç¹°ãè¿ããªããæäœãã察象ã¯ãªããžã§ã¯ãã«éããããã®ããã«æ°å€ã§ãå¯èœã§ãã
const arr = [11, 22, 33];
const result = arr.reduce((acc, _, index) => {
console.log(index, acc);
return acc + 1;
}, 100);
console.log('result', result);
// 0 100
// 1 101
// 2 102
// result 103
åæå€ãçç¥ããäŸ
çç¥ãããšé
åã®æåã®èŠçŽ ãäžããããŸãããŸãã³ãŒã«ããã¯é¢æ°ã¯ãã®æ¬¡ã®èŠçŽ ããåŒã°ããŸãã
ãã®äŸâã ãšæå arr[0] ã® 11 ãã³ãŒã«ããã¯é¢æ°ã§åŠçããããæåãã acc ãžäžããããŸãã
const arr = [11, 22, 33];
const result = arr.reduce((acc, value, index) => {
console.log(index, acc, value);
return value;
});
console.log('result', result);
// 1 11 22
// 2 22 33
// result 33
äŸ
åèš
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const sum = arr.reduce((acc, value) => acc + value);
console.log(sum); // => 55
æ倧å€
Math.max(...arr) ã§ããããã€ã
const arr = [94, 39, 63, 87, 52, 3, 10, 95, 5];
const max = arr.reduce((acc, value) => (acc > value ? acc : value));
console.log(max); // => 95
ããã
map() 代ããã
const arr = [11, 22, 33];
const result = arr.reduce((acc, value, index) => {
acc[index] = 1000 + value;
return acc;
}, []);
console.log(result);
// [ 1011, 1022, 1033 ]
ãã£ã«ã¿ãŒ
filter() 代ããã
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const result = arr.reduce((acc, value) => {
if (value % 3 === 0) {
acc.push(value);
}
return acc;
}, []);
console.log(result);
// [ 3, 6, 9 ]
å¹³åŠå
flat() ã®ä»£ããã
const arr = [
11,
[22, 33],
44,
[55, 66, 77],
];
const result = arr.reduce((acc, value) => acc.concat(value), []);
console.log(result);
// [ 11, 22, 33, 44, 55, 66, 77 ]
æ€çŽ¢
find() 代ããã
const arr = [
{ id: '101', name: 'Alice' },
{ id: '102', name: 'Bob' },
{ id: '103', name: 'Charlie' },
];
const result = arr.reduce((acc, value) => {
if (acc) {
return acc;
}
if (value.id === '102') {
return value;
}
return undefined;
}, undefined);
console.log(result);
// { id: '102', name: 'Bob' }
åãããã«ã㊠some() 代æ¿ãäœããã
ç¹°ãè¿ã
forEach() 代ããã
const arr = [11, 22, 33];
arr.reduce((_, value, index) => {
console.log(index, value);
}, undefined);
// 0 11
// 1 22
// 2 33
åæå€ãçç¥ãããšæåã®èŠçŽ ãåŒã°ããªãç¹ã«æ³šæã
IDã§ã€ã³ããã¯ã¹
èå¥åãå«ããªããžã§ã¯ãã®é
åããããã®èå¥åã§ã¢ã¯ã»ã¹ã§ãããªããžã§ã¯ããäœæããŸãã
const arr = [
{ id: '101', name: 'Alice' },
{ id: '102', name: 'Bob' },
{ id: '103', name: 'Charlie' },
];
const map = arr.reduce((acc, record) => {
acc[record.id] = record;
return acc;
}, {});
console.log(map);
// { '101': { id: '101', name: 'Alice' },
// '102': { id: '102', name: 'Bob' },
// '103': { id: '103', name: 'Charlie' } }
ãªããžã§ã¯ããè€è£œ
{ ...obj } ã Object.assign() ã®ä»£ããã
const obj = {
foo: 123,
bar: {
hoge: 234,
fuga: {
message: 'Yay!',
},
},
};
const obj2 = Object.entries(obj).reduce((acc, [key, value]) => {
acc[key] = value;
return acc;
}, {});
console.log(obj2);
// { foo: 123, bar: { hoge: 234, fuga: { message: 'Yay!' } } }
reduce() ãã Object.entries() ã®æ¹ãè¯ãä»äºããŠãæ°ãããã
æ·±ãã³ããŒã§ãªããžã§ã¯ããè€è£œ
const obj = {
foo: 123,
bar: {
hoge: 234,
fuga: {
message: 'Yay!',
},
},
};
const deepCopy = (obj) => Object.entries(obj).reduce((acc, [key, value]) => {
if (typeof value === 'object') {
acc[key] = deepCopy(value);
} else {
acc[key] = value;
}
return acc;
}, {});
// æµ
ãã³ããŒ
const obj2 = { ...obj };
console.log(obj2);
// { foo: 123, bar: { hoge: 234, fuga: { message: 'Yay!' } } }
console.log(obj2.bar === obj.bar);
// true
// æ·±ãã³ããŒ
const obj3 = deepCopy(obj);
console.log(obj3);
// { foo: 123, bar: { hoge: 234, fuga: { message: 'Yay!' } } }
console.log(obj3.bar === obj.bar);
// false
åºçŸèŠçŽ æ°ãæ°ãã
äœã§ãããããã ãã©ãè©Šãã«HTMLèŠçŽ ã®èŠçŽ åã§ã
const els = [...document.querySelectorAll('*')];
const counts = els.reduce((acc, el) => {
const name = el.tagName.toLocaleLowerCase();
if (!acc[name]) {
acc[name] = 0;
}
acc[name] += 1;
return acc;
}, {});
console.log(counts);
// Object { html: 1, head: 1, meta: 23, script: 12, title: 6, link: 32, body: 1, ul: 20, li: 186, a: 223, ⊠}
ã¯ã©ã¹åãšãã«ããŠãããããããã
现ãããšãã
ä»æ§æžã®èª¬æ
çããä»æ§æžã«ãã説æãé·ãã®ã§ãã¡ãã£ãšèŠãŠã¿ãŸãããã
Note 1
callbackfn should be a function that takes four arguments. reduce calls the callback, as a function, once for each element after the first element present in the array, in ascending order.
callbackfn is called with four arguments: the previousValue (value from the previous call to callbackfn), the currentValue (value of the current element), the currentIndex, and the object being traversed. The first time that callback is called, the previousValue and currentValue can be one of two values. If an initialValue was supplied in the call to reduce, then previousValue will be equal to initialValue and currentValue will be equal to the first value in the array. If no initialValue was supplied, then previousValue will be equal to the first value in the array and currentValue will be equal to the second. It is a TypeError if the array contains no elements and initialValue is not provided.
reduce does not directly mutate the object on which it is called but the object may be mutated by the calls to callbackfn.
The range of elements processed by reduce is set before the first call to callbackfn. Elements that are appended to the array after the call to reduce begins will not be visited by callbackfn. If existing elements of the array are changed, their value as passed to callbackfn will be the value at the time reduce visits them; elements that are deleted after the call to reduce begins and before being visited are not visited.
ããŒã 1
callbackfn ã¯4ã€ã®åŒæ°ãåãé¢æ°ã«ãªãã ãã (should ) ã reduce ã¯ãã®ã³ãŒã«ããã¯ããé¢æ°ãšããŠãé
åã«çŸããæåã®èŠçŽ 以éã®åèŠçŽ ããšã«ãæé ã§åŒã¶ã
callbackfn ã¯ä»¥äžã®4ã®åŒæ°ãšãšãã«åŒã°ãã: previousValue ïŒååã® callbackfn åŒã³åºãã§åŸãããå€ïŒã currentValue ïŒçŸåšã®èŠçŽ ã®å€ïŒã currentIndex ã暪æäžã®ãªããžã§ã¯ããæåã«ã³ãŒã«ããã¯é¢æ°ãåŒã°ãããšãã previousValue ãš currentValue ã¯ä»¥äžã®ããããã«ãªãã reduce ã« initialValue ãäžããããå Žåã previousValue 㯠initialValue ã«çãããªãã currentValue ã¯é
åã®æåã®å€ãšçãããªãã initialValue ãäžããããªãã£ãå Žåã previousValue ã¯é
åã®æåã®å€ãšçãããªãã currentValue ã¯2çªç®ãšçãããªããé
åãã²ãšã€ãèŠçŽ ãæãããã〠initialValue ãäžããããªãã£ãå Žåã TypeError ã«ãªãã
reduce ã¯åŒã°ãããªããžã§ã¯ããçŽæ¥å€åãããªããããã®ãªããžã§ã¯ã㯠callbackfn åŒã³åºãã«ãã£ãŠå€åãããŠããã (may ) ã
reduce ã«åŠçãããèŠçŽ ã®ç¯å²ã¯æåã® callbackfn åŒã³åºãã®åã«èšå®ããããæåã® reduce åŒã³åºããéå§ããåŸã«é
åãžè¿œå ãããèŠçŽ ã¯ã callbackfn ããåç
§ãããããšã¯ãªããé
åã®æ¢åã®èŠçŽ ãå€æŽãããå Žåã callbackfn ãžäžããããå€ã¯ reduce ãããããåç
§ããæç¹ã§ã®å€ã«ãªãããŸãã reduce åŒã³åºããå§ãŸã£ãåŸãåç
§ããåã«åé€ãããèŠçŽ ã¯ãåç
§ãããªãã
ïŒèš³æ³š: é¢æ°ãé
åèŠçŽ ã visit ããããšããåç
§ããšããŸãããïŒ
ãã£æ¥æ¬èªèªã¿ã¥ãã
空ã®é
åã§ãšã©ãŒ
é
åã®èŠçŽ ã²ãšã€ä»¥äžãããã¯åæå€ãäžããªããšãšã©ãŒã«ã
[].reduce(() => {});
// TypeError: Reduce of empty array with no initial value
éäžã§è¿œå ãããèŠçŽ ã¯åŒã°ããªã
const arr = [11, 22, 33];
arr.reduce((_, value, index, original) => {
if (index === 0) {
original.push(99);
}
console.log(index, value);
}, 0);
// 0 11
// 1 22
// 2 33
console.log(arr);
// [ 11, 22, 33, 99 ]
éäžã§å€æŽãããèŠçŽ ã¯å€æŽåŸã®å€ãå©çšããã
const arr = [11, 22, 33];
arr.reduce((_, value, index, original) => {
if (index === 0) {
original[1] = 99;
}
console.log(index, value);
}, 0);
// 0 11
// 1 99
// 2 33
éäžã§åé€ãããèŠçŽ ã¯åŒã°ããªã
const arr = [11, 22, 33];
arr.reduce((_, value, index, original) => {
if (index === 0) {
delete original[1];
}
console.log(index, value);
}, 0);
// 0 11
// 2 33
éäžãããªããŠããåé€ãããŠç©ºãæ ã«ãªã£ãŠããã°é£ã°ãããŸãã
空ãæ ã¯é£ã°ããã
ãŸã空ãæ ãããããã£ãšããŠååšããªãèŠçŽ ã¯ã³ãŒã«ããã¯ã§åŒã°ããŸãããããã¯ä»ã®ç¹°ãè¿ãç³»é
åã¡ãœãããšåæ§ã
å ããŠãåæå€ãçç¥ããå Žåã«åŸãããå€ãã空ãæ ãé£ã°ããæåã®èŠçŽ ãåŒã°ããŸãã
const arr = [, 22, 33,, 55];
arr.reduce((acc, value, index) => {
console.log(acc, value, index);
return acc;
});
// 22 33 2
// 22 55 4
ååã³ãŒã«ããã¯é¢æ°åŒã³åºãæã®ç¬¬1åŒæ° acc ã¯æ®é arr[0] ã«ãªããã ãã©ããããååšããªãã®ã§ã代ããã«æåã«åºçŸãã arr[1] ã® 22 ã«ãªããŸãã第2åŒæ° value ã¯ãã¡ãããã®æ¬¡ 33 ã
ãŸã 33 ã®æ¬¡ã arr[3] ããªãã®ã§ããããé£ã°ããŠ2åç®ã®ã³ãŒã«ããã¯é¢æ°åŒã³åºã㯠arr[4] ã® 55 ã value ã«äžããããŸãã
éäžã§çµäºã§ããªã
äŸå€æãããšãã¯å¥ã ãã©ã for ã® break ã¿ãããªæ©èœã¯ãªãã§ãã
Repeat, while k < len
ïŒååšããªããã®ãé£ã°ããªããïŒåã«ç¹°ãè¿ãã ãã
ãã®ä»
éã«åã reduceRight()
ãŠã®ããããŸãã
ãããŸã
ããããããã€ã ãã©ã倧å€äŸ¿å©ãªã®ã§ããŒããŠãããšäœããšåœ¹ã«ç«ã¡ãŸãã
ã¡ãã£ãšèªã¿ã¥ããã®ãé£ç¹ã
åè
