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