This is the sixth day of my participation in Gwen Challenge
Array Cardio Day 1
1. Effect display
Today’s section is a functional introduction to familiarize yourself with some of the basic ways to use Array.
This is not a challenge, but a review. In the initialization document, we can see that the original author provides two nIA and PEOPLE arrays for operation. Then we will do an exercise based on the two arrays to see how to use Array in various ways. Our output results will be output through Console. You can view it on the Console panel after F12.
Again, we compare the original author’s initial documentation results with the final results.
1.index-START.html
2.index-FINISHED.html
As you can see from the figure above, all of our output is displayed through the Console panel.
Second, practice realization
There are eight exercises given in the initialization code:
// Array.prototype.filter()
// 1. Filter the list of inventors for those who were born in the 1500's
// Array.prototype.map()
// 2. Give us an array of the inventors first and last names
// Array.prototype.sort()
// 3. Sort the inventors by birthdate, oldest to youngest
// Array.prototype.reduce()
// 4. How many years did all the inventors live all together?
// 5. Sort the inventors by years lived
// 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
// https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
// 7. sort Exercise
// Sort the people alphabetically by last name
// 8. Reduce Exercise
// Sum up the instances of each of these
Copy the codeIn our daily use of Console, we usually use console.log(), but it also has another cool output, which is output according to the table. For example, we export the nCIME:
console.table(inventors);
Copy the code
At first glance, it is indeed much higher than our previous use, the style immediately went up, look at our previous use:
So let’s go to today’s practice challenge!
1. filter
If the result is true, it will be returned as an array.
// 1. Filter the list of inventors for those who were born in the 1500's
// Filter the list of inventors born in the 16th century
// The traditional way
let ans = inventors.filter(function(inventor){
return inventor.year >= 1500 && inventor.year < 1600
})
console.table(ans)
/ / es6 writing
let ans = inventors.filter(inventor= > (
inventor.year >= 1500 && inventor.year < 1600
));
console.table(ans)
Copy the codeA set of results were screened out:
2. map
After processing each element in the array, a new array is returned.
//ive us an array of the inventors first and last names
// Provide us with the first and last names of all the inventors
let ansMap = inventors.map( inventor= > (
inventor.first + ' ' + inventor.last
));
console.table(ansMap)
Copy the code
When we talk about maps, we’re going to talk about forEach, and we’re going to implement it with forEach,
//forEach
let ansForEach = [];
inventors.forEach( inventor= >ansForEach.push(inventor.filter + ' ' + inventor.last));
console.table(ansForEach);
Copy the codeThe results are as follows:
The similarities and differences between Map and forEach will not be described here. There are too many related explanations on the Internet.
3. sort
//Sort the inventors by birthdate, oldest to youngest
// Rank inventors by date of birth, from oldest to youngest
// Sort from smallest to largest
let ansSort = inventors.sort( (a,b) = > a.year - b.year)
console.table(ansSort)
Copy the codeThe results are as follows:
4. reduce
A method that merges an array and takes a function as an argument (known as an accumulator) that iterates through the array and builds a return value that is the first argument to the accumulator.
//How many years did all the inventors live all together?
// Calculate how many years all the inventors together lived
// The traditional way
let total = 0;
inventors.forEach((inventor) = > {
total += inventor.passed - inventor.year
})
console.log(total) // The result is 861
//reduce
let totalReduce = inventors.reduce((totalReduce,inventor) = > {
return totalReduce + inventor.passed - inventor.year
},0)
console.log(totalReduce) // The result is 861
// Let's see
//1 => total = 0, inventor = { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
//2 => total = 0 + (1955 - 1879), inventor = { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
//3 => total = 0 + (1955 - 1879) + (1727 - 1643),
/ /...
Copy the code5. Sort the inventors by years lived
//Sort the inventors by years lived
// Categorize inventors by age
let ansLived = inventors.sort((a,b) = > {
return (a.passed - a.year) - (b.passed - b.year)
})
console.table(ansLived)
Copy the codeResults show:
However, it is not obvious to see whether the result is correct or not. We have to calculate it one by one, so we add an attribute to more intuitively show whether the data is arranged as required.
inventors.forEach(inventor= > {
inventor.years = inventor.passed - inventor.year
})
Copy the code
6. create a list of Boulevards in Paris that contain ‘de’ anywhere in the name
//create a list of Boulevards in Paris that contain 'de' anywhere in the name
// Create a list of boulevards in Paris, including "de" in the name
// https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
let arr = []
document.querySelectorAll('.mw-category-group li a').forEach((a) = > {
arr.push( a.title)
})
let ans = arr.filter(title= >title.indexOf('de')! = = -1)
Copy the codeJust type in the results, because you’re doing it on this page
QuerySelectorAll () gets a NodeList, which is not an Array, so there are no map and filter methods. You can convert it to an Array when you start filtering. Use array.from () to do the conversion, which I don’t use here.