10-3 Array 的方法 indexOf, push, pop, shift, splice, join, slice

Original: https://course.andys.pro/Javascript-Intro/10-3-array-methods-indexof-push-pop-shift-splice-join-slice/

講義

1. 搜尋元素

• indexOf(value, [start])：由左向右尋找，回傳第一個找到的索引。找不到則回傳 -1。
• lastIndexOf(value)：由右向左尋找。

2. 新增與刪除 (會改變原陣列)

• 從後端操作：
  • push(val)：從陣列最後面塞入一個值。
  • pop()：移出最後一個值，並回傳該值。
• 從前端操作：
  • unshift(val)：從陣列最前面塞入一個值。
  • shift()：移出最前面一個值，並回傳該值。

3. 陣列的修改與切割

• reverse()：反轉陣列順序。
• splice(index, count, add1, add2...)：強大的修改工具。
  • 從 index 開始，刪除 count 個元素，並在該位置補入 add1、add2 等新元素。
• slice(start, end)：擷取陣列的一部分，不會改變原陣列。
  • 注意：結果包含 start，但不包含 end（擷取到 end - 1 為止）。

4. 陣列轉字串

• join(separator)：將陣列所有元素連接成一個字串。
  • 若不代入參數，預設以豆號 , 隔開。
  • 範例：["A", "B"].join("-") ➝ "A-B"。

5. 實務操作注意事項

• 回傳值與副作用：有些方法（如 pop, shift, splice）會直接修改原本的陣列，並回傳被移除的內容。在寫程式時要清楚你是要拿取回傳值，還是要修改原陣列。

影片逐字稿 (AI 生成)

