ES6扩展运算符...进行的数组删除

今天写了按照React小书写了Reducer,发现基础真是太重要了,所有关于上层建筑的细节都需要回到下层细节中去寻找,而且现在的基础也由ES3变成了ES6了。

const ADD_USER = "ADD_USER"
const DELETE_USER = "DELETE_USER"
const UPDATE_USER = "UPDATE_USER"const usersReducer = (state = [], action) => {switch (action.type) {case ADD_USER:return [...state, action.user]case DELETE_USER:return [...state.slice(0, action.index), ...state.slice(action.index + 1)]case UPDATE_USER:return {...state, user: state.map((item, index) => {if (index == action.index) {return action.user}})}default:return state}
}

通过上面这种扩展运算符的方式,可以将 数组里面的值展开。

也许我们还需要知道,ES6中的扩展运算符是不支持对象扩展的,不过 ES7 是支持的

利用扩展运算符我们能够很好地简化我们的代码,比如 上方就是 Object.assign 的一种简化(环境需要支持ES7)

let obj1 = {a: 1, b: 2};
let obj2 = {b: 3, c: 4};
console.log(Object.assign({}, obj1, obj2)); // way1
console.log({...obj1, ...obj2});            // way2

以上代码的执行结果是相同的。但我们要知道如果写 Object.assign(obj1, obj2)与上两者有些不同。

如果只是想要和合并出一个新的对象请采用 way1 和 way2,如果是合并一个老对象用上面这句话。


在 Redux 中,推荐这种删除方式。

const deleteNumber = (arr, index) => {return [...arr.slice(0, index), ...arr.slice(index + 1)];
};
let testArr = [1, 2, 3, 4, 5];
console.log(deleteNumber(testArr, 4)); // [1, 2, 3, 4]

需要注意的是slice是返回一个新数组,确切地说是新的子数组,不会改变原来的数组。


complete.

转载于:https://www.cnblogs.com/can-i-do/p/7200705.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369965.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

中南大学在线考试答案计算机基础,中南大学《计算机基础》在线考试题库(267题)(有答案).doc...

中南大学《计算机基础》在线考试题库(267题)(有答案).doc 计算机基础01 总共89题共100分 一. 单选题 (共35题,共35分) 1. 域名服务器DNS的主要功能是( )。 (1分) A.通过请求及回答获取主机和网络相关的信息 B.查询主机的MAC地址 C.为主机自动命名 D.合理分配IP地址 ★标准答案&…

自动化的OSGi测试运行器

在我的团队成员中,我以忘记维护(JUnit)测试套件而闻名。 我只是无法为此付出额外的手动为套件添加测试的步骤。 幸运的是,有连续的集成服务器通过命名模式收集测试。 如果我介绍的一项孤立测试失败了,那么它会脱颖而出…

php post请求后端拿不到值_PHP Post获取不到非表单数据的问题解决办法

问题描述在使用vue-axios向后端post数据时,PHP端获取不到post的数据。问题解决修改php.ini配置找到php.ini配置文件,查找enable_post_data_reading变量,修改为打开状态,注释掉句前分好; Whether PHP will read the POST data.; Th…

CSS制作简单loading动画

曾经以为,loading的制作需要一些比较高深的web动画技术,后来发现大多数loading都可以用“障眼法”做出来。比如一个旋转的圆圈,并不都是将gif图放进去,有些就是画个静止图像,然后让它旋转就完了。gif图也可以&#xff…

机器学习:多变量线性回归

************************************** 注:本系列博客是博主学习Stanford大学 Andrew Ng 教授的《机器学习》课程笔记。博主深感学过课程后,不进行总结非常easy遗忘,依据课程加上自己对不明确问题的补充遂有此系列博客。本系列博客包含线性…

Java对象复活

总览 收集覆盖了finalize()的对象之后,将其添加到终结处理队列中,以在调用每个对象的finalize()方法之后进行清理。 如果您复活该物体,会发生什么? 何时定稿? finalize方…

经过路由无法找到计算机,电脑无法启动服务提示系统找不到指定的路径(图)

原标题:"电脑无法启动服务提示系统找不到指定的路径"相关电脑问题教程分享。 - 来源:191路由网。众所周知,使用电脑的时候需要启动一些服务才能使用相关的功能,但是如果出现无法启动服务项,并且提示“错误3:…

有关域索引错误产生的原因及解决办法

