Рубрики
Без рубрики

Простое руководство по методам массива JavaScript

Введение в методы массива JavaScript, методы массива JavaScript и массивы в JavaScript. Помечено карьерой, JavaScript, WebDev, новички.

Добро пожаловать на этот урок, на этом уроке мы обсудим методы массива JavaScript.

На последнем уроке мы указали некоторые методы массива JavaScript, но теперь мы собираемся объяснить их подробно.

Давайте начнем с:

Недавно я был в очереди в банке в Нигерии, и я был последним человеком в очереди, когда спешил.

Давайте предположим, что очередь ниже:

let arrayOfPeople = ['Ope', 'Dupe', 'Ola', 'Ariyo', 'Temi', 'Ayobami'];

Находясь в очереди, мне хотелось использовать JavaScript, чтобы перейти к началу очереди.

Теперь вопрос в том, как я могу отменить массив с помощью JavaScript?

Вот почему у нас есть метод обратного (), и я мог бы просто сделать:

 let reversedArrayOfPeople = arrayOfPeple.reverse();
console.log(reversedArrayOfPeople) // ['Ayobami','Temi','Ariyo', 'Ola', 'Dupe', 'Ope'];

console.log(arrayOfPeople) // ['Ayobami','Temi','Ariyo', 'Ola', 'Dupe', 'Ope'];

Метод обратной обработки переказывает элементы вызывающего массивного объекта в порядке убывания, мутирует [изменяет] массив и возвращает ссылку на массив.

Это означает, что ArrayOfpeople обращается вспять, и его ссылка возвращается как значение ReversedArrayOfpeople, что означает, что изменение значения реверсийных средств также изменит значение ArryOfpeople, поскольку значение ReversedArrayOfpeops является ссылкой на ArrayOfpeople. Короче говоря, они связаны вместе.

Например,

let arrayOfFriends = ['Ope', 'Ayo'];
console.log(arrayOfFriends) // Ope, Ayo
let reversedArrayOfFriends = arrayOfFriends.reversed();

console.log(reversedArrayOfFriends) // Ayo, Ope;
console.log(arrayOfFriends) // Ayo, Ope

// array of people has been affected
reversedArrayOfFriends.pop
console.log(reversedArrayOfFriends) // Ayo;
console.log(arrayOfFriends) // Ayo;

Вы это видите?

Изменение ReversedArayOffriends влияет на Arrayoffriends, потому что ценность ReversedArayoffriends – это ссылка на Arrayoffriends.

Обратный () Метод массива сортирует элементы массива в порядке убывания.

Метод MAP () используется для итерации над множеством элементов для построения и возврата из него нового массива.

Он получает и вызывает предоставленную функцию на каждом из элементов в данном массиве один за другим.

Array.map(callback, thisValue);

Метод Map () принимает два параметра, как в выше:

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

По сути, функция обратного вызова имеет три параметра: CurrentArrayElement (CurrentValue), IndexOfTheElement (необязательно) и TheArrayitself (необязательно).

 Array.map(function(currentValue, index, array) {

  }, thiValue)

Короче говоря, функция обратного вызова предоставляет нам текущий элемент, его индекс и сам массив.

let persons = [
   { name: "Buhari", friendship: false}, 
   { name: "Obama", friendship: false}, 
   { name: "Trump", friendship: false}
];

let friends = persons.map(function (person) {
   person.friendship = true;
   return person;
}); 

Мы также можем использовать функцию с жирным воротом, чтобы быть более краткой, как в:

let numbers = [2, 3, 4, 5];

let squaredNumbers = numbers.map( number => number * number ); 

Как нативные, так и жирные функции могут использоваться с методом map () взаимозаменяемо, за исключением случаев, когда необходим параметр thisValue метода MAP (), потому что мы не можем связывать функцию жирого ворота, и поэтому это значение не будет доступно внутри жира Функция стрелки.

Что это за это?

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

Например, вам необходимо поставить «это» для map (), когда он используется в объекте или в любом месте «это» необходимо для доступа, как в:

let me = {
    persons : [
       { name: "Buhari", friendship: false}, 
       { name: "Obama", friendship: false}, 
       { name: "Trump", friendship: false}
    ],

    name: "Ayobami",
    makeFriends: function(){
       this.persons.map(function(person) {
          person.friendship = true;
       }, this)
    }
};

me.makeFriends();
me.persons

Более того, мы можем предоставить переменного человека вместо этого, когда он не находится в объекте, как в:

let persons = [
       { name: "Buhari", friendship: false}, 
       { name: "Obama", friendship: false}, 
       { name: "Trump", friendship: false}
    ];

let me = {
    name: "Ayobami",
    makeFriends: function(){
       persons.map(function(person) {
          person.friendship = true;
       }, persons)
    }
};

