30 seconds of code
- Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.
+ Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.
-
+
Array.reduce() to create an object, where the keys are produced
Initializes an array containing the numbers in the specified range where start and end are inclusive.
Use Array((end + 1) - start) to create an array of the desired length, Array.map() to fill with the desired values in a range.
You can omit start to use a default value of 0.
const initializeArrayWithRange = (end, start = 0) =>
+const initializeArrayWithRange = (end, start = 0) =>
Array.from({ length: (end + 1) - start }).map((v, i) => i + start);
// initializeArrayWithRange(5) -> [0,1,2,3,4,5]
// initializeArrayWithRange(7, 3) -> [3,4,5,6,7]
@@ -357,7 +359,7 @@ You can omit value to use a default value of 0.
mapObject
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.
Use an anonymous inner function scope to declare an undefined memory space, using closures to store a return value. Use a new Array to stor 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).
-const mapObject = (arr, fn) =>
+const mapObject = (arr, fn) =>
(a => (a = [arr, arr.map(fn)], a[0].reduce( (acc,val,ind) => (acc[val] = a[1][ind], acc), {}) )) ( );
/*
const squareIt = arr => mapObject(arr, a => a*a)
@@ -407,7 +409,7 @@ Use Array.push() to keep track of pulled values
let removed = [];
let pulled = arr.map((v, i) => pullArr.includes(i) ? removed.push(v) : v)
.filter((v, i) => !pullArr.includes(i))
- arr.length = 0;
+ arr.length = 0;
pulled.forEach(v => arr.push(v));
return removed;
}
@@ -424,7 +426,7 @@ Use Array.push() to keep track of pulled values
Use Array.length = 0 to mutate the passed in array by resetting it's length to zero and Array.push() to re-populate it with only the pulled values.
Use Array.push() to keep track of pulled values
const pullAtValue = (arr, pullArr) => {
- let removed = [],
+ let removed = [],
pushToRemove = arr.forEach((v, i) => pullArr.includes(v) ? removed.push(v) : v),
mutateTo = arr.filter((v, i) => !pullArr.includes(v));
arr.length = 0;
@@ -527,7 +529,7 @@ If lengths of the argument-arrays vary, undefined is used where no
Browser
arrayToHtmlList
-Converts the given array elements into '<li>' tags and appends them to the list of the given id.
+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')
@@ -786,7 +788,7 @@ Count and return the number of 1s in the string, using match(
isArmstrongNumber
Checks if the given number is an armstrong number or not.
Convert the given number into array of digits. Use Math.pow() to get the appropriate power for each digit and sum them up. If the sum is equal to the number itself, return true otherwise false.
-const isArmstrongNumber = digits =>
+const isArmstrongNumber = digits =>
( arr => arr.reduce( ( a, d ) => a + Math.pow( parseInt( d ), arr.length ), 0 ) == digits ? true : false )( ( digits+'' ).split( '' ) );
// isArmstrongNumber(1634) -> true
// isArmstrongNumber(371) -> true
@@ -965,6 +967,27 @@ Also if you give it a special key (childIndicator) it will search d
const objectToPairs = obj => Object.keys(obj).map(k => [k, obj[k]]);
// objectToPairs({a: 1, b: 2}) -> [['a',1],['b',2]])
+
orderBy
+Returns a sorted array of objects ordered by properties and orders.
+Uses a custom implementation of sort, that reduces the props array argument with a default value of 0, it uses destructuring to swap the properties position depending on the order passed.
+If no orders array is passed it sort by 'asc' by default.
+const orderBy = (arr, props, orders) =>
+ arr.sort((a, b) =>
+ props.reduce((acc, prop, i) => {
+ if (acc === 0) {
+ const [p1, p2] = orders[i] === 'asc' ? [a[prop], b[prop]] : [b[prop], a[prop]];
+ acc = p1 > p2 ? 1 : p1 < p2 ? -1 : 0;
+ }
+ return acc;
+ }, 0)
+ );
+/*
+const users = [{ 'name': 'fred', 'age': 48 },{ 'name': 'barney', 'age': 36 },
+ { 'name': 'fred', 'age': 40 },{ 'name': 'barney', 'age': 34 }];
+orderby(users, ['name', 'age'], ['asc', 'desc']) -> [{name: 'barney', age: 36}, {name: 'barney', age: 34}, {name: 'fred', age: 48}, {name: 'fred', age: 40}]
+orderby(users, ['name', 'age']) -> [{name: 'barney', age: 34}, {name: 'barney', age: 36}, {name: 'fred', age: 40}, {name: 'fred', age: 48}]
+*/
+
select
Retrieve a property that indicated by the selector from object.
If property not exists returns undefined.
diff --git a/snippets/arrayToHtmlList.md b/snippets/arrayToHtmlList.md
index 1dab3c778..bf5ba5721 100644
--- a/snippets/arrayToHtmlList.md
+++ b/snippets/arrayToHtmlList.md
@@ -1,6 +1,6 @@
### arrayToHtmlList
-Converts the given array elements into '' tags and appends them to the list of the given id.
+Converts the given array elements into ` ` tags and appends them to the list of the given id.
Use `Array.map()` and `document.querySelector()` to create a list of html tags.
diff --git a/static-parts/index-start.html b/static-parts/index-start.html
index 18e7af11c..5f1f3ff1a 100644
--- a/static-parts/index-start.html
+++ b/static-parts/index-start.html
@@ -20,10 +20,11 @@
code { transform: scale(1); } /* Deals with the issue described in #243 */
pre { font-size: 1rem; border: 0.0625rem solid var(--secondary-border-color); border-radius: var(--universal-border-radius);}
.group{position:relative;margin-top:2em;margin-bottom:-1em}
- .search{font-size:14px;margin-top:-.1em;display:block;width:320px;border:none;border-bottom:1px solid var(--nav-link-color)}
+ .search{font-size:14px;margin-top:-.1em;display:block;width:100%;border:none;border-bottom:1px solid var(--nav-link-color)}
.search:focus{outline:none}
- label{color:var(--nav-link-color);font-size:18px;font-weight:400;position:absolute;pointer-events:none;left:5px;top:10px}
- .search:focus ~ label,.search:valid ~ label{top:-20px;font-size:14px;color:var(--nav-link-color)}
+ label#search-label{color:var(--nav-link-color);font-size:18px;font-weight:400;position:absolute;left:5px;top:10px}
+ .search:focus ~ label#search-label,.search:valid ~ label#search-label{top:-20px;font-size:14px;color:var(--nav-link-color)}
+ label#menu-toggle { width: 3.4375rem;}
@@ -38,9 +39,9 @@
30 seconds of code
- Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.
+ Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.
-
+
diff --git a/tag_database b/tag_database
index 3a78d941c..a6657b911 100644
--- a/tag_database
+++ b/tag_database
@@ -71,6 +71,7 @@ median:math
nthElement:array
objectFromPairs:object
objectToPairs:object
+orderBy:object
palindrome:math
percentile:math
pick:array