JavaScript,Теорія

JavaScript. Методи, що отримують дані з масиву не змінюючи сам масив

Методи, що отримують дані з масиву не змінюючи сам масив: indexOf(), lastIndexOf(), find(), findIndex(), slice(), concat(), toString(), join()

Зміст

Пошук на інших ресурсах:

1. Методи indexOf() та lastIndexOf(). Повернути позиції першого та останнього входження елементу в масиві

Методи indexOf() та lastIndexOf() дозволяють повернути позиції першого та останнього входжень заданого елементу в масиві. Використання методів виглядає приблизно так

firstPos = array.indexOf(item)
lastPos = array.lastIndexOf(item)

тут

  • array – масив, в якому здійснюється пошук;
  • firstPos – позиція першого входження елементу item в масиві;
  • lastPos – позиція останнього входження елементу item в масиві.

Якщо елементу item немає в масиві array, то функції повертають -1.

Приклад.

// Функції indexOf() та lastIndexOf()
// Отримати позицію першого та останнього входження
// заданого елементу в масиві.

// 1. Обробка масиву цілих чисел
// 1.1. Оголосити масив чисел та вивести його
var A = new Array(2, 8, 3, 5, 4, 1, 2, 3, 4, 4, 5, 2)
console.log("A:")
console.log(A)

// 1.2. Отримати позиції першого та останнього входження числа 4
var first = A.indexOf(4)
var last = A.lastIndexOf(4)
console.log("A.indexOf(4) = " + first)
console.log("A.lastIndexOf(4) = " + last)

// 1.3. Отримати позиції неіснуючого елементу 9
first = A.indexOf(9) // first = -1
last = A.lastIndexOf(11) // last = -1
console.log("A.indexOf(9) = " + first)
console.log("A.lastIndexOf(11) = " + last)

// 2. Обробка масиву рядків. Пошук рядка
// 2.1. Оголосити масив рядків та вивести його
var S = ["abc", "def", "jklm", "ghi", "", "def", "jprst"]
console.log("--------------------------------")
console.log("S:")
console.log(S)

// 2.2. Визначити позицію першого та
// останнього входження рядка "jprst" в масиві S
first = S.indexOf("jprst")
last = S.lastIndexOf("jprst")
console.log("A.indexOf(\"jprst\") = " + first)
console.log("A.lastIndexOf(\"jprst\") = " + last)
console.log("Ok");

Результат

A:
[
2, 8, 3, 5, 4,
1, 2, 3, 4, 4,
5, 2
]
A.indexOf(4) = 4
A.lastIndexOf(4) = 9
A.indexOf(9) = -1
A.lastIndexOf(11) = -1
--------------------------------
S:
[
'abc', 'def',
'jklm', 'ghi',
'', 'def',
'jprst'
]
A.indexOf("jprst") = 6
A.lastIndexOf("jprst") = 6
Ok

  ⇑

2. Метод find(). Пошук елементу в масиві, що відповідає заданому критерію

Метод find() повертає елемент масиву, який відповідає заданому критерію. Критерій формується у спеціальній функції або лямбда-функцією.

Використання методу find() у програмі може бути приблизно таким

item = array.find(Func)

тут

  • array – вихідний масив;
  • item – шуканий елемент з масиву array, для якого функція Func() повертає true. Якщо елементу item немає в масиві, то повертається undefined;
  • Func – ім’я функції або лямда-виразу (лямда-функції), яка повертає true або false. Ця функція (вираз) задає код, за яким визначається чи задовільняє елемент масиву потрібному критерію.

Оголошення функції виглядає приблизно так

function Func(value, index, array) {
  // Виконання дій які повертають true або false
  // ...
}

тут

  • value – поточне значення масиву array, яке розглядається;
  • index – позиція поточного значення масиву array. Таким чином array[index]==value;
  • array – ім’я масиву, який розглядається.

Якщо для визначення критерію достатньо одного значення value, то параметри index та array у функції Func можна опустити

function Func(value) {
  // Виконання дій які повертають true або false
  // ...
}

Приклад.

// Метод find(). Отримати елемент масиву,
// який першим відповідає заданому критерію.
// Задача. Знайти елемент, який знаходиться в межах [40; 50].

// 1. Пошук в масиві чисел
// 1.1. Вихідний масив чисел
var A = new Array( 10, 21, 32, 131, 44, 25, 6, 17 )

// 1.2. Функція, яка визначає чи елемент відповідає заданому критерію,
// чи значення елементу знаходиться в діапазоні [40; 50]
function Range_40_50(value, index, array) {
  if ((array[index] >= 40) && (array[index] <= 50))
    return true
  else
    return false
}

// 1.3. Знайти елемент
var item = A.find(Range_40_50) // item = 44

