Implement equal fraction array in JavaScript

The

JavaScript column introduces how to implement equal fraction groups

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.

1. Divide the array into two equal parts

We can split the array into two halves in two steps:

1. Use length/2andMath.ceil()Methods to find the middle index of the array

2. 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. The Array.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]

2.Array.slice and Array.splice

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().

3. Divide the array into three equal parts

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:

1. 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].

2. 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.

4. More usages of Array.splice()

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!