-
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 right drop list could symbolize the ending if so wished
🅱️ utton "SLICE" slices the cake and distributes them on to the plates- Also the sliced slices will be visibly brightend
The numbers in the second picture above show the position of the cake slices in the array.
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: