Split(), split(), slice(), can't you tell?

split(),splice(),slice() Stupid is not clear ？

​ In actual development , Sometimes this happens when you don't pay attention. These functions are mixed up , Let's talk about the properties and usage of these functions in turn .

1. split(separator, limit)

Method ： Divide a string into an array of strings , The meanings of the two parameters of this function are as follows ：

​ separator: Optional . String or regular expression , Split from where specified by this parameter string Object.

​ limit: Optional . This parameter specifies the maximum length of the returned array . If this parameter is set , No more substrings will be returned than the array specified by this parameter . without Set this parameter , The entire string will be split , Regardless of its length .

Be careful ：split() Method does not change the original string

var str="How are you doing today?";
var n=str.split(" ");

// n Output the value of an array 
How,are,you,doing,today?

2. splice(index, howmany, itemX)

Method ：splice() Method to add or remove elements from an array .

Parameters	describe
index	It's necessary . Specify where to add / Remove elements . The parameters are start insertion and （ or ） The subscript of the deleted array element , It has to be numbers .
howmany	Optional . Specify how many elements should be removed . It has to be numbers , But it can be “0”. If this parameter is not specified , Delete from index All elements from the beginning to the end of the original array .
item1, …, itemX	Optional . New elements to add to the array

Be careful ： This method will change the original array ！！

​ Notice the following code ：

function name() {
    
const [lessonHistoryList, setLessonHistoryList] = useState([]);

//  I call the interface data here for storage 
	const _getLessonHistory = useCallback(async () => {
    
    	const res = await getLessonHistory();
    	const lessonList = res.result || [];
        console.log(lessonList)
    	setLessonHistoryList(lessonHistoryList);
  }, []);
}

function renderLessonContent () {
    
	...
    {
    
		renderHistoryItem(lessonHistoryList.instanceList)
    }
    ...
}

 /*  We can see that the data initially obtained from the interface is finally transferred to the following function through the formal parameters of each function   If the length of the data is greater than 3 If so, you can intercept it , I used it slice() Method .  I already know slice() Method will change the original array , So here comes the question , At this time, I print in the interface res value , Will the data change ？  The answer is that it will become . Because the original array is changed , So no matter how the formal parameters of your function pass values , The pointer points to the same memory address , What you seem to operate is renderHistoryItem() Value in function , In fact, it goes back layer by layer ,_getLessonHistory() Inside res It has changed , Because this is actually the value in the same memory address . */
function renderHistoryItem(itemList) {
    
	let showData;
    itemList && itemList.length > 3
      ? (showData = itemList.slice(0, 3))
      : (showData = itemList);
}

usage ：

​ Remove the third element of the array , And add a new element in the third position of the array :

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,1,"Lemon","Kiwi");

​ fruits Output results ：

Banana,Orange,Lemon,Kiwi,Mango

3. slice(start, end)

Method ：slice() Method to return selected elements from an existing array .slice() Method to extract a part of a string , And return the extracted part with a new string .

Parameters	describe
start	Optional . Specify where to start selecting . If the parameter is negative , It means to extract from the penultimate element of the original array ,slice(-2) It means to extract the penultimate element from the original array to the last element （ Contains the last element ）.
end	Optional . Specify where to end the selection . This parameter is the array subscript at the end of the array fragment . If the parameter is not specified , So the sharded array contains from start All elements to the end of the array . If the parameter is negative , It represents the end of the extraction of the penultimate element in the original array . slice(-2,-1) Indicates that the penultimate element in the original array is extracted to the last element （ Does not contain the last element , That is, only the penultimate element ）.

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);

//  Output 
Orange,Lemon

Be careful ：slice() Method does not change the original array .