React update插件中 splice指令的理解

原创 2017年10月04日 19:11:37

在看《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);
版权声明:本文为博主原创文章,未经博主允许不得转载。

使用react/lib/update 对数据进行操作

参考文档:https://facebook.github.io/react/docs/update.html react/lib/update 与 react-addons-update 等价...
  • ISaiSai
  • ISaiSai
  • 2017年02月21日 16:49
  • 1426

react调试插件 2.5.1版本

  • 2017年10月31日 23:43
  • 334KB
  • 下载

Eclipse中使用SVN插件实现版本控制(连接SVN服务器,checkout检出,commite提交,update更新)

此文章对Myeclipse同样适用。 一.在Eclipse里下载Subclipse插件 方法一:从Eclipse Marketplace里面下载 具体操作:打开Eclipse --> He...

webstorm中react-native插件

  • 2017年08月29日 09:05
  • 10KB
  • 下载

react开发调试插件与使用方法

  • 2017年10月31日 16:34
  • 179KB
  • 下载

SMP3.0学习笔记之八 使用Kapsel Update插件实现移动应用的自动更新

作者:穿行印象 http://blog.sina.com.cn/s/blog_7a9486880101qe6z.html  我已经有了一个可以从SMP3.0暴露的OData服务获取航空公司...

React Native优秀的第三方插件(Android & iOS)

1.https://github.com/aroth/react-native-uploader 文件上传 图片.gif 2.https://github.com/obla...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:React update插件中 splice指令的理解
举报原因:
原因补充:

(最多只允许输入30个字)