好 接下來我們來講十字山 Array 的方法那我們這邊可以獲得陣列元素的鎖影值就是它的 index然後我們要來改變 Array 裡面的元素然後再來是我們要產生新的陣列還賦予它新的值首先這邊我們前面已經有教過就是用 index of 和 less index of然後 index of 是由左判斷到右然後 less index of 是由右判斷到左那如果沒有找到這個東西就會回傳-1好的 那我們來看一下這個範例1 2 3 4 5 6 7 8那這邊呢我們首先先來理解這段扣就是 index of 4它就跟你講是在3這個位置那為什麼3呢00123OK好 那後面這邊你看它有一個 from index那所以它是 index of 用 4 5它其實是從第5個這個位置去開始1 2 3 41 2 3 4 5這個位置開始媽然後它是去找裡面有沒有4那其實我們可以把這段扣拿來寫寫看它叫做它叫做它是 a 好a等於1 2 3 4 5 6 7 8好 a然後我們 aa.index of4就是3然後 a4 5是-1因為找不到好吧那如果是4 44 4也是找不到如果是4 3呢就找到了OK所以它5其實不是應該不是從5這個位置應該是678吧012012345對啊所以它是678所以講義寫錯了因為5嘛5是index嘛對不對是從index 5這個地方開始找所以我們剛才這邊有測試所以我們剛才這邊有測試有沒有看到4 5是-14 4也是-14 3才是3所以4 3代表說我要找4對不對這個數字然後從第幾個開始找從第三個那從第三個是哪裡0 1 2 34 5 6 7 8 94 5 6 7 8 9這裡面才找到這個位置344這個值那可是4 4就找不到5 6 7 8那4 54 5的意思是6 7 8的意思所以這邊講義這個是沒有的要把它叉叉點所以這個也是index喔所以這邊可能有點搞混這樣好再來我們來講我要怎麼樣塞一個值進去所以這邊這個東西叫做push好push是從後面把東西放進去所以比如說我今天有我們再把剛剛的再把剛剛的我們先把它清掉然後這邊嗯A等於其實可以按上把剛剛那個example抓出來好A然後點pushpushpushpushpushpushpushpushpushpushpushpushpushpushpushpushpushpushpushpushpushpushpushpushpushpushpushpushpushpushpushpushpushpushpushpushpushpushpushpushpushpushpushpushpushpush有可以塞進去就有可以拿出來那這東西叫做POP那我們POP就是我再把這邊復原這邊需要需要放在講義那個上面我需要找一下在哪裡再一個對像是10好的 那我們這邊要來測試一下POP怎麼做那我們這邊還是先把Clear掉然後我們把A再重新命名為我們把A再重新宣告一次好12345678然後我們確定一下A是不是好12345678好這時候我要把最後一個東西丟掉怎麼用叫做POP好那這時候POP你看它拿這邊傳出來的值是APOP以後我們的A是什麼我們A就會是1234567OK那你A點POP其實這個可以拿來幹嘛呢就是呃我再多補充一個東西不好意思就是說呃我們這邊先宣告一個東西說POPValue好了然後我等於什麼A點POP它會回傳就是它丟掉的東西出來所以同時它又把原本的A的值去做改變所以這時候我這樣子做完了以後呢A會剩什麼A會剩下123456然後這個POPValue會是剛剛我們丟出來那個東西的值就是7OK這樣可以理解嗎A點POP它會做什麼事情它會把A改掉把最後一個東西砍掉那它砍掉的時候這個值型的這個程式它會回傳的是它砍掉那個值那同時我們這邊我們可以宣告一個東西把這個值吃進來可以選擇你先選擇那些程式可以選擇那些程式那些程式哪些程式嗯為什麼我這個你也要打字那個為什麼要打紙?這邊會回傳大家也可以看到畫面嗎?我的網路好像掛掉還是Paper的網路掛掉因為城外看到Paper的網路里很容易看到Mix谢谢大家谢谢大家好这边再重新再解释就是快速解释一下就说你A是不是12345678当我pop大的时候这个执行程式会回传它砍掉什么东西同时它会去改A这个东西所以A这个字串就只剩下1234567然后它回传这个东西因为你没有去接pop的回传值所以这个值就直接丢掉那如果我在后面现在A已经是1234567了如果我今天拿了一个变数去接这个回传回来的值的话A还是会被砍掉的东西嘛只是它砍掉这个7会传到这个pop的value里面去然后我就可以把它存起来这样好的那这边呢我们再多补这边它讲说shiftshift是从前面把这个值拿掉那我们直接我们再clear一下然后我们快速的做那个给大家看shift好这边shift呢我这边shift完了以后我A只剩下2345678OK那跟pop的一样的事情是当我shiftshift回传的值会是它删掉那个值OK那你可以拿变数去把它存起来那A这个时候已经是什么2345678这样子OK所以从前面删一个东西叫做shift所以诶大家有没有发现这叫shift在前面加一个东西叫onshiftOK那这两个也很接近push跟poppush跟pop都从后面那我记得是讲那个我补充的这边上面有一个这一个吧这边有一张图诶好像复制错的连结懂了我昨天复制好我这连结我再去我再去找一下它有一张图是说我到时候再跟大家讲好好了再来我们要来如果诶老师我想要把正列反转那这时候我们就直接用reverse然后我们就会拿到就是它整个转过来好好那我们a点reverse然后a就会是这样那同时你也可以看得到就是说a点reverse其实是有去改动到a的值同时同时你在a点reverse的时候它回传的也是就是它这个改动完了这个a的函数的的值这样子好再来这个会比较难一点它叫做Splice那Splice这个公式是什么呢它其实第一个是它起始的位置再来是它要删除几个东西然后后面就会是一个后面你可以一直加上去就是说你要加的东西好了首先我们还是把a改我们把a还是还原到12345678好a现在是12345678那我们去执行这个Splice5E10好这时候我们看一下我们a是什么我们a已经改变了好它这边5是怎么做呢它现在在第5个这个位置012345就5就在6这个位置那第二个是什么去Delete一个元素Delete一个元素就是6砍掉了对不对不见了然后后面加上10塞进去所以就是12345178这是它在做的事情这个5是index所以是012345在第6这个然后去砍掉一个元素好我们再来看第二个这个例子它在第5个这个地方砍掉三个然后再203040那这边是它应该是直接就直接继续跑53203040好所以这边它在做的事情是什么我们可以我我觉得我是把它写一下这边写一下就是我现在这边这个值是123451078对不对那这边砍三个是怎样呢砍三个是选换个颜色不能换颜色不能换颜色这应该是这个换颜色换绿色好砍三个所以因为它是5嘛对不对从0012345然后从这边先加进来所以是203040OK所以就变成下面这个结果好那我们去执行它OK它就会是123452030但是这个是它因为现在Chrome它就是自动都会就是把它就是把它这个执行完回傳的东西就是178就是它砍掉了有沒有這裡砍掉一个就是会回傳它砍掉的什么东西砍掉了它就丟出来好的再来我们去看这一个那这一个最后面这边呢我们已经变成是123451015123455555555555555555555555555555555555555555555555555655555655555555555555555555555555556555555555565655555555555555555555555556556555555555555555555555555566666666667666666666666667777777777777777777777777777778889888888888888888888888998999999999999999999999999999999999999999999199那我其實比較喜歡就是index 的話我其實就是這樣啦01234567那我自己的做法通常是2424的話就是你會覺得是可能3到5對不對可是實際上我自己都是算間隔所以我就是01就是2434然後我24我就直接這樣就這樣就這樣那你call index比如說我2的時候就把就是在這裡這邊要注意一下slice的部分那24其實只有抓兩個東西好本章重點就是我們學習什麼是array然後我們要建一個空字窗我們就是直接用一個兩個方框做出來然後index是從0開始然後length是來看這個陣列的長度index of是來查就是這種查你要的東西是在哪一個位置那他是由左到右去查less index of是由右到左來查那push是從後面去新增數值那pop是後面丟掉一個那如果是從前面的話就是shift跟onshift那再來呢我們要把一個array把它轉換成就是自串的方式我們可以用join那他預設是用dol點那你可以用其他的符號來做join那slice那slice我們是可以去切就是就是中間的東西出來好的這是第十章好好好好好好好

