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

  ⇑

Связанные темы

  ⇑