DAY 29
2
Modern Web

## concat()

`concat()` 的作用是合併多陣列，返回合併後的新陣列，不會影響原始陣列。

``````// javascript

const ary = [1, 2, 3, 4, 5]
const bry = ['a', 'b', 'c', ]
const result = ary.concat(bry)

console.log(result)
// > [1, 2, 3, 4, 5, "a", "b", "c"]

console.log(ary)
// > [1, 2, 3, 4, 5]

console.log(bry)
// > ["a", "b", "c"]
``````
``````// javascript

const ary = [1, 2, 3, 4, 5]
const bry = ['a', 'b', 'c', ]
const cry = ['apple', 'kiwi', 'peach']
const result = ary.concat(bry, cry)

console.log(result)
// > [1, 2, 3, 4, 5, "a", "b", "c", "apple", "kiwi", "peach"]
``````

``````// javascript

const ary = [1, 2, 3, 4, 5]

const result = ary.concat()

console.log(result)
// > [1, 2, 3, 4, 5]

console.log(result === ary)
// > false
``````
``````// javascript

const ary = [1, 2, ['A', 'B', 'C', 'D', ], 4, 5]

const result = ary.concat()
console.log(result)
// > [1, 2, ['A', 'B', 'C', 'D', ], 4, 5]

result[2][2] = 'Alpha'

console.log(result)
// > [1, 2, ['A', 'B', 'Alpha', 'D', ], 4, 5]

console.log(ary)
// > [1, 2, ['A', 'B', 'Alpha', 'D', ], 4, 5]
``````

`concat()` 的參數也可以放陣列以外的東西，如：object、string、number、boolean...

``````// javascript

const ary = [1, 2, 3, 4, 5]

const result = ary.concat({a: 'apple'}, false, 1.25, 'Hello')
console.log(result)
// > [1, 2, 3, 4, 5, {a: 'apple'}, false, 1.25, "Hello"]
``````

## array_merge()

`array_merge()` 的作用也是進行陣列的合併，且不會對原始陣列造成影響。

``````// php

<?
\$ary = [1, 2, 3, 4, 5];
\$bry = ['a', 'b', 'c', 'd', 'e', ];

\$result = array_merge(\$ary, \$bry);
print_r(\$result);
// > Array ( [0] => 1 [1] => 2 [2] => 3 [3] => 4 [4] => 5 [5] => a [6] => b [7] => c [8] => d [9] => e )

print_r(\$ary);
// > Array ( [0] => 1 [1] => 2 [2] => 3 [3] => 4 [4] => 5 )

print_r(\$bry);
// > Array ( [0] => a [1] => b [2] => c [3] => d [4] => e )
?>
``````
``````// php

<?
\$ary = [1, 2, 3, 4, 5];
\$bry = ['a', 'b', 'c',];
\$cry = ['apple', 'kiwi', 'peach'];

\$result = array_merge(\$ary, \$bry, \$cry);
print_r(\$result);
// > Array ( [0] => 1 [1] => 2 [2] => 3 [3] => 4 [4] => 5 [5] => a [6] => b [7] => c [8] => apple [9] => kiwi [10] => peach )
?>
``````

``````// php

<?
\$ary = [
'10' => 'A1',
'apple' => 'A2',
'0' => 'A3',
'15' => 'A4',
'kiwi' => 'A5',
];
\$bry = [
'5' => 'B1',
'banana' => 'B2',
'0' => 'B3',
'12' => 'B4',
'kiwi' => 'B5',
];

\$result = array_merge(\$ary, \$bry);
print_r(\$result);
// > Array ( [0] => A1 [apple] => A2 [1] => A3 [2] => A4 [kiwi] => B5 [3] => B1 [banana] => B2 [4] => B3 [5] => B4 )
?>
``````

``````// php

<?
\$ary = [1, 2, 3, 4, 5];

\$result = array_merge(\$ary);
print_r(\$result);
// > Array ( [0] => 1 [1] => 2 [2] => 3 [3] => 4 [4] => 5 )
?>
``````
``````// php

<?
\$ary = [
'10' => 'A1',
'apple' => 'A2',
'0' => 'A3',
'15' => 'A4',
'kiwi' => 'A5',
];

\$result = array_merge(\$ary);
print_r(\$result);
// > Array ( [0] => A1 [apple] => A2 [1] => A3 [2] => A4 [kiwi] => A5 )
?>
``````

`array_merge()` 只能接陣列

``````// php

<?
\$ary = [1, 2, 3, 4, 5];

\$result = array_merge(\$ary, 1.2, false, 'String');
print_r(\$result);
// > WARNING array_merge(): Argument #2 is not an array
?>
``````

## 大手夥伴們的專欄

CSScoke - 金魚都能懂的這個網頁畫面怎麼切 - 金魚都能懂了你還怕學不會嗎
King Tzeng - IoT沒那麼難！新手用JavaScript入門做自己的玩具～

Clarence - LINE bot 好好玩 30 天玩轉 LINE API

Vita Ora - 好 Js 不學嗎 !? JavaScript 入門中的入門。