JavaScript30 is a 30-day JavaScript30 challenge from Wes Bos designed to help people achieve effects in pure JavaScript. Beginners who want to quickly improve on JavaScript should try it. Now you’re looking at the first of a series of summaries. I don’t know when I’m going to finish the 30 questions. 4.

Implementation effect

This section describes several common methods of JS Array, including filter(), map(), sort(), and reduce(), and views the results in the Console panel. The documentation has given two arrays:

  • The first group: nIA, including first name, last name, date of birth and date of death
const inventors = [
      { first: 'Albert'.last: 'Einstein'.year: 1879.passed: 1955},... {first: 'Hanna'.last: 'Hammarström'.year: 1829.passed: 1909}];Copy the code
  • The second group, the People array, contains a list of names separated by commas.
 const people = ['Beck, Glenn'. .'Blake, William'];
Copy the code

The title is as follows:

  1. Screening inventors born in the 16th century;
  2. List the first and last names in an array.
  3. According to their date of birth, and in order from most to least;
  4. Calculate how many years all the inventors together lived;
  5. In order of age;
  6. Using given website (https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris), the list contains’ DE ‘bytes of Paris avenue;
  7. Sort by last name;
  8. Count the number of each type in the array.

knowledge

filter()

Filter operation, filter all elements that match the condition, if true returns to form a new array, using the first example:

    function bornyear(inventor) {
      return inventor.year >= 1500 && inventor.year < 1600;
    }
    var fifteen = inventors.filter(bornyear);
    console.table(fifteen);
    // can be simplified as
    const fifteen = inventors.filter(inventor= > (inventor.year >= 1500 && inventor.year < 1600));
Copy the code

map()

A mapping operation that processes each element of the original array and returns the new array. Take the second subject as an example:

    const fullnames = inventors.map(inventor= > `${inventor.first} ${inventor.last}`);
    console.table(fullnames);
Copy the code

sort()

Sort operations. The default sort order is based on string Unicode code points, such as 10 before 2, and number before uppercase letter, uppercase letter before lowercase letter. You can also use a comparison function, where the array is sorted by the value returned from the call, in the following format:

    function compare(a, b) {
      if (a < b) {
        // By some sort of comparison, a is less than B
        return - 1;
      }
      if (a > b) {
        return 1;
      }
      // a must be equal to b
      return 0;
    }
Copy the code

To compare numbers instead of strings, the comparison function can simply be a minus b. The following function will sort the array in ascending order:

    function compareNumbers(a, b) {
      return a - b;
    }
Copy the code

For the third question, we can simply use the addition and subtraction comparison:

    const birthdate = inventors.sort((inventora, inventorb) = > (inventorb.year - inventora.year));
    console.table(birthdate)
Copy the code

For the seventh question, we need to compare according to the return value:

    const sortName = inventors.sort((a, b) = > {
      return (a.last > b.last) ? 1 : - 1;
    })
    console.table(sortName);
Copy the code

reduce()

The merge operation takes two arguments. The first is the function, which can be understood as an accumulator, and the second is the initial value. If no initial value is provided, the first element in the array is used. Take the fourth subject for example:

   const totalyears = inventors.reduce((total, inventor) = > { return total + (inventor.passed - inventor.year); }, 0);
    console.log(totalyears);
Copy the code

The reduce() method is also used in question 8:

    const sumup = data.reduce(function (obj, item) {
      if(! obj[item]) { obj[item] =0;
      }
      obj[item]++;
      return obj;
    }, {});

    console.log(sumup);
Copy the code

Note that the first argument to the callback function can also be an object, storing the number of items in each category. For an in-depth understanding of objects, see Ruan Yifeng’s blog.

Map () is combined with filter()

Select Paris Avenue with ‘de’ bytes on the site. The preferred method is to get the elements of the corresponding node and convert them into an array, which can be obtained by using the.includes() method.

    const category = document.querySelector('.mw-category');
    const links = Array.from(category.querySelectorAll('a'));
    const de = links.map(link= > link.textContent).filter(streetName= > streetName.includes('de'));
    console.table(de)
Copy the code
Copy the code