Метод JavaScript array join() объединяет все элементы массива и возвращает их как строку. Он не изменяет исходный массив.
Указанный разделитель будет разделять элементы массива. Разделитель по умолчанию — запятая (,). Если вы пропустите разделитель, элементы массива будут разделены запятой.
Метод join() в JavaScript также позволяет вам указывать любые символы, которые вы хотите вставить между элементами при их объединении.
Синтаксис метода соединения массивов JavaScript
Общий синтаксис объявления метода join() массива в JavaScript выглядит следующим образом:
array.join();
array.join(separator);
В приведенном выше синтаксисе метод имеет один параметр с именем Separater, который представляет собой строку для разделения каждой пары соседних элементов массива.
Если массив содержит только один элемент, то JavaScript вернет этот элемент без использования разделителя. Если он опущен, элементы массива будут разделены запятой («,») по умолчанию.
JavaScript объединяет все элементы без символов между ними, если разделитель — пустая строка. Метод join() возвращает пустую строку, если массив имеет пустую.
Предупреждение: если элемент в массиве не определен, равен нулю или пуст, JavaScript преобразует и отображает его как пустую строку.
Давайте рассмотрим несколько важных примеров программ, основанных на методе JavaScript array join().
Элементы массива JavaScript объединяются запятой
Давайте создадим программу на JavaScript, в которой мы объединим все элементы массива запятыми и отобразим их в виде строки.
Пример 1:
<script>
// Create an array of elements.
let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
// Convert the array into one string with join() method.
let weekDays = days.join(); // without separator.
document.write("Week days:", "<br>");
document.write(weekDays);
</script>
Output:
Week days:
Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday
Пример 2:
<script>
let myShopping = new Array("Milk", "Eggs", "Cereal", "Banana", "Tomatoes");
let myShoppingList = myShopping.join("<br />");
document.write("My shopping list:", "<br>");
document.write(myShoppingList);
</script>
Output:
My shopping list:
Milk
Eggs
Cereal
Banana
Tomatoes
В этом примере программы мы использовали тег <br /> в качестве разделителя. Если вы хотите, чтобы каждый элемент находился на отдельной строке, вы можете сделать это, используя тег <br/> между каждым элементом в массиве. Тег <br/> — это разрыв строки HTML, который разбивает текст на разные строки.
Присоединение массива четырьмя различными способами
Давайте создадим программу JavaScript, в которой мы создадим массив colors с тремя элементами. Затем мы объединим элементы массива четыре раза: используя разделитель тире, затем запятую и пробел, затем плюс и пустую строку.
Пример 3:
<script>
let colors = ["Red", "Orange", "Green", "Black", "Blue"];
let c1 = colors.join("-"); // dash separator.
document.write(c1, "<br>");
let c2 = colors.join(", "); // a comma and a space separator.
document.write(c2, "<br>");
let c3 = colors.join("+"); // plus separator.
document.write(c3, "<br>");
let c4 = colors.join(""); // empty string.
document.write(c4);
</script>
Output:
Red-Orange-Green-Black-Blue
Red, Orange, Green, Black, Blue
Red+Orange+Green+Black+Blue
RedOrangeGreenBlackBlue
Как вы можете заметить в выходных данных, метод join() преобразует все элементы массива в строку и разделяет каждый смежный элемент указанным разделителем.
Объединение элементов массива с использованием разделителя строк
Давайте рассмотрим пример программы, в которой мы объединим элементы массива, используя строку в качестве разделителя в JavaScript.
Пример 4:
<script>
let name = ["I", "JavaScript"];
let joined = name.join(" like "); // string separator.
document.write(joined);
</script>
Output:
I like JavaScript
Давайте рассмотрим пример программы, в которой мы возьмем неопределенную, нулевую и пустую строку в качестве элементов массива и объединим их в строку.
Пример 5:
<script>
let elements = [10, undefined, 30, null, 40];
let joined = elements.join(", ");
document.write(joined);
</script>
Output:
10,, 30,, 40
Объединение объектов, подобных массиву, с помощью метода Array join()
Как мы знаем, массивы — это объекты в JavaScript, которые имеют свойство длины с особым поведением. «Массивоподобный» объект в JavaScript — это обычный объект, который имеет числовые свойства имена и свойство длины.
Общий синтаксис объявления объекта, подобного массиву, выглядит следующим образом:
let arraylikeobject = {
0: "a",
1: "b",
2: "c",
3: "d",
length: 4
};
JavaScript определяет методы массива как универсальные. Они работают правильно, когда применяются к объектам, подобным массиву.
Но объекты, подобные массивам, не наследуются от Array.prototype, поэтому мы не можем вызывать методы массива для них напрямую. Мы можем вызывать их косвенно, используя метод Function.call().
Давайте создадим программу на JavaScript, в которой мы будем объединять объекты, подобные массиву, с помощью методов call() и join().
Пример 6:
<script>
// Create an array-like object.
let fruits = {
0: "Banana",
1: "Orange",
2: "Apple",
3: "Guava",
length: 4
};
let joined = Array.prototype.join.call(fruits, " | ");
document.write(joined);
</script>
Output:
Banana | Orange | Apple | Guava
В этом уроке вы изучили метод JavaScript array join() с различными примерами программ. Надеюсь, вы поняли основные концепции метода join() в JavaScript. Спасибо за чтение!!!
