数组的增删改

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. VMware Infrastructure 3 in a Cisco Network Environment

    http://www.cisco.com/en/US/docs/solutions/Enterprise/Data_Center/vmware/VMware.html

  2. Android原生webview中js交互

    http://www.cnblogs.com/android-blogs/p/4891264.html Html页面和Java代码结合的方式一般用在界面经常被更改 的情况下,可以讲html放在网络中, ...

  3. python解析命令行参数

    常常需要解析命令行参数,经常忘记,好烦,总结下来吧. 1.Python 中也可以所用 sys 的 sys.argv 来获取命令行参数: sys.argv 是命令行参数列表 参数个数:len(sys.a ...

  4. 12 个非常实用的 jQuery 代码片段

    jQuery是一个非常流行而且实用的JavaScript前端框架,本文并不是介绍jQuery的特效动画,而是分享一些平时积累的12个jQuery实用代码片段,希望对你有所帮助. 导航菜单背景切换效果 ...

  5. VTK中导入并显示STL、3DS文件

    VTK(visualization toolkit)是一个开源的免费软件系统,主要用于三维计算机图形学.图像处理和科学计算可视化.VTK是在三维函数库OpenGL 的基础上采用面向对象的设计方法发展起 ...

  6. 用Beautiful Soup解析html源码

    #xiaodeng #python3 #用Beautiful Soup解析html源码 html_doc = """ <html> <head> ...

  7. [Jmeter系列]Jmeter源码编译步骤(转)

    官网:http://jmeter.apache.org/building.html   1,在apach官网download源码: http://jmeter.apache.org/download_ ...

  8. 基于git 客户端使用shell工具

    1 定义全局启动 命令别名 C:\Program Files\Git\etc\profile.d\aliases.sh alias ls='ls -F --color=auto --show-cont ...

  9. Ubuntu18.04使用f3probe检测U盘实际容量

    项目主页 https://fight-flash-fraud.readthedocs.io/ 使用f3probe 能快速检测出被测U盘的实际容量, 命令 $ sudo f3probe --destru ...

  10. ios中自定义button

    自定义button #import <UIKit/UIKit.h> #define KFont 15 @interface DIYButton : UIButton @property(n ...