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

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

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

Вспомогательные методы массива были разработаны в ES5.1, но кодифицированы в ES6.

Ниже приведены семь вспомогательных методов массива:

  • для каждого
  • карта
  • фильтр
  • найти
  • каждый
  • немного
  • уменьшать

Давайте углубимся в них, я расскажу вам оба способа манипулирования сбором данных, то есть классические циклы ES5 for и помощники массива ES6, и оставлю вам решать, какой из них довольно хорош.

Помощник forEach

Помощник forEach можно использовать, когда вы хотите выполнить операцию над каждым элементом массива.

//Let suppose we have an array of numbers and we want to console log all elements of array
const numbers=[1,2,3,4,5,6];
//Using traditional for loop
for(let i=0;i<numbers.length;i++){
 console.log(numbers[i]);
}
//Using ES6 forEach helper
//number is denoted for each element in numbers
numbers.forEach(function(number){
 console.log(number);
});

Помощник «карта»

Помощник карты можно использовать, когда вы хотите выполнить операцию над каждым элементом массива и сохранить его в новом массиве.

//Let suppose we have an array of numbers and we want to double each element of array and store in a new array doubleNumbers
const numbers=[1,2,3,4,5,6];
let doubleNumbers=[];
//Using traditional for loop
for(let i=0;i<numbers.length;i++){
 doubleNumbers.push(numbers[i]*2);
}
//Using ES6 map helper
//number is denoted for each element in numbers
doubleNumbers = numbers.map(function(number){
 return number*2;
});

Помощник «фильтр»

Помощник фильтра можно использовать, когда вы хотите отфильтровать элементы массива по некоторым критериям и вставить другой массив.

//Let suppose we have an array of products and we want to filter out the products of type fruit from them and store in a new array fruitProducts
const products=[
 { name:’cucumber’,type:’vegetable’ },
 { name:’banana’,type:’fruit’ },
 { name:’apple’,type:’fruit’ },
 { name:’cabbage’,type:’vegetable’ }
];
let fruitProducts=[];
//Using traditional for loop
for(let i=0;i<products.length;i++){
 if(products[i].type===’fruit’){
   fruitProducts.push(products[i]);
 }
}
//Using ES6 filter helper
//product is denoted for each element in products
fruitProducts = products.filter(function(product){
 return product.type===’fruit’;
});

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

Помощник find можно использовать, когда вы хотите найти определенный элемент в массиве.

//Let suppose we have an array of users and we want to fetch the details of user with the name ‘Ram”
const users=[
 { name:’Sist’,email:'[email protected]',phone:886767},
 { name:’Ram’,email:'[email protected]',phone:456744},
 { name:’Jack’,email:'[email protected]',phone:887654},
 { name:’John’,email:'[email protected]',phone:909076}
];
let ram;
//Using traditional for loop
for(let i=0;i<users.length;i++){
 if(users[i].name===’Ram’){
  ram=users[i];
  break;
 }
}
//Using ES6 find helper
//user is denoted for each element in users
ram=users.find(function(user){
 return user.name===’Ram’;
});

Но этот помощник поиска имеет недостаток, т.е. помощник поиска находит только первый элемент с критериями, как в приведенном выше примере, если в массиве было два пользователя с именем «Ram», и вы используете помощник поиска, он найдет только первого пользователя с именем «Ram». ».

«каждый» и «некоторые» помощники

Я охватываю как каждого, так и некоторых помощников в одной программе, потому что они очень тесно связаны друг с другом.

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

//Let suppose we have an array of laptops and we a software and a game
//Minimum ram required for running the software is 4
//Minimum ram required for running the game is 8
const laptops=[
 { name:’thinkpad’,ram:16},
 { name:’ideapad’,ram:4},
 { name:’apple’,ram:8},
 { name:’predator’,ram:32}
];
//By seeing the above array we can say that every laptop can run that software whereas some laptops can run the game.
let someLaptopCanRunGame;
let someLaptopCanRunSoftware;
//only assuming true if false will be flipped in for loop
let everyLaptopCanRunGame=true;
let everyLaptopCanRunSoftware=true;
//Using traditional for loop
for(let i=0;i<laptops.length;i++){
 if(laptops[i].ram<4){
  everyLaptopCanRunSoftware=false;
 }
 else{
  someLaptopCanRunSoftware=true;
 }
 if(laptops[i].ram<8){
  everyLaptopCanRunGame=false;
 }
 else{
  someLaptopCanRunGame=true;
 }
}
//Using ES6 every and some helper
//laptop is denoted for each element in laptops
everyLaptopCanRunSoftware=laptops.every(function(laptop){
 return laptop.ram>=4;
});
someLaptopCanRunSoftware=laptops.some(function(laptop){
 return laptop.ram>=4;
});
everyLaptopCanRunGame=laptops.every(function(laptop){
 return laptop.ram>=8;
});
someLaptopCanRunGame=laptops.some(function(laptop){
 return laptop.ram>=8;
});

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

Помощник сокращения — самый сложный и гибкий помощник массива, все остальные методы помощника массива могут быть реализованы с помощью помощника сокращения.

//Let suppose we have an array of numbers and we want to get sum of all elements of the array
const numbers=[1,2,3,4,5,6];
let sum=0;
//Using traditional for loop
for(let i=0;i<numbers.length;i++){
 sum+=numbers[i];
}
//Using ES6 reduce helper
//number is denoted for each element in numbers
sum=numbers.reduce(function(sum,number){
 return sum+number;
},0);
//This zero denotes initial value of sum.

Возможно, вы видели программу Balanced Parenthesis: Знаете ли вы, что вы можете сделать это очень легко, используя хелпер сокращения. Перейдите по ссылке, чтобы увидеть.

Пользователи забывают использовать ключевое слово return во вспомогательных методах массива на начальном этапе. Это самая распространенная ошибка, которую вы можете совершить, поэтому убедитесь, что вы не забыли использовать return. > ключевое слово.

Я попытался объяснить эти вспомогательные методы массива очень кратко и просто. Я постараюсь написать больше статей, объясняющих все синтаксисы ES6. Надеюсь, это было полезно.

Чтение — это хорошо, но чтение с реализацией — это здорово!

Предложения и критика статьи приветствуются.