JavaScript之array.splice() 以及 react實現list數據替換

在JavaScript中我們常常要和數組打交道所以避免不了使用一些數組相關的函數例如 push之類的 

今天談一談splice的應用

首先我們看一看splice()的基本語法

arrayObject.splice(index,howmany,item1,.....,itemX)

index 當然就是我們常說的序列啦（從0開始）

howmany其實就是說 我們要刪除多少個。。其實多少個都可以常用參數為0,1 其實也可以刪除2或三 及以上 也就是從index包括index在內 刪除多少個數

item1,item2，可以在index之后處添加多個不同的元素

------以下來自w3school------

例子 1

在本例中，我們將創建一個新數組，並向其添加一個元素：

<script type="text/javascript">

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
arr.splice(2,0,"William")
document.write(arr + "<br />")

</script>

輸出：

George,John,Thomas,James,Adrew,Martin
George,John,William,Thomas,James,Adrew,Martin

例子 2

在本例中我們將刪除位於 index 2 的元素，並添加一個新元素來替代被刪除的元素：

<script type="text/javascript">

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
arr.splice(2,1,"William")
document.write(arr)

</script>

輸出：

George,John,Thomas,James,Adrew,Martin
George,John,William,James,Adrew,Martin

例子 3

在本例中我們將刪除從 index 2 ("Thomas") 開始的三個元素，並添加一個新元素 ("William") 來替代被刪除的元素：

<script type="text/javascript">

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
arr.splice(2,3,"William")
document.write(arr)

</script>

輸出：

George,John,Thomas,James,Adrew,Martin
George,John,William,Martin
-------------------------------------------------------------------------------------

例子 4

在本例中我們將刪除從 index 2 ("Thomas") 開始的三個元素，並添加二個新元素 ("William"，“Tom”) 來替代被刪除的元素：

<script type="text/javascript">

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
arr.splice(2,3,"William")
document.write(arr)

</script>
輸出：

George,John,Thomas,James,Adrew,Martin
George,John,William,Tom,Martin
結果是先刪除 后添加的

那我們運用React實現列表的刪除 或者替換功能呢？
替換功能：

if(action.type==='dele_todo_item'){
        const newState=JSON.parse(JSON.stringify(state));
        newState.list.splice(action.index,0,'Nice Job');
        return newState;
    }

這里使用了redux操作數據 當傳來list 的index的時候 是我點擊某個item 的時候 這時候 我們把點擊的項目換成了 Nice Job