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基本权限

    首先需要我们了解的是,权限(rwx)对于文件和目录的作用是不一样的 . 权限对文件的作用 r : 读取文件内容(cat , more , head , tail) w: 编辑.新增.修改文件内容(vi ...

  2. [转] iOS开发- UICollectionView详解+实例

    本章通过先总体介绍UICollectionView及其常用方法,再结合一个实例,了解如何使用UICollectionView. UICollectionView 和 UICollectionViewC ...

  3. 一起学makefile

    Unix.Linux必学知识哈哈,网上看到一哥们写得挺好挺详细的,直接复制地址就分享哈哈哈. 跟我一起写 Makefile(一) 概述 跟我一起写 Makefile(二) make是如何工作的 跟我一 ...

  4. Python 3中bytes和str的分别

    最近把一段py2的代码转换到py3的代码,结果运行到向socket中写数据的代码部分出现了'str' does not support the buffer interface这样一个错误. 一番搜索 ...

  5. 11_RHEL安装Maya2015

    1. 解压 tar -xvf ./Autodesk_Maya_English_2015_Linux_64bit.tgz 2. 运行 ./setup 2.1补充 如果提示缺少 libpng12.so.0 ...

  6. 自定义JQuery插件之 beforeFocus

    <html> <head> <title></title> <script type="text/javascript" sr ...

  7. js join()函数将数组转换成字符串

    join() 方法用于把数组中的所有元素放入一个字符串.作用是将数组转换为字符串,其作用和toString()相同. 元素是通过指定的分隔符进行分隔的. 例如: var asp=['H','ell', ...

  8. mongodb3.2系统性学习——4、find()操作

    find 操作语法展示: find()操作实例 : //连接数据库 dbService = connect("localhost:27017"); //选择插入集合 db = db ...

  9. Memcached-1.4.4启动参数——手动设置chunk大小的上限

    最近在看memcached的源代码,源码包是memcached-1.4.22,一开始看memcached.c的main函数的时候发现了和1.2.8的不同之处. 可能在1.4.22版本之前就已经添加了这 ...

  10. 如何搭建MVC3与配置models层

    1.1 新建项目 第一步:打开Vs2010界面,点击左上角文件,点击新建,选择项目 1.1(图1) 第二步:点击网站Web类型,选择ASP.net MVC3 Web应用程序,在名称中输入项目名称(解决 ...