1. 程式人生 > >React update外掛中 splice指令的理解

React update外掛中 splice指令的理解

在看《React開發實戰》一書中,其提到了React的update的指令,其可以對一個物件進行深度複製和修改,那為什麼要update指令,因為我們知道,在javascript的世界中,物件是傳的引用而不是值,當一個複雜的物件裡面又嵌套了子物件的時候,如果把當前的物件做一個深度的複製,其實還是蠻複雜的,所以React中,其提供了一個幫助類庫:update
其可以通過下面的方法進行安裝:

 npm install --save react-addons-update

其提供了下面的命令,具體可參看 這篇文章

  • $push: array
  • $unshift: array
  • $splice: array
  • $set: any
  • $merge: object
  • $apply: function

對其他的都很好理解,但是對splice命令,當時沒有太理解。
比如,

let initialArray=[1,2,'a'];
let newArray=update(initialArray,{$splice:[[2,1,3,4]});

輸出結果為: [1,2,3,4] ,那為什麼是這個結果呢?
那麼我來看看splice命令的格式,

Use .splice to remove item from array. Using delete, indexes of the array will not be altered but the value of specific index will be undefined,The splice() method changes the content of an array by removing existing elements and/or adding new elements.

Syntax: array.splice(start, deleteCount[, item1[, item2[, ...]]])

let newArray=update(initialArray,{$splice:[[2,1,3,4]});

可以解釋為,從第2個下標開始,刪除一個元素,‘a’,然後把後面的3,4加入到後面。這樣就成了 [1,2,3,4] 。

在看一個栗子,

let people = ["Bob", "Sally", "Jack"]
let toRemove = 'Bob';
let index = people.indexOf(toRemove);
people.splice(index, 1
); console.log(people);