Вспомогательные методы JavaScript

Опубликовано: 5 Января, 2022

Массив в JavaScript обычно рассматривается как «объекты-списки». Проще говоря, мы можем сказать, что массив - это объект, который содержит некоторые значения. Но массив - это особый объект в JavaScript. Массив может хранить разнородные структуры данных. Он может хранить значения данных любого типа, такие как объекты и массивы.

Javascript

const arr = [
1, // Number type
"Praveen kumar" , // String type
{ // Object type
firstname: "Christopher" ,
lastname: 'Nolan'
},
[9.1, 9.2, 8.7, 5] // Array type
];
console.log( arr );

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

В приведенной выше программе и объект, и массив хранят данные одинаково. Но есть разница.

Первый - это массив, содержащий свойство с именем length. Он сообщает нам количество элементов в массиве. Это не единственная разница. Основное различие проявляется, когда вы открываете свойство __proto__ как массива, так и объекта. Массив имеет несколько отличных вспомогательных методов, которые мы собираемся обсудить в этой статье. Давайте обсудим некоторые важные методы.

1. Метод every (): этот метод используется для проверки, все ли элементы массива проходят тест, который реализуется переданной функцией высшего порядка. Под капотом компилятор выполняет итерацию по массиву сотрудников и проверяет всех сотрудников , является он разработчиком или нет. Как и в этом случае, он должен вернуть false .

Вход:

 функция предиката

Выход:

 Логическое значение

Javascript

const employees = [
{ name: "Sam" , age: 25, role: "Developer" },
{ name: "John" , age: 32, role: "Manager" },
{ name: "Ronaldo" , age: 29, role: "Architect" },
{ name: "Perker" , age: 25, role: "Developer" },
{ name: "Sophia" , age: 38, role: "Director" },
{ name: "kristine" , age: 21, role: "Developer" },
];
function isDeveloper(employee) {
return employee.role === "Developer" ;
}
console.log(employees.every(isDeveloper));

Выход:

 ложный

2. Метод fill (): этот метод заполняет массив статическим значением. Он отменяет все значения массива, начиная с первого элемента (0-й индекс) и до последнего элемента (индекс array.length-1).

Вход:

value

Выход:

 Модифицированный массив

Javascript

const employees = [
{ name: "Sam" , age: 25, role: "Developer" },
{ name: "John" , age: 32, role: "Manager" },
{ name: "Ronaldo" , age: 29, role: "Architect" },
{ name: "Perker" , age: 25, role: "Developer" },
{ name: "Sophia" , age: 38, role: "Director" },
{ name: "kristine" , age: 21, role: "Developer" },
];
const newEmployees = employees.fill(
{ name: "Sam" , age: 25, role: "Developer" });
console.log(employees);
console.log(newEmployees === employees); // true

Выход:

 [
 {имя: 'Сэм', возраст: 25, роль: 'Разработчик'},
 {имя: 'Сэм', возраст: 25, роль: 'Разработчик'},
 {имя: 'Сэм', возраст: 25, роль: 'Разработчик'},
 {имя: 'Сэм', возраст: 25, роль: 'Разработчик'},
 {имя: 'Сэм', возраст: 25, роль: 'Разработчик'},
 {имя: 'Сэм', возраст: 25, роль: 'Разработчик'}
]

правда

3. Метод filter (): этот метод фильтрует массив, который проходит тест, с переданной ему функцией. Он возвращает новый массив.

Вход:

 Функция предиката

Выход :

 Новый массив с отфильтрованными элементами

Javascript

const employees = [
{ name: "Sam" , age: 25, role: "Developer" },
{ name: "John" , age: 32, role: "Manager" },
{ name: "Ronaldo" , age: 29, role: "Architect" },
{ name: "Perker" , age: 25, role: "Developer" },
{ name: "Sophia" , age: 38, role: "Director" },
{ name: "kristine" , age: 21, role: "Developer" },
];
function filterDevEmp(employee) {
return employee.role === "Developer" ;
}
const filteredDevEmployees = employees.filter(filterDevEmp);
console.log(filteredDevEmployees);

