Каковы важные методы работы с массивами в JavaScript?

В этой статье мы попытаемся понять различные важные методы Array (например, push (), pop () и т.д.) С помощью определенных примеров.

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

Синтаксис:

Мы можем использовать следующий синтаксис для простого создания массива (т.е. С помощью этих [] литералов).

let array = [element1, element2, .....]

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

let array = new Array (element1, elemnet2, .....);

Пример:

Javascript

<script>

let array = ['Hello',

'GeeksforGeeks', 'JavaScript'];

console.log(array);

let newArray = new Array ('Hello',

'GeeksforGeeks', 'JavaScript');

console.log(newArray);

</script>

Вывод приведенного выше фрагмента кода будет следующим:

['Hello', 'GeeksforGeeks', 'JavaScript']
['Hello', 'GeeksforGeeks', 'JavaScript']

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

Методы массива JavaScript

1. Метод push (): этот метод используется для вставки элементов с конца в массив.

Пример:

Javascript

<script>

let array = ['Hello',

'GeeksforGeeks', 'JavaScript'];

array.push('React');

console.log(array);

</script>

Вывод приведенного выше фрагмента кода будет следующим:

[ 'Hello', 'GeeksforGeeks', 'JavaScript', 'React' ]

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

Пример:

Javascript

<script>

let array = ["Hello", "GeeksforGeeks", "JavaScript"];

let lastElement = array.pop();

console.log(lastElement);

console.log(array);

</script>

Вывод приведенного выше фрагмента кода будет следующим:

JavaScript
[ 'Hello', 'GeeksforGeeks' ]

3. Метод shift (): этот метод используется для удаления первого элемента из массива.

Пример:

Javascript

<script>

let array = ["Hello", "GeeksforGeeks", "JavaScript"];

let firstElement = array.shift();

console.log(firstElement);

console.log(array);

</script>

Вывод приведенного выше фрагмента кода будет следующим:

Hello
[ 'GeeksforGeeks', 'JavaScript' ]

4. Метод unshift (): этот метод используется для добавления элементов в массив с лицевой стороны.

Пример:

Javascript

<script>

let array = ["Hello", "GeeksforGeeks", "JavaScript"];

array.unshift("React");

console.log(array);

</script>

Вывод приведенного выше фрагмента кода будет следующим:

[ 'React', 'Hello', 'GeeksforGeeks', 'JavaScript' ]

5. Метод indexOf (): этот метод используется для поиска индекса определенного элемента в массиве.

Пример:

Javascript

<script>

let array = ["Hello", "GeeksforGeeks", "JavaScript"];

console.log(array.indexOf('GeeksforGeeks'));

</script>

Вывод приведенного выше фрагмента кода будет следующим:

1

6. Метод includes (): этот метод используется для проверки, содержит ли массив указанный элемент или нет.

Пример:

Javascript

<script>

let array = ["Hello", "GeeksforGeeks", "JavaScript"];

console.log(array.includes("GeeksforGeeks"));

console.log(array.includes("React"));

</script>

Вывод приведенного выше фрагмента кода будет следующим:

true
false

7. Метод concat (): этот метод используется для объединения или простого соединения двух разных массивов от конца до конца.

Пример:

Javascript

<script>

let firstArray = ["Hello",

"GeeksforGeeks", "JavaScript"];

let secondArray = ["React"];

let newArray = firstArray.concat(secondArray);

console.log(firstArray);

console.log(secondArray);

console.log(newArray);

</script>

Вывод приведенного выше фрагмента кода будет следующим:

[ 'Hello', 'GeeksforGeeks', 'JavaScript' ]
[ 'React' ]
[ 'Hello', 'GeeksforGeeks', 'JavaScript', 'React' ]

8. Метод forEach (): этот метод работает как цикл над массивом, где для каждого элемента функция выполняется только один раз. Этот метод полезен для сокращения синтаксиса цикла for, но этот метод ничего не возвращает в своем выводе.

Пример:

Javascript

<script>

