[Redux] Avoiding Array mutations with concat (), slice (), and ... spread

Source: Internet
Author: User

For Redux, the cannot use mutable methods like Push, splice. Need to use immutable methods such as concat, slice and ... spread

Html:

<!DOCTYPE HTML><HTML><Head>  <MetaCharSet= "Utf-8">  <title>JS Bin</title>  <Scriptsrc= "Https://wzrd.in/standalone/[email protected]"></Script>  <Scriptsrc= "Https://wzrd.in/standalone/[email protected]"></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); returnlist;} 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 was not extensible at AddCounter (Fegewebemu.js:5:8) at TESTADDC Ounter (fegewebemu.js:15:10) at Fegewebemu.js:18:1 "*/console.clear (); const AddCounter= (List) = ={Let res= List.concat (0); returnRes;} Const Testaddcounter= () + ={Const Beforelist= []; Const Afterlist= [0];    Deepfreeze (beforelist); Expect (AddCounter (beforelist)). Toequal (afterlist);} Testaddcounter (); Console.log ("All tests passing.");//passing

Using ... spread:

= (list) +=  {return [... list, 0= () + ={  = [];   = [0];    Deepfreeze (beforelist);    Expect (    addcounter (beforelist)  ). Toequal (afterlist);} Testaddcounter (); Console.log (///  passing

Splice () vs slice ()

Splice:modfiy Array;

Slices:return new Array;

console.clear (); const Removecounter= (list, index) = ={list.splice (index,1); returnlist;} 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 Testremoveco Unter (Fegewebemu.js:15:10) at Fegewebemu.js:17:1 "*/console.clear (); const Removecounter= (list, index) = ={  returnList.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),    + 1)  = () ={  = [0, 10,20];   = [0,];    Deepfreeze (beforelist);    Expect (    1)  ). Toequal (afterlist);} Testremovecounter (); Console.log (///  passing

Modify one element in array:

console.clear (); const Incrementcounter= (list, index) = ={List[index]++; returnlist;}; 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, Ten,] to equal [0, one,] at Object.assert [as default] (Https://wzrd.in/standa Lone/[email protected]:489:9) at expectation.toequal (Https://wzrd.in/standalone/[email protected]:70:26) at TESTINC Rementcounter (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)); returnRes;}; 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:

= (list, index) = {   return  [     ... list.slice (0, index),     + +list [index],     ... list.slice (index+1)   = () = ()=  {= [0, 10,20]  ; = [0, one, one];    Deepfreeze (beforelist);    Expect (    1)  ). Toequal (afterlist);} Testincrementcounter (); Console.log (///  passing

[Redux] avoiding Array mutations with concat (), slice (), and ... spread

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.