Выход:

 [
 {имя: 'Сэм', возраст: 25, роль: 'Разработчик'},
 {имя: 'Perker', возраст: 25, роль: 'Developer'},
 {имя: 'kristine', возраст: 21, роль: 'Разработчик'}
]

4. Метод find (): этот метод возвращает первый элемент, прошедший проверку с предоставленной функцией.

Вход:

 Функция предиката

Выход:

 Элемент, прошедший проверку else undefined

Javascript

const employees = [
{ name: "Sam" , age: 25, role: "Developer" },
{ name: "John" , age: 32, role: "Manager" },
{ name: "Ronaldo" , age: 29, role: "Architect" },
{ name: "Perker" , age: 25, role: "Developer" },
{ name: "Sophia" , age: 38, role: "Director" },
{ name: "kristine" , age: 21, role: "Developer" },
];
function searchFirstDevEmployee(employee) {
return employee.role === "Developer" ;
}
const firstEmployeeDeveloper =
employees.find(searchFirstDevEmployee);
console.log(firstEmployeeDeveloper);

Выход:

 {имя: 'Сэм', возраст: 25, роль: 'Разработчик'}

5. Метод findIndex (): этот метод возвращает индекс первого элемента, прошедшего проверку с предоставленной функцией. Его можно использовать как для примитивов, так и для объектов.

Вход:

 Функция предиката

Выход:

 индекс элемента, прошедшего проверку else -1

Javascript

const employees = [
{ name: "Sam" , age: 25, role: "Developer" },
{ name: "John" , age: 32, role: "Manager" },
{ name: "Ronaldo" , age: 29, role: "Architect" },
{ name: "Perker" , age: 25, role: "Developer" },
{ name: "Sophia" , age: 38, role: "Director" },
{ name: "kristine" , age: 21, role: "Developer" },
];
function searchFirstArchitectEmployeeIndex(employee) {
return employee.role === "Architect" ;
}
const firstEmpArchitectIndex =
employees.findIndex(searchFirstArchitectEmployeeIndex);
console.log(firstEmpArchitectIndex);

Выход:

 2

6. Метод flat (): этот метод используется для сглаживания массива или рекурсивного объединения массива с элементами подмассива.

Вход:

 глубина (значение по умолчанию 1)

Выход:

 Новый массив

Javascript

const arr1 = [1, [2, 3, 4], 5];
const flattened1 = arr1.flat();
console.log(flattened1); // [ 1, 2, 3, 4, 5 ]
const arr2 = [1, 2, [3, 4, [5, 6]]];
const flattened2 = arr2.flat();
console.log(flattened2); // [1, 2, 3, 4, [5, 6]]

Выход:

 [1, 2, 3, 4, 5]
[1, 2, 3, 4, [5, 6]]

7. Метод forEach (): это один из наиболее часто используемых методов. Он используется для вызова или выполнения предоставленной / переданной функции один раз для каждого элемента в массиве. Он изменяет исходный массив.

Вход:

 функция

Выход:

 неопределенный

Javascript

const employees = [
{ name: "Sam" , age: 25, role: "Developer" },
{ name: "John" , age: 32, role: "Manager" },
{ name: "Ronaldo" , age: 29, role: "Architect" },
{ name: "Perker" , age: 25, role: "Developer" },
{ name: "Sophia" , age: 38, role: "Director" },
{ name: "kristine" , age: 21, role: "Developer" },
];
function increaseAgeByOne(employee) {
employee.age += 1;
}
employees.forEach(increaseAgeByOne);
console.log(employees);

