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. linux下系统定时任务配置----crontab（mysql定时备份）

    crontab命令用于设置周期性被执行的指令,与windows下的计划任务类似,当安装完成操作系统后,默认会安装此服务工具,并且会自动启动crond进程,crond进程每分钟会定期检查是否有要执行的任 ...

  2. MD5算法的使用

    using System.Security.Cryptography; using System.Text; StringBuilder sb = new StringBuilder();//构建一个 ...

  3. iOS开发中EXC_BAD_ACCESS的另类原因

    今天偶然学习iOS开发的时候碰到一个EXC_BAD_ACCESS的异常,经查资料得到的解释是由于访问了已经被回收了堆内存对象导致的,参考: http://code.tutsplus.com/tutor ...

  4. QT实现单个EXE文件

    有时候发布用Qt写的软件是件令人烦恼的事情,明明发布的只是一个简单功能的小软件,非得再附上一堆超大的动态链接库,实在让人觉得汗颜 . 在可执行文件单文件化方面,有多种方法.常用的是编译并使用静态 Qt ...

  5. CentOS 7 之Helloworld with c

    其实我也不知道是为了啥, 到了现在这种年纪还想学习Linux下的C语言编程.因为我一直就傻傻地认为机会是垂青有准备的人,也一直呆呆地认为活到老学到老.现在Android这么火,各种终端如雨后春笋,而这 ...

  6. Java学习----Java程序结构

    1.什么是类 在源文件中程序员自己定义的通过class关键字,自己给类名这样的定义的一个类,而类里包含一个或多个方法 2.什么是源文件 由程序员使用java语言编写的以.java为结尾的一个文件 3. ...

  7. chrome浏览器调试

    我们在开发前端代码的时候经常会遇到要调试css,js代码的时候,以前在调试的时候可能需要修改了css代码,然后在前台看一下样式,js也是一样的,可能会用alert或者是console.log输出,然后 ...

  8. 78 Subsets(求子集Medium)

    题目意思:求解一个数组的所有子集,子集内的元素增序排列eg:[1,3,2] result:[],[1],[2],[1,2],[3],[1,3],[2,3],[1,2,3]思路:这是一个递推的过程 [] ...

  9. fedora20 播放aiv视频

    环境:fedora20 64位 下载个教程是avi的格式,用FEDORA自带的视频播放提示少插件,搜索又没有.  到网上搜索后,参考下面的方式添加软件仓库后,再打开视频播放顺利装好插件.但视频画件一闪 ...

  10. jquery easy ui 学习 （7） TreeGrid Actions

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...