JavaScript 4/30: сопоставление, фильтрация и сокращение использования массивов

внешний интерфейс JavaScript Unicode

JavaScript3030-дневный челлендж для Веса Боса, призванный помочь людям достичь результатов с помощью чистого JavaScript. Новички, которые хотят быстро освоить JS, могут попробовать. Теперь то, что вы видите, является первой статьей в этой серии резюме.Я не знаю, когда смогу закончить 30 вопросов, поэтому я не клянусь ставить здесь флаг. Это четвертый вопрос.

добиться эффекта

В этой главе мы познакомим вас с несколькими распространенными методами JS Array, включая filter(), map(), sort(), reduce(), а также просмотрим результаты на панели консоли. В документации указано два набора массивов:

  • Первая группа: массив изобретателей, содержащий имя, фамилию, дату рождения и дату смерти.
const inventors = [
      { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
       ......
      { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
    ];
  • Вторая группа: массив людей, который содержит группу имен людей, разделенных запятыми.
 const people = ['Beck, Glenn', ...... , 'Blake, William'];

Темы следующие:

  1. Ширма для изобретателей 16 века рождения;
  2. Перечислите их имена и фамилии в виде массива;
  3. В зависимости от их даты рождения и поручения убывания;
  4. Подсчитайте, сколько лет все изобретатели прожили вместе;
  5. Сортировка по возрасту;
  6. Используя данный веб-сайт (https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris), перечислите бульвары в Париже, которые содержат байт «de»;
  7. Сортировать по фамилии;
  8. Подсчитайте количество каждого вида в массиве.

Точка знаний

filter()

Операция фильтра, фильтруйте все элементы, соответствующие условиям, если это правда, вернитесь, чтобы сформировать новый массив, возьмите первый вопрос в качестве примера:

    function bornyear(inventor) {
      return inventor.year >= 1500 && inventor.year < 1600;
    }
    var fifteen = inventors.filter(bornyear);
    console.table(fifteen);
    // 可简化为
    const fifteen = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year < 1600));

map()

Операция сопоставления для каждого элемента обработки исходного массива и возврат нового массива. На второй вопрос, например:

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

sort()

Операция сортировки, порядок сортировки по умолчанию основан на строковых кодовых точках Unicode, таких как 10 перед 2, и числа перед прописными буквами, а прописные буквы перед строчными буквами. Вы также можете использовать функцию сравнения, массив будет отсортирован в соответствии с возвращаемым значением вызова функции, формат следующий:

    function compare(a, b) {
      if (a < b) {
        // 按某种排序标准进行比较, a 小于 b
        return -1;
      }
      if (a > b) {
        return 1;
      }
      // a must be equal to b
      return 0;
    }

Для сравнения чисел, а не строк, функция сравнения может просто вычесть b из a. Следующая функция отсортирует массив в порядке возрастания:

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

Для третьего вопроса мы можем просто использовать сложение и вычитание для сравнения:

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

Для седьмого вопроса нужно сравнить по возвращаемому значению:

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

reduce()

Операция слияния, всего два параметра, первый — это функция, которую можно понимать как аккумулятор, просматривающий массив для накопления возвращаемого значения, а второй — начальное значение. Если начальное значение не указано, будет использован первый элемент массива. В качестве примера возьмем четвертый вопрос:

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

Метод reduce() также используется для восьмого вопроса:

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

    console.log(sumup);

Стоит отметить, что первый параметр функции обратного вызова также может быть объектом, который хранит количество каждого типа элемента. Для более глубокого понимания объектов, пожалуйста, обратитесь кБлог Руан Ифэн.

map() в сочетании с filter()

Обратитесь к шестому вопросу, требования к заголовку указаны всайтОтфильтруйте Paris Avenue, содержащий байт 'de', сначала получите элемент соответствующего узла, преобразуйте его в массив, а затем используйте для его получения метод .includes().

    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)
Категории