Выход:

 [
 {имя: 'Сэм', возраст: 26, роль: 'Разработчик'},
 {имя: 'Джон', возраст: 33, роль: 'Менеджер'},
 {имя: 'Роналду', возраст: 30, роль: 'Архитектор'},
 {имя: 'Perker', возраст: 26, роль: 'Разработчик'},
 {имя: 'София', возраст: 39 лет, роль: 'Режиссер'},
 {имя: 'kristine', возраст: 22, роль: 'Разработчик'}
]

8. Метод includes (): этот метод используется для проверки того, присутствует ли элемент в массиве или нет. Он проверяет значение в примитиве и ссылку в случае объекта.

Вход:

 ценить

Выход:

 Массив погоды логического значения включает значение или нет

Javascript

const numbers = [1, 6, 8, 11, 5, 9, 4];
console.log( numbers.includes(6) );
console.log( numbers.includes(3) );

Выход:

 правда
ложный

В случае объекта

Javascript

const arch = { name: "Ronaldo" , age: 29, role: "Architect" };
const employees = [
{ name: "Sam" , age: 25, role: "Developer" },
{ name: "John" , age: 32, role: "Manager" },
arch,
{ name: "Perker" , age: 25, role: "Developer" },
{ name: "Sophia" , age: 38, role: "Director" },
{ name: "kristine" , age: 21, role: "Developer" },
];
console.log(employees.includes(arch));

Выход:

 правда

9. Метод indexOf (): этот метод возвращает индекс первого элемента, прошедшего проверку с предоставленной функцией. В качестве входных данных требуется значение. Его следует использовать в случае примитивов. Как и в случае с объектами, он проверит ссылку на него. Проверка чувствительна к регистру.

Вход:

 ценить

Выход:

 индекс элемента, прошедшего проверку else -1

Javascript

const names = [ "Sam" , "John" , "Ronaldo" ,
"Perker" , "Sophia" , "kristine" ];
names.indexOf( "John" );
names.indexOf( "john" );

Выход:

 1
-1

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

Вход:

 разделитель

Выход:

 Новая строка

Javascript

const names = [ "Sam" , "John" , "Ronaldo" ,
"Perker" , "Sophia" , "kristine" ];
console.log( names.join() );
console.log( names.join( " -> " ) );

Выход:

 'Сэм, Джон, Роналду, Перкер, София, Кристина'
 'Сэм -> Джон -> Роналду -> Перкер -> София -> Кристина'

11. Метод lastIndexOf (): он ищет элемент в массиве и возвращает последний индекс элементов, представленных в массиве. В качестве входных данных требуется значение. Его следует использовать в случае примитивов. Как и в случае с объектами, он проверит ссылку на него.

Вход:

 ценить

Выход:

 индекс последнего элемента, который равен (тест с использованием ===) 
к значению при условии еще -1

Javascript

const roles = [ "Developer" , "Manager" , "Architect" ,
"Developer" , "Director" , "Developer" ];
console.log(roles.lastIndexOf( "Developer" ));

Выход:

 5

12. Метод map (): этот метод вызывает предоставленную функцию и выполняет эту функцию для каждого элемента. Он возвращает новый массив.

Вход:

 функция

Выход:

 новый массив

Javascript

const employees = [
{ name: "Sam" , age: 25, role: "Developer" },
{ name: "John" , age: 32, role: "Manager" },
{ name: "Ronaldo" , age: 29, role: "Architect" },
{ name: "Perker" , age: 25, role: "Developer" },
{ name: "Sophia" , age: 38, role: "Director" },
{ name: "kristine" , age: 21, role: "Developer" },
];
function getName(employee) {
return employee.name;
}
const names = employees.map(getName);
console.log(names);
function concetenateNameWithAge(employee) {
return employee.name + " " + employee.age;
}
const nameWithAge = employees.map(concetenateNameWithAge);
console.log(nameWithAge);

Выход:

 [«Сэм», «Джон», «Роналду», «Перкер», «София», «Кристина»]
