split(),splice(),slice()傻傻分不清楚？

split(),splice(),slice()傻傻分不清楚？

​ 在实际开发中，有时候一不注意就会出现这种情况这几个函数出现用混了的情况，下面我们依次讲一下这几个函数的性质和使用方法。

1. split(separator, limit)

方法：把一个字符串分割成字符串数组，该函数的两个参数含义分别如下：

​ separator: 可选。字符串或正则表达式，从该参数指定的地方分割 string Object。

​ limit: 可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有 设置该参数，整个字符串都会被分割，不考虑它的长度。

注意：split() 方法不改变原始字符串

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

// n的输出一个数组的值
How,are,you,doing,today?

2. splice(index, howmany, itemX)

方法：splice() 方法用于添加或删除数组中的元素。

参数	描述
index	必需。规定从何处添加/删除元素。 该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany	可选。规定应该删除多少元素。必须是数字，但可以是 “0”。 如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
item1, …, itemX	可选。要添加到数组的新元素

注意：这种方法会改变原数组！！

​ 注意看下面的一段代码：

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

// 我在这边调用接口数据进行存储
	const _getLessonHistory = useCallback(async () => {
    	const res = await getLessonHistory();
    	const lessonList = res.result || [];
        console.log(lessonList)
    	setLessonHistoryList(lessonHistoryList);
  }, []);
}

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

 /*
 	我们可以看到最初从接口拿到的数据通过一个个函数的形参最后传到了下面这个函数里
 	如果该数据的长度大于3的话就对其进行一个截取，我用了slice()方法。
 	已经知道了slice()方法会更改原数组，那么问题来了，这时候我打印接口里的res值，数据会改变吗？
 	答案显示是会变得。因为更改了原数组，那么不管你函数的形参是怎样传值的，其指针的指向都是同一个内存地址，你看似操作的是renderHistoryItem()函数里面的值，其实一层层追溯上去，_getLessonHistory()里面的res也已经改变了，因为这其实是同一个内存地址里面的值。
 */
function renderHistoryItem(itemList) {
	let showData;
    itemList && itemList.length > 3
      ? (showData = itemList.slice(0, 3))
      : (showData = itemList);
}

用法：

​ 移除数组的第三个元素，并在数组第三个位置添加新元素:

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

​ fruits 输出结果：

Banana,Orange,Lemon,Kiwi,Mango

3. slice(start, end)

方法：slice() 方法可从已有的数组中返回选定的元素。slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。

参数	描述
start	可选。规定从何处开始选取。如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。
end	可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。

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

// 输出
Orange,Lemon

注意：slice() 方法不会改变原始数组。