1说明 数据库错误ORA-29861:域索引标记为LOADING/FAILED/UNUSABLE,其错误原因及解决办法,根据ORACLE官方文档的说法如下: // *Cause: An attempt has been made to access a domain index that is// being built or is marked faile…

详细解读css中的浮动以及清除浮动的方法

对于前端初学者来说,css浮动部分的知识是一块比较难以理解的部分,下面我将把我学习过程中的心得分享给大家。 导读: 1.css块级元素讲解 2.css中浮动是如何产生的 3.出现浮动后,如何清除浮动(本文将涉及到多种清除浮动…

微信多开txt_电脑版微信怎么双开、多开

新建一个txt文本文件,在文件中写入如下代码:echo offstart /d "C:\Program Files (x86)\Tencent\WeChat\" WeChat.exestart /d "C:\Program Files (x86)\Tencent\WeChat\" WeChat.exeexit保存文本文件。这里需要注意的是&#xff1a…

java 基础--随笔

---恢复内容开始--- java 对大小写敏感。 java没有任何无符号类型(unsigned)。 C/C是编译型语言,java是解释性语言。 JAVA编译过程同C/C 的 编译有些不同。当C编译器编译生成一个对象的代码时,该代码是为在某一特定硬件平台运行而…

多源计算机培训,多源数据汇聚的多流形学习算法研究

摘要:随着信息技术和互联网的飞速发展,人们可以从多个信息源获得数据,即多源数据.由于多源数据具有类型多样,尺度不统一等特点,对多源数据进行汇聚并提取有效信息是机器学习和模式识别等领域研究的热点.由于多流形学习能够有效地揭示复杂数据中的内在结构,因此本文主…

Ubuntu 16.04 安装mysql5.7

技术更新换代,数据库也不断更新,需要不断努力学习,下面就是如何在 ubuntu中安装 mysql。 废话不多说,上来就是干 一、安装mysql 5.7 sudo apt-get update sudo apt-get install mysql-server 中间会提示您输出root 密码&#xff…

CSS多列布局(实例)

前言 一列布局二列布局三列布局 1 一列布局 一列布局&#xff1a; HTML部分 <!DOCTYPE html> <html> <head> <meta charset"utf-8" /> <title>一列布局</title> </head> <body> <div class"head">…

阿帕奇骆驼备忘单

轮询一个空目录&#xff08;并发送一个空消息&#xff0c;正文为空&#xff09;&#xff1a; from(file://temp?sendEmptyMessageWhenIdletrue)停止路线&#xff1a; .process(new Processor() {public void process(Exchange exchange) throws Exception {getContext().stopR…

js中双感叹号_JavaScript中双叹号(!!)作用

经常看到这样的例子&#xff1a;vara&#xff1b;var b!!a;a默认是undefined。!a是true&#xff0c;!!a则是false&#xff0c;所以b的值是false&#xff0c;而不再是undefined&#xff0c;也非其它值&#xff0c;主要是为后续判断提供便利。!!一般用来将后面的表达式强制转换为…

大头贴计算机教程,推荐!自家电脑也能拍大头贴的秘密

您可能感兴趣的话题&#xff1a;美图拍拍核心提示&#xff1a;一直都超爱拍大头贴&#xff0c;喜欢每张都能换不同的框框&#xff1b;喜欢可以直接看到效果&#xff0c;做出满意的动作&#xff1b;喜欢将大头贴和朋友们分享……不过夏日炎炎的&#xff0c;出门太麻烦&#xff0…

用CSS伪类制作一个不断旋转的八卦图?

前言 介绍一下如何制作一个不断旋转的八卦图。快速预览代码及效果&#xff0c;点击&#xff1a;八卦图 代码如下&#xff1a; HTML部分 <!DOCTYPE html> <html> <head><meta charset"utf-8"><title>JS Bin</title> </head&…

js根据ip自动获取地址(省市区)

HTML&#xff1a; <html><head><meta charset"utf-8"><meta name"viewport" content"widthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, minimum-scale1.0"><title>标题</title>&l…

流利的对象创建

关于此主题的文章很多&#xff08;绝大多数&#xff09;&#xff0c;但我只是想贡献我的两分钱&#xff0c;写一篇简短的文章&#xff0c;介绍如何使用Java中的Fluent Object Creation模式或对象构建器实例化Value Objects。 值对象是由其状态&#xff08;值&#xff09;而不是…