[
 'Сэм 25',
 'Иоанна 32',
 'Роналду 29',
 'Перкер 25',
 'София 38',
 'Кристина 21'
]

13. Метод pop (): удаляет последний элемент из массива и возвращает удаленный элемент.

Выход:

 Удаленный элемент

Javascript

const employees = [
{ name: "Sam" , age: 25, role: "Developer" },
{ name: "John" , age: 32, role: "Manager" },
{ name: "Ronaldo" , age: 29, role: "Architect" },
{ name: "Perker" , age: 25, role: "Developer" },
{ name: "Sophia" , age: 38, role: "Director" },
{ name: "kristine" , age: 21, role: "Developer" },
];
const removedEmployee = employees.pop();
console.log(removedEmployee);
console.log(employees.length);

Выход:

 {имя: 'kristine', возраст: 21, роль: 'Разработчик'}
 5

14. Метод push (): он добавляет или выталкивает элемент в качестве последнего элемента в массиве.

Вход:

 Элемент массива

Выход:

 новая длина массива

Javascript

const employees = [
{ name: "Sam" , age: 25, role: "Developer" },
{ name: "John" , age: 32, role: "Manager" },
{ name: "Ronaldo" , age: 29, role: "Architect" },
{ name: "Perker" , age: 25, role: "Developer" },
{ name: "Sophia" , age: 38, role: "Director" },
{ name: "kristine" , age: 21, role: "Developer" },
];
const totalEmployees = employees.push({
name: "Donald" , age: 21, role: "Manager" });
console.log(employees);
console.log( totalEmployees );

Выход:

 [
 {имя: 'Сэм', возраст: 25, роль: 'Разработчик'},
 {имя: 'Джон', возраст: 32, роль: 'Менеджер'},
 {имя: 'Роналду', возраст: 29, роль: 'Архитектор'},
 {имя: 'Perker', возраст: 25, роль: 'Developer'},
 {имя: 'София', возраст: 38, роль: 'Режиссер'},
 {имя: 'kristine', возраст: 21, роль: 'Разработчик'},
 {имя: 'Дональд', возраст: 21, роль: 'менеджер'}
]
7

15. Метод reduce (). Метод уменьшения () массива выполняет функцию сокращения, которую вы передаете каждому элементу, и всегда возвращает одно значение. Функция редуктора принимает 4 параметра

  • Аккумулятор
  • Текущая стоимость
  • Текущий индекс массива
  • Исходный массив

Примечание: функция редуктора всегда возвращает значение, и значение присваивается аккумулятору на следующей итерации.

Вход:

 Первый аргумент - это функция редуктора, которая требует минимум 
2 значение, т.е. аккумулятор и текущее значение. Второй 
аргумент - начальное значение аккумулятора.

Выход:

 Одно значение.

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

Javascript

const employees = [
{ name: "Sam" , age: 25, role: "Developer" },
{ name: "John" , age: 32, role: "Manager" },
{ name: "Ronaldo" , age: 29, role: "Architect" },
{ name: "Perker" , age: 25, role: "Developer" },
{ name: "Sophia" , age: 38, role: "Director" },
{ name: "kristine" , age: 21, role: "Developer" },
];
function getRoleReducer(acc, currentValue) {
acc.push(currentValue.role);
return acc;
}
const roles = employees.reduce(getRoleReducer, []);
console.log(roles);

Выход:

 [
 "Разработчик",
 'Менеджер',
 'Архитектор',
 "Разработчик",
 'Директор',
 'Разработчик'
]

16. Метод reduceRight (): он точно такой же, как метод уменьшения массива, но итерация начинается справа налево.

Javascript

const employees = [
{ name: "Sam" , age: 25, role: "Developer" },
{ name: "John" , age: 32, role: "Manager" },
{ name: "Ronaldo" , age: 29, role: "Architect" },
{ name: "Perker" , age: 25, role: "Developer" },
{ name: "Sophia" , age: 38, role: "Director" },
{ name: "kristine" , age: 21, role: "Developer" },
];
function getRoleReducer(acc, currentValue) {
acc.push(currentValue.role);
return acc;
}
const roles = employees.reduceRight(getRoleReducer, []);
console.log(roles);

