How to Realize Medium Score Group in JavaScript

Recently, an open source Vue component is not perfect. Welcome to improve it. I also hope you can give an star support. Thank you.

github Address: https://github.com/qq449245884/vue-okr-tree

In this tutorial, we'll learn how to divide arrays equally using the Array. splice () method, and the differences between Array. splice (), and Array. slice ().

1. Divide an array into two equal parts

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

Use the length/2 and Math. ceil () methods to find the intermediate index of the array

Use the intermediate index and the Array. splice () method to obtain the equally divided part of the array

The 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);    // []

The Array. splice () method changes the contents of the array by deleting, replacing, or adding elements. While the Array. slice () method will first copy the array in the operation.

list. splice (0, middleIndex) removes the first three elements from the array at index 0 and returns them. splice (-middleIndex) removes the last three elements from the array and returns it.

At the end of these two operations, since we have deleted all the elements from the array, the original array is empty.

Also note that in the above case, the number of elements is even, and if the number of elements is odd, there will be one additional 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, which 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 copied the original array with Array. slice () before deleting elements with 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]

Explain briefly what has been done above 1:

ThirdPart is first extracted using st. splice (-threePartIndex), which deletes the last three elements [7, 8, 9], where list contains only the first six elements [1, 2, 3, 4, 5, 6]. Next, Part 2 is extracted using list. splice (-threePartIndex), which removes the last three elements from the remaining list = [1, 2, 3, 4, 5, 6] (i.e. [4, 5, 6]), and list contains only the first three elements [1, 2, 3], i.e. firstPart.

4. Array. More usage of splice ()

Now, let's look at 1 for more usage of Array. splice (). Here, because I don't want to change the original array, I use Array. slice (). If smart people want to change the original array, they can delete it.

const list = [1, 2, 3, 4, 5, 6, 7, 8, 9];

Gets the first element of the array

list.slice().splice(0, 1) // [1]

Gets the first 5 elements of the array

list.slice().splice(0, 5) // [1, 2, 3, 4, 5]

Gets all elements after the first five elements of the array

list.slice().splice(5) // 6, 7, 8, 9]

Gets the last 1 element of the array

list.slice().splice(-1)  // [9]

Gets the last 3 elements of the array

list.slice().splice(-3)  // [7, 8, 9]