Методы, которые можно использовать как для строк, так и для массивов JavaScript

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

Вступление

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

В частности, для строк и массивов это методы concat, indexOf и slice. В этой статье мы поймем, что такое каждый из этих методов, как их использовать, а также отличия и сходства с их использованием в строках и массивах.

`concat`: слияние (неразрушающее)

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

Интересный факт: для массивов concat копирует ссылки на объекты оригинала в новый массив, так что и исходный, и новый массив ссылаются на один и тот же объект! Следовательно, если объект, на который имеется ссылка, изменяется, изменения видны как для нового, так и для исходного массивов. Однако для строк изменения исходной или возвращенной строки не влияют на другую.

Примечание по производительности: особенно для строк настоятельно рекомендуется использовать операторы присваивания (+, + =) вместо метода concat.

// no nested arrays
const array1 = ['a', 'b', 'c']
const array2 = ['d', 'e', 'f']
const array3 = [‘g’, ‘h’, ‘i’]
const array 4 = array1.concat(array2, array3)
console.log(array4)
// ["a", "b", "c", "d", "e", "f", "g", "h", "i"]
// nested array
const array1 = ['a', 'b', 'c']
const array2 = ['d', 'e', 'f', [‘g’, ‘h’, ‘i’]]
const array3 = array1.concat(array2)
console.log(array3)
// ["a", "b", "c", "d", "e", "f", ["g", "h", “i”]]
// strings
const str1 = 'Hello'
const str2 = 'World'
console.log(str1.concat(' ', str2))
// "Hello World"
console.log(str2.concat(', ', str1))
// "World, Hello"

indexOf: найти индекс элемента (неразрушающий)

И для массивов, и для строк indexOf проверяет каждый элемент на равенство с указанным значением и возвращает первый совпадающий индекс. Однако, если искомого элемента нет, возвращается -1.

indexOf принимает аргумент searchValue для поиска и, необязательно, индекс для начала поиска. Для строк searchValue - это именно строковое значение для поиска, и если значение не указано, по умолчанию будет выполняться поиск undefined. С другой стороны, для массивов searchValue - это просто элемент, который нужно искать.

Если вы включаете второй аргумент индекса для начала поиска, а индекс больше или равен длине массива / строки, возвращается -1, что означает, что объект не будет просматриваться. Однако, если второй аргумент отрицательный, поиск в массиве / строке по-прежнему выполняется спереди назад.

// arrays
const animals = ['turtle', 'bison', 'horse', 'duck', 'bison']
console.log(animals.indexOf('bison')) // 1
console.log(animals.indexOf('giraffe')) // -1
console.log(animals.indexOf('bison', 2)) // 4 b/c starts from index 2
// strings
const paragraph = 'The quick brown fox jumps over the lazy dog. If the dog barked, was it really lazy?'
const searchTerm = 'dog'
const indexOfFirst = paragraph.indexOf(searchTerm)
console.log(`The index of the first "${searchTerm}" from the beginning is ${indexOfFirst}`);
// "The index of the first "dog" from the beginning is 40"
console.log(`The index of the 2nd "${searchTerm}" is ${paragraph.indexOf(searchTerm, (indexOfFirst + 1))}`)
// "The index of the 2nd "dog" is 52"

slice: Копировать (неразрушающий)

Если вы просто хотите сделать копию массива или строки, вам не нужно передавать какие-либо аргументы. Тем не менее, у вас есть возможность включить начальный индекс (включительно) и конечный индекс (не включающий) для копирования. Этот метод часто используется в splice, потому что он позволяет избежать «побочного эффекта» изменения оригинала.

Если вы не передадите никаких аргументов, по умолчанию будет скопирован весь оригинал. Если любой из индексов отрицательный, извлекается, начиная с конца или с последнего элемента (метод length - индекс). С другой стороны, если аргументы, которые вы передаете, больше, чем фактический массив (например, массив / строка с 5 элементами, но передаваемые аргументы, начинающиеся с 10 и заканчивающиеся на 50), возвращаемое значение будет пустым.

// arrays
let iceCream = [“vanilla”, “chocolate”, “strawberry”, “green tea”]
let startIndex = 1
let endIndex = 2
let copyOfIceCream = iceCream.slice(startIndex, endIndex)
console.log(copyOfIceCream) // ["chocolate"]
console.log(iceCream) // ["vanilla", "chocolate", "strawberry", "green tea"]
// only chocolate is in the new array because endIndex is non-inclusive! If the endIndex was 3 instead, we would have a return ["chocolate", "strawberry"]
// strings
const str = 'The quick brown fox jumps over the lazy dog.'
console.log(str.slice(31)) // "the lazy dog."
console.log(str.slice(4, 19)) // "quick brown fox"
console.log(str.slice(-4)) // "dog."
console.log(str.slice(-9, -5)) // "lazy"

Заключение

Подводя итог, можно сказать, что есть три неразрушающих метода, которые вы можете использовать как для строк, так и для массивов:

concat, который объединяет две строки / массива
indexOf, который находит индекс элемента на основе значения поиска
slice, который копирует строку / массив

При этом важно знать, что, хотя вы можете использовать concat для строк, рекомендуется использовать операторы присваивания для выполнения того же действия.

Большое спасибо за чтение! Если вас интересуют другие строковые методы, посмотрите статью Меган Ло Когда использовать эти строковые методы в JavaScript. Вы также можете посмотреть мой пост Все массивы JavaScript и методы массивов!, Чтобы узнать больше о массивах и методах массивов JavaScript.