影片逐字稿largev2

好,接下來我們來講十之三,Array的方法那我們這邊可以獲得陣列元素的所有因子,就是它的Index然後我們要來改變Array裡面的元素然後再來是我們要產生新的陣列,它會賦予它新的值首先,這邊我們前面已經有教過了,就是用IndexOf和LessIndexOf那IndexOf是由左判斷到右,然後LessIndexOf是由右判斷到左那如果沒有找到這個東西就會回傳-1好的,那我們來看一下這個範例,1,2,3,4,5,6,7,8那這邊呢,我們首先先來理解這段Code就是IndexOf 4,它就跟你講是在3這個位置那為什麼是3呢?0,0,1,2,3,OK好,那後面這邊你看它有一個FromIndex那所以它是IndexOf用4,5,它其實是從第5個這個位置去開始1,2,3,4,5,這個位置開始然後它是去找裡面有沒有4那其實我們可以把這段Code拿來寫寫看它叫做它是A,好A等於1,2,3,4,5,6,7,8好,A然後我們A,A.IndexOf4,就是3然後A一樣是4,5是-1,因為找不到那如果是4,4呢?也是找不到,如果是4,3呢?就找到了OK,所以它5其實不是應該不是從5這個位置應該是6,7,8吧0,1,2等一下,0,1,2,3,4,5對啊,所以它是6,7,8,所以講1寫錯了好不好因為5嘛,5是Index嘛是從Index5這個地方開始找所以是從6開始找所以我們剛才這邊有測試有沒有看到4,5是-1,4,4也是-1,4,3才是3所以4,3代表說我要找4,對不對這個數字然後從第幾個開始找,從第3個那從第3個是哪裡0,1,2,3,4,5,6,7,8,94,5,6,7,8,9這裡面才找得到這個位置3是4這個值那可是4,4就找不到,5,6,7,8那4,54,5的意思是6,7,8的意思,所以這邊講1這個是沒有的要把它查查所以這個也是Index喔所以這邊有點搞混好再來我們來講我要怎麼樣塞一個值進去所以這邊這個東西叫做PushPush是從後面把東西放進去所以比如說我今天有我們再把剛剛的再把剛剛的我們先把它清掉然後這邊A等於我們其實可以按上把剛剛那個example抓出來好,A然後點Push推,推進去推什麼,推9跟10那這時候呢我的A就會是1,2,3,4,5,6,7,8,9,10那它送進去是從後面送進去那如果我想要從前面送進去我要怎麼送Unshift然後我們試試看這邊如果你要推AB進去的話你要把它變直傳然後這時候我們去看我們的A有沒有,AB是放進去是從前面放進去這東西叫做UnshiftUnshift是從前面這邊有寫好那有Push有可以塞進去就可以拿出來那這東西叫做POP那我們POP我再把這邊復原這邊需要需要放在獎勵上面在哪裡在這一個在這現在是10好的那我們這邊來測試一下POP怎麼做那我們這邊還是先把它Clear掉然後我們把A再重新命名為我們把A抓再重新宣告一次好,1,2,3,4,5,6,7,8,然後我們確定一下A是不是好,1,2,3,4,5,6,7,8好這時候我要把最後面一個東西丟掉叫做POP好那這時候POP這邊傳出來的值是APOP以後我們的A是什麼我們A就會是1,2,3,4,5,6,7OK那你A.POP其實這個可以拿來幹嘛呢就是我再多補充一個東西不好意思我們這邊先宣告一個東西叫做POP Value好了然後我等於什麼A.POP因為A.POP它會回傳就是它丟掉的東西出來所以同時它又把原本的A的值去做改變所以這時候我這樣子做完了以後呢A會剩什麼A會剩下1,2,3,4,5,6然後這個POP Value會是剛剛我們丟出來那個東西的值就是7OK這樣可以理解嗎A.POP它會做什麼事情它會把最後一個東西砍掉那它砍掉的時候這個執行的這個程式它會回傳的是它砍掉的那個值那同時我們這邊我們可以宣告一個東西把這個值吃進來嗯?為什麼沒有辦法打值LAG這邊會回傳就是大家還可以看到畫面嗎我的網路好像掛掉還是是Paper的網路掛掉等一下喔等一下喔我的Paper網路掛了OKOKOKOKOKOKOKOKOKOKOKOKOKOKOKOKOKOKOK這邊再重新再解釋就是快速解釋一下就是說你A是不是12345678當我POP到的時候這個執行程式會回傳它砍掉什麼東西同時它會去改A這個東西A這個字串就只剩下1234567然後它回傳這個東西因為你沒有去接POP的回傳值所以這個值就直接丟掉那如果我在後面現在A已經是1234567了如果我今天拿了一個變數去接這個回傳回來的值的話A還是會被砍掉的東西只是它砍掉這個7會傳到這個POP的value裡面去然後就可以把它存起來好的那這邊呢我們再多補這邊它叫做shiftshift是從前面把這個值拿掉那我們直接我們再clear一下然後我們快速的做那個給大家看shift好我這邊shift呢我這邊shift完了以後我A只剩下12345678ok那跟POP一樣的事情是當我shift回傳的值會是它刪掉的那個值那你可以拿變數去把它存起來那A這個時候已經是12345678ok所以從前面刪一個東西叫做shift所以大家有沒有發現這叫shift在前面加一個東西叫unshiftok那這兩個也很接近PUSH跟POPPUSH跟POP都從後面那我記得是講補充的這邊上面有一個這個吧這邊有一張圖好像複製錯連結等我我昨天我這個連結我再去我再去找一下它有一張圖是說我到時候再跟大家講好好了再來我們要來如果老師我想要把正列反轉那這時候我們就直接用reverse然後我們就會拿到它整個轉過來好好那我們A.reverse然後我的A就會是這樣那同時你也可以看得到就是說A.reverse其實是有去改動到A的值同時你在A.reverse的時候它回傳的也是就是它這個改動完的這個A的函數的值這樣子好再來這個會比較難一點喔它叫做splice那splice這個公式是什麼呢第一個是它起始的位置再來是它要刪除幾個東西然後後面就會是一個後面你可以一直加上去就是說你要加的東西好了首先我們還是把A我們把A還是還原到12345678好A現在是12345678那我們就執行這個splice 5 1 10好這時候我們看一下我們A是什麼我們A已經改變了好它這邊5是怎麼做呢它現在在第五個這個位置0 1 2 34 55就在6這個位置那第二個是什麼去delete一個元素delete一個元素就是6砍掉了對不對不見了然後後面加上10塞進去所以就是12345178這是它在做的事情這個5是index喔所以是01 2 3 4 5在第六這個然後去砍掉一個元素好我們再來看第二個這個例子它在第五個這個地方砍掉三個然後在20 30 40好那這邊是它應該是直接就繼續跑5 320 3040好所以這邊它在做的事情是什麼我們可以我我覺得我是不是要寫一下就是我現在這邊這個值是1 2 345 107 8對不對那這邊砍三個是怎樣呢砍三個是先換個顏色不能換顏色這應該是這個換顏色換綠色好砍三個所以因為它是5嘛對不對0 1 2 34 5砍三個然後從這邊加進來所以是20 3040OK所以就變下面這個結果好那我們去執行它OK它就會是1 2 3 4 520 30 40那下面這個是它因為現在Chrome它就是自動都會把它這個執行完回傳的東西就17 8就是它砍掉的這裡砍掉一個就是會回傳它砍掉的東西砍掉的它會丟出來好了再來我們去看這一個那這一個最後面這邊呢我們已經變成是1 2 3 4 5 1020 30 40這邊好那這時候它這邊50 100是什麼意思5就是0 12 3 4 5100這個位置100這邊其實就是在20這個地方然後它0就是我不刪掉任何東西然後我加一個100進來所以100就會加在20 3040的前面這裡沒有元素被移除這時候它就會加在這個地方OK好這是Splice好了再來呢我們要來看一下什麼是join那join就是說我要把我可以把字串變成是一個變成我要把array變成是一個字串那首先它預設join的話我們就直接來跑它就會用逗號把這些a這個1 2 3 4 5 6 7 8就是合在一起好的那我們這邊先clear然後我們把剛剛的宣告抓出來a.join我們來看一下喔這時候它就把這個數列array就是array的1 2 3 4 5 6 7 8用join就會變成一個字串然後這個字串就是12.2 2.3 2.這樣1 2 3 4 5 6 7 8用逗點去做連接那我因為這是預設嘛那如果我今天說我不要用逗點我用一個空字串來做連接那它跑出來是什麼呢它就會是1 2 3 4 5 6 7 8中間連逗點都沒有因為它是空字串去做連接嘛那我今天可以用這個一個牆壁去把它隔出來或是你可以用你自己喜歡的比如說像然後它就會變成這樣這樣ok嗎就join的話是把一個數列array然後去把join用逗點把它隔出來那中間這邊你只要中間的間隔你想要放什麼就可以去放或者是你想要放的是tabok那今天我們要來說slice這邊東西有點多這邊我們來講sliceslice切這邊是切起始位置和結束位置那我們來試試看吧var a 等於它裡面是什麼呢1 2 3 4 5 6 7 8所以這個然後var b等於a.slice2 4好那我們直接來看第二個位置0 1 2 是3嘛對不對這個值是30 1 2 3 然後3是在0 1 23 4所以就是3跟4所以b就是3跟4那這時候我們看一下a.a是沒有任何改變它slice它切東西它是對於原本這個東西沒有做任何的改變和傷害而是它slice出來這一個它中間這個東西剪出來以後它把它存到b它把中間這裡剪出來好我在我直接在白板上面畫一下給大家看a然後呢 這邊是index這邊是value1 2 3 45 6 7 8這邊是index0 1那我其實比較喜歡index的話我其實0 2 3 4 56 7那我自己的做法通常是2 42 4的話就是你會覺得可能是3到5可是實際上我自己都是算間隔1 23 4然後我2 4我是直接這樣那你colindex比如說我2的時候是抓這邊要注意一下slice的部分它2 4其實只有抓兩個東西好本章重點就是我們學習什麼是array然後我們要建一個空字窗我們就是直接用一個兩個方框做出來然後index是從0開始然後length是來看這個陣列的長度indexof是來查就是查你要的東西是在哪一個位置那它是由左到右去查lessindexof是由右到左來查那push是從後面去新增數值那pop是後面丟掉一個那如果是從前面的話就是shift跟unshift那再來呢我們要把一個array把它轉換成字串的方式我們可以用join那它預設是用逗點那你可以用其他的符號來做join那slice我們就可以去切就是中間的東西出來好的這是第十章