iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 24
2
自我挑戰組

JavaScript之一定要了解的 Array 與方法系列 第 24

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()怎麼用:

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 的物件行元素放生,但對同是參考型別的陣列卻不會。

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()則是會把所有元素併成一個陣列。

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() 可以怎麼寫出來?

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

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,"

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

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


上一篇
JS 可讓陣列 Array 反過來的 reverse()
下一篇
JS 把陣列 Array 轉成字串的 toString()
系列文
JavaScript之一定要了解的 Array 與方法34
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
ayugioh2003
iT邦新手 2 級 ‧ 2019-10-11 00:14:37

我們可以試著寫出一個原生的寫法:
...
const arr = [1,2,3,4]
arr.join(); // "1,2,3,4"
arr.join('-'); // "1-2-3-4"
arr.join(''); // "1234"

這段是不是想用 arr.join2() 模擬 arr.join() 的功能
不過範例中使用的是 arr.join(),這樣還是用到原生的方式在跑 ~

tsuifei iT邦新手 4 級 ‧ 2019-10-11 12:17:29 檢舉

厚厚!有你真好!
昨天試著寫了個原生,一試就跑了,高興得不得了,結果事後才發現我是用原本的方法在跑,傻乎乎的高興了好久...

這下真的糗了,上面自己寫的還真不能跑,我晚點再補上,
自己要改進,不夠心細。

感謝感謝~

我要留言

立即登入留言