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的更多相关文章

  1. [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. ...

  2. 数组方法concat & slice

    掌握数组的操作方法: concat() /  slice() concat() 语法: arrayObject.concat(arrayX,arrayY,....,arrayZ) 功能:用于连接两个或 ...

  3. 【译】Rust中的array、vector和slice

    原文链接:https://hashrust.com/blog/arrays-vectors-and-slices-in-rust/ 原文标题:Arrays, vectors and slices in ...

  4. [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 ' ...

  5. JavaScript引用类型之Array数组的concat()和push()方法的区别

    在javascript中,我们一般都只用push向数组的尾部插入新元素的,但是其实在javascript中还有另外一个方法和push一样,也是向数组尾部插入新元素的,但是他们之间却存在着一定的区别,当 ...

  6. (转)Array.prototype.slice.call自解

    很多框架或者库里面都会有这句的使用,最多的还是通过Array.prototype.slice.call(arguments,0)把arguments这个伪数组转换为真正的数组.但为什么可以这么做,却一 ...

  7. 【Go入门教程2】内置基础类型(Boolean、数值、字符串、错误类型),分组,iota枚举,array(数值),slice(切片),map(字典),make/new操作,零值

    这小节我们将要介绍如何定义变量.常量.Go内置类型以及Go程序设计中的一些技巧. 定义变量 Go语言里面定义变量有多种方式. 使用var关键字是Go最基本的定义变量方式,与C语言不同的是Go把变量类型 ...

  8. 【GoLang】GoLang 遍历 map、slice、array方法

    代码示例: map1 := make(map[string]string) map1["a"] = "AAA" map1["b"] = &q ...

  9. 详解 Array.prototype.slice.call(arguments)

    首先,slice有两个用法,一个是String.slice,一个是Array.slice,第一个返回的是字符串,第二个返回的是数组 在这里我们看第二个方法 1.在JS里Array是一个类 slice是 ...

随机推荐

  1. android - startActivity浅谈

    当执行startActivity(Intent intent, Bundle options)函数的时候,应用程序不是直接呼叫另外一个Activity,而是将intent传进Android框架中.An ...

  2. linux list all users.

    cat /etc/passwd sample of list users in linux. ref: Linux Command: List All Users In The System

  3. Oracle存储过程及函数

    1.在Oracle中,存储过程包括三部分组成:定义部分.执行部分.和异常处理部分(即例外) eg1:输入员工编号,查询员工的姓名和薪资 create or repalce  procedure myp ...

  4. Objective-C 笔记二 类、对象和方法

    对象就是一个物件.面向对象的程序设计可以看成一个物件和你想对它做的事情.这与C语言不同,C语言通常称为过程性语言.在C语言中,通常是先考虑要做什么,然后才关注对象,这几乎总是与面相对象的思考过程相反. ...

  5. 第10章 PHP异常处理

    1. 抛出一个异常 从PHP5开始,PHP支持异常处理,异常处理是面向对象一个重要特性,PHP代码中的异常通过throw抛出,异常抛出之后,后面的代码将不会再被执行. 既然抛出异常会中断程序执行,那么 ...

  6. Activiti 工作流得到最后一次批注的时间

    我们有时候在工作流开发中可能会遇到这样的需求,就是已经审批结束的流程,可能我们还是仍然需要修改业务表的结果,而且我们需要一个时间期限,比如:在5天内可以进行修改 ,这个时候我们就需要得到我们最后一步审 ...

  7. document.all和jq trigger原理

    document.all是页面内所有元素的一个集合.如:       document.all(0)表示页面内第一个元素document.all可以判断浏览器是否是IE     if(document ...

  8. MongoDB-固定集合 capped collection 操作 介绍

    固定集合:capped collection 是性能出色的固定大小的集合,以LRU算法淘汰记录,自助维护集合中的对象的插入顺序,创建时预先制定大小,空间使用完,心对象取代旧的对象,保持最新的数据. 可 ...

  9. HDU 2955(01背包问题)

    M - 01背包 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u   Descript ...

  10. JS之路——日期函数

    时间对象是一个我们经常要用到的对象,无论是做时间输出.时间判断等操作时都与这个对象离不开.除开JavaScript中的时间对象外,在VbScript中也有许多的时间对象,而且非常好用.下面还是按照我们 ...