let array = ["Hello", "GeeksforGeeks", "JavaScript"];

array.forEach(function(element){

console.log(element)

});

</script>

Вывод приведенного выше фрагмента кода будет следующим:

Hello
GeeksforGeeks
JavaScript

9. Метод sort (): этот метод сортирует элементы массива в алфавитном порядке по возрастанию.

Пример:

Javascript

<script>

let array = ["Hello", "GeeksforGeeks", "JavaScript"];

console.log(array);

array.sort();

console.log(array);

</script>

Вывод приведенного выше фрагмента кода будет следующим:

[ 'Hello', 'GeeksforGeeks', 'JavaScript' ]
[ 'GeeksforGeeks', 'Hello', 'JavaScript' ]

10. Метод map (): этот метод выполняет итерацию по массиву, преобразует массив в соответствии с заданными пользователем условиями и возвращает новый массив. Используя этот более короткий синтаксис, можно легко сделать код более читаемым и понятным.

Пример:

Javascript

<script>

let oldArray = [1 , 2 , 3 , 4 , 5];

console.log(oldArray);

let newArray = oldArray.map(function(element){

return element * 5;

});

console.log(newArray);

</script>

Вывод приведенного выше фрагмента кода будет следующим:

[ 1, 2, 3, 4, 5 ]
[ 5, 10, 15, 20, 25 ]

11. Метод reduce (): этот метод использует функцию редуктора, которая сводит результаты к одному выходу.

Пример:

Javascript

<script>

let oldArray = [1, 2, 3, 4, 5];

console.log(oldArray);

let sumOfElements = oldArray.reduce(

function (accumulator, element) {

return accumulator + element;

});

console.log(sumOfElements);

</script>

Вывод приведенного выше фрагмента кода будет следующим:

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

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

Пример:

Javascript

<script>

let oldArray = [1, 2, 3, 4, 5];

console.log(oldArray);

let newArray = oldArray.filter(function (element) {

return element % 2 === 0;

});

console.log(newArray);

</script>

Вывод приведенного выше фрагмента кода будет следующим:

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

13. Метод find ()и findIndex () : этот метод находит первое значение, которое передает указанные пользователем условия, а метод findIndex () находит первое значение индекса, которое передает указанные пользователем условия.

Пример:

Javascript

<script>

let arr = [1, 2, 3, 4, 5];

let findElement = arr.find(function(element){

return element > 4

});

console.log(findElement);

let findIndexValue = arr.findIndex(function(element){

return element >= 4

});

console.log(findIndexValue);

</script>

Вывод приведенного выше фрагмента кода будет следующим:

5 
3

14. Метод slice ()и splice () : slice () выбирает указанное количество элементов, не влияя на исходные элементы массива, тогда как splice () удаляет выбранные элементы из самого исходного массива.

Javascript

<script>

let arr = [1, 2, 3, 4, 5];

let sliceArray = arr.slice(0, 2);

console.log("Slice Array: " + sliceArray);

console.log("Original Array: " + arr);

let spliceArray = arr.splice(0, 2);

console.log("Slice Array: " + spliceArray);

console.log("Original Array: " + arr);

</script>

Вывод приведенного выше фрагмента кода будет следующим:

Slice Array: 1,2
Original Array: 1,2,3,4,5
Slice Array: 1,2
Original Array: 3,4,5

15. Метод some ()и every () : метод some () проверяет указанные пользователем условия на некоторых элементах массива (т.е. он проверяет только несколько элементов), тогда как метод every () проверяет указанные пользователем условия. для каждого элемента массива затем возвращает результаты в истинном или ложном виде.

Пример:

Javascript

<script>

let arr = [1, 2, 3, 4, 5];

let NumbersGreaterThanZero = arr.every(

function(element){

return element > 0

});

let NumbersLessThanZero = arr.some(

function(element){

return element < 0

});

console.log(NumbersGreaterThanZero);

console.log(NumbersLessThanZero);

</script>

Вывод приведенного выше кода будет следующим:

true
false