me.makeFriends();
me.persons

Метод массива Map () не должен использоваться, когда нет необходимости возвращать значение или массив. foreach () или для (… in) следует использовать вместо этого.

Map () не может быть использован на пустом массиве.

Метод foreach () очень похож на метод Map () в структуре:

 Array.forEach(function(currentValue, index, array) {

  }, thiValue)

Они разные по работе и функции. Foreach () не создает новый массив, но меняет/мутает массив, который он переходит через метод Map ().

Вот почему Foreach в основном используется, когда им необходимо мутировать переменные прямо из функции обратного вызова, как в:

//You need to first add an HTML element with friendBox as its ID to you HTML code.
let friends = ["Obama", "Trump", "Buhari"]; friends.forEach(showFriends); function showFriends(friend, index) { document.getElementById("friendBox").innerHTML += index + ":" + friend + "
"; }

Давайте подсчитаем общее количество друзей в качестве другого примера:

let friends = ["Obama", "Trump", "Buhari"];
let numberOfFriends = 0;

friends.forEach(countFriend);

function countFriend(friend, index) {
  console.log(friend);
  numberOfFriends++
}

Foreach () очень удобен, когда вам нужно мутировать/изменить состояние.

Метод Filter () создает новый массив, используя каждый элемент, который проходит тест, а затем возвращает окончательный массив.

Это очень похоже на метод Map () в структуре:

 Array.filter(function(currentValue, index, array) {

  }, thiValue)

Filter () В действии:

let numbers = [1,2,3,4];

let numberGreaterTwo = numbers.filter( number => number > 2 ); //[3,4] 

Таким образом, приведенное выше создает новый массив и вставляет все числа, которые проходят тест – любое число, которое больше 2.

Иногда вам может потребоваться отобразить элементы массива в качестве текста (строка). В этом случае вам необходимо использовать метод ToString () для преобразования массива в строку (текст), который вы хотите отобразить для ваших пользователей.

let arrayOfPeople = ['Ope', 'Dupe', 'Ola', 'Ariyo', 'Temi', 'Ayobami'];
document.getElementById("text").innerHTML = arrayOfPeople.toString();

Бум! Элементы массива людей будут отображаться в браузере как текстовый узел элемента с текстом «ID».

Метод ToString () преобразует элементы массива в строку, не влияя на сам массив. То есть массив остается прежним.

Метод join () используется для объединения элемента массива в строку (текст) с сепаратором, таким как запятая, тира:

let arrayOfFriends = ['Ope', 'Dupe', 'Ola'];
arrayOfFriends.join("") // OpeDupeOla;

arrayOfFriends.join(" "); // Ope Dupe Ola;

arrayOfFriends.join("_"); // Ope_Dupe_Ola;

arrayOfFriends.join("-"); // Ope-Dupe-Ola;

arrayOfFriends.join("a"); // OpeaDupeaOla;

По умолчанию, то есть, если вы не используете ни одного сепаратора с помощью метода join (), будет использоваться запятая (,):

let arrayOfFriends = ['Ope', 'Dupe', 'Ola'];
arrayOfFriends.join(); // Ope,Dupe,Ola

Примечание. Использование метода join () на массиве не меняет массив.

Метод splice () может добавлять и удалять элементы из массива.

splice( startIndex, deletCount, ItemToBeAdded1, ItemToBeAdded2, ItemToBeAddedn -1);

Первый параметр (запуск) указывает индекс – начиная с нуля – где элемент должен быть вставлен или удален.

Второй параметр (deletcount) указывает общее количество удаленных элементов, начиная с предоставленного начального индекса.

Остальные параметры устанавливают значения, которые будут добавлены в массив.

Например,

let friends = ['Ope', 'Dupe', 'Ola'];
//Adds Ayobami to the array of friends at index 3.
friends.splice(3, 0, 'Ayobami');// Ope, Dupe, Ola, Ayobami

Из метода Splice () DeleteCount установлен на 0, поэтому мы не удаляем ни один элемент, но мы только добавляем «айобами» в массив в индексе 3, подсчитывая от 0.

let days = ['Monday', 'Wednesday', 'Thursday'];
//Adds Tuesday to the array of days at index 1;
day.splice(1,0, 'Tuesday);// Monday, Tuesday, Wednesday, Thursday

Из приведенного выше метода Splice () DeleteCount устанавливается на 0, поэтому мы не удаляем ни один элемент, но мы добавляем только «вторник» к массиву дней в индексе 1 с нулем;

let days = ['Monday', 'Tuesday', 'June', 'July', 'Wednesday'];

/* remove 2 elements starting from index 2 and then add 'Thursday and Friday' starting from index 2 also.*/

days.splice(2,  2, 'Thursday', 'Friday');// Monday, Tuesday, Wednesday, Thursday, Friday.

let days = ['Monday', 'Tuesday', 'June', 'July', 'Wednesday'];
//remove 2 elements starting from index 2.
days.splice(2, 2); // Monday, Tuesday, Wednesday;

Короче говоря, метод splice () может использоваться для добавления или удаления элемента или элементов из массива одновременно или в другое время.

  • Если DeleteCount равен 0 или отрицательно, элемент не удален.
  • Если добавлен элемент не указан, Splice () только удалит элементы (ы).
  • «Если DeleteCount равен или больше, чем количество элементов, оставшихся в массиве, начиная с начала), то все элементы от начала до конца массива будут удалены». -Mdn. Например
let names = ['Ayo', 'Ope', 'Ola'];
//delete 3 elements from names starting at index 0 (from the beginning)
names.splice(0, 3) // []

//delete 3 elements from names starting at index 1
names.splice(1, 3) // Ayo 
// Ayo is not removed because it has index zero.

Проверьте, понимаете ли вы это:

  • Сплайс (2, 0, «Элемент»)//Добавить «элемент» в индексе 2.
  • Сплайсин (2, 1)//Удалите элемент в индексе 2.
  • Сплайс (2, 0, «Айобами», «Опе»)//что это означает?
  • сплайс (0, 0, ‘айобами)//что это означает?
let days = ['Monday', 'Tuesday', 'June', 'Wednesday'];
days.splice(2, 1); // what will happen? You can check it in the console.

days.splice(0,5) // what will happen? You can check it in the console.

Метод splice () может добавлять и удалять элементы из массива.

slice([ start[, end]]);

Slice () создает новую мелкую копию массива, выбрав элементы, начинающиеся с данного аргумента начала, и заканчивается аргументом рядом с данным конечным аргументом.

let friends = ["Ope", "Ayo", "Tola"]; 

//starts from the beginning and ends at the index before the given end argument.
let goodFriends = friends.slice(0, 2);  // Ope, Ayo;
starts from the beginning and ends at the index before the given end argument.
let richFriends = friends.slice(0, 3) // Ope, Ayo, Tola;

Метод JavaScript concat () объединяет два массива с новым массивом (мелкая копия массива). Это может занять любое количество аргументов:

let friends = ["Ope", "Ayo", "Tola", "Wale"]; 
var richFriends = ["Prosper", "Celestine"];  
var combinedFriends = friends.concat(richFriends);      
console.log(combinedFriends) // Ope, Ayo, Tola, Wale, Prosper, Celestine

Примечание. Использование метода concat () на массиве не изменяет массив, он возвращает только новый массив.

array.indexOf(elememt, start);

Метод индекса ищет массив для элемента с начала до конца массива и возвращает положение/индекс элемента, если он найден или -1, если он не найден.

Мы также можем установить отправную точку для поиска.

let friends = ["Obama", "Trump", "Buhari"];
let indexOfTrump = friends.indexOf("Trump");// 1
array.lastIndexOf(element, start);

Метод LastIndexOF ищет массив для элемента от конца до начала массива и возвращает положение/индекс элемента, если он найден или -1, если он не найден.

Мы также можем установить отправную точку для поиска.

let friends = ["Obama", "Trump", "Buhari", "Ayobami"];
let indexOfTrump = friends.lastIndexOf("Buhari");// 2
array.includes(element, start)

Метод include () используется для проверки, содержит ли массив элемент или нет. Он возвращает True, если оно найдено, но возвращает false, если он не найден. include () чувствителен к корпусу

let friends = ["Obama", "Trump", "Buhari", "Ayobami"];
friends.includes("Trump");// true
Array.find(function(currentValue, index, array) {

  }, thiValue)

Он возвращает значение первого элемента в массиве, который проходит тест.

 let numbers = [1,2,3,4,5,6,7];
numbers.find(number => number > 3);// 4
Array.findIndex(function(currentValue, index, array) {

  }, thiValue)

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

let numbers = [1,2,3,4,5,6,7];
numbers.findIndex(number => number > 3);// 3
array.isArray(obj);

Он проверяет, является ли объект массивом или нет. Если это массив, верно возвращается, но false возвращается, если это не массив.

let numbers = [1,2,3,4,5,6,7];
Array.isArray(numbers)// true

Вот и все.

Увидимся на следующем уроке.

У вас трудно изучать и понимать JavaScript и создавать с ним проекты? JavaScript для полного новичка Преподает JavaScript и проектные основы с простыми иллюстрациями и примерами, которые делают все таким простым. Теперь вы можете справиться с любыми сложными проектами без страха.

Не доверяйте мне, получите бесплатно, чтобы судить самостоятельно: https://bit.ly/3o3tmyg

Оригинал: “https://dev.to/codingnninja/an-introduction-to-javascript-array-methods-3ec2”