[Redux] Avoiding Array Mutations with concat(), slice(), and ...spread
For Redux, you cannot use mutable methods like push, splice. Need to use immutable methods such as concat, slice and ...spread
Html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="https://wzrd.in/standalone/expect@latest"></script>
<script src="https://wzrd.in/standalone/deep-freeze@latest"></script>
</head>
<body> </body>
</html>
push() vs concat()
push: modify the array;
concat: return a new array;
console.clear();
const addCounter = (list)=>{
list.push(0);
return list;
} const testAddCounter = ()=>{
const beforeList = [];
const afterList = [0]; deepFreeze(beforeList); expect(
addCounter(beforeList)
).toEqual(afterList);
} testAddCounter();
console.log("All tests passing.."); /**
"error"
"TypeError: Can't add property 0, object is not extensible
at addCounter (fegewebemu.js:5:8)
at testAddCounter (fegewebemu.js:15:10)
at fegewebemu.js:18:1"
*/ console.clear();
const addCounter = (list)=>{
let res = list.concat(0);
return res;
} const testAddCounter = ()=>{
const beforeList = [];
const afterList = [0]; deepFreeze(beforeList); expect(
addCounter(beforeList)
).toEqual(afterList);
} testAddCounter();
console.log("All tests passing.."); // passing
Using ...spread:
console.clear();
const addCounter = (list)=>{
return [...list, 0];
} const testAddCounter = ()=>{
const beforeList = [];
const afterList = [0]; deepFreeze(beforeList); expect(
addCounter(beforeList)
).toEqual(afterList);
} testAddCounter();
console.log("All tests passing.."); // Passing
splice() vs slice()
splice: modfiy array;
slices: return new array;
console.clear();
const removeCounter= (list, index)=>{
list.splice(index, 1);
return list;
} const testRemoveCounter = ()=>{
const beforeList = [0 ,10,20];
const afterList = [0, 20]; deepFreeze(beforeList); expect(
removeCounter(beforeList, 1)
).toEqual(afterList);
}
testRemoveCounter();
console.log("All tests passing.."); /**
"error"
"TypeError: Cannot add/remove sealed array elements
at removeCounter (fegewebemu.js:5:8)
at testRemoveCounter (fegewebemu.js:15:10)
at fegewebemu.js:17:1"
*/ console.clear();
const removeCounter= (list, index)=>{
return list.slice(0, index)
.concat(list.slice(index+1));
} const testRemoveCounter = ()=>{
const beforeList = [0 ,10,20];
const afterList = [0, 20]; deepFreeze(beforeList); expect(
removeCounter(beforeList, 1)
).toEqual(afterList);
}
testRemoveCounter();
console.log("All tests passing.."); // Passing
ES6:
console.clear();
const removeCounter= (list, index)=>{ return [
...list.slice(0, index),
....list.slice(index + 1)
];
} const testRemoveCounter = ()=>{
const beforeList = [0 ,10,20];
const afterList = [0, 20]; deepFreeze(beforeList); expect(
removeCounter(beforeList, 1)
).toEqual(afterList);
}
testRemoveCounter();
console.log("All tests passing.."); // Passing
Modify one element in array:
console.clear();
const incrementCounter = (list, index) => {
list[index]++; return list;
}; const testIncrementCounter = ()=>{
const beforeList = [0 ,10,20];
const afterList = [0, 11, 20]; deepFreeze(beforeList); expect(
incrementCounter(beforeList, 1)
).toEqual(afterList);
}
testIncrementCounter();
console.log("All tests passing..");
/**
"error"
"Error: Expected [ 0, 10, 20 ] to equal [ 0, 11, 20 ]
at Object.assert [as default] (https://wzrd.in/standalone/expect@latest:489:9)
at Expectation.toEqual (https://wzrd.in/standalone/expect@latest:70:26)
at testIncrementCounter (fegewebemu.js:16:43)
at fegewebemu.js:18:1"
*/ console.clear();
const incrementCounter = (list, index) => {
let res = list.slice(0, index)
.concat(++list[index])
.concat(list.slice(index+1)); return res;
}; const testIncrementCounter = ()=>{
const beforeList = [0 ,10,20];
const afterList = [0, 11, 20]; deepFreeze(beforeList); expect(
incrementCounter(beforeList, 1)
).toEqual(afterList);
}
testIncrementCounter();
console.log("All tests passing.."); // Passing
ES6:
console.clear();
const incrementCounter = (list, index) => {
return [
...list.slice(0, index),
++list[index],
...list.slice(index+1)
];
}; const testIncrementCounter = ()=>{
const beforeList = [0 ,10,20];
const afterList = [0, 11, 20]; deepFreeze(beforeList); expect(
incrementCounter(beforeList, 1)
).toEqual(afterList);
}
testIncrementCounter();
console.log("All tests passing.."); // Passing
[Redux] Avoiding Array Mutations with concat(), slice(), and ...spread的更多相关文章
- [Redux] Avoiding Object Mutations with Object.assign() and ...spread
Learn how to use Object.assign() and the spread operator proposed for ES7 to avoid mutating objects. ...
- 数组方法concat & slice
掌握数组的操作方法: concat() / slice() concat() 语法: arrayObject.concat(arrayX,arrayY,....,arrayZ) 功能:用于连接两个或 ...
- 【译】Rust中的array、vector和slice
原文链接:https://hashrust.com/blog/arrays-vectors-and-slices-in-rust/ 原文标题:Arrays, vectors and slices in ...
- [Javascript] Array methods in depth - slice
Array slice creates a shallow copy of an array. In this lesson we cover, in detail, exactly what a ' ...
- JavaScript引用类型之Array数组的concat()和push()方法的区别
在javascript中,我们一般都只用push向数组的尾部插入新元素的,但是其实在javascript中还有另外一个方法和push一样,也是向数组尾部插入新元素的,但是他们之间却存在着一定的区别,当 ...
- (转)Array.prototype.slice.call自解
很多框架或者库里面都会有这句的使用,最多的还是通过Array.prototype.slice.call(arguments,0)把arguments这个伪数组转换为真正的数组.但为什么可以这么做,却一 ...
- 【Go入门教程2】内置基础类型(Boolean、数值、字符串、错误类型),分组,iota枚举,array(数值),slice(切片),map(字典),make/new操作,零值
这小节我们将要介绍如何定义变量.常量.Go内置类型以及Go程序设计中的一些技巧. 定义变量 Go语言里面定义变量有多种方式. 使用var关键字是Go最基本的定义变量方式,与C语言不同的是Go把变量类型 ...
- 【GoLang】GoLang 遍历 map、slice、array方法
代码示例: map1 := make(map[string]string) map1["a"] = "AAA" map1["b"] = &q ...
- 详解 Array.prototype.slice.call(arguments)
首先,slice有两个用法,一个是String.slice,一个是Array.slice,第一个返回的是字符串,第二个返回的是数组 在这里我们看第二个方法 1.在JS里Array是一个类 slice是 ...
随机推荐
- android - startActivity浅谈
当执行startActivity(Intent intent, Bundle options)函数的时候,应用程序不是直接呼叫另外一个Activity,而是将intent传进Android框架中.An ...
- linux list all users.
cat /etc/passwd sample of list users in linux. ref: Linux Command: List All Users In The System
- Oracle存储过程及函数
1.在Oracle中,存储过程包括三部分组成:定义部分.执行部分.和异常处理部分(即例外) eg1:输入员工编号,查询员工的姓名和薪资 create or repalce procedure myp ...
- Objective-C 笔记二 类、对象和方法
对象就是一个物件.面向对象的程序设计可以看成一个物件和你想对它做的事情.这与C语言不同,C语言通常称为过程性语言.在C语言中,通常是先考虑要做什么,然后才关注对象,这几乎总是与面相对象的思考过程相反. ...
- 第10章 PHP异常处理
1. 抛出一个异常 从PHP5开始,PHP支持异常处理,异常处理是面向对象一个重要特性,PHP代码中的异常通过throw抛出,异常抛出之后,后面的代码将不会再被执行. 既然抛出异常会中断程序执行,那么 ...
- Activiti 工作流得到最后一次批注的时间
我们有时候在工作流开发中可能会遇到这样的需求,就是已经审批结束的流程,可能我们还是仍然需要修改业务表的结果,而且我们需要一个时间期限,比如:在5天内可以进行修改 ,这个时候我们就需要得到我们最后一步审 ...
- document.all和jq trigger原理
document.all是页面内所有元素的一个集合.如: document.all(0)表示页面内第一个元素document.all可以判断浏览器是否是IE if(document ...
- MongoDB-固定集合 capped collection 操作 介绍
固定集合:capped collection 是性能出色的固定大小的集合,以LRU算法淘汰记录,自助维护集合中的对象的插入顺序,创建时预先制定大小,空间使用完,心对象取代旧的对象,保持最新的数据. 可 ...
- HDU 2955(01背包问题)
M - 01背包 Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Descript ...
- JS之路——日期函数
时间对象是一个我们经常要用到的对象,无论是做时间输出.时间判断等操作时都与这个对象离不开.除开JavaScript中的时间对象外,在VbScript中也有许多的时间对象,而且非常好用.下面还是按照我们 ...