数组的增删改

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)创建一个新的对象的更多相关文章

  1. Java中如何创建一个新的对象的/Creating Objects/

    The Java Tutorials have been written for JDK 8. Examples and practices described in this page don't ...

  2. JS——数组中push对象,覆盖问题,每次都创建一个新的对象

    今天写运动框架时,发现将对象push进数组,后面的值会覆盖前面的值,最后输出的都是最后一次的值.其实这一切都是引用数据类型惹的祸.       如果你也有类似问题,可以继续看下去哦.       下面 ...

  3. 什么是不可变对象(immutable object)?Java 中怎么 创建一个不可变对象?

    不可变对象指对象一旦被创建,状态就不能再改变.任何修改都会创建一个新的对象,如 String.Integer 及其它包装类. 详情参见答案,一步一步指导你在 Java中创建一个不可变的类.

  4. javascript学习笔记 - 引用类型 Array

    二 Array 1.可以通过length属性删除或创建新的数组项 arr = [1,2,3]; arr.length = 4;//增加 [1,2,3,undefined] arr.length = 2 ...

  5. 记一次oracle创建一个新数据库,并导入正式环境数据库备份的dmp包过程

    背景:正式环境oracle数据库定时用exp备份一个dmp包,现在打算在一台机器上创建一个新数据库,并导入这个dmp包. 1.创建数据库 开始 -> 所有程序 -> Oracle -> ...

  6. filter() 方法创建一个新数组

    filter快速过滤创建一个新数组 var new_array = arr.filter(callback(element[, index[, array]])[, thisArg]) 参数节 cal ...

  7. jquery创建一个新的节点对象(自定义结构/内容)的好方法

    jq创建一个新的节点对象,这对一些自定义功能很有帮助,而且可以随意控制对象的结构与内容,何乐而不为呢,看到这里,相信有些朋友已经按耐不住了,好记下来为大家介绍实现方法,感兴趣的朋友可以了解下哦 < ...

  8. linux内核分析作业6:分析Linux内核创建一个新进程的过程

    task_struct结构: struct task_struct {   volatile long state;进程状态  void *stack; 堆栈  pid_t pid; 进程标识符  u ...

  9. Step by Step 创建一个新的Dynamics CRM Organization

    原创地址:http://www.cnblogs.com/jfzhu/p/4012833.html 转载请注明出处 前面演示过如何安装Dynamics CRM 2013,参见<Step by st ...

随机推荐

  1. vCenter orchestrator使用范例

  2. 如何解析android访问webservice返回的SoapObject数据(可用)

    怎么解析android访问webservice返回的SoapObject数据 本帖最后由 kkDragon123 于 2013-03-26 15:50:07 编辑 我的数据如下:mingdanResp ...

  3. Vue router 一个路由对应多个视图

    使用命名路由 https://jsfiddle.net/posva/6du90epg/ <script src="https://unpkg.com/vue/dist/vue.js&q ...

  4. 常用jQuery知识

    什么是jQuery jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML do ...

  5. SpringMVC学习笔记一:基本概念,执行流程与开发步骤

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6831328.html  一:基本概念 DispatcherServlet:前端控制器,负责把请求分发处理. H ...

  6. storm中worker、executor、task之间的关系

    这里做一些补充: worker是一个进程,由supervisor启动,并只负责处理一个topology,所以不会同时处理多个topology. executor是一个线程,由worker启动,是运行t ...

  7. wordpress 开源博客系统部署

     1.开发工具 server apache    下载地址:http://www.apache.org   http://httpd.apache.org/download.cgi 数据库 mys ...

  8. Xamarin.Android服务的实现

    一.服务的生命周期 服务与活动一样,在它的整个生命周期中存在着一些事件,下图可以很好解释整个过程以及涉及到的方法: 在真实的使用中,Service来还包含一个OnBind方法,并且必须要使用该方法,但 ...

  9. mysql workbench图形化mysql管理工具

    MYSQL官网也推出了针对Linux的图形化的连接工具-MySQL Workbench.MySQL Workbench不仅仅是一个简单的MySQL客户端.简而言之,Workbench是一个跨平台的 ( ...

  10. d3dx9库函数

    这几天参考了csdn上大坡先生()整理的d3dx9的库函数,我做了一些机械的事情.就算过年练打字了.以下为我整理的d3dx9库函数简略版,以后除了msdn外,存档备用: D3DXCOLOR* D3DX ...