JavaScript 如何从引用类型(Array 、 Object)创建一个新的对象
数组的增删改
1、新增一项
可以使用concat方法,它不会对原有数组进行改动,而是创建一个新数组
let a = [0, 1, 2]
let b = a.concat([3])
console.log(a, b)
2、删除一项
对于删除某一项的操作,splice也不能满足要求,因为该方法会改变原有数组,相应地我们应该使用slice,并结合es next 新特性。
let array = [1,2,3]
const removeIndex = (array, index) => {
return [
...array.slice(0, index),
...array.slice(index + 1),
]
}
let newArray = removeIndex(array, 1);
3、更新一项
let array = [1, 2, 3];
const updateIndex = (array, index, cb) => {
return [
...array.slice(0, index),
cb && cb(array[index]),
...array.slice(index + 1),
]
}
updateIndex(array, 1, function (data) {
return data + 1;
});
4、新增也可以使用这种思路,比concat要灵活
let array = [1, 2, 4];
const insertIndex = (array, index, value) => {
return [
...array.slice(0, index),
value,
...array.slice(array.length - 1),
]
}
insertIndex(array, 2, 3);
对象的增删改
1、更新一项
使用ES next新特性的 Object.assign 方法。
第一个参数必须是空对象,因为第一个参数会被改变(接受合并所有参数的值)
我们要更新的值必须放在最后面,因为参数越往后,权限越高。才能覆盖前者重复的内容
let sourceItem = {
id: 0,
book: 'Learn Redux',
avaliable: false
}
Object.assign({}, sourceItem, {
avaliable: true
})
2、对象操作:新增一项
其实和上面一样,写入新的键值对就算新增嘛
let sourceItem = {
id: 0,
book: 'Learn Redux',
avaliable: false
}
Object.assign({}, sourceItem, {
fuck: 123
})
3、对象操作:删除一项
let sourceItem = {
id: 0,
book: 'Learn Redux',
avaliable: false,
fuck: 123
}
let newItem = Object.key(sourceItem).reduce((obj, key) => {
if (key !== 'fuck') {
return { ...obj, [key], sourceItem[key] }
}
return obj
}, {})
JavaScript 如何从引用类型(Array 、 Object)创建一个新的对象的更多相关文章
- Java中如何创建一个新的对象的/Creating Objects/
The Java Tutorials have been written for JDK 8. Examples and practices described in this page don't ...
- JS——数组中push对象,覆盖问题,每次都创建一个新的对象
今天写运动框架时,发现将对象push进数组,后面的值会覆盖前面的值,最后输出的都是最后一次的值.其实这一切都是引用数据类型惹的祸. 如果你也有类似问题,可以继续看下去哦. 下面 ...
- 什么是不可变对象(immutable object)?Java 中怎么 创建一个不可变对象?
不可变对象指对象一旦被创建,状态就不能再改变.任何修改都会创建一个新的对象,如 String.Integer 及其它包装类. 详情参见答案,一步一步指导你在 Java中创建一个不可变的类.
- javascript学习笔记 - 引用类型 Array
二 Array 1.可以通过length属性删除或创建新的数组项 arr = [1,2,3]; arr.length = 4;//增加 [1,2,3,undefined] arr.length = 2 ...
- 记一次oracle创建一个新数据库,并导入正式环境数据库备份的dmp包过程
背景:正式环境oracle数据库定时用exp备份一个dmp包,现在打算在一台机器上创建一个新数据库,并导入这个dmp包. 1.创建数据库 开始 -> 所有程序 -> Oracle -> ...
- filter() 方法创建一个新数组
filter快速过滤创建一个新数组 var new_array = arr.filter(callback(element[, index[, array]])[, thisArg]) 参数节 cal ...
- jquery创建一个新的节点对象(自定义结构/内容)的好方法
jq创建一个新的节点对象,这对一些自定义功能很有帮助,而且可以随意控制对象的结构与内容,何乐而不为呢,看到这里,相信有些朋友已经按耐不住了,好记下来为大家介绍实现方法,感兴趣的朋友可以了解下哦 < ...
- linux内核分析作业6:分析Linux内核创建一个新进程的过程
task_struct结构: struct task_struct { volatile long state;进程状态 void *stack; 堆栈 pid_t pid; 进程标识符 u ...
- Step by Step 创建一个新的Dynamics CRM Organization
原创地址:http://www.cnblogs.com/jfzhu/p/4012833.html 转载请注明出处 前面演示过如何安装Dynamics CRM 2013,参见<Step by st ...
随机推荐
- vCenter orchestrator使用范例
- 如何解析android访问webservice返回的SoapObject数据(可用)
怎么解析android访问webservice返回的SoapObject数据 本帖最后由 kkDragon123 于 2013-03-26 15:50:07 编辑 我的数据如下:mingdanResp ...
- Vue router 一个路由对应多个视图
使用命名路由 https://jsfiddle.net/posva/6du90epg/ <script src="https://unpkg.com/vue/dist/vue.js&q ...
- 常用jQuery知识
什么是jQuery jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML do ...
- SpringMVC学习笔记一:基本概念,执行流程与开发步骤
转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6831328.html 一:基本概念 DispatcherServlet:前端控制器,负责把请求分发处理. H ...
- storm中worker、executor、task之间的关系
这里做一些补充: worker是一个进程,由supervisor启动,并只负责处理一个topology,所以不会同时处理多个topology. executor是一个线程,由worker启动,是运行t ...
- wordpress 开源博客系统部署
1.开发工具 server apache 下载地址:http://www.apache.org http://httpd.apache.org/download.cgi 数据库 mys ...
- Xamarin.Android服务的实现
一.服务的生命周期 服务与活动一样,在它的整个生命周期中存在着一些事件,下图可以很好解释整个过程以及涉及到的方法: 在真实的使用中,Service来还包含一个OnBind方法,并且必须要使用该方法,但 ...
- mysql workbench图形化mysql管理工具
MYSQL官网也推出了针对Linux的图形化的连接工具-MySQL Workbench.MySQL Workbench不仅仅是一个简单的MySQL客户端.简而言之,Workbench是一个跨平台的 ( ...
- d3dx9库函数
这几天参考了csdn上大坡先生()整理的d3dx9的库函数,我做了一些机械的事情.就算过年练打字了.以下为我整理的d3dx9库函数简略版,以后除了msdn外,存档备用: D3DXCOLOR* D3DX ...