0%

JS 把陣列 Array 所有元素併成字串,且可任意穿插符號的 join()

Day 24

插隊也不能插成這樣,我們之間總是可以插點花什麼的。

不知道大家有沒有吃過義大利的千層麵,一層麵皮一層蕃茄餡料,然後再一層麵皮一層蕃茄餡料,直到最後一層麵皮鋪上,撒上會拉絲的乳酪,再送進烤箱裡烤,美味的千層麵就這樣做好了。 肚子也餓了

join()做的事就像是千層麵一樣,陣列裡面的元素有如番茄餡料,以字串形式包覆,還可以選擇之間要穿插什麼,如果我們不選擇,就是很單純的麵皮
逗點就是了。

Array.prototype.join() - JavaScript | MDN

原型: Array.prototype.join()
功能: 會將陣列(或一個類陣列(array-like)物件)中所有的元素連接、合併成一個字串,並回傳此字串。
改變: 不會改變原陣列。
語法: arr.join([separator])
回傳值: 回傳一個合併所有陣列元素的字串。假如 arr.length 為 0,將回傳空字串。
參數: 分隔符號。

join()會將陣列裡的所有元素轉成字串,並串接起來回傳一個結果字串。我們可以指定額外的字串,用來分隔每個字串中的元素,如果我們沒有給指定的分隔符號字串,join()就會用預設的逗號來當分隔符號。不只如此,join()還會把一些無效的元素,例如空元素、undefined 或 null 當作空字串來處理,並回傳回來。

沒給符號也可以跟有給一樣

我們先來看看join()怎麼用:

1
2
3
4
5
6
7
const arr = [1, 2, 3, 4, 5];
const arr2 = arr;
const arr3 = arr;

arr.join(','); // "1,2,3,4,5"
arr2.join(); // "1,2,3,4,5"
arr3.join(''); // "12345"

大家有沒發現,其實join()裡沒給分隔符號,和給分隔符號join(',')得到的結果是ㄧ樣的。
因為所有的符號都屬於字串,所以記得在給參數的符號時,也必須以「字串」的形式包覆,像是join(',')

把陣列裡的字串元素轉成一整個字串

將陣列元素用固定符號串成字串,但是遇到參考型別的陣列元素join()會如何處理?
結果是join()會把它們都放生,阿不 而不處理這些參考型別的元素。但也不全然是這樣,看了下面的例子,join()只會將 object 的物件行元素放生,但對同是參考型別的陣列卻不會。

1
2
3
4
5
6
7
const arr = ['jack', 'john', 'may', 'su', 'Ada'];
const str = arr.join('、');
str; // "jack、john、may、su、Ada"

const arr2 = [[1, 2], 'john', 'may', { a: 42 }, 'Ada'];
const str2 = arr2.join(' ');
str2; // "1,2 john may [object Object] Ada"

如果可以活用,還真的很好用

join()所執行的事剛好和split()的方法相反,split()會把字串切成片段來放在陣列裡,而join()則是會把所有元素併成一個陣列。

1
2
3
4
5
6
7
8
9
let str = 'Hello word, how a bout your ?';

// 用 split() 轉成陣列
let word = str.split(' ');
word; // ["Hello", "word,", "how", "a", "bout", "your", "?"]

// 再用 join() 轉回字串
word.join();
word; // "Hello,word,,how,a,bout,your,?"

別忘了,如果字串裡有逗號,join()會把它當作是元素的一部分處理。

join() 可以怎麼寫出來?

我們可以試著寫出一個原生的寫法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Array.prototype.join2 = function(separator) {
let result = this[0];
for (let i = 1; i < this.length; i++) {
result += separator + this[i];
}
return result;
};
// 以上原生維修中,晚點再來補正確的,抱歉

const arr = [1, 2, 3, 4];
arr.join(); // "1,2,3,4"
arr.join('-'); // "1-2-3-4"
arr.join(''); // "1234"

const arr2 = ['hi', 'wow', 'hello'];
arr2.join(); // "hi,wow,hello";

// 對於無效的元素,join()會置之不理,但是還是會把逗號留下來
const arr3 = [null, 42, 'hi', undefined];
arr3.join(); // ",42,hi,"

今天就先介紹到這裡,明天開始連假,但是鐵人賽還是會繼續喔!一起繼續鐵人吧!

如有需要改進的地方,拜託懇求請告知,我會盡量快速度修改,感謝您~