Выход:

 [
 "Разработчик",
 'Директор',
 "Разработчик",
 'Архитектор',
 'Менеджер',
 'Разработчик'
]

17. Метод reverse (): этот метод переворачивает элементы массива.

Выход:

 Тот же массив, но с перевернутыми элементами

Javascript

const employees = [
{ name: "Sam" , age: 25, role: "Developer" },
{ name: "John" , age: 32, role: "Manager" },
{ name: "Ronaldo" , age: 29, role: "Architect" },
{ name: "Perker" , age: 25, role: "Developer" },
{ name: "Sophia" , age: 38, role: "Director" },
{ name: "kristine" , age: 21, role: "Developer" },
];
const reversedEmployees = employees.reverse();
console.log(reversedEmployees);
console.log(employees === reversedEmployees);

Выход:

 [
 {имя: 'kristine', возраст: 21, роль: 'Разработчик'},
 {имя: 'София', возраст: 38, роль: 'Режиссер'},
 {имя: 'Perker', возраст: 25, роль: 'Developer'},
 {имя: 'Роналду', возраст: 29, роль: 'Архитектор'},
 {имя: 'Джон', возраст: 32, роль: 'Менеджер'},
 {имя: 'Сэм', возраст: 25, роль: 'Разработчик'}
]
правда

18. Метод shift (): удаляет первый элемент из массива и возвращает удаленный элемент.

Выход:

 удаленный элемент или если массив пуст, возвращает undefined

Javascript

const employees = [
{ name: "Sam" , age: 25, role: "Developer" },
{ name: "John" , age: 32, role: "Manager" },
{ name: "Ronaldo" , age: 29, role: "Architect" },
{ name: "Perker" , age: 25, role: "Developer" },
{ name: "Sophia" , age: 38, role: "Director" },
{ name: "kristine" , age: 21, role: "Developer" },
];
const removedEmployee = employees.shift();
console.log(removedEmployee);
console.log(employees);

Выход:

 {имя: 'Сэм', возраст: 25, роль: 'Разработчик'}
[
 {имя: 'Джон', возраст: 32, роль: 'Менеджер'},
 {имя: 'Роналду', возраст: 29, роль: 'Архитектор'},
 {имя: 'Perker', возраст: 25, роль: 'Developer'},
 {имя: 'София', возраст: 38, роль: 'Режиссер'},
 {имя: 'kristine', возраст: 21, роль: 'Разработчик'}
]

19. Метод slice (): Метод slice () возвращает новый массив с элементами, указанными в начальном и конечном индексах. Новый массив содержит элемент в начальном индексе, но не включает элемент в конце индекса. Если конечный индекс не указан, он рассматривается как array.length-1 . Метод среза не изменяет исходный массив.

Вход:

 Начальный индекс и конечный индекс

Выход:

 Новый массив

HTML

const employees = [
JavaScript

РЕКОМЕНДУЕМЫЕ СТАТЬИ

Что такое тернарный оператор?
23 Января, 2024
Ember.js Свойство содержимого ArrayProxy
24 Февраля, 2023
Ошибка «Объект не определен» при попытке повернуть объект в three.js
24 Февраля, 2023
Как изменить строку в JavaScript?
23 Февраля, 2023
Как создать массив с несколькими объектами, имеющими несколько вложенных пар ключ-значение в JavaScript?
23 Февраля, 2023
Создайте адаптивную скользящую форму входа и регистрации с использованием HTML CSS и JavaScript
23 Февраля, 2023
Что такое модули в Typescript?
23 Февраля, 2023
Как создать регулярное выражение, принимающее только специальную формулу?
23 Февраля, 2023