slice、splice、split、substr使用及区别

因为自己经常混淆，所以记录一下。

①slice（从已有数组或字符串返回指定的元素）

操作对象：数组、字符串

特点：该方法不会改变原数组，而是会产生一个新的数组

//语法：array.slice(start, end) 
//数组
const array = [1,2,3,4,5,6];
console.log(array.slice(1, 3) );//[2,3]
//字符串
const str = 'HelloWorld!'
const tempStr = str.slice(0, 5);
const tempStr1 = str.slice(5);
const tempStr2 = str.slice(-3);
console.log('tempStr', tempStr);//Hello
//提取正数后的全部数据(数组同理)
console.log('tempStr', tempStr);//World!
//提取倒数后的全部数据(数组同理)
console.log('tempStr', tempStr);//ld!

②splice（添加或删除数组中的元素）

操作对象：数组

特点：会改变原始数组，所删除的元素就是返回的新数组的内容

const array = [1, 2, 3, 4, 5, 6];
const array1 = array.splice(0, 3);
console.log('array1', array1);//[1,2,3]
console.log('array', array);//[4,5,6]

③split（用于把一个字符串分割成字符串数组）

操作对象：字符串

特点：不改变原始字符串

//以元素o来进行分割
const str = 'HelloWorld!'
const tempStr = str.split('o');
console.log('tempStr', tempStr);//["Hell", "W", "rld!"]
//空格分割
const str = 'Hello World!'
const tempStr = str.split('');
console.log('tempStr', tempStr);//["Hell", "W", "rld!"]//["H", "e", "l", "l", "o", " ", "W", "o", "r", "l", "d", "!"]
//空格分割返回前三个
const str = 'Hello World! Hello World!'；
const tempStr = str.split(' ', 3);
console.log('tempStr', tempStr);//["Hello", "World!", "Hello"]

④substr（返回字符串中指定数目的字符）

操作对象：字符串

特点：不改变原始字符串

//返回指定下标后的数据
const str = 'Hello World! Hello World!'
const tempStr = str.substr(2);
console.log('tempStr', tempStr);//llo World! Hello World!
//返回开始、结束下标的数据
const str = 'Hello World! Hello World!'
const tempStr = str.substr(2, 6);
console.log('tempStr', tempStr);//llo Wo