// 1.4. Вивести елемент
console.log("item = " + item)

// 2. Пошук в масиві рядків. Знайти перший рядок, який починається на букву 'c'
// 2.1. Вихідний масив
var S = ["abc", "ac", "bcd", "cde", "bda", "bd", "cbcd"]

// 2.2. Оголосити лямбда-функцію при виклику функції find().
// Лямбда-функція визначає, чи перший символ в рядку 'c'
var str = S.find((value) => value[0] == 'c');

// 2.3. Вивести результат
console.log("str = " + str) // str = cde

Результат

item = 44
str = cde

  ⇑

3. Метод findIndex(). Отримати індекс елементу масиву, який відповідає заданому критерію

Метод findIndex() повертає позицію (індекс) елементу, який задовільняє заданому критерію. Критерій визначається заданою функцією або лямбда-функцією. Метод є подібний до методу find() тільки замість самого елементу повертається його позиція.

Використання методу в програмі наступне

index = array.findIndex(Func)

тут

  • array – масив, в якому здійснюється пошук елементу;
  • index – шукана позиція;
  • Func – функція (лямбда-функція), яка повертає значення true або false. Саме вираз, що формує значення true, визначає критерій відбору потрібного елементу.

У свою чергу, функція Func() оголошується одним з двох способів в залежності від необхідності використання тих чи інших параметрів

function Func(value, index, obj) {
  // Виконувані дії
  // ...
}

або

function Func(value) {
  // Виконувані дії
  // ...
}

тут

  • obj – масив, що обробляється;
  • value – значення елементу з масиву obj. Для цього значення справедлива рівність value==obj[index];
  • index – позиція елементу в масиві obj.

Також замість функції можливе використання лямбда-функції на кшталт

(value, index, obj) => expression

або

(value) => expression

тут

  • expression – умовний вираз, який повертає true або false.

Приклад.

// Метод findIndex().
// Знайти елемент, що відповідає заданому критерію

// 1. Задача. Знайти перший від'ємний елемент масиву.
// 1.1. Вихідний масив чисел
var A1 = new Array( 10, 21, -12, 33, -41, 55, 60, 87 )

// 1.2. Оголосити функцію, яка повертає true, якщо
// value<0
function Is_Negative(value, index, obj) {
  return obj[index] < 0
}

// 1.3. Виклик findIndex() - знайти індекс від'ємного елементу
var index = A1.findIndex(Is_Negative)

// 1.4. Вивести результат
console.log("A1 = " + A1)
console.log("index = " + index)

// 2. Задача. Знайти індекс першого рядка, довжина
// якого більше 3 символів.
// 2.1. Оголосити масив рядків
var B1 = ["ab", "abc", "abcd", "", "jklmn", ""]

// 2.2. Сформувати лямбда-функцію, яка повертає true,
// якщо довжина рядка 4 і більше символів
var expr = (value) => value.length >= 4

// 2.3. Викликати метод findIndex()
index = B1.findIndex(expr)

// 2.4. Вивести результат
console.log("B1 = " + B1)
console.log("index = " + index)

Результат

A1 = 10,21,-12,33,-41,55,60,87
index = 2
B1 = ab,abc,abcd,,jklmn,
index = 2

  ⇑

4. Метод slice(). Отримати підмасив з заданого масиву

З допомогою методу slice() можна отримати підмасив з заданого масиву. У цьому випадку межі підмасиву можуть встановлюватись різними способами. Відповідно, метод slice() має 3 випадки використання

array2 = array1.slice()
array2 = array1.slice(a)
array2 = array1.slice(a, b)

тут

  • array1 – вихідний масив;
  • array2 – результуючий підмасив, який отримується з вихідного масиву array1 та значень a, b;
  • a, b – відповідно нижній та верхній індекси діапазону підмасиву. Верхній індекс b вказує позицію елементу, який слідує за останнім елементом отримуваного підмасиву.

Перша реалізація методу slice() без параметрів повертає увесь вихідний масив. Друга реалізація методу з одним параметром повертає підмасив, який починається зі значення цього параметру і до кінця масиву. Третя реалізація повертає підмасив, що визначений діапазоном індексів [a; b] вихідного масиву.

Приклад.

// Метод slice(). Отримати підмасив з заданого масиву
// 1. Оголосити масив чисел
var A1 = new Array(0, 1, 2, 3, 4, 5, 6, 7)

// 2. Отримати підмасив

var A2 = A1.slice(2, 4) // A2 = [ 2,3 ]
var A3 = A1.slice() // A3 = [ 0,1,2,3,4,5,6,7 ]
var A4 = A1.slice(5) // A4 = [ 5,6,7 ]

