From 76b396fff7939f922e5ae1fb18a9bb586a439d24 Mon Sep 17 00:00:00 2001 From: Lisa Huang Date: Sat, 21 Apr 2018 18:46:26 -0700 Subject: [PATCH] Added solution to Project 4: Array cardio 1 and study notes to Readme file --- .../index-projectnotes.html | 29 ++++++- readme.md | 76 ++++++++++++++++++- 2 files changed, 103 insertions(+), 2 deletions(-) diff --git a/04 - Array Cardio Day 1/index-projectnotes.html b/04 - Array Cardio Day 1/index-projectnotes.html index eec0ffc31d..421fed1fff 100644 --- a/04 - Array Cardio Day 1/index-projectnotes.html +++ b/04 - Array Cardio Day 1/index-projectnotes.html @@ -31,29 +31,56 @@ // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + const results = inventors.filter(inventor => (inventor.year < 1600) && (inventor.year >=1500) ) // Array.prototype.map() // 2. Give us an array of the inventors' first and last names + const inventorNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`) // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + const sorted = inventors.sort((firstP, secondP) => firstP.year > secondP.year ? 1 : -1) // Array.prototype.reduce() // 4. How many years did all the inventors live? + const years = inventors.reduce((totalYrs, inventor) => { + return totalYrs + (inventor.passed - inventor.year) + }, 0); - // 5. Sort the inventors by years lived + // 5. Sort the inventors by years lived in descending order + const sortedYrs = inventors.sort((firstP, secondP) => (firstP.passed - firstP.year) < (secondP.passed - secondP.year) ? 1 : -1) // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris + const category = document.querySelector('.mw-category'); + const linksToArray = Array.from(category.querySelectorAll('a')); + const arrayToText = linksToArray.map(link => link.textContent); + + const filteredList = arrayToText.filter(text => text.indexOf('de') >= 0) + + // We can also check for text inclusion use .includes() + // const filteredList = arrayToText.filter(text => text.includes('de')) // 7. sort Exercise // Sort the people alphabetically by last name + const splitNames = people.map(person => person.split(',')) + const sorted = splitNames.sort((firstP, secondP) => firstP[0] > secondP[0] ? 1 : -1) + const sortedNames = sorted.map(name => name.join(',')) + // 8. Reduce Exercise // Sum up the instances of each of these const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ]; + const transportationTally = data.reduce(function (tally, option) { + if (!tally[option]) { + tally[option] = 0; + } + tally[option]++; + return tally; + }, {}); + diff --git a/readme.md b/readme.md index 802e5c8b40..f950b72625 100644 --- a/readme.md +++ b/readme.md @@ -130,9 +130,83 @@ An `Array` has a lot more methods than a `NodeList`, such as `map(), reduce()`. `let x = querySelectorAll(selector)` `Array.prototype.slice.call(x);` +Or use `Array.from(): + +`let x = querySelectorAll(selector)` +`Array.from(x);` + ### [HTMLElement.dataset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset) The `HTMLElement.dataset` property allows access, both in reading and writing mode, to all the custom data attributes (`data-*`) set on the element, either in HTML or in the DOM. - `dataset` property itself can be read, but not directly written -- all writes must be to `dataset.property`, which in turn represent the data attributes. \ No newline at end of file +- all writes must be to `dataset.property`, which in turn represent the data attributes. + +## Project 4: Array cardio 1 + +### [Array.prototype.filter()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) + +The `filter()` method calls a provided `callback` function once for each element in an array, and constructs a new array of all the values for which callback returns a value that returns `true` or `truthy` + +### [Console.table](https://developer.mozilla.org/en-US/docs/Web/API/Console/table) + +This function takes one mandatory argument `data`, which must be an array or an object, and one additional optional parameter `columns`. + +It logs `data` as a table. Each element in the array (or enumerable property if `data` is an object) will be a row in the table. + +### [Array.prototype.sort()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) + +Syntax: `arr.sort([compareFunction])` + +The `sort()` method sorts the elements of an array in place and returns the array, using a `compareFunction` to determine the sort order. Array elements are sorted according to the return value of the `compareFunction`: +- If `compareFunction(a, b)` < 0, sort `a` to an index lower than `b`, i.e. `a` comes first +- If `compareFunction(a, b)` = 0, leave `a` and `b` unchanged with respect to each other, but sorted with respect to all different elements +- If `compareFunction(a, b)` > 0, sort `b` to an index lower than `a`, i.e. `b` comes first. + +Example: +``` +function compare(a, b) { + if (a is less than b by some ordering criterion) { + return -1; + } + if (a is greater than b by the ordering criterion) { + return 1; + } + // a must be equal to b + return 0; +} +``` + +### [Array.prototype.reduce()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) + +Syntax: `arr.reduce(callback[, initialValue])` + +The `reduce()` method applies a function against an `accumulator` (like a running total) and each element in the array (from left to right) to reduce it to a single value. + +Example: + +``` +var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) { + return accumulator + currentValue; +}, 0); +// sum is 6 +``` + +### [Node.textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) + +The `Node.textContent` property represents the text content of a node and its descendants. + +Internet Explorer introduced `node.innerText`. The intention is similar but with the following differences: + +- While `textContent` gets the content of all elements, including `