diff --git a/README.md b/README.md index c935c7ce7..dfbf147c2 100644 --- a/README.md +++ b/README.md @@ -142,6 +142,7 @@ average(1, 2, 3); * [`without`](#without) * [`zip`](#zip) * [`zipObject`](#zipobject) +* [`zipWith`](#zipwith-) @@ -1872,6 +1873,47 @@ zipObject(['a', 'b'], [1, 2, 3]); // {a: 1, b: 2}
[⬆ Back to top](#table-of-contents) + +### zipWith ![advanced](/advanced.svg) + +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. + +Check if the last argument provided in a function. +Use `Math.max()` to get the longest array in the arguments. +Creates an array with that length as return value and use `Array.from()` with a map-function to create an array of grouped elements. +If lengths of the argument-arrays vary, `undefined` is used where no value could be found. +The function is invoked with the elements of each group `(...group)`. + +```js +const zipWith = (...arrays) => { + const length = arrays.length; + let fn = length > 1 ? arrays[length - 1] : undefined; + fn = typeof fn == 'function' ? (arrays.pop(), fn) : undefined; + const maxLength = Math.max(...arrays.map(x => x.length)); + const result = Array.from({ length: maxLength }).map((_, i) => { + return Array.from({ length: arrays.length }, (_, k) => arrays[k][i]); + }); + return fn ? result.map(arr => fn(...arr)) : result; +}; +``` + +
+Examples + +```js +zipWith([1, 2], [10, 20], [100, 200], (a, b, c) => a + b + c); // [111,222] +zipWith( + [1, 2, 3], + [10, 20], + [100, 200], + (a, b, c) => (a != null ? a : 'a') + (b != null ? b : 'b') + (c != null ? c : 'c') +); // [111, 222, '3bc'] +``` + +
+ +
[⬆ Back to top](#table-of-contents) + --- ## 🌐 Browser diff --git a/docs/index.html b/docs/index.html index f2f8b162a..ff75776a2 100644 --- a/docs/index.html +++ b/docs/index.html @@ -50,7 +50,7 @@ scrollToTop(); } }, false); - }

logo 30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.

 

Adapter

call

Given a key and a set of arguments, call them when given a context. Primarily useful in composition.

Use a closure to call a stored key with stored arguments.

const call = (key, ...args) => context => context[key](...args);
+      }
logo 30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.
 
Adapter
call
Given a key and a set of arguments, call them when given a context. Primarily useful in composition.
Use a closure to call a stored key with stored arguments.
const call = (key, ...args) => context => context[key](...args);
 
Promise.resolve([1, 2, 3])
   .then(call('map', x => 2 * x))
   .then(console.log); //[ 2, 4, 6 ]
@@ -353,6 +353,23 @@ Object.assig
   props.reduce((obj, prop, index) => ((obj[prop] = values[index]), obj), {});
 
zipObject(['a', 'b', 'c'], [1, 2]); // {a: 1, b: 2, c: undefined}
 zipObject(['a', 'b'], [1, 2, 3]); // {a: 1, b: 2}
+
zipWithadvanced
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.
Check if the last argument provided in a function. Use Math.max() to get the longest array in the arguments. Creates an array with that length as return value and use Array.from() with a map-function to create an array of grouped elements. If lengths of the argument-arrays vary, undefined is used where no value could be found. The function is invoked with the elements of each group (...group).
const zipWith = (...arrays) => {
+  const length = arrays.length;
+  let fn = length > 1 ? arrays[length - 1] : undefined;
+  fn = typeof fn == 'function' ? (arrays.pop(), fn) : undefined;
+  const maxLength = Math.max(...arrays.map(x => x.length));
+  const result = Array.from({ length: maxLength }).map((_, i) => {
+    return Array.from({ length: arrays.length }, (_, k) => arrays[k][i]);
+  });
+  return fn ? result.map(arr => fn(...arr)) : result;
+};
+
zipWith([1, 2], [10, 20], [100, 200], (a, b, c) => a + b + c); // [111,222]
+zipWith(
+  [1, 2, 3],
+  [10, 20],
+  [100, 200],
+  (a, b, c) => (a != null ? a : 'a') + (b != null ? b : 'b') + (c != null ? c : 'c')
+); // [111, 222, '3bc']
 
Browser
arrayToHtmlList
Converts the given array elements into <li> tags and appends them to the list of the given id.
Use Array.map() and document.querySelector() to create a list of html tags.
const arrayToHtmlList = (arr, listID) =>
   arr.map(item => (document.querySelector('#' + listID).innerHTML += `<li>${item}</li>`));
 
arrayToHtmlList(['item 1', 'item 2'], 'myListID');
diff --git a/snippets/zipWith.md b/snippets/zipWith.md
index e50b9a928..55b6dd446 100644
--- a/snippets/zipWith.md
+++ b/snippets/zipWith.md
@@ -8,20 +8,25 @@ Creates an array with that length as return value and use `Array.from()` with a
 If lengths of the argument-arrays vary, `undefined` is used where no value could be found.
 The function is invoked with the elements of each group `(...group)`.
 
-``` js
+```js
 const zipWith = (...arrays) => {
   const length = arrays.length;
   let fn = length > 1 ? arrays[length - 1] : undefined;
   fn = typeof fn == 'function' ? (arrays.pop(), fn) : undefined;
   const maxLength = Math.max(...arrays.map(x => x.length));
-  const result =  Array.from({ length: maxLength }).map((_, i) => {
+  const result = Array.from({ length: maxLength }).map((_, i) => {
     return Array.from({ length: arrays.length }, (_, k) => arrays[k][i]);
-  })
+  });
   return fn ? result.map(arr => fn(...arr)) : result;
-}
+};
 ```
 
-``` js
-zipWith([1, 2], [10, 20], [100, 200], (a,b,c) => a + b + c); // [111,222]
-zipWith([1, 2, 3], [10, 20], [100, 200], (a,b,c) => (a != null ? a : 'a') + (b != null ? b:'b') + (c != null ? c : 'c')); // [111, 222, '3bc']
+```js
+zipWith([1, 2], [10, 20], [100, 200], (a, b, c) => a + b + c); // [111,222]
+zipWith(
+  [1, 2, 3],
+  [10, 20],
+  [100, 200],
+  (a, b, c) => (a != null ? a : 'a') + (b != null ? b : 'b') + (c != null ? c : 'c')
+); // [111, 222, '3bc']
 ```