Array.concat() в JavaScript — об'єднати масиви
Опис
Метод concat формує новий масив. Початково, цей масив заповнюється елементами об'єкта, на якому було викликано concat. Наступно, елементи кожного переданого аргументу додаються до цього масиву. Для базових об'єктів та примітивів сам аргумент додається як елемент цільового масиву. Тоді як для масивів або об'єктів, що мають властивість Symbol.isConcatSpreadable з істинним значенням, всі їхні елементи додаватимуться окремо до кінцевого масиву. Важливо зазначити, що метод concat не обробляє масиви рекурсивно.
Метод concat створює поверхневу копію. Він не модифікує ні сам первісний об'єкт (this), ні масиви, передані йому як аргументи. Замість цього, метод повертає новий масив, який містить елементи з усіх вхідних масивів.
Якщо деякі комірки в оригінальних масивах порожні, метод concat збереже ці порожні позиції в результуючому масиві.
Метод concat розглядає значення this таким же чином, як і всі інші аргументи (за виключенням того, що спочатку воно конвертується в об'єкт). Так, прості об'єкти будуть розміщені на початку кінцевого масиву, тоді як масивоподібні з властивістю @@isConcatSpreadable з істинним значенням будуть розширені у цільовий масив.
Загальний опис
автор: NagarD
- Нотатка
-
Помітною перевагою використання методу
автор: Bondconcat()є те, що він не змінює вихідні масиви, а створює новий масив. Тому ви можете безпечно використовувати його безпосередньо на початкових масивах без ризику їх змінити. - Нотатка
-
Метод
автор: Bondconcat()також дозволяє об'єднувати не тільки масиви, але й інші значення, такі як рядки або числа. Вони будуть додані до створеного масиву як окремі елементи.
Синтаксис
concat()
concat(value0)
concat(value0, value1)
concat(value0, value1, /* … ,*/ valueN)Параметри
valueN-
Масиви та/або значення для об'єднання в новий масив. Якщо ж параметри
автор: BondvalueNвідсутні, методconcatпросто поверне поверхневу копію того масиву, з яким він працює.
Повернення
instance-
Новий екземпляр масиву.
автор: Bond
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 4 | 12 | 5.5 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 1 | 18 | 4 | 1 |
| Переглядач |  |
 |
|---|---|---|
| 0.10.0 | 1.0 |
Приклади
+ запропонувати свій приклад у пісочниці
З'єднання двох масивів
const letters = ["a", "b", "c"];
const numbers = [1, 2, 3];
const alphaNumeric = letters.concat(numbers);
console.log(alphaNumeric);
// результат: ['a', 'b', 'c', 1, 2, 3]
З'єднання трьох масивів
const num1 = [1, 2, 3];
const num2 = [4, 5, 6];
const num3 = [7, 8, 9];
const numbers = num1.concat(num2, num3);
console.log(numbers);
// результат: [1, 2, 3, 4, 5, 6, 7, 8, 9]
Даний приклад демонструє використання методу concat() для з'єднання двох масивів. В прикладі створюються масиви array1 та array2, після чого за допомогою методу concat() їх елементи з'єднуються у новий масив array3. Результат з'єднання виводиться на сторінку.
HTML
<header>
<h2 class="title">З'єднання масивів</h2>
<p class="description">Приклад використання методу concat() для з'єднання масивів</p>
</header>
<main>
<pre>
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
</pre>
<div id="output"></div>
</main>CSS
body {
font-size: 16px;
line-height: 1.5;
font-family: monospace;
}
pre {
color: #ff0000;
}
header {
background-color: #f1f1f1;
margin-bottom: 25px;
padding: 15px;
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
header h2.title {
padding-bottom: 15px;
border-bottom: 1px solid #999;
}
header p.description {
font-style: italic;
color: #222;
}
#output {
margin-bottom: 10px;
padding: 10px;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 4px;
}JS
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
document.getElementById("output").innerHTML = `Результат роботи методу (змінна <strong>array3</strong>): ${array3}`;
//# sourceURL=pen.jsЯк саме concat() склеює: один рівень вкладеності, рядок одним елементом і поверхнева копія.
const a = [1, 2];
const b = [3, 4];
console.log(a.concat(b)); // [1,2,3,4]
console.log(a); // [1,2] — оригінал цілий
console.log(a.concat(b, 5)); // [1,2,3,4,5] — не-масив іде одним елементом
console.log(a.concat([3, [4, 5]])); // [1,2,3,[4,5]] — один рівень, не глибше
console.log(a.concat('ab')); // [1,2,"ab"] — рядок не розсипався
console.log([...a, ...'ab']); // [1,2,"a","b"] — а зі spread розсипався
// копія поверхнева: об'єкти всередині спільні
const rows = [{ n: 1 }];
const merged = rows.concat([]);
merged[0].n = 99;
console.log(rows[0].n); // 99Якщо будь-який з початкових масивів є розрідженим, то результуючий масив також буде розрідженим.
console.log([1, , 3].concat([4, 5])); // [1, empty, 3, 4, 5]
console.log([1, 2].concat([3, , 5])); // [1, 2, 3, empty, 5]
Якщо значення this не є масивом, воно перетворюється на об'єкт і потім обробляється так само, як аргументи для concat(). У цьому випадку, результатом завжди буде новий масив.
console.log(Array.prototype.concat.call({}, 1, 2, 3)); // [{}, 1, 2, 3]
console.log(Array.prototype.concat.call(1, 2, 3)); // [ [Number: 1], 2, 3 ]
const arrayLike = {
[Symbol.isConcatSpreadable]: true,
length: 2,
0: 1,
1: 2,
2: 99, // ігнорується concat(), оскільки length дорівнює 2
};
console.log(Array.prototype.concat.call(arrayLike, 3, 4)); // [1, 2, 3, 4]
Код з'єднує три значення з масивом.
const letters = ["a", "b", "c"];
const alphaNumeric = letters.concat(1, [2, 3]);
console.log(alphaNumeric);
// результат: ['a', 'b', 'c', 1, 2, 3]Код з'єднує вкладені масиви і демонструє збереження посилань.
const num1 = [[1]];
const num2 = [2, [3]];
const numbers = num1.concat(num2);
console.log(numbers);
// результат: [[1], 2, [3]]
// зміна першого елемента num1
num1[0].push(4);
console.log(numbers);
// результат: [[1, 4], 2, [3]]
Метод concat за замовчуванням не розглядає всі об'єкти, які схожі на масиви, як масиви - це стосується лише тих, де властивість Symbol.isConcatSpreadable встановлена на значення істинності (наприклад, true).
const obj1 = { 0: 1, 1: 2, 2: 3, length: 3 };
const obj2 = { 0: 1, 1: 2, 2: 3, length: 3, [Symbol.isConcatSpreadable]: true };
console.log([0].concat(obj1, obj2));
// [ 0, { '0': 1, '1': 2, '2': 3, length: 3 }, 1, 2, 3 ]Коментарі
Коментарів ще немає — будьте першим!