560 lines
270 KiB
HTML
560 lines
270 KiB
HTML
<!DOCTYPE html><html lang="en"><head><script async src="https://www.googletagmanager.com/gtag/js?id=UA-117141635-1"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-117141635-1")</script><link rel="stylesheet" href="./mini.css"><title>Array - 30 seconds of code</title><meta charset="utf-8"><meta name="description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less."><meta name="keywords" content="javascript, snippets, code, programming"><meta name="author" content="Angelos Chalaris (chalarangelo@gmail.com)"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="theme-color" content="#111"><meta property="og:title" content="30 seconds of code"><meta property="og:description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less."/><meta property="og:type" content="website"/><meta property="og:image" content="https://30secondsofcode.org/logos/logo_512.png"><link rel="icon" type="image/png" href="./logos/logo_128.png"><link rel="manifest" href="manifest.json"><script>const search = (node) => {
|
|
let matchingTags = [];
|
|
Array.from(node.parentElement.parentElement.getElementsByTagName('a')).forEach(x => {
|
|
let data = [x.textContent.toLowerCase(), ...x.getAttribute('tags').split(',')].map(v => !!(v.indexOf(node.value.toLowerCase()) + 1));
|
|
if(data.includes(true)){
|
|
x.style.display = '';
|
|
matchingTags.push(x.getAttribute('tags').split(',')[0]);
|
|
}
|
|
else x.style.display = 'none';
|
|
});
|
|
Array.from(node.parentElement.parentElement.getElementsByTagName('h3')).forEach(x => {
|
|
x.style.display = matchingTags.includes(x.textContent.toLowerCase()) ? '' : 'none';
|
|
})
|
|
}
|
|
function scrollToTop(){
|
|
const c = document.querySelector('main').scrollTop;
|
|
if (c > 0) {
|
|
window.requestAnimationFrame(scrollToTop);
|
|
document.querySelector('main').scrollTo(0, c - c / 4);
|
|
}
|
|
};
|
|
function scrollTo(element, to, id, duration) {
|
|
if (duration <= 0) return;
|
|
var difference = to - element.scrollTop;
|
|
var perTick = difference / duration * 40;
|
|
|
|
setTimeout(function() {
|
|
element.scrollTop = element.scrollTop + perTick;
|
|
if (element.scrollTop === to) {
|
|
window.location.href = "#"+id;
|
|
return;
|
|
}
|
|
scrollTo(element, to, id, duration - 40);
|
|
}, 40);
|
|
};
|
|
function loader() {
|
|
registerClickListener();
|
|
if(window.innerWidth >= '768')
|
|
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h3')).filter(v => v.innerHTML === 'Array')[0].offsetTop - 130;
|
|
else
|
|
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h3')).filter(v => v.innerHTML === 'Array')[0].offsetTop - 65;
|
|
}
|
|
function registerClickListener() {
|
|
document.addEventListener('click', function (event) {
|
|
if( document.getElementById('doc-drawer-checkbox').checked ) {
|
|
if(!document.querySelector('nav').contains(event.target) && !event.target.classList.contains('drawer-toggle') && !event.target.classList.contains('drawer')) {
|
|
document.getElementById('doc-drawer-checkbox').checked = false;
|
|
}
|
|
}
|
|
if ( event.target.classList.contains('collapse') ) {
|
|
event.target.classList = event.target.classList.contains('toggled') ? 'collapse' : 'collapse toggled';
|
|
}
|
|
else if (event.target.classList.contains('clipboard-copy')) {
|
|
const text = event.target.parentElement.parentElement.querySelector(':not(pre) + pre').textContent;
|
|
const textArea = document.createElement("textarea");
|
|
textArea.value = text.trim();
|
|
document.body.appendChild(textArea);
|
|
textArea.select();
|
|
document.execCommand("Copy");
|
|
document.body.removeChild(textArea);
|
|
let tst = document.createElement('div');
|
|
tst.classList = 'toast';
|
|
tst.innerHTML = 'Snippet copied to clipboard!';
|
|
document.body.appendChild(tst);
|
|
setTimeout(function() {
|
|
tst.style.opacity = 0;
|
|
setTimeout(function() {
|
|
document.body.removeChild(tst);
|
|
},300);
|
|
},1700);
|
|
}
|
|
else if (event.target.classList.contains('scroll-to-top')){
|
|
scrollToTop();
|
|
}
|
|
else if (event.target.classList.contains('sublink-1')){
|
|
if(event.target.getAttribute("href").includes('./')) return;
|
|
event.preventDefault();
|
|
scrollTo(document.querySelector('main'), document.getElementById(event.target.href.split('#')[1]).parentElement.offsetTop - 60, event.target.href.split('#')[1], 400);
|
|
document.getElementById('doc-drawer-checkbox').checked = false;
|
|
}
|
|
}, false);
|
|
}</script></head><body onload="loader()"><a href="https://github.com/Chalarangelo/30-seconds-of-code" onclick='ga("gtag_UA_117141635_1.send","event","Ribbon","Click","Github Clickthrough",1)' class="github-corner" aria-label="View source on Github"><svg width="56" height="56" viewBox="0 0 250 250" style="fill:#151513;color:#fff;position:fixed;top:0;border:0;right:0;z-index:1000" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin:130px 106px" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style><header style="height:3.5rem;box-sizing:border-box;overflow:hidden"><h1 class="logo"><a href="./index"><img src="https://30secondsofcode.org/logos/logo_256.png" style="height:3.5rem;padding:.375rem;box-sizing:border-box" alt="logo"/><span id="title"> 30 seconds of code</span> <small>Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.</small></a></h1><label for="doc-drawer-checkbox" class="button drawer-toggle" id="menu-toggle"></label></header><div class="row" style="height:calc(100vh - 3.5rem);overflow:hidden"><input id="doc-drawer-checkbox" class="drawer" value="on" type="checkbox"><nav class="col-md-4 col-lg-3" style="border-top:0"><div class="input-group vertical"><input class="search" type="text" id="searchInput" onkeyup="search(this)" placeholder="Search..."></div><h3>Adapter</h3><a class="sublink-1" tags="adapter,function" href="./adapter#ary">ary</a> <a class="sublink-1" tags="adapter,function" href="./adapter#call">call</a> <a class="sublink-1" tags="adapter,function,array" href="./adapter#collectinto">collectInto</a> <a class="sublink-1" tags="adapter,function" href="./adapter#flip">flip</a> <a class="sublink-1" tags="adapter,function" href="./adapter#over">over</a> <a class="sublink-1" tags="adapter,function" href="./adapter#overargs">overArgs</a> <a class="sublink-1" tags="adapter,function,promise" href="./adapter#pipeasyncfunctions">pipeAsyncFunctions</a> <a class="sublink-1" tags="adapter,function" href="./adapter#pipefunctions">pipeFunctions</a> <a class="sublink-1" tags="adapter,function,promise" href="./adapter#promisify">promisify</a> <a class="sublink-1" tags="adapter,function" href="./adapter#rearg">rearg</a> <a class="sublink-1" tags="adapter" href="./adapter#spreadover">spreadOver</a> <a class="sublink-1" tags="adapter,function" href="./adapter#unary">unary</a><h3>Array</h3><a class="sublink-1" tags="array,function" href="#all">all</a> <a class="sublink-1" tags="array,function" href="#any">any</a> <a class="sublink-1" tags="array,string,utility" href="#arraytocsv">arrayToCSV</a> <a class="sublink-1" tags="array" href="#bifurcate">bifurcate</a> <a class="sublink-1" tags="array,function" href="#bifurcateby">bifurcateBy</a> <a class="sublink-1" tags="array" href="#chunk">chunk</a> <a class="sublink-1" tags="array" href="#compact">compact</a> <a class="sublink-1" tags="array,object" href="#countby">countBy</a> <a class="sublink-1" tags="array" href="#countoccurrences">countOccurrences</a> <a class="sublink-1" tags="array,recursion" href="#deepflatten">deepFlatten</a> <a class="sublink-1" tags="array,math" href="#difference">difference</a> <a class="sublink-1" tags="array,function" href="#differenceby">differenceBy</a> <a class="sublink-1" tags="array,function" href="#differencewith">differenceWith</a> <a class="sublink-1" tags="array" href="#drop">drop</a> <a class="sublink-1" tags="array" href="#dropright">dropRight</a> <a class="sublink-1" tags="array,function" href="#droprightwhile">dropRightWhile</a> <a class="sublink-1" tags="array,function" href="#dropwhile">dropWhile</a> <a class="sublink-1" tags="array" href="#everynth">everyNth</a> <a class="sublink-1" tags="array" href="#filternonunique">filterNonUnique</a> <a class="sublink-1" tags="array" href="#findlast">findLast</a> <a class="sublink-1" tags="array,function" href="#findlastindex">findLastIndex</a> <a class="sublink-1" tags="array" href="#flatten">flatten</a> <a class="sublink-1" tags="array,function" href="#foreachright">forEachRight</a> <a class="sublink-1" tags="array,object" href="#groupby">groupBy</a> <a class="sublink-1" tags="array" href="#head">head</a> <a class="sublink-1" tags="array" href="#indexofall">indexOfAll</a> <a class="sublink-1" tags="array" href="#initial">initial</a> <a class="sublink-1" tags="array" href="#initialize2darray">initialize2DArray</a> <a class="sublink-1" tags="array,math" href="#initializearraywithrange">initializeArrayWithRange</a> <a class="sublink-1" tags="array,math" href="#initializearraywithrangeright">initializeArrayWithRangeRight</a> <a class="sublink-1" tags="array,math" href="#initializearraywithvalues">initializeArrayWithValues</a> <a class="sublink-1" tags="array,recursion" href="#initializendarray">initializeNDArray</a> <a class="sublink-1" tags="array,math" href="#intersection">intersection</a> <a class="sublink-1" tags="array,function" href="#intersectionby">intersectionBy</a> <a class="sublink-1" tags="array,function" href="#intersectionwith">intersectionWith</a> <a class="sublink-1" tags="array" href="#issorted">isSorted</a> <a class="sublink-1" tags="array" href="#join">join</a> <a class="sublink-1" tags="array" href="#last">last</a> <a class="sublink-1" tags="array,string,utility" href="#longestitem">longestItem</a> <a class="sublink-1" tags="array,object,advanced" href="#mapobject">mapObject</a> <a class="sublink-1" tags="array,math" href="#maxn">maxN</a> <a class="sublink-1" tags="array,math" href="#minn">minN</a> <a class="sublink-1" tags="array,function" href="#none">none</a> <a class="sublink-1" tags="array" href="#nthelement">nthElement</a> <a class="sublink-1" tags="array" href="#offset">offset</a> <a class="sublink-1" tags="array,object,function" href="#partition">partition</a> <a class="sublink-1" tags="array,recursion" href="#permutations">permutations</a> <a class="sublink-1" tags="array" href="#pull">pull</a> <a class="sublink-1" tags="array" href="#pullatindex">pullAtIndex</a> <a class="sublink-1" tags="array" href="#pullatvalue">pullAtValue</a> <a class="sublink-1" tags="array,function,advanced" href="#pullby">pullBy</a> <a class="sublink-1" tags="array" href="#reducedfilter">reducedFilter</a> <a class="sublink-1" tags="array,function" href="#reducesuccessive">reduceSuccessive</a> <a class="sublink-1" tags="array,function" href="#reducewhich">reduceWhich</a> <a class="sublink-1" tags="array" href="#reject">reject</a> <a class="sublink-1" tags="array" href="#remove">remove</a> <a class="sublink-1" tags="array,random" href="#sample">sample</a> <a class="sublink-1" tags="array,random" href="#samplesize">sampleSize</a> <a class="sublink-1" tags="array,random" href="#shuffle">shuffle</a> <a class="sublink-1" tags="array,math" href="#similarity">similarity</a> <a class="sublink-1" tags="array,math" href="#sortedindex">sortedIndex</a> <a class="sublink-1" tags="array,math,function" href="#sortedindexby">sortedIndexBy</a> <a class="sublink-1" tags="array,math" href="#sortedlastindex">sortedLastIndex</a> <a class="sublink-1" tags="array,math,function" href="#sortedlastindexby">sortedLastIndexBy</a> <a class="sublink-1" tags="array,sort,advanced" href="#stablesort">stableSort</a> <a class="sublink-1" tags="array,math" href="#symmetricdifference">symmetricDifference</a> <a class="sublink-1" tags="array,function" href="#symmetricdifferenceby">symmetricDifferenceBy</a> <a class="sublink-1" tags="array,function" href="#symmetricdifferencewith">symmetricDifferenceWith</a> <a class="sublink-1" tags="array" href="#tail">tail</a> <a class="sublink-1" tags="array" href="#take">take</a> <a class="sublink-1" tags="array" href="#takeright">takeRight</a> <a class="sublink-1" tags="array,function" href="#takerightwhile">takeRightWhile</a> <a class="sublink-1" tags="array,function" href="#takewhile">takeWhile</a> <a class="sublink-1" tags="array" href="#tohash">toHash</a> <a class="sublink-1" tags="array,math" href="#union">union</a> <a class="sublink-1" tags="array,function" href="#unionby">unionBy</a> <a class="sublink-1" tags="array,function" href="#unionwith">unionWith</a> <a class="sublink-1" tags="array" href="#uniqueelements">uniqueElements</a> <a class="sublink-1" tags="array" href="#unzip">unzip</a> <a class="sublink-1" tags="array,function,advanced" href="#unzipwith">unzipWith</a> <a class="sublink-1" tags="array" href="#without">without</a> <a class="sublink-1" tags="array,math" href="#xprod">xProd</a> <a class="sublink-1" tags="array" href="#zip">zip</a> <a class="sublink-1" tags="array,object" href="#zipobject">zipObject</a> <a class="sublink-1" tags="array,function,advanced" href="#zipwith">zipWith</a><h3>Browser</h3><a class="sublink-1" tags="browser,array" href="./browser#arraytohtmllist">arrayToHtmlList</a> <a class="sublink-1" tags="browser" href="./browser#bottomvisible">bottomVisible</a> <a class="sublink-1" tags="browser,string,advanced" href="./browser#copytoclipboard">copyToClipboard</a> <a class="sublink-1" tags="browser,advanced" href="./browser#counter">counter</a> <a class="sublink-1" tags="browser,utility" href="./browser#createelement">createElement</a> <a class="sublink-1" tags="browser,event,advanced" href="./browser#createeventhub">createEventHub</a> <a class="sublink-1" tags="browser,url" href="./browser#currenturl">currentURL</a> <a class="sublink-1" tags="browser" href="./browser#detectdevicetype">detectDeviceType</a> <a class="sublink-1" tags="browser" href="./browser#elementcontains">elementContains</a> <a class="sublink-1" tags="browser" href="./browser#elementisvisibleinviewport">elementIsVisibleInViewport</a> <a class="sublink-1" tags="browser" href="./browser#getscrollposition">getScrollPosition</a> <a class="sublink-1" tags="browser,css" href="./browser#getstyle">getStyle</a> <a class="sublink-1" tags="browser,css" href="./browser#hasclass">hasClass</a> <a class="sublink-1" tags="browser,utility,advanced,promise" href="./browser#hashbrowser">hashBrowser</a> <a class="sublink-1" tags="browser,css" href="./browser#hide">hide</a> <a class="sublink-1" tags="browser,url" href="./browser#httpsredirect">httpsRedirect</a> <a class="sublink-1" tags="browser" href="./browser#insertafter">insertAfter</a> <a class="sublink-1" tags="browser" href="./browser#insertbefore">insertBefore</a> <a class="sublink-1" tags="browser" href="./browser#isbrowsertabfocused">isBrowserTabFocused</a> <a class="sublink-1" tags="browser,array" href="./browser#nodelisttoarray">nodeListToArray</a> <a class="sublink-1" tags="browser,event,advanced" href="./browser#observemutations">observeMutations</a> <a class="sublink-1" tags="browser,event" href="./browser#off">off</a> <a class="sublink-1" tags="browser,event" href="./browser#on">on</a> <a class="sublink-1" tags="browser,event,advanced" href="./browser#onuserinputchange">onUserInputChange</a> <a class="sublink-1" tags="browser,utility" href="./browser#prefix">prefix</a> <a class="sublink-1" tags="browser,utility" href="./browser#recordanimationframes">recordAnimationFrames</a> <a class="sublink-1" tags="browser,url" href="./browser#redirect">redirect</a> <a class="sublink-1" tags="browser,function,advanced,promise,url" href="./browser#runasync">runAsync</a> <a class="sublink-1" tags="browser" href="./browser#scrolltotop">scrollToTop</a> <a class="sublink-1" tags="browser" href="./browser#setstyle">setStyle</a> <a class="sublink-1" tags="browser,css" href="./browser#show">show</a> <a class="sublink-1" tags="browser,css" href="./browser#smoothscroll">smoothScroll</a> <a class="sublink-1" tags="browser" href="./browser#toggleclass">toggleClass</a> <a class="sublink-1" tags="browser,event" href="./browser#triggerevent">triggerEvent</a> <a class="sublink-1" tags="browser,utility,random" href="./browser#uuidgeneratorbrowser">UUIDGeneratorBrowser</a><h3>Date</h3><a class="sublink-1" tags="date,math,string,utility" href="./date#formatduration">formatDuration</a> <a class="sublink-1" tags="date" href="./date#getcolontimefromdate">getColonTimeFromDate</a> <a class="sublink-1" tags="date" href="./date#getdaysdiffbetweendates">getDaysDiffBetweenDates</a> <a class="sublink-1" tags="date" href="./date#getmeridiemsuffixofinteger">getMeridiemSuffixOfInteger</a> <a class="sublink-1" tags="date" href="./date#tomorrow">tomorrow</a><h3>Function</h3><a class="sublink-1" tags="function" href="./function#attempt">attempt</a> <a class="sublink-1" tags="function,object" href="./function#bind">bind</a> <a class="sublink-1" tags="function,object" href="./function#bindkey">bindKey</a> <a class="sublink-1" tags="function" href="./function#chainasync">chainAsync</a> <a class="sublink-1" tags="function" href="./function#compose">compose</a> <a class="sublink-1" tags="function" href="./function#composeright">composeRight</a> <a class="sublink-1" tags="function" href="./function#converge">converge</a> <a class="sublink-1" tags="function,recursion" href="./function#curry">curry</a> <a class="sublink-1" tags="function" href="./function#debounce">debounce</a> <a class="sublink-1" tags="function" href="./function#defer">defer</a> <a class="sublink-1" tags="function" href="./function#delay">delay</a> <a class="sublink-1" tags="function,utility" href="./function#functionname">functionName</a> <a class="sublink-1" tags="function" href="./function#hz">hz</a> <a class="sublink-1" tags="function" href="./function#memoize">memoize</a> <a class="sublink-1" tags="function" href="./function#negate">negate</a> <a class="sublink-1" tags="function" href="./function#once">once</a> <a class="sublink-1" tags="function" href="./function#partial">partial</a> <a class="sublink-1" tags="function" href="./function#partialright">partialRight</a> <a class="sublink-1" tags="function,promise" href="./function#runpromisesinseries">runPromisesInSeries</a> <a class="sublink-1" tags="function,promise" href="./function#sleep">sleep</a> <a class="sublink-1" tags="function" href="./function#throttle">throttle</a> <a class="sublink-1" tags="function" href="./function#times">times</a> <a class="sublink-1" tags="function" href="./function#uncurry">uncurry</a> <a class="sublink-1" tags="function,array" href="./function#unfold">unfold</a> <a class="sublink-1" tags="function" href="./function#when">when</a><h3>Math</h3><a class="sublink-1" tags="math" href="./math#approximatelyequal">approximatelyEqual</a> <a class="sublink-1" tags="math,array" href="./math#average">average</a> <a class="sublink-1" tags="math,array,function" href="./math#averageby">averageBy</a> <a class="sublink-1" tags="math" href="./math#binomialcoefficient">binomialCoefficient</a> <a class="sublink-1" tags="math" href="./math#clampnumber">clampNumber</a> <a class="sublink-1" tags="math" href="./math#degreestorads">degreesToRads</a> <a class="sublink-1" tags="math,array" href="./math#digitize">digitize</a> <a class="sublink-1" tags="math" href="./math#distance">distance</a> <a class="sublink-1" tags="math,array,advanced" href="./math#elo">elo</a> <a class="sublink-1" tags="math,recursion" href="./math#factorial">factorial</a> <a class="sublink-1" tags="math,array" href="./math#fibonacci">fibonacci</a> <a class="sublink-1" tags="math,recursion" href="./math#gcd">gcd</a> <a class="sublink-1" tags="math" href="./math#geometricprogression">geometricProgression</a> <a class="sublink-1" tags="math" href="./math#hammingdistance">hammingDistance</a> <a class="sublink-1" tags="math" href="./math#inrange">inRange</a> <a class="sublink-1" tags="math" href="./math#isdivisible">isDivisible</a> <a class="sublink-1" tags="math" href="./math#iseven">isEven</a> <a class="sublink-1" tags="math" href="./math#isprime">isPrime</a> <a class="sublink-1" tags="math,recursion" href="./math#lcm">lcm</a> <a class="sublink-1" tags="math,utility" href="./math#luhncheck">luhnCheck</a> <a class="sublink-1" tags="math,array,function" href="./math#maxby">maxBy</a> <a class="sublink-1" tags="math,array" href="./math#median">median</a> <a class="sublink-1" tags="math,array,function" href="./math#minby">minBy</a> <a class="sublink-1" tags="math" href="./math#percentile">percentile</a> <a class="sublink-1" tags="math" href="./math#powerset">powerset</a> <a class="sublink-1" tags="math,array" href="./math#primes">primes</a> <a class="sublink-1" tags="math" href="./math#radstodegrees">radsToDegrees</a> <a class="sublink-1" tags="math,utility,random" href="./math#randomintarrayinrange">randomIntArrayInRange</a> <a class="sublink-1" tags="math,utility,random" href="./math#randomintegerinrange">randomIntegerInRange</a> <a class="sublink-1" tags="math,utility,random" href="./math#randomnumberinrange">randomNumberInRange</a> <a class="sublink-1" tags="math" href="./math#round">round</a> <a class="sublink-1" tags="math,utility" href="./math#sdbm">sdbm</a> <a class="sublink-1" tags="math,array" href="./math#standarddeviation">standardDeviation</a> <a class="sublink-1" tags="math,array" href="./math#sum">sum</a> <a class="sublink-1" tags="math,array,function" href="./math#sumby">sumBy</a> <a class="sublink-1" tags="math" href="./math#sumpower">sumPower</a> <a class="sublink-1" tags="math" href="./math#tosafeinteger">toSafeInteger</a><h3>Node</h3><a class="sublink-1" tags="node,string,utility" href="./node#atob">atob</a> <a class="sublink-1" tags="node,string,utility" href="./node#btoa">btoa</a> <a class="sublink-1" tags="node,utility,string" href="./node#colorize">colorize</a> <a class="sublink-1" tags="node" href="./node#hasflags">hasFlags</a> <a class="sublink-1" tags="node,utility,promise" href="./node#hashnode">hashNode</a> <a class="sublink-1" tags="node" href="./node#istravisci">isTravisCI</a> <a class="sublink-1" tags="node,json" href="./node#jsontofile">JSONToFile</a> <a class="sublink-1" tags="node,array,string" href="./node#readfilelines">readFileLines</a> <a class="sublink-1" tags="node,string" href="./node#untildify">untildify</a> <a class="sublink-1" tags="node,utility,random" href="./node#uuidgeneratornode">UUIDGeneratorNode</a><h3>Object</h3><a class="sublink-1" tags="object,function" href="./object#bindall">bindAll</a> <a class="sublink-1" tags="object,recursion" href="./object#deepclone">deepClone</a> <a class="sublink-1" tags="object" href="./object#defaults">defaults</a> <a class="sublink-1" tags="object,array,type,advanced" href="./object#equals">equals</a> <a class="sublink-1" tags="object,function" href="./object#findkey">findKey</a> <a class="sublink-1" tags="object,function" href="./object#findlastkey">findLastKey</a> <a class="sublink-1" tags="object,recursion" href="./object#flattenobject">flattenObject</a> <a class="sublink-1" tags="object" href="./object#forown">forOwn</a> <a class="sublink-1" tags="object" href="./object#forownright">forOwnRight</a> <a class="sublink-1" tags="object,function" href="./object#functions">functions</a> <a class="sublink-1" tags="object" href="./object#get">get</a> <a class="sublink-1" tags="object,function" href="./object#invertkeyvalues">invertKeyValues</a> <a class="sublink-1" tags="object" href="./object#lowercasekeys">lowercaseKeys</a> <a class="sublink-1" tags="object,function" href="./object#mapkeys">mapKeys</a> <a class="sublink-1" tags="object,function" href="./object#mapvalues">mapValues</a> <a class="sublink-1" tags="object,type" href="./object#matches">matches</a> <a class="sublink-1" tags="object,type,function" href="./object#matcheswith">matchesWith</a> <a class="sublink-1" tags="object,array" href="./object#merge">merge</a> <a class="sublink-1" tags="object" href="./object#nest">nest</a> <a class="sublink-1" tags="object,array" href="./object#objectfrompairs">objectFromPairs</a> <a class="sublink-1" tags="object,array" href="./object#objecttopairs">objectToPairs</a> <a class="sublink-1" tags="object,array" href="./object#omit">omit</a> <a class="sublink-1" tags="object,array,function" href="./object#omitby">omitBy</a> <a class="sublink-1" tags="object,array" href="./object#orderby">orderBy</a> <a class="sublink-1" tags="object,array" href="./object#pick">pick</a> <a class="sublink-1" tags="object,array,function" href="./object#pickby">pickBy</a> <a class="sublink-1" tags="object" href="./object#renamekeys">renameKeys</a> <a class="sublink-1" tags="object" href="./object#shallowclone">shallowClone</a> <a class="sublink-1" tags="object,array,string" href="./object#size">size</a> <a class="sublink-1" tags="object,array" href="./object#transform">transform</a> <a class="sublink-1" tags="object,logic,array" href="./object#truthcheckcollection">truthCheckCollection</a> <a class="sublink-1" tags="object,advanced" href="./object#unflattenobject">unflattenObject</a><h3>String</h3><a class="sublink-1" tags="string" href="./string#bytesize">byteSize</a> <a class="sublink-1" tags="string,array" href="./string#capitalize">capitalize</a> <a class="sublink-1" tags="string,regexp" href="./string#capitalizeeveryword">capitalizeEveryWord</a> <a class="sublink-1" tags="string,array" href="./string#decapitalize">decapitalize</a> <a class="sublink-1" tags="string,browser,regexp" href="./string#escapehtml">escapeHTML</a> <a class="sublink-1" tags="string,regexp" href="./string#escaperegexp">escapeRegExp</a> <a class="sublink-1" tags="string" href="./string#fromcamelcase">fromCamelCase</a> <a class="sublink-1" tags="string,utility,browser,url" href="./string#isabsoluteurl">isAbsoluteURL</a> <a class="sublink-1" tags="string,regexp" href="./string#isanagram">isAnagram</a> <a class="sublink-1" tags="string,utility" href="./string#islowercase">isLowerCase</a> <a class="sublink-1" tags="string,utility" href="./string#isuppercase">isUpperCase</a> <a class="sublink-1" tags="string,utility,regexp" href="./string#mask">mask</a> <a class="sublink-1" tags="string" href="./string#pad">pad</a> <a class="sublink-1" tags="string" href="./string#palindrome">palindrome</a> <a class="sublink-1" tags="string" href="./string#pluralize">pluralize</a> <a class="sublink-1" tags="string,regexp" href="./string#removenonascii">removeNonASCII</a> <a class="sublink-1" tags="string,array" href="./string#reversestring">reverseString</a> <a class="sublink-1" tags="string" href="./string#sortcharactersinstring">sortCharactersInString</a> <a class="sublink-1" tags="string" href="./string#splitlines">splitLines</a> <a class="sublink-1" tags="string,recursion" href="./string#stringpermutations">stringPermutations</a> <a class="sublink-1" tags="string,utility,regexp" href="./string#striphtmltags">stripHTMLTags</a> <a class="sublink-1" tags="string,regexp" href="./string#tocamelcase">toCamelCase</a> <a class="sublink-1" tags="string,regexp" href="./string#tokebabcase">toKebabCase</a> <a class="sublink-1" tags="string,regexp" href="./string#tosnakecase">toSnakeCase</a> <a class="sublink-1" tags="string" href="./string#truncatestring">truncateString</a> <a class="sublink-1" tags="string,browser" href="./string#unescapehtml">unescapeHTML</a> <a class="sublink-1" tags="string,utility,regexp" href="./string#urljoin">URLJoin</a> <a class="sublink-1" tags="string,regexp" href="./string#words">words</a><h3>Type</h3><a class="sublink-1" tags="type" href="./type#gettype">getType</a> <a class="sublink-1" tags="type,array,regexp" href="./type#is">is</a> <a class="sublink-1" tags="type,array" href="./type#isarraylike">isArrayLike</a> <a class="sublink-1" tags="type" href="./type#isboolean">isBoolean</a> <a class="sublink-1" tags="type,array,object,string" href="./type#isempty">isEmpty</a> <a class="sublink-1" tags="type,function" href="./type#isfunction">isFunction</a> <a class="sublink-1" tags="type" href="./type#isnil">isNil</a> <a class="sublink-1" tags="type" href="./type#isnull">isNull</a> <a class="sublink-1" tags="type,math" href="./type#isnumber">isNumber</a> <a class="sublink-1" tags="type,object" href="./type#isobject">isObject</a> <a class="sublink-1" tags="type,object" href="./type#isobjectlike">isObjectLike</a> <a class="sublink-1" tags="type,object" href="./type#isplainobject">isPlainObject</a> <a class="sublink-1" tags="type,function,array,string" href="./type#isprimitive">isPrimitive</a> <a class="sublink-1" tags="type,function,promise" href="./type#ispromiselike">isPromiseLike</a> <a class="sublink-1" tags="type,string" href="./type#isstring">isString</a> <a class="sublink-1" tags="type" href="./type#issymbol">isSymbol</a> <a class="sublink-1" tags="type" href="./type#isundefined">isUndefined</a> <a class="sublink-1" tags="type,json" href="./type#isvalidjson">isValidJSON</a><h3>Utility</h3><a class="sublink-1" tags="utility,array,type" href="./utility#castarray">castArray</a> <a class="sublink-1" tags="utility,regexp" href="./utility#cloneregexp">cloneRegExp</a> <a class="sublink-1" tags="utility" href="./utility#coalesce">coalesce</a> <a class="sublink-1" tags="utility" href="./utility#coalescefactory">coalesceFactory</a> <a class="sublink-1" tags="utility,string" href="./utility#extendhex">extendHex</a> <a class="sublink-1" tags="utility,browser,string,url" href="./utility#geturlparameters">getURLParameters</a> <a class="sublink-1" tags="utility,string,math,advanced" href="./utility#hextorgb">hexToRGB</a> <a class="sublink-1" tags="utility,url,browser" href="./utility#httpget">httpGet</a> <a class="sublink-1" tags="utility,url,browser" href="./utility#httppost">httpPost</a> <a class="sublink-1" tags="utility,browser" href="./utility#isbrowser">isBrowser</a> <a class="sublink-1" tags="utility,function" href="./utility#mostperformant">mostPerformant</a> <a class="sublink-1" tags="utility,function" href="./utility#ntharg">nthArg</a> <a class="sublink-1" tags="utility,string" href="./utility#parsecookie">parseCookie</a> <a class="sublink-1" tags="utility,string,math" href="./utility#prettybytes">prettyBytes</a> <a class="sublink-1" tags="utility,random" href="./utility#randomhexcolorcode">randomHexColorCode</a> <a class="sublink-1" tags="utility" href="./utility#rgbtohex">RGBToHex</a> <a class="sublink-1" tags="utility,string" href="./utility#serializecookie">serializeCookie</a> <a class="sublink-1" tags="utility" href="./utility#timetaken">timeTaken</a> <a class="sublink-1" tags="utility" href="./utility#tocurrency">toCurrency</a> <a class="sublink-1" tags="utility,math" href="./utility#todecimalmark">toDecimalMark</a> <a class="sublink-1" tags="utility,math" href="./utility#toordinalsuffix">toOrdinalSuffix</a> <a class="sublink-1" tags="utility,math" href="./utility#validatenumber">validateNumber</a> <a class="sublink-1" tags="utility,regexp" href="./utility#yesno">yesNo</a></nav><main class="col-sm-12 col-md-8 col-lg-9" style="height:100%;overflow-y:auto;background:#eceef2;padding:0"><a id="top"> </a><h2 style="text-align:center">Array</h2><div class="card fluid"><h3 id="all" class="section double-padded">all</h3><div class="section double-padded"><p>Returns <code>true</code> if the provided predicate function returns <code>true</code> for all elements in a collection, <code>false</code> otherwise.</p><p>Use <code>Array.every()</code> to test if all elements in the collection return <code>true</code> based on <code>fn</code>. Omit the second argument, <code>fn</code>, to use <code>Boolean</code> as a default.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">all</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> fn <span class="token operator">=</span> Boolean<span class="token punctuation">)</span> <span class="token operator">=></span> arr<span class="token punctuation">.</span><span class="token function">every</span><span class="token punctuation">(</span>fn<span class="token punctuation">);</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">all</span><span class="token punctuation">([</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">],</span> x <span class="token operator">=></span> x <span class="token operator">></span> <span class="token number">1</span><span class="token punctuation">);</span> <span class="token comment">// true</span>
|
|
<span class="token function">all</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]);</span> <span class="token comment">// true</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="any" class="section double-padded">any</h3><div class="section double-padded"><p>Returns <code>true</code> if the provided predicate function returns <code>true</code> for at least one element in a collection, <code>false</code> otherwise.</p><p>Use <code>Array.some()</code> to test if any elements in the collection return <code>true</code> based on <code>fn</code>. Omit the second argument, <code>fn</code>, to use <code>Boolean</code> as a default.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">any</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> fn <span class="token operator">=</span> Boolean<span class="token punctuation">)</span> <span class="token operator">=></span> arr<span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span>fn<span class="token punctuation">);</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">any</span><span class="token punctuation">([</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">],</span> x <span class="token operator">=></span> x <span class="token operator">>=</span> <span class="token number">2</span><span class="token punctuation">);</span> <span class="token comment">// true</span>
|
|
<span class="token function">any</span><span class="token punctuation">([</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]);</span> <span class="token comment">// true</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="arraytocsv" class="section double-padded">arrayToCSV</h3><div class="section double-padded"><p>Converts a 2D array to a comma-separated values (CSV) string.</p><p>Use <code>Array.map()</code> and <code>String.join(delimiter)</code> to combine individual 1D arrays (rows) into strings. Use <code>String.join('\n')</code> to combine all rows into a CSV string, separating each row with a newline. Omit the second argument, <code>delimiter</code> to use a default delimiter of <code>,</code>.</p><pre class="language-js"><span class="token keyword">const</span> arrayToCSV <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> delimiter <span class="token operator">=</span> <span class="token string">','</span><span class="token punctuation">)</span> <span class="token operator">=></span> arr<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>v <span class="token operator">=></span> v<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>delimiter<span class="token punctuation">)).</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">'\n'</span><span class="token punctuation">);</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">arrayToCSV</span><span class="token punctuation">([[</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">], [</span><span class="token string">'c'</span><span class="token punctuation">,</span> <span class="token string">'d'</span><span class="token punctuation">]]);</span> <span class="token comment">// 'a,b\nc,d'</span>
|
|
<span class="token function">arrayToCSV</span><span class="token punctuation">([[</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">], [</span><span class="token string">'c'</span><span class="token punctuation">,</span> <span class="token string">'d'</span><span class="token punctuation">]],</span> <span class="token string">';'</span><span class="token punctuation">);</span> <span class="token comment">// 'a;b\nc;d'</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="bifurcate" class="section double-padded">bifurcate</h3><div class="section double-padded"><p>Splits values into two groups. If an element in <code>filter</code> is truthy, the corresponding element in the collection belongs to the first group; otherwise, it belongs to the second group.</p><p>Use <code>Array.reduce()</code> and <code>Array.push()</code> to add elements to groups, based on <code>filter</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">bifurcate</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> filter<span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">((</span>acc<span class="token punctuation">,</span> val<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>acc<span class="token punctuation">[</span>filter<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">?</span> <span class="token number">0</span> <span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">].</span><span class="token function">push</span><span class="token punctuation">(</span>val<span class="token punctuation">),</span> acc<span class="token punctuation">), [[], []]);</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">bifurcate</span><span class="token punctuation">([</span><span class="token string">'beep'</span><span class="token punctuation">,</span> <span class="token string">'boop'</span><span class="token punctuation">,</span> <span class="token string">'foo'</span><span class="token punctuation">,</span> <span class="token string">'bar'</span><span class="token punctuation">], [</span><span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">]);</span> <span class="token comment">// [ ['beep', 'boop', 'bar'], ['foo'] ]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="bifurcateby" class="section double-padded">bifurcateBy</h3><div class="section double-padded"><p>Splits values into two groups according to a predicate function, which specifies which group an element in the input collection belongs to. If the predicate function returns a truthy value, the collection element belongs to the first group; otherwise, it belongs to the second group.</p><p>Use <code>Array.reduce()</code> and <code>Array.push()</code> to add elements to groups, based on the value returned by <code>fn</code> for each element.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">bifurcateBy</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> fn<span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">((</span>acc<span class="token punctuation">,</span> val<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>acc<span class="token punctuation">[</span><span class="token function">fn</span><span class="token punctuation">(</span>val<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token number">0</span> <span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">].</span><span class="token function">push</span><span class="token punctuation">(</span>val<span class="token punctuation">),</span> acc<span class="token punctuation">), [[], []]);</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">bifurcateBy</span><span class="token punctuation">([</span><span class="token string">'beep'</span><span class="token punctuation">,</span> <span class="token string">'boop'</span><span class="token punctuation">,</span> <span class="token string">'foo'</span><span class="token punctuation">,</span> <span class="token string">'bar'</span><span class="token punctuation">],</span> x <span class="token operator">=></span> x<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">===</span> <span class="token string">'b'</span><span class="token punctuation">);</span> <span class="token comment">// [ ['beep', 'boop', 'bar'], ['foo'] ]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="chunk" class="section double-padded">chunk</h3><div class="section double-padded"><p>Chunks an array into smaller arrays of a specified size.</p><p>Use <code>Array.from()</code> to create a new array, that fits the number of chunks that will be produced. Use <code>Array.slice()</code> to map each element of the new array to a chunk the length of <code>size</code>. If the original array can't be split evenly, the final chunk will contain the remaining elements.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">chunk</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> size<span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
Array<span class="token punctuation">.</span><span class="token keyword">from</span><span class="token punctuation">({</span> length<span class="token punctuation">:</span> Math<span class="token punctuation">.</span><span class="token function">ceil</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span>length <span class="token operator">/</span> size<span class="token punctuation">) }, (</span>v<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
arr<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span>i <span class="token operator">*</span> size<span class="token punctuation">,</span> i <span class="token operator">*</span> size <span class="token operator">+</span> size<span class="token punctuation">)
|
|
);</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">chunk</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">],</span> <span class="token number">2</span><span class="token punctuation">);</span> <span class="token comment">// [[1,2],[3,4],[5]]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="compact" class="section double-padded">compact</h3><div class="section double-padded"><p>Removes falsey values from an array.</p><p>Use <code>Array.filter()</code> to filter out falsey values (<code>false</code>, <code>null</code>, <code>0</code>, <code>""</code>, <code>undefined</code>, and <code>NaN</code>).</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">compact</span> <span class="token operator">=</span> arr <span class="token operator">=></span> arr<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>Boolean<span class="token punctuation">);</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">compact</span><span class="token punctuation">([</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'e'</span> <span class="token operator">*</span> <span class="token number">23</span><span class="token punctuation">,</span> <span class="token number">NaN</span><span class="token punctuation">,</span> <span class="token string">'s'</span><span class="token punctuation">,</span> <span class="token number">34</span><span class="token punctuation">]);</span> <span class="token comment">// [ 1, 2, 3, 'a', 's', 34 ]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="countby" class="section double-padded">countBy</h3><div class="section double-padded"><p>Groups the elements of an array based on the given function and returns the count of elements in each group.</p><p>Use <code>Array.map()</code> to map the values of an array to a function or property name. Use <code>Array.reduce()</code> to create an object, where the keys are produced from the mapped results.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">countBy</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> fn<span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
arr<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> fn <span class="token operator">===</span> <span class="token string">'function'</span> <span class="token operator">?</span> fn <span class="token punctuation">:</span> val <span class="token operator">=></span> val<span class="token punctuation">[</span>fn<span class="token punctuation">]).</span><span class="token function">reduce</span><span class="token punctuation">((</span>acc<span class="token punctuation">,</span> val<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
acc<span class="token punctuation">[</span>val<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">(</span>acc<span class="token punctuation">[</span>val<span class="token punctuation">]</span> <span class="token operator">||</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">return</span> acc<span class="token punctuation">;
|
|
}, {});</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">countBy</span><span class="token punctuation">([</span><span class="token number">6.1</span><span class="token punctuation">,</span> <span class="token number">4.2</span><span class="token punctuation">,</span> <span class="token number">6.3</span><span class="token punctuation">],</span> Math<span class="token punctuation">.</span>floor<span class="token punctuation">);</span> <span class="token comment">// {4: 1, 6: 2}</span>
|
|
<span class="token function">countBy</span><span class="token punctuation">([</span><span class="token string">'one'</span><span class="token punctuation">,</span> <span class="token string">'two'</span><span class="token punctuation">,</span> <span class="token string">'three'</span><span class="token punctuation">],</span> <span class="token string">'length'</span><span class="token punctuation">);</span> <span class="token comment">// {3: 2, 5: 1}</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="countoccurrences" class="section double-padded">countOccurrences</h3><div class="section double-padded"><p>Counts the occurrences of a value in an array.</p><p>Use <code>Array.reduce()</code> to increment a counter each time you encounter the specific value inside the array.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">countOccurrences</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> val<span class="token punctuation">)</span> <span class="token operator">=></span> arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">((</span>a<span class="token punctuation">,</span> v<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>v <span class="token operator">===</span> val <span class="token operator">?</span> a <span class="token operator">+</span> <span class="token number">1</span> <span class="token punctuation">:</span> a<span class="token punctuation">),</span> <span class="token number">0</span><span class="token punctuation">);</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">countOccurrences</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">],</span> <span class="token number">1</span><span class="token punctuation">);</span> <span class="token comment">// 3</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="deepflatten" class="section double-padded">deepFlatten</h3><div class="section double-padded"><p>Deep flattens an array.</p><p>Use recursion. Use <code>Array.concat()</code> with an empty array (<code>[]</code>) and the spread operator (<code>...</code>) to flatten an array. Recursively flatten each element that is an array.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">deepFlatten</span> <span class="token operator">=</span> arr <span class="token operator">=></span> <span class="token punctuation">[].</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token operator">...</span>arr<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>v <span class="token operator">=></span> <span class="token punctuation">(</span>Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>v<span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token function">deepFlatten</span><span class="token punctuation">(</span>v<span class="token punctuation">) :</span> v<span class="token punctuation">)));</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">deepFlatten</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">, [</span><span class="token number">2</span><span class="token punctuation">], [[</span><span class="token number">3</span><span class="token punctuation">],</span> <span class="token number">4</span><span class="token punctuation">],</span> <span class="token number">5</span><span class="token punctuation">]);</span> <span class="token comment">// [1,2,3,4,5]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="difference" class="section double-padded">difference</h3><div class="section double-padded"><p>Returns the difference between two arrays.</p><p>Create a <code>Set</code> from <code>b</code>, then use <code>Array.filter()</code> on <code>a</code> to only keep values not contained in <code>b</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">difference</span> <span class="token operator">=</span> <span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> s <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>b<span class="token punctuation">);</span>
|
|
<span class="token keyword">return</span> a<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>x <span class="token operator">=> !</span>s<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span>x<span class="token punctuation">));
|
|
};</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">difference</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">], [</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]);</span> <span class="token comment">// [3]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="differenceby" class="section double-padded">differenceBy</h3><div class="section double-padded"><p>Returns the difference between two arrays, after applying the provided function to each array element of both.</p><p>Create a <code>Set</code> by applying <code>fn</code> to each element in <code>b</code>, then use <code>Array.filter()</code> in combination with <code>fn</code> on <code>a</code> to only keep values not contained in the previously created set.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">differenceBy</span> <span class="token operator">=</span> <span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">,</span> fn<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> s <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>b<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>v <span class="token operator">=></span> <span class="token function">fn</span><span class="token punctuation">(</span>v<span class="token punctuation">)));</span>
|
|
<span class="token keyword">return</span> a<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>x <span class="token operator">=> !</span>s<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span><span class="token function">fn</span><span class="token punctuation">(</span>x<span class="token punctuation">)));
|
|
};</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">differenceBy</span><span class="token punctuation">([</span><span class="token number">2.1</span><span class="token punctuation">,</span> <span class="token number">1.2</span><span class="token punctuation">], [</span><span class="token number">2.3</span><span class="token punctuation">,</span> <span class="token number">3.4</span><span class="token punctuation">],</span> Math<span class="token punctuation">.</span>floor<span class="token punctuation">);</span> <span class="token comment">// [1.2]</span>
|
|
<span class="token function">differenceBy</span><span class="token punctuation">([{</span> x<span class="token punctuation">:</span> <span class="token number">2</span> <span class="token punctuation">}, {</span> x<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}], [{</span> x<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}],</span> v <span class="token operator">=></span> v<span class="token punctuation">.</span>x<span class="token punctuation">);</span> <span class="token comment">// [ { x: 2 } ]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="differencewith" class="section double-padded">differenceWith</h3><div class="section double-padded"><p>Filters out all values from an array for which the comparator function does not return <code>true</code>.</p><p>Use <code>Array.filter()</code> and <code>Array.findIndex()</code> to find the appropriate values.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">differenceWith</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> val<span class="token punctuation">,</span> comp<span class="token punctuation">)</span> <span class="token operator">=></span> arr<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>a <span class="token operator">=></span> val<span class="token punctuation">.</span><span class="token function">findIndex</span><span class="token punctuation">(</span>b <span class="token operator">=></span> <span class="token function">comp</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">))</span> <span class="token operator">=== -</span><span class="token number">1</span><span class="token punctuation">);</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">differenceWith</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1.2</span><span class="token punctuation">,</span> <span class="token number">1.5</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">], [</span><span class="token number">1.9</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">], (</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span> <span class="token operator">===</span> Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span>b<span class="token punctuation">));</span> <span class="token comment">// [1, 1.2]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="drop" class="section double-padded">drop</h3><div class="section double-padded"><p>Returns a new array with <code>n</code> elements removed from the left.</p><p>Use <code>Array.slice()</code> to slice the remove the specified number of elements from the left.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">drop</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> n <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">=></span> arr<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span>n<span class="token punctuation">);</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">drop</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]);</span> <span class="token comment">// [2,3]</span>
|
|
<span class="token function">drop</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">],</span> <span class="token number">2</span><span class="token punctuation">);</span> <span class="token comment">// [3]</span>
|
|
<span class="token function">drop</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">],</span> <span class="token number">42</span><span class="token punctuation">);</span> <span class="token comment">// []</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="dropright" class="section double-padded">dropRight</h3><div class="section double-padded"><p>Returns a new array with <code>n</code> elements removed from the right.</p><p>Use <code>Array.slice()</code> to slice the remove the specified number of elements from the right.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">dropRight</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> n <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">=></span> arr<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token operator">-</span>n<span class="token punctuation">);</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">dropRight</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]);</span> <span class="token comment">// [1,2]</span>
|
|
<span class="token function">dropRight</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">],</span> <span class="token number">2</span><span class="token punctuation">);</span> <span class="token comment">// [1]</span>
|
|
<span class="token function">dropRight</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">],</span> <span class="token number">42</span><span class="token punctuation">);</span> <span class="token comment">// []</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="droprightwhile" class="section double-padded">dropRightWhile</h3><div class="section double-padded"><p>Removes elements from the end of an array until the passed function returns <code>true</code>. Returns the remaining elements in the array.</p><p>Loop through the array, using <code>Array.slice()</code> to drop the last element of the array until the returned value from the function is <code>true</code>. Returns the remaining elements.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">dropRightWhile</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> func<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">while</span> <span class="token punctuation">(</span>arr<span class="token punctuation">.</span>length <span class="token operator">></span> <span class="token number">0</span> <span class="token operator">&& !</span><span class="token function">func</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span>arr<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]))</span> arr <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">);</span>
|
|
<span class="token keyword">return</span> arr<span class="token punctuation">;
|
|
};</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">dropRightWhile</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">],</span> n <span class="token operator">=></span> n <span class="token operator"><</span> <span class="token number">3</span><span class="token punctuation">);</span> <span class="token comment">// [1, 2]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="dropwhile" class="section double-padded">dropWhile</h3><div class="section double-padded"><p>Removes elements in an array until the passed function returns <code>true</code>. Returns the remaining elements in the array.</p><p>Loop through the array, using <code>Array.slice()</code> to drop the first element of the array until the returned value from the function is <code>true</code>. Returns the remaining elements.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">dropWhile</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> func<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">while</span> <span class="token punctuation">(</span>arr<span class="token punctuation">.</span>length <span class="token operator">></span> <span class="token number">0</span> <span class="token operator">&& !</span><span class="token function">func</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]))</span> arr <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">);</span>
|
|
<span class="token keyword">return</span> arr<span class="token punctuation">;
|
|
};</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">dropWhile</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">],</span> n <span class="token operator">=></span> n <span class="token operator">>=</span> <span class="token number">3</span><span class="token punctuation">);</span> <span class="token comment">// [3,4]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="everynth" class="section double-padded">everyNth</h3><div class="section double-padded"><p>Returns every nth element in an array.</p><p>Use <code>Array.filter()</code> to create a new array that contains every nth element of a given array.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">everyNth</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> nth<span class="token punctuation">)</span> <span class="token operator">=></span> arr<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">((</span>e<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">=></span> i <span class="token operator">%</span> nth <span class="token operator">===</span> nth <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">);</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">everyNth</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">],</span> <span class="token number">2</span><span class="token punctuation">);</span> <span class="token comment">// [ 2, 4, 6 ]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="filternonunique" class="section double-padded">filterNonUnique</h3><div class="section double-padded"><p>Filters out the non-unique values in an array.</p><p>Use <code>Array.filter()</code> for an array containing only the unique values.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">filterNonUnique</span> <span class="token operator">=</span> arr <span class="token operator">=></span> arr<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>i <span class="token operator">=></span> arr<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span> <span class="token operator">===</span> arr<span class="token punctuation">.</span><span class="token function">lastIndexOf</span><span class="token punctuation">(</span>i<span class="token punctuation">));</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">filterNonUnique</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]);</span> <span class="token comment">// [1,3,5]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="findlast" class="section double-padded">findLast</h3><div class="section double-padded"><p>Returns the last element for which the provided function returns a truthy value.</p><p>Use <code>Array.filter()</code> to remove elements for which <code>fn</code> returns falsey values, <code>Array.pop()</code> to get the last one.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">findLast</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> fn<span class="token punctuation">)</span> <span class="token operator">=></span> arr<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>fn<span class="token punctuation">).</span><span class="token function">pop</span><span class="token punctuation">();</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">findLast</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">],</span> n <span class="token operator">=></span> n <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">===</span> <span class="token number">1</span><span class="token punctuation">);</span> <span class="token comment">// 3</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="findlastindex" class="section double-padded">findLastIndex</h3><div class="section double-padded"><p>Returns the index of the last element for which the provided function returns a truthy value.</p><p>Use <code>Array.map()</code> to map each element to an array with its index and value. Use <code>Array.filter()</code> to remove elements for which <code>fn</code> returns falsey values, <code>Array.pop()</code> to get the last one.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">findLastIndex</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> fn<span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
arr
|
|
<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">((</span>val<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span>i<span class="token punctuation">,</span> val<span class="token punctuation">])
|
|
.</span><span class="token function">filter</span><span class="token punctuation">(([</span>i<span class="token punctuation">,</span> val<span class="token punctuation">])</span> <span class="token operator">=></span> <span class="token function">fn</span><span class="token punctuation">(</span>val<span class="token punctuation">,</span> i<span class="token punctuation">,</span> arr<span class="token punctuation">))
|
|
.</span><span class="token function">pop</span><span class="token punctuation">()[</span><span class="token number">0</span><span class="token punctuation">];</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">findLastIndex</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">],</span> n <span class="token operator">=></span> n <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">===</span> <span class="token number">1</span><span class="token punctuation">);</span> <span class="token comment">// 2 (index of the value 3)</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="flatten" class="section double-padded">flatten</h3><div class="section double-padded"><p>Flattens an array up to the specified depth.</p><p>Use recursion, decrementing <code>depth</code> by 1 for each level of depth. Use <code>Array.reduce()</code> and <code>Array.concat()</code> to merge elements or arrays. Base case, for <code>depth</code> equal to <code>1</code> stops recursion. Omit the second argument, <code>depth</code> to flatten only to a depth of <code>1</code> (single flatten).</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">flatten</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> depth <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">((</span>a<span class="token punctuation">,</span> v<span class="token punctuation">)</span> <span class="token operator">=></span> a<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>depth <span class="token operator">></span> <span class="token number">1</span> <span class="token operator">&&</span> Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>v<span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token function">flatten</span><span class="token punctuation">(</span>v<span class="token punctuation">,</span> depth <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">) :</span> v<span class="token punctuation">), []);</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">flatten</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">, [</span><span class="token number">2</span><span class="token punctuation">],</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]);</span> <span class="token comment">// [1, 2, 3, 4]</span>
|
|
<span class="token function">flatten</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">, [</span><span class="token number">2</span><span class="token punctuation">, [</span><span class="token number">3</span><span class="token punctuation">, [</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">],</span> <span class="token number">6</span><span class="token punctuation">],</span> <span class="token number">7</span><span class="token punctuation">],</span> <span class="token number">8</span><span class="token punctuation">],</span> <span class="token number">2</span><span class="token punctuation">);</span> <span class="token comment">// [1, 2, 3, [4, 5], 6, 7, 8]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="foreachright" class="section double-padded">forEachRight</h3><div class="section double-padded"><p>Executes a provided function once for each array element, starting from the array's last element.</p><p>Use <code>Array.slice(0)</code> to clone the given array, <code>Array.reverse()</code> to reverse it and <code>Array.forEach()</code> to iterate over the reversed array.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">forEachRight</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> callback<span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
arr
|
|
<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)
|
|
.</span><span class="token function">reverse</span><span class="token punctuation">()
|
|
.</span><span class="token function">forEach</span><span class="token punctuation">(</span>callback<span class="token punctuation">);</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">forEachRight</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">],</span> val <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>val<span class="token punctuation">));</span> <span class="token comment">// '4', '3', '2', '1'</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="groupby" class="section double-padded">groupBy</h3><div class="section double-padded"><p>Groups the elements of an array based on the given function.</p><p>Use <code>Array.map()</code> to map the values of an array to a function or property name. Use <code>Array.reduce()</code> to create an object, where the keys are produced from the mapped results.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">groupBy</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> fn<span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
arr<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> fn <span class="token operator">===</span> <span class="token string">'function'</span> <span class="token operator">?</span> fn <span class="token punctuation">:</span> val <span class="token operator">=></span> val<span class="token punctuation">[</span>fn<span class="token punctuation">]).</span><span class="token function">reduce</span><span class="token punctuation">((</span>acc<span class="token punctuation">,</span> val<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
acc<span class="token punctuation">[</span>val<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">(</span>acc<span class="token punctuation">[</span>val<span class="token punctuation">]</span> <span class="token operator">||</span> <span class="token punctuation">[]).</span><span class="token function">concat</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span>i<span class="token punctuation">]);</span>
|
|
<span class="token keyword">return</span> acc<span class="token punctuation">;
|
|
}, {});</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">groupBy</span><span class="token punctuation">([</span><span class="token number">6.1</span><span class="token punctuation">,</span> <span class="token number">4.2</span><span class="token punctuation">,</span> <span class="token number">6.3</span><span class="token punctuation">],</span> Math<span class="token punctuation">.</span>floor<span class="token punctuation">);</span> <span class="token comment">// {4: [4.2], 6: [6.1, 6.3]}</span>
|
|
<span class="token function">groupBy</span><span class="token punctuation">([</span><span class="token string">'one'</span><span class="token punctuation">,</span> <span class="token string">'two'</span><span class="token punctuation">,</span> <span class="token string">'three'</span><span class="token punctuation">],</span> <span class="token string">'length'</span><span class="token punctuation">);</span> <span class="token comment">// {3: ['one', 'two'], 5: ['three']}</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="head" class="section double-padded">head</h3><div class="section double-padded"><p>Returns the head of a list.</p><p>Use <code>arr[0]</code> to return the first element of the passed array.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">head</span> <span class="token operator">=</span> arr <span class="token operator">=></span> arr<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">];</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">head</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]);</span> <span class="token comment">// 1</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="indexofall" class="section double-padded">indexOfAll</h3><div class="section double-padded"><p>Returns all indices of <code>val</code> in an array. If <code>val</code> never occurs, returns <code>[]</code>.</p><p>Use <code>Array.forEach()</code> to loop over elements and <code>Array.push()</code> to store indices for matching elements. Return the array of indices.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">indexOfAll</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> val<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> indices <span class="token operator">=</span> <span class="token punctuation">[];</span>
|
|
arr<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">((</span>el<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">=></span> el <span class="token operator">===</span> val <span class="token operator">&&</span> indices<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>i<span class="token punctuation">));</span>
|
|
<span class="token keyword">return</span> indices<span class="token punctuation">;
|
|
};</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">indexOfAll</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">],</span> <span class="token number">1</span><span class="token punctuation">);</span> <span class="token comment">// [0,3]</span>
|
|
<span class="token function">indexOfAll</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">],</span> <span class="token number">4</span><span class="token punctuation">);</span> <span class="token comment">// []</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="initial" class="section double-padded">initial</h3><div class="section double-padded"><p>Returns all the elements of an array except the last one.</p><p>Use <code>arr.slice(0,-1)</code> to return all but the last element of the array.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">initial</span> <span class="token operator">=</span> arr <span class="token operator">=></span> arr<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">);</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">initial</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]);</span> <span class="token comment">// [1,2]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="initialize2darray" class="section double-padded">initialize2DArray</h3><div class="section double-padded"><p>Initializes a 2D array of given width and height and value.</p><p>Use <code>Array.map()</code> to generate h rows where each is a new array of size w initialize with value. If the value is not provided, default to <code>null</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">initialize2DArray</span> <span class="token operator">=</span> <span class="token punctuation">(</span>w<span class="token punctuation">,</span> h<span class="token punctuation">,</span> val <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
Array<span class="token punctuation">.</span><span class="token keyword">from</span><span class="token punctuation">({</span> length<span class="token punctuation">:</span> h <span class="token punctuation">}).</span><span class="token function">map</span><span class="token punctuation">(()</span> <span class="token operator">=></span> Array<span class="token punctuation">.</span><span class="token keyword">from</span><span class="token punctuation">({</span> length<span class="token punctuation">:</span> w <span class="token punctuation">}).</span><span class="token function">fill</span><span class="token punctuation">(</span>val<span class="token punctuation">));</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">initialize2DArray</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">);</span> <span class="token comment">// [[0,0], [0,0]]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="initializearraywithrange" class="section double-padded">initializeArrayWithRange</h3><div class="section double-padded"><p>Initializes an array containing the numbers in the specified range where <code>start</code> and <code>end</code> are inclusive with their common difference <code>step</code>.</p><p>Use <code>Array.from(Math.ceil((end+1-start)/step))</code> to create an array of the desired length(the amounts of elements is equal to <code>(end-start)/step</code> or <code>(end+1-start)/step</code> for inclusive end), <code>Array.map()</code> to fill with the desired values in a range. You can omit <code>start</code> to use a default value of <code>0</code>. You can omit <code>step</code> to use a default value of <code>1</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">initializeArrayWithRange</span> <span class="token operator">=</span> <span class="token punctuation">(</span>end<span class="token punctuation">,</span> start <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> step <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
Array<span class="token punctuation">.</span><span class="token keyword">from</span><span class="token punctuation">({</span> length<span class="token punctuation">:</span> Math<span class="token punctuation">.</span><span class="token function">ceil</span><span class="token punctuation">((</span>end <span class="token operator">+</span> <span class="token number">1</span> <span class="token operator">-</span> start<span class="token punctuation">)</span> <span class="token operator">/</span> step<span class="token punctuation">) }).</span><span class="token function">map</span><span class="token punctuation">((</span>v<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">=></span> i <span class="token operator">*</span> step <span class="token operator">+</span> start<span class="token punctuation">);</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">initializeArrayWithRange</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">);</span> <span class="token comment">// [0,1,2,3,4,5]</span>
|
|
<span class="token function">initializeArrayWithRange</span><span class="token punctuation">(</span><span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">);</span> <span class="token comment">// [3,4,5,6,7]</span>
|
|
<span class="token function">initializeArrayWithRange</span><span class="token punctuation">(</span><span class="token number">9</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">);</span> <span class="token comment">// [0,2,4,6,8]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="initializearraywithrangeright" class="section double-padded">initializeArrayWithRangeRight</h3><div class="section double-padded"><p>Initializes an array containing the numbers in the specified range (in reverse) where <code>start</code> and <code>end</code> are inclusive with their common difference <code>step</code>.</p><p>Use <code>Array.from(Math.ceil((end+1-start)/step))</code> to create an array of the desired length(the amounts of elements is equal to <code>(end-start)/step</code> or <code>(end+1-start)/step</code> for inclusive end), <code>Array.map()</code> to fill with the desired values in a range. You can omit <code>start</code> to use a default value of <code>0</code>. You can omit <code>step</code> to use a default value of <code>1</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">initializeArrayWithRangeRight</span> <span class="token operator">=</span> <span class="token punctuation">(</span>end<span class="token punctuation">,</span> start <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> step <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
Array<span class="token punctuation">.</span><span class="token keyword">from</span><span class="token punctuation">({</span> length<span class="token punctuation">:</span> Math<span class="token punctuation">.</span><span class="token function">ceil</span><span class="token punctuation">((</span>end <span class="token operator">+</span> <span class="token number">1</span> <span class="token operator">-</span> start<span class="token punctuation">)</span> <span class="token operator">/</span> step<span class="token punctuation">) }).</span><span class="token function">map</span><span class="token punctuation">(
|
|
(</span>v<span class="token punctuation">,</span> i<span class="token punctuation">,</span> arr<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>arr<span class="token punctuation">.</span>length <span class="token operator">-</span> i <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">*</span> step <span class="token operator">+</span> start
|
|
<span class="token punctuation">);</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">initializeArrayWithRangeRight</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">);</span> <span class="token comment">// [5,4,3,2,1,0]</span>
|
|
<span class="token function">initializeArrayWithRangeRight</span><span class="token punctuation">(</span><span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">);</span> <span class="token comment">// [7,6,5,4,3]</span>
|
|
<span class="token function">initializeArrayWithRangeRight</span><span class="token punctuation">(</span><span class="token number">9</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">);</span> <span class="token comment">// [8,6,4,2,0]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="initializearraywithvalues" class="section double-padded">initializeArrayWithValues</h3><div class="section double-padded"><p>Initializes and fills an array with the specified values.</p><p>Use <code>Array(n)</code> to create an array of the desired length, <code>fill(v)</code> to fill it with the desired values. You can omit <code>val</code> to use a default value of <code>0</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">initializeArrayWithValues</span> <span class="token operator">=</span> <span class="token punctuation">(</span>n<span class="token punctuation">,</span> val <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">Array</span><span class="token punctuation">(</span>n<span class="token punctuation">).</span><span class="token function">fill</span><span class="token punctuation">(</span>val<span class="token punctuation">);</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">initializeArrayWithValues</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">);</span> <span class="token comment">// [2,2,2,2,2]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="initializendarray" class="section double-padded">initializeNDArray</h3><div class="section double-padded"><p>Create a n-dimensional array with given value.</p><p>Use recursion. Use <code>Array.map()</code> to generate rows where each is a new array initialized using <code>initializeNDArray</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">initializeNDArray</span> <span class="token operator">=</span> <span class="token punctuation">(</span>val<span class="token punctuation">,</span> <span class="token operator">...</span>args<span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
args<span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">0</span>
|
|
<span class="token operator">?</span> val
|
|
<span class="token punctuation">:</span> Array<span class="token punctuation">.</span><span class="token keyword">from</span><span class="token punctuation">({</span> length<span class="token punctuation">:</span> args<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">] }).</span><span class="token function">map</span><span class="token punctuation">(()</span> <span class="token operator">=></span> <span class="token function">initializeNDArray</span><span class="token punctuation">(</span>val<span class="token punctuation">,</span> <span class="token operator">...</span>args<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)));</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">initializeNDArray</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">);</span> <span class="token comment">// [1,1,1]</span>
|
|
<span class="token function">initializeNDArray</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">);</span> <span class="token comment">// [[[5,5],[5,5]],[[5,5],[5,5]]]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="intersection" class="section double-padded">intersection</h3><div class="section double-padded"><p>Returns a list of elements that exist in both arrays.</p><p>Create a <code>Set</code> from <code>b</code>, then use <code>Array.filter()</code> on <code>a</code> to only keep values contained in <code>b</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">intersection</span> <span class="token operator">=</span> <span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> s <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>b<span class="token punctuation">);</span>
|
|
<span class="token keyword">return</span> a<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>x <span class="token operator">=></span> s<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span>x<span class="token punctuation">));
|
|
};</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">intersection</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">], [</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]);</span> <span class="token comment">// [2,3]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="intersectionby" class="section double-padded">intersectionBy</h3><div class="section double-padded"><p>Returns a list of elements that exist in both arrays, after applying the provided function to each array element of both.</p><p>Create a <code>Set</code> by applying <code>fn</code> to all elements in <code>b</code>, then use <code>Array.filter()</code> on <code>a</code> to only keep elements, which produce values contained in <code>b</code> when <code>fn</code> is applied to them.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">intersectionBy</span> <span class="token operator">=</span> <span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">,</span> fn<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> s <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>b<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>x <span class="token operator">=></span> <span class="token function">fn</span><span class="token punctuation">(</span>x<span class="token punctuation">)));</span>
|
|
<span class="token keyword">return</span> a<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>x <span class="token operator">=></span> s<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span><span class="token function">fn</span><span class="token punctuation">(</span>x<span class="token punctuation">)));
|
|
};</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">intersectionBy</span><span class="token punctuation">([</span><span class="token number">2.1</span><span class="token punctuation">,</span> <span class="token number">1.2</span><span class="token punctuation">], [</span><span class="token number">2.3</span><span class="token punctuation">,</span> <span class="token number">3.4</span><span class="token punctuation">],</span> Math<span class="token punctuation">.</span>floor<span class="token punctuation">);</span> <span class="token comment">// [2.1]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="intersectionwith" class="section double-padded">intersectionWith</h3><div class="section double-padded"><p>Returns a list of elements that exist in both arrays, using a provided comparator function.</p><p>Use <code>Array.filter()</code> and <code>Array.findIndex()</code> in combination with the provided comparator to determine intersecting values.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">intersectionWith</span> <span class="token operator">=</span> <span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">,</span> comp<span class="token punctuation">)</span> <span class="token operator">=></span> a<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>x <span class="token operator">=></span> b<span class="token punctuation">.</span><span class="token function">findIndex</span><span class="token punctuation">(</span>y <span class="token operator">=></span> <span class="token function">comp</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">))</span> <span class="token operator">!== -</span><span class="token number">1</span><span class="token punctuation">);</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">intersectionWith</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1.2</span><span class="token punctuation">,</span> <span class="token number">1.5</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">], [</span><span class="token number">1.9</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">3.9</span><span class="token punctuation">], (</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span> <span class="token operator">===</span> Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span>b<span class="token punctuation">));</span> <span class="token comment">// [1.5, 3, 0]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="issorted" class="section double-padded">isSorted</h3><div class="section double-padded"><p>Returns <code>1</code> if the array is sorted in ascending order, <code>-1</code> if it is sorted in descending order or <code>0</code> if it is not sorted.</p><p>Calculate the ordering <code>direction</code> for the first two elements. Use <code>Object.entries()</code> to loop over array objects and compare them in pairs. Return <code>0</code> if the <code>direction</code> changes or the <code>direction</code> if the last element is reached.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">isSorted</span> <span class="token operator">=</span> arr <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">let</span> direction <span class="token operator">= -</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">-</span> arr<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]);</span>
|
|
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> <span class="token punctuation">[</span>i<span class="token punctuation">,</span> val<span class="token punctuation">]</span> <span class="token keyword">of</span> arr<span class="token punctuation">.</span><span class="token function">entries</span><span class="token punctuation">()) {</span>
|
|
direction <span class="token operator">= !</span>direction <span class="token operator">? -</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span>i <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">-</span> arr<span class="token punctuation">[</span>i<span class="token punctuation">]) :</span> direction<span class="token punctuation">;</span>
|
|
<span class="token keyword">if</span> <span class="token punctuation">(</span>i <span class="token operator">===</span> arr<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token operator">!</span>direction <span class="token operator">?</span> <span class="token number">0</span> <span class="token punctuation">:</span> direction<span class="token punctuation">;</span>
|
|
<span class="token keyword">else if</span> <span class="token punctuation">((</span>val <span class="token operator">-</span> arr<span class="token punctuation">[</span>i <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">])</span> <span class="token operator">*</span> direction <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token number">0</span><span class="token punctuation">;
|
|
}
|
|
};</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">isSorted</span><span class="token punctuation">([</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]);</span> <span class="token comment">// 1</span>
|
|
<span class="token function">isSorted</span><span class="token punctuation">([</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]);</span> <span class="token comment">// -1</span>
|
|
<span class="token function">isSorted</span><span class="token punctuation">([</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]);</span> <span class="token comment">// 0</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="join" class="section double-padded">join</h3><div class="section double-padded"><p>Joins all elements of an array into a string and returns this string. Uses a separator and an end separator.</p><p>Use <code>Array.reduce()</code> to combine elements into a string. Omit the second argument, <code>separator</code>, to use a default separator of <code>','</code>. Omit the third argument, <code>end</code>, to use the same value as <code>separator</code> by default.</p><pre class="language-js"><span class="token keyword">const</span> join <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> separator <span class="token operator">=</span> <span class="token string">','</span><span class="token punctuation">,</span> end <span class="token operator">=</span> separator<span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(
|
|
(</span>acc<span class="token punctuation">,</span> val<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
i <span class="token operator">===</span> arr<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">2</span>
|
|
<span class="token operator">?</span> acc <span class="token operator">+</span> val <span class="token operator">+</span> end
|
|
<span class="token punctuation">:</span> i <span class="token operator">===</span> arr<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span>
|
|
<span class="token operator">?</span> acc <span class="token operator">+</span> val
|
|
<span class="token punctuation">:</span> acc <span class="token operator">+</span> val <span class="token operator">+</span> separator<span class="token punctuation">,</span>
|
|
<span class="token string">''</span>
|
|
<span class="token punctuation">);</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">join</span><span class="token punctuation">([</span><span class="token string">'pen'</span><span class="token punctuation">,</span> <span class="token string">'pineapple'</span><span class="token punctuation">,</span> <span class="token string">'apple'</span><span class="token punctuation">,</span> <span class="token string">'pen'</span><span class="token punctuation">],</span> <span class="token string">','</span><span class="token punctuation">,</span> <span class="token string">'&'</span><span class="token punctuation">);</span> <span class="token comment">// "pen,pineapple,apple&pen"</span>
|
|
<span class="token function">join</span><span class="token punctuation">([</span><span class="token string">'pen'</span><span class="token punctuation">,</span> <span class="token string">'pineapple'</span><span class="token punctuation">,</span> <span class="token string">'apple'</span><span class="token punctuation">,</span> <span class="token string">'pen'</span><span class="token punctuation">],</span> <span class="token string">','</span><span class="token punctuation">);</span> <span class="token comment">// "pen,pineapple,apple,pen"</span>
|
|
<span class="token function">join</span><span class="token punctuation">([</span><span class="token string">'pen'</span><span class="token punctuation">,</span> <span class="token string">'pineapple'</span><span class="token punctuation">,</span> <span class="token string">'apple'</span><span class="token punctuation">,</span> <span class="token string">'pen'</span><span class="token punctuation">]);</span> <span class="token comment">// "pen,pineapple,apple,pen"</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="last" class="section double-padded">last</h3><div class="section double-padded"><p>Returns the last element in an array.</p><p>Use <code>arr.length - 1</code> to compute the index of the last element of the given array and returning it.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">last</span> <span class="token operator">=</span> arr <span class="token operator">=></span> arr<span class="token punctuation">[</span>arr<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">];</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">last</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]);</span> <span class="token comment">// 3</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="longestitem" class="section double-padded">longestItem</h3><div class="section double-padded"><p>Takes any number of iterable objects or objects with a <code>length</code> property and returns the longest one.</p><p>Use <code>Array.sort()</code> to sort all arguments by <code>length</code>, return the first (longest) one.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">longestItem</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token operator">...</span>vals<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token operator">...</span>vals<span class="token punctuation">].</span><span class="token function">sort</span><span class="token punctuation">((</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> b<span class="token punctuation">.</span>length <span class="token operator">-</span> a<span class="token punctuation">.</span>length<span class="token punctuation">)[</span><span class="token number">0</span><span class="token punctuation">];</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">longestItem</span><span class="token punctuation">(</span><span class="token string">'this'</span><span class="token punctuation">,</span> <span class="token string">'is'</span><span class="token punctuation">,</span> <span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'testcase'</span><span class="token punctuation">);</span> <span class="token comment">// 'testcase'</span>
|
|
<span class="token function">longestItem</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'ab'</span><span class="token punctuation">,</span> <span class="token string">'abc'</span><span class="token punctuation">]);</span> <span class="token comment">// 'abc'</span>
|
|
<span class="token function">longestItem</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'ab'</span><span class="token punctuation">,</span> <span class="token string">'abc'</span><span class="token punctuation">],</span> <span class="token string">'abcd'</span><span class="token punctuation">);</span> <span class="token comment">// 'abcd'</span>
|
|
<span class="token function">longestItem</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">], [</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">], [</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]);</span> <span class="token comment">// [1, 2, 3, 4, 5]</span>
|
|
<span class="token function">longestItem</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">],</span> <span class="token string">'foobar'</span><span class="token punctuation">);</span> <span class="token comment">// 'foobar'</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="mapobject" class="section double-padded">mapObject<mark class="tag">advanced</mark></h3><div class="section double-padded"><p>Maps the values of an array to an object using a function, where the key-value pairs consist of the original value as the key and the mapped value.</p><p>Use an anonymous inner function scope to declare an undefined memory space, using closures to store a return value. Use a new <code>Array</code> to store the array with a map of the function over its data set and a comma operator to return a second step, without needing to move from one context to another (due to closures and order of operations).</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">mapObject</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> fn<span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
<span class="token punctuation">(</span>a <span class="token operator">=></span> <span class="token punctuation">(
|
|
(</span>a <span class="token operator">=</span> <span class="token punctuation">[</span>arr<span class="token punctuation">,</span> arr<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>fn<span class="token punctuation">)]),</span> a<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">].</span><span class="token function">reduce</span><span class="token punctuation">((</span>acc<span class="token punctuation">,</span> val<span class="token punctuation">,</span> ind<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">((</span>acc<span class="token punctuation">[</span>val<span class="token punctuation">]</span> <span class="token operator">=</span> a<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">][</span>ind<span class="token punctuation">]),</span> acc<span class="token punctuation">), {})
|
|
))();</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">squareIt</span> <span class="token operator">=</span> arr <span class="token operator">=></span> <span class="token function">mapObject</span><span class="token punctuation">(</span>arr<span class="token punctuation">,</span> a <span class="token operator">=></span> a <span class="token operator">*</span> a<span class="token punctuation">);</span>
|
|
<span class="token function">squareIt</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]);</span> <span class="token comment">// { 1: 1, 2: 4, 3: 9 }</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="maxn" class="section double-padded">maxN</h3><div class="section double-padded"><p>Returns the <code>n</code> maximum elements from the provided array. If <code>n</code> is greater than or equal to the provided array's length, then return the original array(sorted in descending order).</p><p>Use <code>Array.sort()</code> combined with the spread operator (<code>...</code>) to create a shallow clone of the array and sort it in descending order. Use <code>Array.slice()</code> to get the specified number of elements. Omit the second argument, <code>n</code>, to get a one-element array.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">maxN</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> n <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token operator">...</span>arr<span class="token punctuation">].</span><span class="token function">sort</span><span class="token punctuation">((</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> b <span class="token operator">-</span> a<span class="token punctuation">).</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> n<span class="token punctuation">);</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">maxN</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]);</span> <span class="token comment">// [3]</span>
|
|
<span class="token function">maxN</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">],</span> <span class="token number">2</span><span class="token punctuation">);</span> <span class="token comment">// [3,2]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="minn" class="section double-padded">minN</h3><div class="section double-padded"><p>Returns the <code>n</code> minimum elements from the provided array. If <code>n</code> is greater than or equal to the provided array's length, then return the original array(sorted in ascending order).</p><p>Use <code>Array.sort()</code> combined with the spread operator (<code>...</code>) to create a shallow clone of the array and sort it in ascending order. Use <code>Array.slice()</code> to get the specified number of elements. Omit the second argument, <code>n</code>, to get a one-element array.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">minN</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> n <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token operator">...</span>arr<span class="token punctuation">].</span><span class="token function">sort</span><span class="token punctuation">((</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> a <span class="token operator">-</span> b<span class="token punctuation">).</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> n<span class="token punctuation">);</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">minN</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]);</span> <span class="token comment">// [1]</span>
|
|
<span class="token function">minN</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">],</span> <span class="token number">2</span><span class="token punctuation">);</span> <span class="token comment">// [1,2]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="none" class="section double-padded">none</h3><div class="section double-padded"><p>Returns <code>true</code> if the provided predicate function returns <code>false</code> for all elements in a collection, <code>false</code> otherwise.</p><p>Use <code>Array.some()</code> to test if any elements in the collection return <code>true</code> based on <code>fn</code>. Omit the second argument, <code>fn</code>, to use <code>Boolean</code> as a default.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">none</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> fn <span class="token operator">=</span> Boolean<span class="token punctuation">)</span> <span class="token operator">=> !</span>arr<span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span>fn<span class="token punctuation">);</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">none</span><span class="token punctuation">([</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">],</span> x <span class="token operator">=></span> x <span class="token operator">==</span> <span class="token number">2</span><span class="token punctuation">);</span> <span class="token comment">// true</span>
|
|
<span class="token function">none</span><span class="token punctuation">([</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]);</span> <span class="token comment">// true</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="nthelement" class="section double-padded">nthElement</h3><div class="section double-padded"><p>Returns the nth element of an array.</p><p>Use <code>Array.slice()</code> to get an array containing the nth element at the first place. If the index is out of bounds, return <code>[]</code>. Omit the second argument, <code>n</code>, to get the first element of the array.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">nthElement</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> n <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>n <span class="token operator">></span> <span class="token number">0</span> <span class="token operator">?</span> arr<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span>n<span class="token punctuation">,</span> n <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">) :</span> arr<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span>n<span class="token punctuation">))[</span><span class="token number">0</span><span class="token punctuation">];</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">nthElement</span><span class="token punctuation">([</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token string">'c'</span><span class="token punctuation">],</span> <span class="token number">1</span><span class="token punctuation">);</span> <span class="token comment">// 'b'</span>
|
|
<span class="token function">nthElement</span><span class="token punctuation">([</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">],</span> <span class="token operator">-</span><span class="token number">3</span><span class="token punctuation">);</span> <span class="token comment">// 'a'</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="offset" class="section double-padded">offset</h3><div class="section double-padded"><p>Moves the specified amount of elements to the end of the array.</p><p>Use <code>Array.slice()</code> twice to get the elements after the specified index and the elements before that. Use the spread operator(<code>...</code>) to combine the two into one array. If <code>offset</code> is negative, the elements will be moved from end to start.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">offset</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> offset<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token operator">...</span>arr<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span>offset<span class="token punctuation">),</span> <span class="token operator">...</span>arr<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> offset<span class="token punctuation">)];</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">offset</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">],</span> <span class="token number">2</span><span class="token punctuation">);</span> <span class="token comment">// [3, 4, 5, 1, 2]</span>
|
|
<span class="token function">offset</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">],</span> <span class="token operator">-</span><span class="token number">2</span><span class="token punctuation">);</span> <span class="token comment">// [4, 5, 1, 2, 3]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="partition" class="section double-padded">partition</h3><div class="section double-padded"><p>Groups the elements into two arrays, depending on the provided function's truthiness for each element.</p><p>Use <code>Array.reduce()</code> to create an array of two arrays. Use <code>Array.push()</code> to add elements for which <code>fn</code> returns <code>true</code> to the first array and elements for which <code>fn</code> returns <code>false</code> to the second one.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">partition</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> fn<span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(
|
|
(</span>acc<span class="token punctuation">,</span> val<span class="token punctuation">,</span> i<span class="token punctuation">,</span> arr<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
acc<span class="token punctuation">[</span><span class="token function">fn</span><span class="token punctuation">(</span>val<span class="token punctuation">,</span> i<span class="token punctuation">,</span> arr<span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token number">0</span> <span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">].</span><span class="token function">push</span><span class="token punctuation">(</span>val<span class="token punctuation">);</span>
|
|
<span class="token keyword">return</span> acc<span class="token punctuation">;
|
|
},
|
|
[[], []]
|
|
);</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> users <span class="token operator">=</span> <span class="token punctuation">[{</span> user<span class="token punctuation">:</span> <span class="token string">'barney'</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">36</span><span class="token punctuation">,</span> active<span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">}, {</span> user<span class="token punctuation">:</span> <span class="token string">'fred'</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">40</span><span class="token punctuation">,</span> active<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}];</span>
|
|
<span class="token function">partition</span><span class="token punctuation">(</span>users<span class="token punctuation">,</span> o <span class="token operator">=></span> o<span class="token punctuation">.</span>active<span class="token punctuation">);</span> <span class="token comment">// [[{ 'user': 'fred', 'age': 40, 'active': true }],[{ 'user': 'barney', 'age': 36, 'active': false }]]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="permutations" class="section double-padded">permutations</h3><div class="section double-padded"><p>⚠️ <strong>WARNING</strong>: This function's execution time increases exponentially with each array element. Anything more than 8 to 10 entries will cause your browser to hang as it tries to solve all the different combinations.</p><p>Generates all permutations of an array's elements (contains duplicates).</p><p>Use recursion. For each element in the given array, create all the partial permutations for the rest of its elements. Use <code>Array.map()</code> to combine the element with each partial permutation, then <code>Array.reduce()</code> to combine all permutations in one array. Base cases are for array <code>length</code> equal to <code>2</code> or <code>1</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">permutations</span> <span class="token operator">=</span> arr <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">if</span> <span class="token punctuation">(</span>arr<span class="token punctuation">.</span>length <span class="token operator"><=</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token keyword">return</span> arr<span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">2</span> <span class="token operator">?</span> <span class="token punctuation">[</span>arr<span class="token punctuation">, [</span>arr<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">],</span> arr<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]]] :</span> arr<span class="token punctuation">;</span>
|
|
<span class="token keyword">return</span> arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(
|
|
(</span>acc<span class="token punctuation">,</span> item<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
acc<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>
|
|
<span class="token function">permutations</span><span class="token punctuation">([</span><span class="token operator">...</span>arr<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> i<span class="token punctuation">),</span> <span class="token operator">...</span>arr<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span>i <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)]).</span><span class="token function">map</span><span class="token punctuation">(</span>val <span class="token operator">=></span> <span class="token punctuation">[</span>item<span class="token punctuation">,</span> <span class="token operator">...</span>val<span class="token punctuation">])
|
|
),
|
|
[]
|
|
);
|
|
};</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">permutations</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">33</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]);</span> <span class="token comment">// [ [ 1, 33, 5 ], [ 1, 5, 33 ], [ 33, 1, 5 ], [ 33, 5, 1 ], [ 5, 1, 33 ], [ 5, 33, 1 ] ]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="pull" class="section double-padded">pull</h3><div class="section double-padded"><p>Mutates the original array to filter out the values specified.</p><p>Use <code>Array.filter()</code> and <code>Array.includes()</code> to pull out the values that are not needed. Use <code>Array.length = 0</code> to mutate the passed in an array by resetting it's length to zero and <code>Array.push()</code> to re-populate it with only the pulled values.</p><p><em>(For a snippet that does not mutate the original array see <a href="#without"><code>without</code></a>)</em></p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">pull</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> <span class="token operator">...</span>args<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">let</span> argState <span class="token operator">=</span> Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>args<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">])</span> <span class="token operator">?</span> args<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">] :</span> args<span class="token punctuation">;</span>
|
|
<span class="token keyword">let</span> pulled <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">((</span>v<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">=> !</span>argState<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>v<span class="token punctuation">));</span>
|
|
arr<span class="token punctuation">.</span>length <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
|
pulled<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span>v <span class="token operator">=></span> arr<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>v<span class="token punctuation">));
|
|
};</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">let</span> myArray <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token string">'c'</span><span class="token punctuation">,</span> <span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token string">'c'</span><span class="token punctuation">];</span>
|
|
<span class="token function">pull</span><span class="token punctuation">(</span>myArray<span class="token punctuation">,</span> <span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'c'</span><span class="token punctuation">);</span> <span class="token comment">// myArray = [ 'b', 'b' ]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="pullatindex" class="section double-padded">pullAtIndex</h3><div class="section double-padded"><p>Mutates the original array to filter out the values at the specified indexes.</p><p>Use <code>Array.filter()</code> and <code>Array.includes()</code> to pull out the values that are not needed. Use <code>Array.length = 0</code> to mutate the passed in an array by resetting it's length to zero and <code>Array.push()</code> to re-populate it with only the pulled values. Use <code>Array.push()</code> to keep track of pulled values</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">pullAtIndex</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> pullArr<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">let</span> removed <span class="token operator">=</span> <span class="token punctuation">[];</span>
|
|
<span class="token keyword">let</span> pulled <span class="token operator">=</span> arr
|
|
<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">((</span>v<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>pullArr<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span> <span class="token operator">?</span> removed<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>v<span class="token punctuation">) :</span> v<span class="token punctuation">))
|
|
.</span><span class="token function">filter</span><span class="token punctuation">((</span>v<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">=> !</span>pullArr<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>i<span class="token punctuation">));</span>
|
|
arr<span class="token punctuation">.</span>length <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
|
pulled<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span>v <span class="token operator">=></span> arr<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>v<span class="token punctuation">));</span>
|
|
<span class="token keyword">return</span> removed<span class="token punctuation">;
|
|
};</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">let</span> myArray <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token string">'c'</span><span class="token punctuation">,</span> <span class="token string">'d'</span><span class="token punctuation">];</span>
|
|
<span class="token keyword">let</span> pulled <span class="token operator">=</span> <span class="token function">pullAtIndex</span><span class="token punctuation">(</span>myArray<span class="token punctuation">, [</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]);</span> <span class="token comment">// myArray = [ 'a', 'c' ] , pulled = [ 'b', 'd' ]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="pullatvalue" class="section double-padded">pullAtValue</h3><div class="section double-padded"><p>Mutates the original array to filter out the values specified. Returns the removed elements.</p><p>Use <code>Array.filter()</code> and <code>Array.includes()</code> to pull out the values that are not needed. Use <code>Array.length = 0</code> to mutate the passed in an array by resetting it's length to zero and <code>Array.push()</code> to re-populate it with only the pulled values. Use <code>Array.push()</code> to keep track of pulled values</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">pullAtValue</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> pullArr<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">let</span> removed <span class="token operator">=</span> <span class="token punctuation">[],</span>
|
|
pushToRemove <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">((</span>v<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>pullArr<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>v<span class="token punctuation">)</span> <span class="token operator">?</span> removed<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>v<span class="token punctuation">) :</span> v<span class="token punctuation">)),</span>
|
|
mutateTo <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">((</span>v<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">=> !</span>pullArr<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>v<span class="token punctuation">));</span>
|
|
arr<span class="token punctuation">.</span>length <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
|
mutateTo<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span>v <span class="token operator">=></span> arr<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>v<span class="token punctuation">));</span>
|
|
<span class="token keyword">return</span> removed<span class="token punctuation">;
|
|
};</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">let</span> myArray <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token string">'c'</span><span class="token punctuation">,</span> <span class="token string">'d'</span><span class="token punctuation">];</span>
|
|
<span class="token keyword">let</span> pulled <span class="token operator">=</span> <span class="token function">pullAtValue</span><span class="token punctuation">(</span>myArray<span class="token punctuation">, [</span><span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token string">'d'</span><span class="token punctuation">]);</span> <span class="token comment">// myArray = [ 'a', 'c' ] , pulled = [ 'b', 'd' ]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="pullby" class="section double-padded">pullBy<mark class="tag">advanced</mark></h3><div class="section double-padded"><p>Mutates the original array to filter out the values specified, based on a given iterator function.</p><p>Check if the last argument provided in a function. Use <code>Array.map()</code> to apply the iterator function <code>fn</code> to all array elements. Use <code>Array.filter()</code> and <code>Array.includes()</code> to pull out the values that are not needed. Use <code>Array.length = 0</code> to mutate the passed in an array by resetting it's length to zero and <code>Array.push()</code> to re-populate it with only the pulled values.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">pullBy</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> <span class="token operator">...</span>args<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> length <span class="token operator">=</span> args<span class="token punctuation">.</span>length<span class="token punctuation">;</span>
|
|
<span class="token keyword">let</span> fn <span class="token operator">=</span> length <span class="token operator">></span> <span class="token number">1</span> <span class="token operator">?</span> args<span class="token punctuation">[</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">] :</span> undefined<span class="token punctuation">;</span>
|
|
fn <span class="token operator">=</span> <span class="token keyword">typeof</span> fn <span class="token operator">==</span> <span class="token string">'function'</span> <span class="token operator">?</span> <span class="token punctuation">(</span>args<span class="token punctuation">.</span><span class="token function">pop</span><span class="token punctuation">(),</span> fn<span class="token punctuation">) :</span> undefined<span class="token punctuation">;</span>
|
|
<span class="token keyword">let</span> argState <span class="token operator">=</span> <span class="token punctuation">(</span>Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>args<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">])</span> <span class="token operator">?</span> args<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">] :</span> args<span class="token punctuation">).</span><span class="token function">map</span><span class="token punctuation">(</span>val <span class="token operator">=></span> <span class="token function">fn</span><span class="token punctuation">(</span>val<span class="token punctuation">));</span>
|
|
<span class="token keyword">let</span> pulled <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">((</span>v<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">=> !</span>argState<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token function">fn</span><span class="token punctuation">(</span>v<span class="token punctuation">)));</span>
|
|
arr<span class="token punctuation">.</span>length <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
|
pulled<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span>v <span class="token operator">=></span> arr<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>v<span class="token punctuation">));
|
|
};</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">var</span> myArray <span class="token operator">=</span> <span class="token punctuation">[{</span> x<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}, {</span> x<span class="token punctuation">:</span> <span class="token number">2</span> <span class="token punctuation">}, {</span> x<span class="token punctuation">:</span> <span class="token number">3</span> <span class="token punctuation">}, {</span> x<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}];</span>
|
|
<span class="token function">pullBy</span><span class="token punctuation">(</span>myArray<span class="token punctuation">, [{</span> x<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}, {</span> x<span class="token punctuation">:</span> <span class="token number">3</span> <span class="token punctuation">}],</span> o <span class="token operator">=></span> o<span class="token punctuation">.</span>x<span class="token punctuation">);</span> <span class="token comment">// myArray = [{ x: 2 }]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="reducedfilter" class="section double-padded">reducedFilter</h3><div class="section double-padded"><p>Filter an array of objects based on a condition while also filtering out unspecified keys.</p><p>Use <code>Array.filter()</code> to filter the array based on the predicate <code>fn</code> so that it returns the objects for which the condition returned a truthy value. On the filtered array, use <code>Array.map()</code> to return the new object using <code>Array.reduce()</code> to filter out the keys which were not supplied as the <code>keys</code> argument.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">reducedFilter</span> <span class="token operator">=</span> <span class="token punctuation">(</span>data<span class="token punctuation">,</span> keys<span class="token punctuation">,</span> fn<span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
data<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>fn<span class="token punctuation">).</span><span class="token function">map</span><span class="token punctuation">(</span>el <span class="token operator">=></span>
|
|
keys<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">((</span>acc<span class="token punctuation">,</span> key<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
acc<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> el<span class="token punctuation">[</span>key<span class="token punctuation">];</span>
|
|
<span class="token keyword">return</span> acc<span class="token punctuation">;
|
|
}, {})
|
|
);</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[
|
|
{</span>
|
|
id<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
|
name<span class="token punctuation">:</span> <span class="token string">'john'</span><span class="token punctuation">,</span>
|
|
age<span class="token punctuation">:</span> <span class="token number">24</span>
|
|
<span class="token punctuation">},
|
|
{</span>
|
|
id<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
|
|
name<span class="token punctuation">:</span> <span class="token string">'mike'</span><span class="token punctuation">,</span>
|
|
age<span class="token punctuation">:</span> <span class="token number">50</span>
|
|
<span class="token punctuation">}
|
|
];</span>
|
|
|
|
<span class="token function">reducedFilter</span><span class="token punctuation">(</span>data<span class="token punctuation">, [</span><span class="token string">'id'</span><span class="token punctuation">,</span> <span class="token string">'name'</span><span class="token punctuation">],</span> item <span class="token operator">=></span> item<span class="token punctuation">.</span>age <span class="token operator">></span> <span class="token number">24</span><span class="token punctuation">);</span> <span class="token comment">// [{ id: 2, name: 'mike'}]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="reducesuccessive" class="section double-padded">reduceSuccessive</h3><div class="section double-padded"><p>Applies a function against an accumulator and each element in the array (from left to right), returning an array of successively reduced values.</p><p>Use <code>Array.reduce()</code> to apply the given function to the given array, storing each new result.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">reduceSuccessive</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> fn<span class="token punctuation">,</span> acc<span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">((</span>res<span class="token punctuation">,</span> val<span class="token punctuation">,</span> i<span class="token punctuation">,</span> arr<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>res<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token function">fn</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)[</span><span class="token number">0</span><span class="token punctuation">],</span> val<span class="token punctuation">,</span> i<span class="token punctuation">,</span> arr<span class="token punctuation">)),</span> res<span class="token punctuation">), [</span>acc<span class="token punctuation">]);</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">reduceSuccessive</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">], (</span>acc<span class="token punctuation">,</span> val<span class="token punctuation">)</span> <span class="token operator">=></span> acc <span class="token operator">+</span> val<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">);</span> <span class="token comment">// [0, 1, 3, 6, 10, 15, 21]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="reducewhich" class="section double-padded">reduceWhich</h3><div class="section double-padded"><p>Returns the minimum/maximum value of an array, after applying the provided function to set comparing rule.</p><p>Use <code>Array.reduce()</code> in combination with the <code>comparator</code> function to get the appropriate element in the array. You can omit the second parameter, <code>comparator</code>, to use the default one that returns the minimum element in the array.</p><pre class="language-js"><span class="token keyword">const</span> reduceWhich <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> <span class="token function-variable function">comparator</span> <span class="token operator">=</span> <span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> a <span class="token operator">-</span> b<span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">((</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token function">comparator</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">>=</span> <span class="token number">0</span> <span class="token operator">?</span> b <span class="token punctuation">:</span> a<span class="token punctuation">));</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">reduceWhich</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]);</span> <span class="token comment">// 1</span>
|
|
<span class="token function">reduceWhich</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">], (</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> b <span class="token operator">-</span> a<span class="token punctuation">);</span> <span class="token comment">// 3</span>
|
|
<span class="token function">reduceWhich</span><span class="token punctuation">(
|
|
[{</span> name<span class="token punctuation">:</span> <span class="token string">'Tom'</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">12</span> <span class="token punctuation">}, {</span> name<span class="token punctuation">:</span> <span class="token string">'Jack'</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">18</span> <span class="token punctuation">}, {</span> name<span class="token punctuation">:</span> <span class="token string">'Lucy'</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">9</span> <span class="token punctuation">}],
|
|
(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> a<span class="token punctuation">.</span>age <span class="token operator">-</span> b<span class="token punctuation">.</span>age
|
|
<span class="token punctuation">);</span> <span class="token comment">// {name: "Lucy", age: 9}</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="reject" class="section double-padded">reject</h3><div class="section double-padded"><p>Takes a predicate and array, like <code>Array.filter()</code>, but only keeps <code>x</code> if <code>pred(x) === false</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">reject</span> <span class="token operator">=</span> <span class="token punctuation">(</span>pred<span class="token punctuation">,</span> array<span class="token punctuation">)</span> <span class="token operator">=></span> array<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">((</span><span class="token operator">...</span>args<span class="token punctuation">)</span> <span class="token operator">=> !</span><span class="token function">pred</span><span class="token punctuation">(</span><span class="token operator">...</span>args<span class="token punctuation">));</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">reject</span><span class="token punctuation">(</span>x <span class="token operator">=></span> x <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">, [</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]);</span> <span class="token comment">// [1, 3, 5]</span>
|
|
<span class="token function">reject</span><span class="token punctuation">(</span>word <span class="token operator">=></span> word<span class="token punctuation">.</span>length <span class="token operator">></span> <span class="token number">4</span><span class="token punctuation">, [</span><span class="token string">'Apple'</span><span class="token punctuation">,</span> <span class="token string">'Pear'</span><span class="token punctuation">,</span> <span class="token string">'Kiwi'</span><span class="token punctuation">,</span> <span class="token string">'Banana'</span><span class="token punctuation">]);</span> <span class="token comment">// ['Pear', 'Kiwi']</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="remove" class="section double-padded">remove</h3><div class="section double-padded"><p>Removes elements from an array for which the given function returns <code>false</code>.</p><p>Use <code>Array.filter()</code> to find array elements that return truthy values and <code>Array.reduce()</code> to remove elements using <code>Array.splice()</code>. The <code>func</code> is invoked with three arguments (<code>value, index, array</code>).</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">remove</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> func<span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span>
|
|
<span class="token operator">?</span> arr<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>func<span class="token punctuation">).</span><span class="token function">reduce</span><span class="token punctuation">((</span>acc<span class="token punctuation">,</span> val<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
arr<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>val<span class="token punctuation">),</span> <span class="token number">1</span><span class="token punctuation">);</span>
|
|
<span class="token keyword">return</span> acc<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>val<span class="token punctuation">);
|
|
}, [])
|
|
: [];</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">remove</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">],</span> n <span class="token operator">=></span> n <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">);</span> <span class="token comment">// [2, 4]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="sample" class="section double-padded">sample</h3><div class="section double-padded"><p>Returns a random element from an array.</p><p>Use <code>Math.random()</code> to generate a random number, multiply it by <code>length</code> and round it of to the nearest whole number using <code>Math.floor()</code>. This method also works with strings.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">sample</span> <span class="token operator">=</span> arr <span class="token operator">=></span> arr<span class="token punctuation">[</span>Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">()</span> <span class="token operator">*</span> arr<span class="token punctuation">.</span>length<span class="token punctuation">)];</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">sample</span><span class="token punctuation">([</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token number">11</span><span class="token punctuation">]);</span> <span class="token comment">// 9</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="samplesize" class="section double-padded">sampleSize</h3><div class="section double-padded"><p>Gets <code>n</code> random elements at unique keys from <code>array</code> up to the size of <code>array</code>.</p><p>Shuffle the array using the <a href="https://github.com/chalarangelo/30-seconds-of-code#shuffle">Fisher-Yates algorithm</a>. Use <code>Array.slice()</code> to get the first <code>n</code> elements. Omit the second argument, <code>n</code> to get only one element at random from the array.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">sampleSize</span> <span class="token operator">=</span> <span class="token punctuation">([</span><span class="token operator">...</span>arr<span class="token punctuation">],</span> n <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">let</span> m <span class="token operator">=</span> arr<span class="token punctuation">.</span>length<span class="token punctuation">;</span>
|
|
<span class="token keyword">while</span> <span class="token punctuation">(</span>m<span class="token punctuation">) {</span>
|
|
<span class="token keyword">const</span> i <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">()</span> <span class="token operator">*</span> m<span class="token operator">--</span><span class="token punctuation">);
|
|
[</span>arr<span class="token punctuation">[</span>m<span class="token punctuation">],</span> arr<span class="token punctuation">[</span>i<span class="token punctuation">]]</span> <span class="token operator">=</span> <span class="token punctuation">[</span>arr<span class="token punctuation">[</span>i<span class="token punctuation">],</span> arr<span class="token punctuation">[</span>m<span class="token punctuation">]];
|
|
}</span>
|
|
<span class="token keyword">return</span> arr<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> n<span class="token punctuation">);
|
|
};</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">sampleSize</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">],</span> <span class="token number">2</span><span class="token punctuation">);</span> <span class="token comment">// [3,1]</span>
|
|
<span class="token function">sampleSize</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">],</span> <span class="token number">4</span><span class="token punctuation">);</span> <span class="token comment">// [2,3,1]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="shuffle" class="section double-padded">shuffle</h3><div class="section double-padded"><p>Randomizes the order of the values of an array, returning a new array.</p><p>Uses the <a href="https://github.com/chalarangelo/30-seconds-of-code#shuffle">Fisher-Yates algorithm</a> to reorder the elements of the array.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">shuffle</span> <span class="token operator">=</span> <span class="token punctuation">([</span><span class="token operator">...</span>arr<span class="token punctuation">])</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">let</span> m <span class="token operator">=</span> arr<span class="token punctuation">.</span>length<span class="token punctuation">;</span>
|
|
<span class="token keyword">while</span> <span class="token punctuation">(</span>m<span class="token punctuation">) {</span>
|
|
<span class="token keyword">const</span> i <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">()</span> <span class="token operator">*</span> m<span class="token operator">--</span><span class="token punctuation">);
|
|
[</span>arr<span class="token punctuation">[</span>m<span class="token punctuation">],</span> arr<span class="token punctuation">[</span>i<span class="token punctuation">]]</span> <span class="token operator">=</span> <span class="token punctuation">[</span>arr<span class="token punctuation">[</span>i<span class="token punctuation">],</span> arr<span class="token punctuation">[</span>m<span class="token punctuation">]];
|
|
}</span>
|
|
<span class="token keyword">return</span> arr<span class="token punctuation">;
|
|
};</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">];</span>
|
|
<span class="token function">shuffle</span><span class="token punctuation">(</span>foo<span class="token punctuation">);</span> <span class="token comment">// [2,3,1], foo = [1,2,3]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="similarity" class="section double-padded">similarity</h3><div class="section double-padded"><p>Returns an array of elements that appear in both arrays.</p><p>Use <code>Array.filter()</code> to remove values that are not part of <code>values</code>, determined using <code>Array.includes()</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">similarity</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> values<span class="token punctuation">)</span> <span class="token operator">=></span> arr<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>v <span class="token operator">=></span> values<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>v<span class="token punctuation">));</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">similarity</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">], [</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]);</span> <span class="token comment">// [1,2]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="sortedindex" class="section double-padded">sortedIndex</h3><div class="section double-padded"><p>Returns the lowest index at which value should be inserted into array in order to maintain its sort order.</p><p>Check if the array is sorted in descending order (loosely). Use <code>Array.findIndex()</code> to find the appropriate index where the element should be inserted.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">sortedIndex</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> n<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> isDescending <span class="token operator">=</span> arr<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">></span> arr<span class="token punctuation">[</span>arr<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">];</span>
|
|
<span class="token keyword">const</span> index <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">findIndex</span><span class="token punctuation">(</span>el <span class="token operator">=></span> <span class="token punctuation">(</span>isDescending <span class="token operator">?</span> n <span class="token operator">>=</span> el <span class="token punctuation">:</span> n <span class="token operator"><=</span> el<span class="token punctuation">));</span>
|
|
<span class="token keyword">return</span> index <span class="token operator">=== -</span><span class="token number">1</span> <span class="token operator">?</span> arr<span class="token punctuation">.</span>length <span class="token punctuation">:</span> index<span class="token punctuation">;
|
|
};</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">sortedIndex</span><span class="token punctuation">([</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">],</span> <span class="token number">4</span><span class="token punctuation">);</span> <span class="token comment">// 1</span>
|
|
<span class="token function">sortedIndex</span><span class="token punctuation">([</span><span class="token number">30</span><span class="token punctuation">,</span> <span class="token number">50</span><span class="token punctuation">],</span> <span class="token number">40</span><span class="token punctuation">);</span> <span class="token comment">// 1</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="sortedindexby" class="section double-padded">sortedIndexBy</h3><div class="section double-padded"><p>Returns the lowest index at which value should be inserted into array in order to maintain its sort order, based on a provided iterator function.</p><p>Check if the array is sorted in descending order (loosely). Use <code>Array.findIndex()</code> to find the appropriate index where the element should be inserted, based on the iterator function <code>fn</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">sortedIndexBy</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> n<span class="token punctuation">,</span> fn<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> isDescending <span class="token operator">=</span> <span class="token function">fn</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">])</span> <span class="token operator">></span> <span class="token function">fn</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span>arr<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]);</span>
|
|
<span class="token keyword">const</span> val <span class="token operator">=</span> <span class="token function">fn</span><span class="token punctuation">(</span>n<span class="token punctuation">);</span>
|
|
<span class="token keyword">const</span> index <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">findIndex</span><span class="token punctuation">(</span>el <span class="token operator">=></span> <span class="token punctuation">(</span>isDescending <span class="token operator">?</span> val <span class="token operator">>=</span> <span class="token function">fn</span><span class="token punctuation">(</span>el<span class="token punctuation">) :</span> val <span class="token operator"><=</span> <span class="token function">fn</span><span class="token punctuation">(</span>el<span class="token punctuation">)));</span>
|
|
<span class="token keyword">return</span> index <span class="token operator">=== -</span><span class="token number">1</span> <span class="token operator">?</span> arr<span class="token punctuation">.</span>length <span class="token punctuation">:</span> index<span class="token punctuation">;
|
|
};</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">sortedIndexBy</span><span class="token punctuation">([{</span> x<span class="token punctuation">:</span> <span class="token number">4</span> <span class="token punctuation">}, {</span> x<span class="token punctuation">:</span> <span class="token number">5</span> <span class="token punctuation">}], {</span> x<span class="token punctuation">:</span> <span class="token number">4</span> <span class="token punctuation">},</span> o <span class="token operator">=></span> o<span class="token punctuation">.</span>x<span class="token punctuation">);</span> <span class="token comment">// 0</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="sortedlastindex" class="section double-padded">sortedLastIndex</h3><div class="section double-padded"><p>Returns the highest index at which value should be inserted into array in order to maintain its sort order.</p><p>Check if the array is sorted in descending order (loosely). Use <code>Array.reverse()</code> and <code>Array.findIndex()</code> to find the appropriate last index where the element should be inserted.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">sortedLastIndex</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> n<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> isDescending <span class="token operator">=</span> arr<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">></span> arr<span class="token punctuation">[</span>arr<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">];</span>
|
|
<span class="token keyword">const</span> index <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">().</span><span class="token function">findIndex</span><span class="token punctuation">(</span>el <span class="token operator">=></span> <span class="token punctuation">(</span>isDescending <span class="token operator">?</span> n <span class="token operator"><=</span> el <span class="token punctuation">:</span> n <span class="token operator">>=</span> el<span class="token punctuation">));</span>
|
|
<span class="token keyword">return</span> index <span class="token operator">=== -</span><span class="token number">1</span> <span class="token operator">?</span> <span class="token number">0</span> <span class="token punctuation">:</span> arr<span class="token punctuation">.</span>length <span class="token operator">-</span> index<span class="token punctuation">;
|
|
};</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">sortedLastIndex</span><span class="token punctuation">([</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">,</span> <span class="token number">40</span><span class="token punctuation">],</span> <span class="token number">30</span><span class="token punctuation">);</span> <span class="token comment">// 4</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="sortedlastindexby" class="section double-padded">sortedLastIndexBy</h3><div class="section double-padded"><p>Returns the highest index at which value should be inserted into array in order to maintain its sort order, based on a provided iterator function.</p><p>Check if the array is sorted in descending order (loosely). Use <code>Array.map()</code> to apply the iterator function to all elements of the array. Use <code>Array.reverse()</code> and <code>Array.findIndex()</code> to find the appropriate last index where the element should be inserted, based on the provided iterator function.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">sortedLastIndexBy</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> n<span class="token punctuation">,</span> fn<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> isDescending <span class="token operator">=</span> <span class="token function">fn</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">])</span> <span class="token operator">></span> <span class="token function">fn</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span>arr<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]);</span>
|
|
<span class="token keyword">const</span> val <span class="token operator">=</span> <span class="token function">fn</span><span class="token punctuation">(</span>n<span class="token punctuation">);</span>
|
|
<span class="token keyword">const</span> index <span class="token operator">=</span> arr
|
|
<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>fn<span class="token punctuation">)
|
|
.</span><span class="token function">reverse</span><span class="token punctuation">()
|
|
.</span><span class="token function">findIndex</span><span class="token punctuation">(</span>el <span class="token operator">=></span> <span class="token punctuation">(</span>isDescending <span class="token operator">?</span> val <span class="token operator"><=</span> el <span class="token punctuation">:</span> val <span class="token operator">>=</span> el<span class="token punctuation">));</span>
|
|
<span class="token keyword">return</span> index <span class="token operator">=== -</span><span class="token number">1</span> <span class="token operator">?</span> <span class="token number">0</span> <span class="token punctuation">:</span> arr<span class="token punctuation">.</span>length <span class="token operator">-</span> index<span class="token punctuation">;
|
|
};</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">sortedLastIndexBy</span><span class="token punctuation">([{</span> x<span class="token punctuation">:</span> <span class="token number">4</span> <span class="token punctuation">}, {</span> x<span class="token punctuation">:</span> <span class="token number">5</span> <span class="token punctuation">}], {</span> x<span class="token punctuation">:</span> <span class="token number">4</span> <span class="token punctuation">},</span> o <span class="token operator">=></span> o<span class="token punctuation">.</span>x<span class="token punctuation">);</span> <span class="token comment">// 1</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="stablesort" class="section double-padded">stableSort<mark class="tag">advanced</mark></h3><div class="section double-padded"><p>Performs stable sorting of an array, preserving the initial indexes of items when their values are the same. Does not mutate the original array, but returns a new array instead.</p><p>Use <code>Array.map()</code> to pair each element of the input array with its corresponding index. Use <code>Array.sort()</code> and a <code>compare</code> function to sort the list, preserving their initial order if the items compared are equal. Use <code>Array.map()</code> to convert back to the initial array items.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">stableSort</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> compare<span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
arr
|
|
<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">((</span>item<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">({</span> item<span class="token punctuation">,</span> index <span class="token punctuation">}))
|
|
.</span><span class="token function">sort</span><span class="token punctuation">((</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">compare</span><span class="token punctuation">(</span>a<span class="token punctuation">.</span>item<span class="token punctuation">,</span> b<span class="token punctuation">.</span>item<span class="token punctuation">)</span> <span class="token operator">||</span> a<span class="token punctuation">.</span>index <span class="token operator">-</span> b<span class="token punctuation">.</span>index<span class="token punctuation">)
|
|
.</span><span class="token function">map</span><span class="token punctuation">(({</span> item <span class="token punctuation">})</span> <span class="token operator">=></span> item<span class="token punctuation">);</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">];</span>
|
|
<span class="token keyword">const</span> stable <span class="token operator">=</span> <span class="token function">stableSort</span><span class="token punctuation">(</span>arr<span class="token punctuation">, ()</span> <span class="token operator">=></span> <span class="token number">0</span><span class="token punctuation">);</span> <span class="token comment">// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="symmetricdifference" class="section double-padded">symmetricDifference</h3><div class="section double-padded"><p>Returns the symmetric difference between two arrays.</p><p>Create a <code>Set</code> from each array, then use <code>Array.filter()</code> on each of them to only keep values not contained in the other.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">symmetricDifference</span> <span class="token operator">=</span> <span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> sA <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>a<span class="token punctuation">),</span>
|
|
sB <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>b<span class="token punctuation">);</span>
|
|
<span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token operator">...</span>a<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>x <span class="token operator">=> !</span>sB<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span>x<span class="token punctuation">)),</span> <span class="token operator">...</span>b<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>x <span class="token operator">=> !</span>sA<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span>x<span class="token punctuation">))];
|
|
};</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">symmetricDifference</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">], [</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]);</span> <span class="token comment">// [3,4]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="symmetricdifferenceby" class="section double-padded">symmetricDifferenceBy</h3><div class="section double-padded"><p>Returns the symmetric difference between two arrays, after applying the provided function to each array element of both.</p><p>Create a <code>Set</code> by applying <code>fn</code> to each array's elements, then use <code>Array.filter()</code> on each of them to only keep values not contained in the other.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">symmetricDifferenceBy</span> <span class="token operator">=</span> <span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">,</span> fn<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> sA <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>a<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>v <span class="token operator">=></span> <span class="token function">fn</span><span class="token punctuation">(</span>v<span class="token punctuation">))),</span>
|
|
sB <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>b<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>v <span class="token operator">=></span> <span class="token function">fn</span><span class="token punctuation">(</span>v<span class="token punctuation">)));</span>
|
|
<span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token operator">...</span>a<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>x <span class="token operator">=> !</span>sB<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span><span class="token function">fn</span><span class="token punctuation">(</span>x<span class="token punctuation">))),</span> <span class="token operator">...</span>b<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>x <span class="token operator">=> !</span>sA<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span><span class="token function">fn</span><span class="token punctuation">(</span>x<span class="token punctuation">)))];
|
|
};</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">symmetricDifferenceBy</span><span class="token punctuation">([</span><span class="token number">2.1</span><span class="token punctuation">,</span> <span class="token number">1.2</span><span class="token punctuation">], [</span><span class="token number">2.3</span><span class="token punctuation">,</span> <span class="token number">3.4</span><span class="token punctuation">],</span> Math<span class="token punctuation">.</span>floor<span class="token punctuation">);</span> <span class="token comment">// [ 1.2, 3.4 ]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="symmetricdifferencewith" class="section double-padded">symmetricDifferenceWith</h3><div class="section double-padded"><p>Returns the symmetric difference between two arrays, using a provided function as a comparator.</p><p>Use <code>Array.filter()</code> and <code>Array.findIndex()</code> to find the appropriate values.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">symmetricDifferenceWith</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> val<span class="token punctuation">,</span> comp<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span>
|
|
<span class="token operator">...</span>arr<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>a <span class="token operator">=></span> val<span class="token punctuation">.</span><span class="token function">findIndex</span><span class="token punctuation">(</span>b <span class="token operator">=></span> <span class="token function">comp</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">))</span> <span class="token operator">=== -</span><span class="token number">1</span><span class="token punctuation">),</span>
|
|
<span class="token operator">...</span>val<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>a <span class="token operator">=></span> arr<span class="token punctuation">.</span><span class="token function">findIndex</span><span class="token punctuation">(</span>b <span class="token operator">=></span> <span class="token function">comp</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">))</span> <span class="token operator">=== -</span><span class="token number">1</span><span class="token punctuation">)
|
|
];</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">symmetricDifferenceWith</span><span class="token punctuation">(
|
|
[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1.2</span><span class="token punctuation">,</span> <span class="token number">1.5</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">],
|
|
[</span><span class="token number">1.9</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">3.9</span><span class="token punctuation">],
|
|
(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span> <span class="token operator">===</span> Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span>b<span class="token punctuation">)
|
|
);</span> <span class="token comment">// [1, 1.2, 3.9]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="tail" class="section double-padded">tail</h3><div class="section double-padded"><p>Returns all elements in an array except for the first one.</p><p>Return <code>Array.slice(1)</code> if the array's <code>length</code> is more than <code>1</code>, otherwise, return the whole array.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">tail</span> <span class="token operator">=</span> arr <span class="token operator">=></span> <span class="token punctuation">(</span>arr<span class="token punctuation">.</span>length <span class="token operator">></span> <span class="token number">1</span> <span class="token operator">?</span> arr<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">) :</span> arr<span class="token punctuation">);</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">tail</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]);</span> <span class="token comment">// [2,3]</span>
|
|
<span class="token function">tail</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">]);</span> <span class="token comment">// [1]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="take" class="section double-padded">take</h3><div class="section double-padded"><p>Returns an array with n elements removed from the beginning.</p><p>Use <code>Array.slice()</code> to create a slice of the array with <code>n</code> elements taken from the beginning.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">take</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> n <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">=></span> arr<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> n<span class="token punctuation">);</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">take</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">],</span> <span class="token number">5</span><span class="token punctuation">);</span> <span class="token comment">// [1, 2, 3]</span>
|
|
<span class="token function">take</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">],</span> <span class="token number">0</span><span class="token punctuation">);</span> <span class="token comment">// []</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="takeright" class="section double-padded">takeRight</h3><div class="section double-padded"><p>Returns an array with n elements removed from the end.</p><p>Use <code>Array.slice()</code> to create a slice of the array with <code>n</code> elements taken from the end.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">takeRight</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> n <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">=></span> arr<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span>length <span class="token operator">-</span> n<span class="token punctuation">,</span> arr<span class="token punctuation">.</span>length<span class="token punctuation">);</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">takeRight</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">],</span> <span class="token number">2</span><span class="token punctuation">);</span> <span class="token comment">// [ 2, 3 ]</span>
|
|
<span class="token function">takeRight</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]);</span> <span class="token comment">// [3]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="takerightwhile" class="section double-padded">takeRightWhile</h3><div class="section double-padded"><p>Removes elements from the end of an array until the passed function returns <code>true</code>. Returns the removed elements.</p><p>Loop through the array, using a <code>for...of</code> loop over <code>Array.keys()</code> until the returned value from the function is <code>true</code>. Return the removed elements, using <code>Array.reverse()</code> and <code>Array.slice()</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">takeRightWhile</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> func<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token keyword">of</span> arr<span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">().</span><span class="token function">keys</span><span class="token punctuation">())</span>
|
|
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">func</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span>i<span class="token punctuation">]))</span> <span class="token keyword">return</span> arr<span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">().</span><span class="token function">slice</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span>length <span class="token operator">-</span> i<span class="token punctuation">,</span> arr<span class="token punctuation">.</span>length<span class="token punctuation">);</span>
|
|
<span class="token keyword">return</span> arr<span class="token punctuation">;
|
|
};</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">takeRightWhile</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">],</span> n <span class="token operator">=></span> n <span class="token operator"><</span> <span class="token number">3</span><span class="token punctuation">);</span> <span class="token comment">// [3, 4]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="takewhile" class="section double-padded">takeWhile</h3><div class="section double-padded"><p>Removes elements in an array until the passed function returns <code>true</code>. Returns the removed elements.</p><p>Loop through the array, using a <code>for...of</code> loop over <code>Array.entries()</code> until the returned value from the function is <code>true</code>. Return the removed elements, using <code>Array.slice()</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">takeWhile</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> func<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> <span class="token punctuation">[</span>i<span class="token punctuation">,</span> val<span class="token punctuation">]</span> <span class="token keyword">of</span> arr<span class="token punctuation">.</span><span class="token function">entries</span><span class="token punctuation">())</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">func</span><span class="token punctuation">(</span>val<span class="token punctuation">))</span> <span class="token keyword">return</span> arr<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> i<span class="token punctuation">);</span>
|
|
<span class="token keyword">return</span> arr<span class="token punctuation">;
|
|
};</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">takeWhile</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">],</span> n <span class="token operator">=></span> n <span class="token operator">>=</span> <span class="token number">3</span><span class="token punctuation">);</span> <span class="token comment">// [1, 2]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="tohash" class="section double-padded">toHash</h3><div class="section double-padded"><p>Reduces a given Array-like into a value hash (keyed data store).</p><p>Given an Iterable or Array-like structure, call <code>Array.prototype.reduce.call()</code> on the provided object to step over it and return an Object, keyed by the reference value.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">toHash</span> <span class="token operator">=</span> <span class="token punctuation">(</span>object<span class="token punctuation">,</span> key<span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
Array<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>reduce<span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>
|
|
object<span class="token punctuation">,
|
|
(</span>acc<span class="token punctuation">,</span> data<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">((</span>acc<span class="token punctuation">[</span><span class="token operator">!</span>key <span class="token operator">?</span> index <span class="token punctuation">:</span> data<span class="token punctuation">[</span>key<span class="token punctuation">]]</span> <span class="token operator">=</span> data<span class="token punctuation">),</span> acc<span class="token punctuation">),
|
|
{}
|
|
);</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">toHash</span><span class="token punctuation">([</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]);</span> <span class="token comment">// { 0: 4, 1: 3, 2: 2, 1: 1 }</span>
|
|
<span class="token function">toHash</span><span class="token punctuation">([{</span> a<span class="token punctuation">:</span> <span class="token string">'label'</span> <span class="token punctuation">}],</span> <span class="token string">'a'</span><span class="token punctuation">);</span> <span class="token comment">// { label: { a: 'label' } }</span>
|
|
<span class="token comment">// A more in depth example:</span>
|
|
<span class="token keyword">let</span> users <span class="token operator">=</span> <span class="token punctuation">[{</span> id<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> first<span class="token punctuation">:</span> <span class="token string">'Jon'</span> <span class="token punctuation">}, {</span> id<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> first<span class="token punctuation">:</span> <span class="token string">'Joe'</span> <span class="token punctuation">}, {</span> id<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span> first<span class="token punctuation">:</span> <span class="token string">'Moe'</span> <span class="token punctuation">}];</span>
|
|
<span class="token keyword">let</span> managers <span class="token operator">=</span> <span class="token punctuation">[{</span> manager<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> employees<span class="token punctuation">: [</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">] }];</span>
|
|
<span class="token comment">// We use function here because we want a bindable reference, but a closure referencing the hash would work, too.</span>
|
|
managers<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span>
|
|
manager <span class="token operator">=></span>
|
|
<span class="token punctuation">(</span>manager<span class="token punctuation">.</span>employees <span class="token operator">=</span> manager<span class="token punctuation">.</span>employees<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>id<span class="token punctuation">) {</span>
|
|
<span class="token keyword">return this</span><span class="token punctuation">[</span>id<span class="token punctuation">];
|
|
},</span> <span class="token function">toHash</span><span class="token punctuation">(</span>users<span class="token punctuation">,</span> <span class="token string">'id'</span><span class="token punctuation">)))
|
|
);</span>
|
|
managers<span class="token punctuation">;</span> <span class="token comment">// [ { manager:1, employees: [ { id: 2, first: "Joe" }, { id: 3, first: "Moe" } ] } ]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="union" class="section double-padded">union</h3><div class="section double-padded"><p>Returns every element that exists in any of the two arrays once.</p><p>Create a <code>Set</code> with all values of <code>a</code> and <code>b</code> and convert to an array.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">union</span> <span class="token operator">=</span> <span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> Array<span class="token punctuation">.</span><span class="token keyword">from</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">([</span><span class="token operator">...</span>a<span class="token punctuation">,</span> <span class="token operator">...</span>b<span class="token punctuation">]));</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">union</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">], [</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]);</span> <span class="token comment">// [1,2,3,4]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="unionby" class="section double-padded">unionBy</h3><div class="section double-padded"><p>Returns every element that exists in any of the two arrays once, after applying the provided function to each array element of both.</p><p>Create a <code>Set</code> by applying all <code>fn</code> to all values of <code>a</code>. Create a <code>Set</code> from <code>a</code> and all elements in <code>b</code> whose value, after applying <code>fn</code> does not match a value in the previously created set. Return the last set converted to an array.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">unionBy</span> <span class="token operator">=</span> <span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">,</span> fn<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> s <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>a<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>v <span class="token operator">=></span> <span class="token function">fn</span><span class="token punctuation">(</span>v<span class="token punctuation">)));</span>
|
|
<span class="token keyword">return</span> Array<span class="token punctuation">.</span><span class="token keyword">from</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">([</span><span class="token operator">...</span>a<span class="token punctuation">,</span> <span class="token operator">...</span>b<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>x <span class="token operator">=> !</span>s<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span><span class="token function">fn</span><span class="token punctuation">(</span>x<span class="token punctuation">)))]));
|
|
};</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">unionBy</span><span class="token punctuation">([</span><span class="token number">2.1</span><span class="token punctuation">], [</span><span class="token number">1.2</span><span class="token punctuation">,</span> <span class="token number">2.3</span><span class="token punctuation">],</span> Math<span class="token punctuation">.</span>floor<span class="token punctuation">);</span> <span class="token comment">// [2.1, 1.2]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="unionwith" class="section double-padded">unionWith</h3><div class="section double-padded"><p>Returns every element that exists in any of the two arrays once, using a provided comparator function.</p><p>Create a <code>Set</code> with all values of <code>a</code> and values in <code>b</code> for which the comparator finds no matches in <code>a</code>, using <code>Array.findIndex()</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">unionWith</span> <span class="token operator">=</span> <span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">,</span> comp<span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
Array<span class="token punctuation">.</span><span class="token keyword">from</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">([</span><span class="token operator">...</span>a<span class="token punctuation">,</span> <span class="token operator">...</span>b<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>x <span class="token operator">=></span> a<span class="token punctuation">.</span><span class="token function">findIndex</span><span class="token punctuation">(</span>y <span class="token operator">=></span> <span class="token function">comp</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">))</span> <span class="token operator">=== -</span><span class="token number">1</span><span class="token punctuation">)]));</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">unionWith</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1.2</span><span class="token punctuation">,</span> <span class="token number">1.5</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">], [</span><span class="token number">1.9</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">3.9</span><span class="token punctuation">], (</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span> <span class="token operator">===</span> Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span>b<span class="token punctuation">));</span> <span class="token comment">// [1, 1.2, 1.5, 3, 0, 3.9]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="uniqueelements" class="section double-padded">uniqueElements</h3><div class="section double-padded"><p>Returns all unique values of an array.</p><p>Use ES6 <code>Set</code> and the <code>...rest</code> operator to discard all duplicated values.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">uniqueElements</span> <span class="token operator">=</span> arr <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>arr<span class="token punctuation">)];</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">uniqueElements</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]);</span> <span class="token comment">// [1,2,3,4,5]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="unzip" class="section double-padded">unzip</h3><div class="section double-padded"><p>Creates an array of arrays, ungrouping the elements in an array produced by <a href="#zip">zip</a>.</p><p>Use <code>Math.max.apply()</code> to get the longest subarray in the array, <code>Array.map()</code> to make each element an array. Use <code>Array.reduce()</code> and <code>Array.forEach()</code> to map grouped values to individual arrays.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">unzip</span> <span class="token operator">=</span> arr <span class="token operator">=></span>
|
|
arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(
|
|
(</span>acc<span class="token punctuation">,</span> val<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>val<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">((</span>v<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">=></span> acc<span class="token punctuation">[</span>i<span class="token punctuation">].</span><span class="token function">push</span><span class="token punctuation">(</span>v<span class="token punctuation">)),</span> acc<span class="token punctuation">),</span>
|
|
Array<span class="token punctuation">.</span><span class="token keyword">from</span><span class="token punctuation">({</span>
|
|
length<span class="token punctuation">:</span> Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span><span class="token operator">...</span>arr<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>x <span class="token operator">=></span> x<span class="token punctuation">.</span>length<span class="token punctuation">))
|
|
}).</span><span class="token function">map</span><span class="token punctuation">(</span>x <span class="token operator">=></span> <span class="token punctuation">[])
|
|
);</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">unzip</span><span class="token punctuation">([[</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">], [</span><span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">]]);</span> <span class="token comment">//[['a', 'b'], [1, 2], [true, false]]</span>
|
|
<span class="token function">unzip</span><span class="token punctuation">([[</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">], [</span><span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]]);</span> <span class="token comment">//[['a', 'b'], [1, 2], [true]]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="unzipwith" class="section double-padded">unzipWith<mark class="tag">advanced</mark></h3><div class="section double-padded"><p>Creates an array of elements, ungrouping the elements in an array produced by <a href="#zip">zip</a> and applying the provided function.</p><p>Use <code>Math.max.apply()</code> to get the longest subarray in the array, <code>Array.map()</code> to make each element an array. Use <code>Array.reduce()</code> and <code>Array.forEach()</code> to map grouped values to individual arrays. Use <code>Array.map()</code> and the spread operator (<code>...</code>) to apply <code>fn</code> to each individual group of elements.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">unzipWith</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> fn<span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
arr
|
|
<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(
|
|
(</span>acc<span class="token punctuation">,</span> val<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>val<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">((</span>v<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">=></span> acc<span class="token punctuation">[</span>i<span class="token punctuation">].</span><span class="token function">push</span><span class="token punctuation">(</span>v<span class="token punctuation">)),</span> acc<span class="token punctuation">),</span>
|
|
Array<span class="token punctuation">.</span><span class="token keyword">from</span><span class="token punctuation">({</span>
|
|
length<span class="token punctuation">:</span> Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span><span class="token operator">...</span>arr<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>x <span class="token operator">=></span> x<span class="token punctuation">.</span>length<span class="token punctuation">))
|
|
}).</span><span class="token function">map</span><span class="token punctuation">(</span>x <span class="token operator">=></span> <span class="token punctuation">[])
|
|
)
|
|
.</span><span class="token function">map</span><span class="token punctuation">(</span>val <span class="token operator">=></span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token operator">...</span>val<span class="token punctuation">));</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">unzipWith</span><span class="token punctuation">([[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">], [</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">]], (</span><span class="token operator">...</span>args<span class="token punctuation">)</span> <span class="token operator">=></span> args<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">((</span>acc<span class="token punctuation">,</span> v<span class="token punctuation">)</span> <span class="token operator">=></span> acc <span class="token operator">+</span> v<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">));</span> <span class="token comment">// [3, 30, 300]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="without" class="section double-padded">without</h3><div class="section double-padded"><p>Filters out the elements of an array, that have one of the specified values.</p><p>Use <code>Array.filter()</code> to create an array excluding(using <code>!Array.includes()</code>) all given values.</p><p><em>(For a snippet that mutates the original array see <a href="#pull"><code>pull</code></a>)</em></p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">without</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> <span class="token operator">...</span>args<span class="token punctuation">)</span> <span class="token operator">=></span> arr<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>v <span class="token operator">=> !</span>args<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>v<span class="token punctuation">));</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">without</span><span class="token punctuation">([</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">],</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">);</span> <span class="token comment">// [3]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="xprod" class="section double-padded">xProd</h3><div class="section double-padded"><p>Creates a new array out of the two supplied by creating each possible pair from the arrays.</p><p>Use <code>Array.reduce()</code>, <code>Array.map()</code> and <code>Array.concat()</code> to produce every possible pair from the elements of the two arrays and save them in an array.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">xProd</span> <span class="token operator">=</span> <span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> a<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">((</span>acc<span class="token punctuation">,</span> x<span class="token punctuation">)</span> <span class="token operator">=></span> acc<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>b<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>y <span class="token operator">=></span> <span class="token punctuation">[</span>x<span class="token punctuation">,</span> y<span class="token punctuation">])), []);</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">xProd</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">], [</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">]);</span> <span class="token comment">// [[1, 'a'], [1, 'b'], [2, 'a'], [2, 'b']]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="zip" class="section double-padded">zip</h3><div class="section double-padded"><p>Creates an array of elements, grouped based on the position in the original arrays.</p><p>Use <code>Math.max.apply()</code> to get the longest array in the arguments. Creates an array with that length as return value and use <code>Array.from()</code> with a map-function to create an array of grouped elements. If lengths of the argument-arrays vary, <code>undefined</code> is used where no value could be found.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">zip</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token operator">...</span>arrays<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> maxLength <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span><span class="token operator">...</span>arrays<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>x <span class="token operator">=></span> x<span class="token punctuation">.</span>length<span class="token punctuation">));</span>
|
|
<span class="token keyword">return</span> Array<span class="token punctuation">.</span><span class="token keyword">from</span><span class="token punctuation">({</span> length<span class="token punctuation">:</span> maxLength <span class="token punctuation">}).</span><span class="token function">map</span><span class="token punctuation">((</span>_<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> Array<span class="token punctuation">.</span><span class="token keyword">from</span><span class="token punctuation">({</span> length<span class="token punctuation">:</span> arrays<span class="token punctuation">.</span>length <span class="token punctuation">}, (</span>_<span class="token punctuation">,</span> k<span class="token punctuation">)</span> <span class="token operator">=></span> arrays<span class="token punctuation">[</span>k<span class="token punctuation">][</span>i<span class="token punctuation">]);
|
|
});
|
|
};</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">zip</span><span class="token punctuation">([</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">], [</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">], [</span><span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">]);</span> <span class="token comment">// [['a', 1, true], ['b', 2, false]]</span>
|
|
<span class="token function">zip</span><span class="token punctuation">([</span><span class="token string">'a'</span><span class="token punctuation">], [</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">], [</span><span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">]);</span> <span class="token comment">// [['a', 1, true], [undefined, 2, false]]</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="zipobject" class="section double-padded">zipObject</h3><div class="section double-padded"><p>Given an array of valid property identifiers and an array of values, return an object associating the properties to the values.</p><p>Since an object can have undefined values but not undefined property pointers, the array of properties is used to decide the structure of the resulting object using <code>Array.reduce()</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">zipObject</span> <span class="token operator">=</span> <span class="token punctuation">(</span>props<span class="token punctuation">,</span> values<span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
props<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">((</span>obj<span class="token punctuation">,</span> prop<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">((</span>obj<span class="token punctuation">[</span>prop<span class="token punctuation">]</span> <span class="token operator">=</span> values<span class="token punctuation">[</span>index<span class="token punctuation">]),</span> obj<span class="token punctuation">), {});</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">zipObject</span><span class="token punctuation">([</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token string">'c'</span><span class="token punctuation">], [</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]);</span> <span class="token comment">// {a: 1, b: 2, c: undefined}</span>
|
|
<span class="token function">zipObject</span><span class="token punctuation">([</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">], [</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]);</span> <span class="token comment">// {a: 1, b: 2}</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="zipwith" class="section double-padded">zipWith<mark class="tag">advanced</mark></h3><div class="section double-padded"><p>Creates an array of elements, grouped based on the position in the original arrays and using function as the last value to specify how grouped values should be combined.</p><p>Check if the last argument provided is a function. Use <code>Math.max()</code> to get the longest array in the arguments. Creates an array with that length as return value and use <code>Array.from()</code> with a map-function to create an array of grouped elements. If lengths of the argument-arrays vary, <code>undefined</code> is used where no value could be found. The function is invoked with the elements of each group <code>(...group)</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">zipWith</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token operator">...</span>array<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> fn <span class="token operator">=</span> <span class="token keyword">typeof</span> array<span class="token punctuation">[</span>array<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">===</span> <span class="token string">'function'</span> <span class="token operator">?</span> array<span class="token punctuation">.</span><span class="token function">pop</span><span class="token punctuation">() :</span> undefined<span class="token punctuation">;</span>
|
|
<span class="token keyword">return</span> Array<span class="token punctuation">.</span><span class="token keyword">from</span><span class="token punctuation">(
|
|
{</span> length<span class="token punctuation">:</span> Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span><span class="token operator">...</span>array<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>a <span class="token operator">=></span> a<span class="token punctuation">.</span>length<span class="token punctuation">)) },
|
|
(</span>_<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>fn <span class="token operator">?</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token operator">...</span>array<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>a <span class="token operator">=></span> a<span class="token punctuation">[</span>i<span class="token punctuation">])) :</span> array<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>a <span class="token operator">=></span> a<span class="token punctuation">[</span>i<span class="token punctuation">]))
|
|
);
|
|
};</span>
|
|
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">zipWith</span><span class="token punctuation">([</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">], [</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">], [</span><span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">], (</span>a<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">)</span> <span class="token operator">=></span> a <span class="token operator">+</span> b <span class="token operator">+</span> c<span class="token punctuation">);</span> <span class="token comment">// [111,222]</span>
|
|
<span class="token function">zipWith</span><span class="token punctuation">(
|
|
[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">],
|
|
[</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">],
|
|
[</span><span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">],
|
|
(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>a <span class="token operator">!=</span> <span class="token keyword">null</span> <span class="token operator">?</span> a <span class="token punctuation">:</span> <span class="token string">'a'</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token punctuation">(</span>b <span class="token operator">!=</span> <span class="token keyword">null</span> <span class="token operator">?</span> b <span class="token punctuation">:</span> <span class="token string">'b'</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token punctuation">(</span>c <span class="token operator">!=</span> <span class="token keyword">null</span> <span class="token operator">?</span> c <span class="token punctuation">:</span> <span class="token string">'c'</span><span class="token punctuation">)
|
|
);</span> <span class="token comment">// [111, 222, '3bc']</span>
|
|
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><button class="scroll-to-top">↑</button><footer><p style="display:inline-block"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a> license.<br>Sponsored by <img src="./sponsors/DO_Logo_icon_blue.svg" style="vertical-align:sub;padding-right:2px;padding-left:2px" width="20px" height="20px"><a href="https://www.digitalocean.com"><span style="color:#0080ff">DigitalOcean</span></a>.<br>Icons made by <a href="https://www.flaticon.com/authors/smashicons">Smashicons</a> from <a href="https://www.flaticon.com/">www.flaticon.com</a> are licensed under the <a href="http://creativecommons.org/licenses/by/3.0/">CC 3.0 BY</a> license.<br>Ribbon made by <a href="https://github.com/tholman/github-corners">Tim Holman</a> is licensed under the <a href="https://opensource.org/licenses/MIT">MIT</a> license.<br>Built with the <a href="https://minicss.org">mini.css framework</a>.</p></footer></main></div></body></html> |