// 3. Вивести масиви A2 та A3
console.log("A2 => " + A2)
console.log("A3 => " + A3)
console.log("A4 => " + A4)

Результат

A2 => 2,3
A3 => 0,1,2,3,4,5,6,7
A4 => 5,6,7

  ⇑

5. Метод concat(). Отримати новий масив, що доповнений іншими елементами та масивами

Метод concat() дозволяє отримати новий масив, який формується додаванням до поточного масиву інших масивів чи елементів.

У спрощеному вигляді застосування методу має вигляд:

Res = A.concat(item1, item2, ..., itemN)

де

  • item1, item2, itemN – окремі елементи або масиви;
  • A – масив, до якого додаються елементи (масиви) item1, item2, itemN;
  • Res – результуючий масив, який є додаванням масиву A1 та масивів (елементів) item1, item2, itemN.

Нижче наведено приклад використання методу concat().

// Методи роботи з масивами

// Функція concat().
// Конкатенує масиви
// 1. Для цілих чисел
// 1.1. Оголосити 2 масиви
var A1 = new Array(2, 8, 3, 5, 4, 1)
var A2 = new Array(3, 11, 7, 6)

// 1.2. Додати до масиву A1 масив A2 та масив [10, 20]
A1 = A1.concat(A2, [10, 20])

// 1.3. Вивести масив A1
document.write("A1:<br>")
for (var i = 0; i < A1.length; i++)
  document.write(A1[i] + " ")
document.write("<br>")

// 2. Для об'єктів різних типів
// 2.1. Створити 2 об'єкти
A1 = [ "abc", true, 23, 0.005 ]
A2 = [ "Hello", '+' ]

// 2.2. Додати до масиву A2 один масив та один елемент
A2 = A2.concat(A1, 777)

// 2.3. Вивести масив A2
document.write("A2:<br>")
for (var i = 0; i < A2.length; i++)
  document.write(A2[i] + " ")
document.write("<br>")

Результат

A1:
2 8 3 5 4 1 3 11 7 6 10 20
A2:
Hello + abc true 23 0.005 777

  ⇑

6. Метод toString(). Перетворити масив в рядок

З допомогою методу toString() можна перетворити масив у рядок. Використання методу наступне

str = array.toString()

де

  • array – масив елементів;
  • str – результуючий рядок.

Приклад.

// Метод toString(). Перетворити масив у рядок

// 1. Масив чисел
var A = new Array( 0, 1, 2, 3, 4, 5, 6, 7 )
var str = A.toString()
console.log(str) // str = "0,1,2,3,4,5,6,7"

// 2. Масив різнотипних елементів
var B = [true, 2.88, '+', "abcd"]
str = B.toString()
console.log(str)

Результат

0,1,2,3,4,5,6,7
true,2.88,+,abcd

  ⇑

7. Метод join(). Об’єднати всі елементи масиву в один рядок

Метод join() повертає рядок символів, який містить усі елементи масиву, які розділені заданим символом або рядком. Символ чи рядок, що розділяють елементи, вказуються аргументом методу join().

У програмі метод join() використовується одним з двох способів. Перший спосіб передбачає використання аргументу

str = array.join(separator)

тут

  • array – масив, елементи якого формуються в рядок str;
  • str – результуючий рядок;
  • separator – символ-розділювач або рядок-розділювач.

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

str = array.join()

В цьому випадку розділювачем встановлюється символ ‘ , ‘ (кома).

Приклад.

// Функція join()
// Об'єднати в рядок усі елементи масиву з заданим розділювачем.

// 1. Обробка масиву цілих чисел
// 1.1. Оголосити масив чисел та вивести його
var A = new Array(2, 8, 3, 5, 4, 1, 2, 3, 4, 4, 5, 2)
console.log("A:")
console.log(A)

// 1.2. Викликати метод join() з параметром
var str = A.join('+')
console.log(str)

// 1.3. Викликати метод join() без параметру
str = A.join() // A.join(',') - за замовчуванням символ ',' (кома)
console.log(str)

// 2. Обробка масиву дійсних чисел
// 2.1. Оголосити масив чисел та вивести його
var B = [2.8, 3.5, -1.4, -0.9905]
console.log("------------------------")
console.log("B:")
console.log(B)

// 2.2. Викликати метод join()
str = B.join(" ") // задається рядок з 2 пробілами
console.log(str)

console.log("Ok");

Результат

A:
[
2, 8, 3, 5, 4,
1, 2, 3, 4, 4,
5, 2
]
2+8+3+5+4+1+2+3+4+4+5+2
2,8,3,5,4,1,2,3,4,4,5,2
------------------------
B:
[ 2.8, 3.5, -1.4, -0.9905 ]
2.8 3.5 -1.4 -0.9905
Ok

  ⇑

Споріднені теми

  ⇑