---
tags: JS - 練習
---
# 【splice】 、 【slice】練習

:::warning

原型： Array.prototype.splice()
功能： 可以藉由刪除既有元素並／或加入新元素來改變一個陣列的內容。
改變： 會改變原陣列。

參數：
splice(要插入或刪除的索引位置, 要刪除的元素數量, 要插入的元素內容)。

注意：
splice()本身所回傳回來的，會是我們刪除掉的元素陣列。

:::

> splice 範例:

- 指定索引位置、刪除數量、插入內容

    const studentData = ["王羅傑", "陳會發", "蔡阿嘎", "連世成", "詹關貓"]
    const deleteStudents = studentData.splice(1, 2, "雲小寶")

    studentData; // ["王羅傑", "雲小寶", "連世成", "詹關貓"]
    deleteStudents; // ["陳會發", "蔡阿嘎"]

- 指定索引位置

    const studentData = ["王羅傑", "陳會發", "蔡阿嘎", "連世成", "詹關貓"]
    const deleteStudents = studentData.splice(1)

    studentData; // ["王羅傑"]
    deleteStudents; // ["陳會發", "蔡阿嘎", "連世成", "詹關貓"]

- 不刪除並插入數值

    const studentData = ["王羅傑", "陳會發", "蔡阿嘎", "連世成", "詹關貓"]
    const deleteStudents = studentData.splice(1, 0, "張家晟")
    
    studentData; // ["王羅傑", "張家晟", 陳會發", "蔡阿嘎", "連世成", "詹關貓"]
    deleteStudents; // []

- 倒著使用

    const studentData = ["王羅傑", "陳會發", "蔡阿嘎", "連世成", "詹關貓"]
    const deleteStudents = studentData.splice(-1, 0, "楊慶忠")
    
    studentData; // ["王羅傑", 陳會發", "蔡阿嘎", "連世成", "楊慶忠", "詹關貓"]
    deleteStudents; // []

### splice 題目:

    const studentData = ["王羅傑", "陳會發", "蔡阿嘎", "連世成", "詹關貓"]

:::info
請按照提供資料，取出介於"王羅傑"與"詹關貓"之間的人名，並在這之間加入"張睿宸"
:::

:::info
請按照提供資料，在"詹關貓"前面加入"許宏偉"，並移除"詹關貓"。
:::

---

:::warning

原型： Array.prototype.slice()
功能： 回傳一個新陣列物件，為原陣列選擇的 begin 至 end（不含 end）部分的淺拷貝（shallow copy）。
改變： 原本的陣列將不會被修改。

參數：
slice(哪個索引值開始切, 哪一個索引值結束)。

注意：
不給參數，或只給零，那麼slice()就會把陣列從頭到尾複製一份。
多維陣列的深拷貝會失效。
第二個參數"哪一個索引值結束"，表示到該數就停止，並不會取到該數

:::

> slice 範例:

- 兩個參數

    const studentData = ["王羅傑", "陳會發", "蔡阿嘎", "連世成", "詹關貓", "蔡慶忠"]
    const sliceStudents1 = studentData.slice(1, 3)
    const sliceStudents2 = studentData.slice(1, 0)
    const sliceStudents3 = studentData.slice(2, -2)
    const sliceStudents4 = studentData.slice(2, 2)
    

    studentData; // ["王羅傑", "陳會發", "蔡阿嘎", "連世成", "詹關貓"]
    sliceStudents1; // ["陳會發", "蔡阿嘎"]
    sliceStudents2; // []
    sliceStudents3; // ["蔡阿嘎", "連世成"]
    sliceStudents4; // []

- 不給參數

    const studentData = ["王羅傑", "陳會發", "蔡阿嘎", "連世成", "詹關貓"]
    const sliceStudents = studentData.slice()
    const sliceStudentsZero = studentData.slice(0)
    

    studentData; // ["王羅傑", "陳會發", "蔡阿嘎", "連世成", "詹關貓"]
    sliceStudents; // ["王羅傑", "陳會發", "蔡阿嘎", "連世成", "詹關貓"]
    sliceStudentsZero; // ["王羅傑", "陳會發", "蔡阿嘎", "連世成", "詹關貓"]

- 正著取值、倒著取值

    const studentData = ["王羅傑", "陳會發", "蔡阿嘎", "連世成", "詹關貓"]
    const sliceStudents1 = studentData.slice(1)
    const sliceStudents2 = studentData.slice(-1)
    

    studentData; // ["王羅傑", "陳會發", "蔡阿嘎", "連世成", "詹關貓"]
    sliceStudents1; // ["陳會發", "蔡阿嘎", "連世成", "詹關貓"]
    sliceStudents2; // ["詹關貓"]

- 多維陣列問題

    const studentData = [["王羅傑", "陳會發", "蔡阿嘎"], ["連世成", "詹關貓", "蔡慶忠"]]
    const sliceStudents = studentData.slice(0)
    
    sliceStudents; // [["王羅傑", "陳會發", "蔡阿嘎"], ["連世成", "詹關貓", "蔡慶忠"]]
    
    sliceStudents[0][0] = "errorPeople"

    studentData; // [["errorPeople", "陳會發", "蔡阿嘎"], ["連世成", "詹關貓", "蔡慶忠"]]
    sliceStudents; // [["errorPeople", "陳會發", "蔡阿嘎"], ["連世成", "詹關貓", "蔡慶忠"]]

### slice 題目:

    const studentData = ["王羅傑", "陳會發", "蔡阿嘎", "連世成", "詹關貓"]

:::info
請按照上述資料，解決"多維陣列問題"，讓複製的資料無法同時被更改。
:::

:::info
請按照提供資料，從資料中取出"連世成"
:::

:::info
承上題，若無法得知"連世成"的位置，無法直接將索引值帶入，請透過其他方法取得索引值
:::