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?
1
2
3
4
5

2. splice(index, howmany, itemX)

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

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

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

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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

用法：

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

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

​ fruits 输出结果：

Banana,Orange,Lemon,Kiwi,Mango
1

3. slice(start, end)

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

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

// 输出
Orange,Lemon
1
2
3
4
5

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