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. html5 的百度地图连接

    在一些网站上,我们经常会看到一些地址会有一个图标的形式展现,当你点击的时候就会加载一个你点击区域的地图出来,很神奇的一个功能,在之前是没有这样功能的,都是直接写上地址,你要去的话自己找去吧,现在有了这 ...

  2. Notepad++中查找替换回车符

    用Nodepad++打开文件 View->Show Symbol->Show End of Line "End of Line"行结束符,由"CR" ...

  3. protocol buffer VS 2013编译出错

    protocol buffer 在VS2013编译会出现以下错误. 解决办法 把宏加上, 问题解决. 注: 该错误只出现在Debug版本.

  4. mysql操作1

    一.连接MYSQL.格式: mysql -h主机地址 -u用户名 -p用户密码1.连接到本机上的MYSQL.首先打开DOS窗口,然后进入目录mysql\bin,再键入命令mysql -u root - ...

  5. 【USACO 2.4.4】回家

    [描述] 现在是晚餐时间,而母牛们在外面分散的牧场中. 农民约翰按响了电铃,所以她们开始向谷仓走去. 你的工作是要指出哪只母牛会最先到达谷仓(在给出的测试数据中,总会有且只有一只最快的母牛). 在挤奶 ...

  6. 46 Permutations(全排列Medium)

    题目意思:全排列 思路:其实看这题目意思,是不太希望用递归的,不过还是用了递归,非递归的以后再搞吧 ps:vector这玩意不能随便返回,开始递归方法用vector,直接到500ms,换成void,到 ...

  7. jquery cookies（2）用法实现

    example $.cookie('name', ‘value'); 设置cookie的值,把name变量的值设为value example $.cookie('name', ‘value', {ex ...

  8. [Struts2学习笔记] -- 简单的类型转换

    接下来学习一下Struts2简单的类型转换,Struts2基于ognl.jar实现了简单类型的数据转换.比如jsp页面中的form值与字段值的转换,下面写一个例子. 1.创建一个jsp页面,编写一个f ...

  9. connect函数

    TCP客户用connect函数来建立与TCP服务器的连接 int connect (int sockfd, const sockaddr * servaddr, socklen_t addrlen); ...

  10. ajax切换明星头像！

    html部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...