Здравствуйте, я изучаю Javascript, чтобы стать разработчиком программного обеспечения. Это мой первый пост на Medium, поэтому, пожалуйста, дайте мне знать, если я допустил ошибки.

Моя цель в этом посте - объяснить, как использовать методы массива. Если вы знаете эти методы массива, ваша разработка на JavaScript будет прогрессировать, и вам больше не придется использовать традиционный способ написания циклов.

  1. для каждого
  2. карта
  3. фильтр
  4. найти
  5. findIndex
  6. каждые
  7. немного
  8. уменьшить

Что такое ES6?

ES6 - это 6-е издание ECMAScript. ES6 имеет несколько новых функций, которые отключили некоторые старые функции, работающие в определенных браузерах. Вы можете проверить Таблицу совместимости ECMAScript 6, чтобы узнать, с какой функцией вы хотите работать.

Функция стрелки

Я думаю, что лучше сначала ввести стрелочную функцию. Стрелочная функция - это сокращение от анонимной функции.

Традиционная анонимная функция

const add = function (a, b) {
    return a + b;
}
console.log(add(1, 2)); // this result should be 3

Стрелка

const add = (a, b) => { 
  return a + b;
}
console.log(add(1, 2)); // this result should be 3

Если у вас нет {}, это означает, что вы возвращаете эту строку.

const add = (a, b) => a + b;
console.log(add(1, 2)); // this result should be 3

Если функция имеет один параметр, вы можете использовать аббревиатуру ().

const greeting  = name => console.log(`Hi ${name}`);
greeting('JavaScript'); // Hi JavaScript

Как видите, вам не нужно писать функцию. Вместо ключевого слова function стрелочная функция создается буквально с помощью «=› ».

Кроме того, вы можете как можно скорее вызывать стрелочные функции, чтобы просто заключить всю стрелочную функцию в круглые скобки и вызвать функцию, используя скобки в конце. Он называется шаблоном Немедленно вызываемые функциональные выражения (IIFE).

(name => `Hi ${name}`)('Tom'); // Hi Tom

Лексическая привязка this

В общем, когда ключевое слово this используется в традиционной функции, оно становится вызывающим объектом. В этом случае на этапе определения функции «это ключевое слово» не определяется.

Однако, когда вы используете стрелочную функцию, это выражение фиксирует ключевое слово this при его объявлении. Другими словами, стрелочная функция связывает this во время объявления и всегда делает его неизменным для вызывающего объекта.

var foo = "global bar";
const obj = {
  foo: 'bar',
  getfoo() {
    setTimeout(function() {
      // when the function runs this is global
      console.log(this.foo)
    }, 10)
  }
}
obj.getfoo() // global bar
const obj2 = {
  foo: 'bar',
  getfoo() {
    setTimeout(() => {
      // lexical this is this object as written
      console.log(this.foo)
    }, 10)
  }
}
obj2.getfoo() // bar

для каждого

forEach - это метод массива для зацикливания целевого массива.

// syntax
arr.forEach(val => return val);

const fruits = ["apple", "banana", "orange"];
fruits.forEach(fruit => console.log(fruit)); 
// apple, banana, orange

карта

map - это метод массива для создания нового массива, когда вы хотите изменить исходные значения. Возврат будет массивом.

// syntax
values.map(value => return {
   something you want to do
})
const prices = [10, 50, 100];
const halfPrice = prices.map(price => price * 0.5); 
// halfPrice = [5, 25, 50];

фильтр

filter - это метод массива для возврата значений при следующих условиях. Возврат должен быть массивом.

// syntax
values.filter(value => return your condition);
const scores = [50, 60, 70, 80];
const isPassed= scores.filter(score => score >= 70);  
// isPassed = [70, 80]

найти

find - это метод массива для получения определенного значения в массиве. Возврат будет найдена стоимость. Если значение не найдено, возвращаемое значение будет неопределенным.

// syntax
values.find(value => value === "your target value")
const animals = ["dog", "cat", "rat"];
const isFound = animals.find(animal => animal === "cat"); 
// isFound = "cat"

findIndex

findIndex - это метод массива для поиска порядкового номера значения в массиве. Если значение не существует, возвращаемое значение будет -1.

// syntax
values.findIndex(value => value === your target value)
const animals = ["dog", "cat", "rat"];
const index = animals.findIndex(animal => animal === "cat"); 
// index = 1

каждый

every - это метод массива. Он используется для проверки того, что все значения в массиве соответствуют условию. Если все значения верны, вернуть истину. В противном случае возврат будет ложным.

// syntax
values.every(value => your conditions)
const scores = [70, 80, 90];
const isEveryonePassed = scores.every(score => score >= 70); // true

немного

some - это метод массива. Он используется для проверки соответствия одного из значений в массиве условию. Если одно из них истинно, верните истину. В противном случае возврат будет ложным.

// syntax
values.some(value => your conditions)
const scores = [50, 60, 70, 80];
const isSomeonePassed = scores.some(score => score >= 70); // true

уменьшать

reduce - это метод массива для накопления значений массива. Можно установить значение по умолчанию. Возвращаемое значение будет аккумулятором.

const scores = [50, 60, 70, 80];
const totalScore = scores.reduce((accumulator,score) => accumulator += score, 0);
/**
* first loop accumulator is 0, score 50
* second loop accumulator is 50, score 60
* third loop accumulator is 110, score 70
* fourth loop accumulator is 180, score 80 
* return 260
*/

Заключение

Сначала у вас могут возникнуть трудности. Однако вам следует попытаться изучить эти методы как можно скорее, потому что они упрощают переход к более сложной разработке с использованием таких фреймворков, как React, Vue, Angular. Я надеюсь, что этот пост поможет кому-то начать использовать его для вашей разработки. Спасибо!