Created
August 5, 2019 16:07
-
-
Save jeffscottward/d2c9c6587ab7e92c8c83478c9b1f2ec9 to your computer and use it in GitHub Desktop.
Javascript method practice
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import axios from "axios"; | |
// ==================================================== | |
// https://codeburst.io/all-about-javascript-arrays-in-1-article-39da12170b1c | |
// DONT USE DELETE ON ARRAYS - use proper methods | |
export const myAsyncFunc = async url => { | |
// const payload = await window.fetch(url); | |
// const payloadJSON = await payload.json(); | |
const payload = await axios(url); | |
const data = payload.data | |
// ==================================================== | |
// Return a decending numerically sorted array of objects | |
const numericallySorted = (data) => { | |
const newData = data | |
console.log('**** numericallySorted ****') | |
return newData.sort((a, b) => a.userId - b.userId); | |
} | |
// Return an alphabetically sorted array of objects | |
const alphabeticallySorted = data => { | |
console.log("**** alphabeticallySorted ****"); | |
return data.sort(function(a, b){ | |
const titleA = a.title.toLowerCase(), | |
titleB = b.title.toLowerCase(); | |
if (titleA < titleB) | |
//sort string A-Z | |
return -1; | |
if (titleA > titleB) return 1; | |
return 0; //default return value (no sorting) | |
}); | |
}; | |
// Return a reversed array of objects | |
const reversedOrderNumerical = (data) => { | |
console.log('**** reversedOrderNumerical ****') | |
return data.reverse() | |
} | |
// Use reduce to categorize some data | |
const reducedData = (data) => { | |
console.log('**** const ****') | |
const reducedArray = data.reduce((accumulator, currentValue) => { | |
return Number(accumulator + currentValue.id); | |
}, 0); | |
return reducedArray | |
} | |
// Return a shifted/unshifted/pushed/popped array | |
const manipulatedContents = (data, typeOfChange) => { | |
let scopeData = Object.create(data) | |
console.log('**** manipulatedContents ****') | |
switch (typeOfChange) { | |
case 'shift': | |
scopeData.shift() | |
break; | |
case 'unshift': | |
scopeData.unshift('newElement') | |
break; | |
case 'pop': | |
scopeData.pop() | |
break; | |
case 'push': | |
scopeData.push('newElement') | |
break; | |
default: | |
break; | |
} | |
return scopeData | |
} | |
// Use spread operator to add items to array | |
const addUsingSpread = (data) => { | |
console.log('**** addUsingSpread ****') | |
return ['newElement', ...data] | |
} | |
// Use spread operator to merge 2 objects | |
const mergeObjectsUsingSpread = (data) => { | |
// Skip using "data" here as its an array | |
const tempObj = { | |
someKey: "someVal", | |
someOtherKey: "someOtherVal" | |
}; | |
const tempObj2 = { | |
someKey2: "someVal2", | |
someOtherKey2: "someOtherVal2" | |
}; | |
console.log('**** mergeObjectsUsingSpread ****') | |
return {...tempObj, ...tempObj2} | |
} | |
// Use spread operator to merge 2 array | |
const mergeArraysUsingSpread = (data) => { | |
const newArray = ['hi','hello','yolo'] | |
console.log('**** mergeArraysUsingSpread ****') | |
return [...newArray, data] | |
} | |
// Add an element to an array with splice | |
const addUsingSplice = (data) => { | |
console.log("**** addUsingSplice ****"); | |
// index 0, how many 0, val | |
data.splice(0, 0, "newElement"); | |
return data; | |
} | |
// Add a portion to an array with slice | |
const getSubArrayWithSlice = (data) => { | |
console.log('**** getSubArrayWithSlice ****') | |
return data.slice(30,35) | |
} | |
// Join all elements of an array to a dash seperated string | |
const joinWithDashes = (data) => { | |
const ids = data.map((item,index) => item.id) | |
console.log('**** joinWithDashes ****') | |
return ids.join('-') | |
} | |
// Use map and/or forEach and/or for-in to loop through an array | |
const logWithMap = (data) => { | |
console.log('**** logWithMap ****') | |
return data.map((item, index) => item.id); | |
} | |
// Use .find to get the first result of a match in an array | |
const getFirstMatchWithFind = (data) => { | |
console.log('**** getFirstMatchWithFind ****') | |
const foundItem = data.find(element => { | |
return element.title.includes('fugit'); | |
}); | |
return foundItem; | |
} | |
// Use .filter to return a new array of only some elements | |
const filterItemsInArray = (data) => { | |
console.log('**** filterItemsInArray ****') | |
return data.filter(item => item.body.length > 200); | |
} | |
// RANGE FUNCTION!!!!!!! | |
// range function takes 3 parameters | |
// start value, stop value, and the step | |
const rangeFunc = (start, stop, step = 1) => { | |
console.log('**** rangeFunc ****') | |
return Array(stop - start) | |
.fill(start) | |
.map((x, y) => x + y * step); | |
} | |
// Traverse through the depth of some data using recursion | |
function buildTree(data, isChild = false) { | |
let html = document.createElement('ul'); | |
data.forEach(element => { | |
let li = document.createElement('li'); | |
let text = document.createTextNode(element.title); | |
li.appendChild(text) | |
html.appendChild(li) | |
// If the current data element | |
// has children then call the | |
// buildTree again passing in | |
// the children and isChild = true | |
if (element.children) { | |
html.appendChild(buildTree(element.children, true)); | |
} | |
}); | |
return html; | |
} | |
// Perform a binary search ✅ | |
// console.table(numericallySorted(data)); | |
// console.table(alphabeticallySorted(data)); | |
// console.table(reversedOrderNumerical(data)); | |
// console.table(reducedData(data)) | |
// console.log( | |
// manipulatedContents(data, "shift").length, | |
// manipulatedContents(data, "unshift")[0], | |
// manipulatedContents(data, "pop").length, | |
// manipulatedContents(data, "push")[100] | |
// ); | |
// console.table(addUsingSpread(data)); | |
// console.table(mergeObjectsUsingSpread(data)); | |
// console.table(mergeArraysUsingSpread(data)); | |
// console.table(addUsingSplice(data)); | |
// console.table(getSubArrayWithSlice(data)); | |
// console.table(joinWithDashes(data)); | |
// console.table(logWithMap(data)); | |
// console.table(getFirstMatchWithFind(data)); | |
// console.table(filterItemsInArray(data)); | |
// console.log(rangeFunc(0,10,2)); | |
// console.log( | |
// buildTree([ | |
// { | |
// title: "menu 1", | |
// children: [ | |
// { title: "menu 1.1" }, | |
// { | |
// title: "menu 1.2", | |
// children: [{ title: "menu 1.2.1" }, { title: "menu 1.2.2" }] | |
// } | |
// ] | |
// }, | |
// { | |
// title: "menu 2", | |
// children: [{ title: "menu 2.1" }, { title: "menu 2.2" }] | |
// } | |
// ]) | |
// ); | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment