Всем привет!

Я просто делаю здесь свои заметки для справки, но в то же время замечательно, если мои заметки помогают кому-то в мире, особенно вам, развеять сомнения.

Это своего рода краткий справочник:
небольшой фрагмент + небольшое пояснение - вот и все.

Вы можете использовать JSPlaygrounds для практики, если хотите, в процессе обучения.

  1. Https://stephengrider.github.io/JSPlaygrounds/
  2. Https://babeljs.io/
  3. Codepen
  4. JsFiddle ИЛИ
  5. Даже на вашем локальном компьютере, если у вас все настроено.

Давайте разберемся с некоторыми основными. Что такое EcmaScript?

Ecmascript (ES6 / ES2015) - это стандарт.
Javascript - это реализация.
«6» или «2015» - это номер версии.

При написании кода ES6 для клиентской стороны вам придется использовать Babel, чтобы преобразовать его в код ES5, чтобы он был совместим со всеми браузерами.

Для NodeJS стандарты ES6 уже реализованы, поэтому нет необходимости в каких-либо сторонних инструментах для транспиляции вашего кода.

Надеюсь, у вас есть все, чтобы начать!

Вспомогательные методы для массивов

Мы мельком познакомимся с некоторыми из методов массива, и прежде чем мы продолжим, я полагаю, вы уже знаете, что такое «массив»?

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

Что ж, все эти методы предназначены для замены традиционного цикла for, который мы использовали для нескольких вариантов использования (перечислить все значения, изменить, отфильтровать и т. Д.), Но теперь у нас есть разные методы для обработки разных вариантов использования отдельно, эффективно и сделать ваш код более понятным. Хотя использование «for loops», конечно, не является устаревшим и не является грехом, но дело в том, что наши стандарты Javascript эволюционировали, и мы должны использовать его, чтобы упростить жизнь разработчикам.

Так быстро давайте проверим!

Помощник «forEach»

Этот метод используется для перебора вашего массива, и вы можете использовать его, если хотите отобразить все значения в вашем массиве. Давайте посмотрим на пример ниже:

var colors = ['red','yellow','blue'];
colors.forEach(function (color) {
  console.log(color);
});
//red
//yellow
//blue

Помощник по карте

«Карта» используется для создания нового массива на основе существующего массива.

Допустим, у вас есть массив, и, прежде чем продемонстрировать его пользователю, вы хотите изменить значения с помощью своего собственного алгоритма, поэтому в качестве наилучшей практики вы создаете новый массив и после некоторых вычислений на основе старого массива вы помещаете все эти выходные данные в новый array и продемонстрируйте значения нового массива, поэтому все это возможно с помощью 'map', только эта 'map' создаст для вас новый массив с измененными значениями. Давайте посмотрим на пример ниже:

var numbers = [1,2,3];
var doubledNumbers = [];
doubledNumbers = numbers.map(function(number){
    return number * 2; // this does not work with forEach 
})
console.log(doubledNumbers); // [2,4,6]

Примечание: вам следует использовать помощник «map», если вы хотите изменить значения массива, а не только для отображения значений! - вы можете использовать «forEach» для отображения, и если вам интересно, возможен ли «возврат» с помощью «forEach»? Нет, это не так! он возвращает вам "undefined". Это всегда хорошо. Можете попробовать!

Помощник «filter»

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

var products = [
{name: 'milk', type: 'dairy'},
{name: 'mango', type: 'fruit'},
{name: 'grapes', type: 'fruit'},
{name: 'cheese', type: 'dairy'}
];
var filteredProducts;
filteredProducts = products.filter(function(product){
   return product.type == 'dairy'; // filter all dairy products
})
console.log(filteredProducts); 
// [ { name: 'milk', type: 'dairy' },
//  { name: 'cheese', type: 'dairy' } ]

«Найти» помощника

Ну да, он служит другой цели, чем «фильтр», и поэтому он здесь. В отличие от «фильтра», он не дает вам всех записей, соответствующих условию, а возвращает только самое первое значение, которое он находит.
Давайте посмотрим на пример ниже:

var users = [
{name: 'Hanuman'},
{name: 'Raavan', id: 1},
{name: 'Ram'},
{name: 'Raavan', id: 2}
]
var findUser;
findUser = users.find(function (user) {
  return user.name == 'Raavan’; // find a user with name 'Raavan'
})
console.log(findUser); // { name: 'Raavan' , id: 1 }

"Каждый" Помощник

Допустим, у вас есть сценарий, в котором вы хотите проверить, все ли у вас в штате больше 30, и вы просто хотите знать, да или нет. Так что да, этот помощник возвращает вам просто да или нет, то есть логическое значение.
Давайте посмотрим на пример ниже:

var staff = [
 {name: 'Jai', age: 24},
 {name: 'Shree', age: 28},
 {name: 'Ram', age: 32}
];
computers.every(function (computer){ 
  return staff.age > 30
}); // false

Примечание. Помощник «каждый» выполняет итерацию по массиву до тех пор, пока не «вернет ложь», поэтому это означает, что если одна из записей «вернет ложь», она прервется и не перейдет к следующим итерациям.

"Какой-то" Помощник

В отличие от «every», «some» полезно, если вы хотите проверить, превышает ли кто-то из ваших сотрудников 30, и вы просто хотите знать, да или нет.
Давайте посмотрим на пример ниже:

var staff = [
 {name: 'Jai', age: 24},
 {name: 'Shree', age: 28},
 {name: 'Ram', age: 32}
];
computers.some(function (computer){ 
  return staff.age > 30
}); // true

Примечание. Помощник «some» выполняет итерацию по массиву до тех пор, пока «не вернет истину», так что это означает, что если одна из записей «вернет истину», она прервется и не перейдет к следующим итерациям.

Помощник "уменьшить"

Это немного сложно понять. С помощью «уменьшить» вы можете достичь желаемого результата, который вам нужен, это дает вам гибкость для вашего желаемого результата.
Здесь мы рассмотрим базовый пример, в котором мы хотим просуммировать все значения в массиве. Давайте посмотрим на пример ниже:

var nos = [10,20,30];
var sum;
sum = nos.reduce(function (sum, number) {
  return sum + number;
}, 0); // intial value to start the iteration, so very first time in this example sum is 0 (it can be anything based on your requirement ex; Object, Array, etc)
console.log(sum); //60

В приведенном выше примере, как вы видите выше, я пропустил «0», поскольку нам просто нужна сумма массивов, но для начала итерации необходимо какое-то значение. Но в зависимости от сценария и желаемого результата, который вам нужен, вы можете передать пустой массив или объект и т.д. больше гибкости.

Я записал очень простые примеры, чтобы мне было легче понять и быстро начать с них! Конечно, сценарии реального живого мира более сложны, но я надеюсь, что это поможет вам начать работу и позже решить сложные проблемы.

Над!

Поставьте лайк и поделитесь, если вы нашли эту статью полезной!