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. windowIsTranlucent 属性

    项目中踩的大坑.  先埋. int alwaysFinish = 0; if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERS ...

  2. 抓取锁的sql语句-第三次修改

    CREATE OR REPLACE PROCEDURE SOLVE_LOCK AS V_SQL VARCHAR2(3000); --定义 v_sql 接受抓取锁的sql语句CUR_LOCK SYS_R ...

  3. IOS改变状态栏样式

    1.状态栏高亮颜色 在info.plist中添加 View controller-based status bar appearance 设置为 "NO"在AppDelegate. ...

  4. WPF Binding

    winform有binding, WPF也有binding,区别在哪呢?这里暂时不提.以前也检查接触WPF binding, 但为什么过段时间就忘记了呢? 可能主要原因自己的知识体系不够完善吧,下面我 ...

  5. 用 javascript 判断 IE 版本号

    原文地址: http://julying.com/blog/determine-the-version-number-of-ie-with-javascript/ var _IE = (functio ...

  6. select 1 from table where的作用？

    "SELECT 1 FROM identity_approve WHERE identity_num=' " . trim($_POST['IDnumber']) . " ...

  7. Sublime Text 3 中文汉化绿色破解特别版下载

    Sublime Text是一款代码编辑器,几乎支持所有语言的编写.sublime给人们的印象不外乎小巧.速度快.并且快捷键丰富而强大.不知繁多的插件. sublime一般被应用到前端的开发.Subli ...

  8. Autoit实现分割字符串，循环输出元素

    #include <MsgBoxConstants.au3> Local $aDays = StringSplit("Mon,Tues,Wed,Thur,Fri,Sat,Sun& ...

  9. 在C#中使用属性控件添加属性窗口

    转自原文 在C#中使用属性控件添加属性窗口 第一步,创建在应用程序中将要展现的字段属性为public公有属性.其中,所有的属性必须有get和set的方法(如果不设置get方法,则要显示的属性不会显示在 ...

  10. 浅析hashCode方法

    一.问题引入 谈到hashCode就不得不说equals方法,二者均在Object类里,由于Object类是所有类的基类,所以一切类里都可以重写这两个方法. 要想较清晰的理解,需要先知道容器Colle ...