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);
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/chancein007/article/details/78159013

React简单实用小知识点整理(一)

一:React的生命周期 1.1 组件生命周期的三种状态展示: - Mounting: 已插入了真是dom结构 - Updating: 正在被重新渲染 - Unmounting: 已...
  • u013558749
  • u013558749
  • 2017-03-10 19:01:07
  • 1260

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

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

splice()方法删除数组中不连续的几项

1、正常情况下,用splice方法删除数组的某一项,完全可以 例如:         var arr=['内马尔','C罗','梅西','伊布','范佩西']; for(let i=0;i /...
  • Take_Dream_as_Horse
  • Take_Dream_as_Horse
  • 2016-10-25 11:56:32
  • 1269

使用splice函数对数组中的元素进行删除时的注意事项

转载于:使用splice函数对数组元素删除注意事项 使用splice函数对数组中的元素进行删除时的注意事项 删除值为c的元素: var arr = new Array(); arr[0] ...
  • taoerchun
  • taoerchun
  • 2016-06-30 21:53:35
  • 2606

react的context更新而组件不更新的解决方案

代码地址请在github查看,也欢迎您star,issue,共同进步!1.react中父组件的shouldComponentUpdate返回false在React的Context API中,如果con...
  • liangklfang
  • liangklfang
  • 2017-05-27 17:17:30
  • 2636

让你的Android开发效率提高10倍的开源工具库AndroidTools的使用

# AndroidTools持续更新请star项目 github地址:AndroidTools (喜欢这个工具的,可以star一下,以后方便找到,Happy coding!)English READM...
  • dongdong230
  • dongdong230
  • 2017-01-22 16:48:25
  • 3698

支付开发(一)----微信支付开发之H5非微信浏览器支付JAVA版

微信支付一共有以下几种: 1、刷卡支付 刷卡支付是用户展示微信钱包内的“刷卡条码/二维码”给商户系统扫描后直接完成支付的模式。主要应用线下面对面收银的场景。 2、扫码支付 扫...
  • u011781521
  • u011781521
  • 2017-09-17 13:59:41
  • 6333

React学习之扩展不变的数据(immutability-helper)优化(三十二)

注意 此插件是一个被遗留的插件,如今好像更新为这个地址:https://github.com/kolodny/immutability-helper 引入 import update from '...
  • qq_18661257
  • qq_18661257
  • 2017-04-01 21:31:24
  • 1731

javascrpit中的slice()方法和splice()方法

1.slice() 可提取字符串的某个部分,并以新字符串返回被提取的部分 形如 slice(start,[end]); start 必需项 开始位置 end 可选项 结束位置 (1) en...
  • xiaobangsky
  • xiaobangsky
  • 2015-09-09 17:22:02
  • 683

超详细从零记录Hadoop2.7.3完全分布式集群部署过程

超详细从零记录Ubuntu16.04.1 3台服务器上Hadoop2.7.3完全分布式集群部署过程。包含,Ubuntu服务器创建、远程工具连接配置、Ubuntu服务器配置、Hadoop文件配置、Had...
  • dream_an
  • dream_an
  • 2016-10-27 16:12:29
  • 22580
收藏助手
不良信息举报
您举报文章:React update插件中 splice指令的理解
举报原因:
原因补充:

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