-
Notifications
You must be signed in to change notification settings - Fork 0
Home
This repository is part of a larger project!
In Javascript there exists a method called slice which should enable the coder to select an area of an array content.
The slice method takes either one or two arguments to define in which interval a sample in an array should be taken.
In this case the first argument should be the beginning and the second should define the ending of the chosen area. Value 0 as argument conforms the first value of the array which is sliced. The ending argument which indicates to a value in the array is not included in the resulting slice.
var R = [1,2,3,4,5,6,7,8];
//Doesn`t really slice, because beginning and ending arguments are not valid
console.log( R.slice(2,1) );//Outputs:[]
console.log( R.slice(0,0) );//Outputs:[]
//Legit
console.log( R.slice(0,1) );//Outputs:[1]
console.log( R.slice(1,2) );//Outputs:[2]
console.log( R.slice(2,3) );//Outputs:[3]
console.log( R.slice(3,4) );//Outputs:[4]
console.log( R.slice(4,5) );//Outputs:[5]
console.log( R.slice(5,6) );//Outputs:[6]
console.log( R.slice(6,7) );//Outputs:[7]
console.log( R.slice(7,8) );//Outputs:[8]
The negative value -1 seems the index value of the last element. Value 0 as argument conforms the first value of the array which is sliced. The ending argument which indicates to a value in the array is not included in the resulting slice.
var R = [1,2,3,4,5,6,7,8];
//Doesn`t really slice, because beginning and ending arguments are not valid
console.log( R.slice(-1,-2) );//Outputs:[]
//Legit
console.log( R.slice(0,-1) );//Outputs:[1, 2, 3, 4, 5, 6, 7]
console.log( R.slice(-2,-1) );//Outputs:[7]
console.log( R.slice(-3,-2) );//Outputs:[6]
console.log( R.slice(-4,-3) );//Outputs:[5]
console.log( R.slice(-5,-4) );//Outputs:[4]
console.log( R.slice(-6,-5) );//Outputs:[3]
console.log( R.slice(-7,-6) );//Outputs:[2]
console.log( R.slice(-8,-7) );//Outputs:[1]
If the ending is not defined, which is the case here, then its default value will be the length of the array.
var R = [1,2,3,4,5,6,7,8];
//Legit
console.log( R.slice(1) );//Outputs:[2, 3, 4, 5, 6, 7, 8]
console.log( R.slice(2) );//Outputs:[3, 4, 5, 6, 7, 8]
console.log( R.slice(3) );//Outputs:[4, 5, 6, 7, 8]
console.log( R.slice(4) );//Outputs:[5, 6, 7, 8]
console.log( R.slice(5) );//Outputs:[6, 7, 8]
console.log( R.slice(6) );//Outputs:[7, 8]
console.log( R.slice(7) );//Outputs:[8]
//Doesn`t really slice, because argument is not valid
console.log( R.slice(0) );//Outputs:[1, 2, 3, 4, 5, 6, 7, 8]
console.log( R.slice(8) );//Outputs:[]
If the ending is not defined, which is the case here, then its default value will be the length of the array.
var R = [1,2,3,4,5,6,7,8];
//LEGIT
console.log( R.slice(-1) );//Outputs:[8]
console.log( R.slice(-2) );//Outputs:[7, 8]
console.log( R.slice(-3) );//Outputs:[6, 7, 8]
console.log( R.slice(-4) );//Outputs:[5, 6, 7, 8]
console.log( R.slice(-5) );//Outputs:[4, 5, 6, 7, 8]
console.log( R.slice(-6) );//Outputs:[3, 4, 5, 6, 7, 8]
console.log( R.slice(-7) );//Outputs:[2, 3, 4, 5, 6, 7, 8]
//Doesn`t really slice, because argument is not valid
console.log( R.slice(-8) );//Outputs:[1, 2, 3, 4, 5, 6, 7, 8]
console.log( R.slice(-9) );//Outputs:[1, 2, 3, 4, 5, 6, 7, 8]
Objects in an array should be the same after the array is sliced. That should mean, that the changes should be global.
//An array with objects
var R =[ {'Hello': 2}, {'How':4}, {'Are':6}, {'You':8}];
//New Array - Contains: "[{'Hello': 2}, {'How':4}]"
var Reference = R.slice(0, 2);
//Overwriting a new value to the object "{'Hello': 2}"
Reference[0]['Hello'] = 10;
//'R' and 'Reference' refer to the same objects which they have within
console.log(Reference[0]);//Outputs: {'Hello': 10}
console.log(R[0]); //Outputs: {'Hello': 10}
In this case the elements of an array are not the same as the sliced result.
var R = [1,2,3,4,5,6,7,8];
//Contains:[7, 8]
var aCopy = R.slice(-2) ;
//Overwriting value "7"
aCopy[0] = 42;
console.log(aCopy[0]);//Outputs: 42
console.log(R[6]); //Outputs: 7
The user interaction part, after chosing some inputs, could look like the content as seen below by starting "index.html" in a web browser.
- The whole cake symbolizes the array which will be sliced
- The left drop list symbolizes the beginning
- The left drop list symbolizes the ending
🅱️ utton "SLICE" slices the cake and distributes them on to the plates- Also the sliced slices will be visibly brightend
The colored areas are just for a better readability in the wiki and are not part of the content. To use the project just download the files and execute "index.html". Note that all files(folders "wiki_images" and "PaintNET" excluded) should be placed in the same folder so that the functionality of the code is guaranteed.
The "PaintNet" folder contains a .pdn file which can be opened and altered with PaintNET for simple picture editing.
This knowledge was gained:
-
Effective JavaScript "68 Specific Ways to Harness the Power of JavaScript" by David Herman
Sources: