Home >Web Front-end >JS Tutorial >Implement equal fraction array in JavaScript
The
Related free learning recommendations: javascript (video)
In this tutorial, we will learn how to use the Array.splice()
method to divide an array into equal parts. We will also talk about, Array.splice()
and Array.slice()
The difference between them.
We can split the array into two halves in two steps:
Use length/2
andMath.ceil()
Methods to find the middle index of the array
Use the middle index and Array.splice()
Method to get the equally divided parts of the array
Math.ceil() function returns the smallest integer greater than or equal to a given number.
const list = [1, 2, 3, 4, 5, 6]; const middleIndex = Math.ceil(list.length / 2); const firstHalf = list.splice(0, middleIndex); const secondHalf = list.splice(-middleIndex); console.log(firstHalf); // [1, 2, 3] console.log(secondHalf); // [4, 5, 6] console.log(list); // []
Array.splice()
method changes the contents of an array by removing, replacing, or adding elements. TheArray.slice()
method will first make a copy of the array before operating.
list.splice(0, middleIndex)
Delete the first 3
elements from the 0
index of the array, and return it. splice(-middleIndex)
Removes the last 3
elements from the array and returns it. At the end of these two operations, the original array is empty since we have removed all elements from the array.
Also note that in the above case the number of elements is even, if the number of elements is odd there will be an extra element in the first half.
const list = [1, 2, 3, 4, 5]; const middleIndex = Math.ceil(list.length / 2); list.splice(0, middleIndex); // returns [1, 2, 3] list.splice(-middleIndex); // returns [4, 5]
Sometimes we don’t want to change the original array. This can be solved with Array.slice():
const list = [1, 2, 3, 4, 5, 6]; const middleIndex = Math.ceil(list.length / 2); const firstHalf = list.slice().splice(0, middleIndex); const secondHalf = list.slice().splice(-middleIndex); console.log(firstHalf); // [1, 2, 3] console.log(secondHalf); // [4, 5, 6] console.log(list); // [1, 2, 3, 4, 5, 6];
We see that the original array remains unchanged because we used Array.slice()
to make a copy of the original array before removing the elements using Array.slice()
.
const list = [1, 2, 3, 4, 5, 6, 7, 8, 9]; const threePartIndex = Math.ceil(list.length / 3); const thirdPart = list.splice(-threePartIndex); const secondPart = list.splice(-threePartIndex); const firstPart = list; console.log(firstPart); // [1, 2, 3] console.log(secondPart); // [4, 5, 6] console.log(thirdPart); // [7, 8, 9]
Briefly explain what is done above:
First use st.splice( -threePartIndex)
extracts the ThirdPart, which deletes the last 3 elements [7, 8, 9]
. At this time, the list
only contains the first 6 elements[ 1, 2, 3, 4, 5, 6]
.
Next, use list.splice(-threePartIndex)
to extract the second part, which is from the remaining list = [1, 2, 3, 4 , 5, 6]
(i.e. [4, 5, 6]), the last three elements are deleted, and the list only contains the first three elements [1, 2, 3]
, i.e. firstPart
.
Now, let’s take a look at more usages of Array.splice(), here because I don’t want to change the original Array, so Array.slice() is used. If you want to change the original array, you can delete it.
const list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
Get the first element of the array
list.slice().splice(0, 1) // [1]
Get the first 5 elements of the array
list.slice().splice(0, 5) // [1, 2, 3, 4, 5]
Get all elements after the first 5 elements of the array
list.slice().splice(5) // 6, 7, 8, 9]
Get the last element of the array
list.slice().splice(-1) // [9]
Get the last three elements of the array
list.slice().splice(-3) // [7, 8, 9]
It is impossible to know the possible bugs in real time after the code is deployed. In order to solve these bugs afterwards, a lot of time was spent on log debugging. I would like to recommend a good Used BUG monitoring tool Fundebug.
The above is the detailed content of Implement equal fraction array in JavaScript. For more information, please follow other related articles on the PHP Chinese website!