Js：【详细】splice()方法、split()方法、replace()方法和 join()方法的区别

splice()方法、split()方法、replace()方法和join()方法的区别

splice() 的主要用途是向数组的中部插入项，但使用这种方法的方式则有如下 3 种：

(1) 删除：可以删除任意数量的项，只需指定 2 个参数：要删除的第一项的位置和要删除的项数。
例如， splice(0,2) 会删除数组中的前两项。

(2)插入：可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、0（要删除的项数）和要插入的项。如果要插入多个项，可以再传入第四、第五，以至任意多个项。
例如，splice(2,0,“red”,“green”) 会从当前数组的位置 2 开始插入字符串 “red” 和 “green” 。

(3)替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。
例如，splice (2,1,“red”,“green”) 会删除当前数组位置 2 的项，然后再从位置 2 开始插入字符串"red" 和 “green” 。

splice() 方法始终都会返回一个数组，该数组中包含从原始数组中删除的项（如果没有删除任何项，则返回一个空数组）。

---

split()方法可以基于指定的分隔符将一个字符串分割成多个子字符串，并将结果放在一个数组中。分隔符可以是字符串，也可以是一个 RegExp 对象（这个方法不会将字符串看成正则表达式）。 split() 方法可以接受可选的第二个参数，用于指定数组的大小，以便确保返回的数组不会超过既定大小。

var colorText = "red,blue,green,yellow";
var colors1 = colorText.split(","); //["red", "blue", "green", "yellow"]
var colors2 = colorText.split(",", 2); //["red", "blue"]
var colors3 = colorText.split(/[^\,]+/); //["", ",", ",", ",", ""]

---

replace()方法主要用于将字符串中符合匹配条件的字串替换成其他的字符串，返回替换后的字符串，且原字符串不变。
语法：

var newStr = str.replace(regexp|substr, newSubStr|function)

参数1:匹配条件：可以是正则表达式(regexp)或者字符串(substr)
tips:若参数1是字符串或者是不带全局标志g的正则，则只匹配一次
匹配一次是什么意思呢？例如：

 var  str = '#home#home'
   var pattern1= 'home'
   var newStr1 = str.replace(pattern1, 'home1') //得到newStr1的结果为"#home1#home"

var  str = '#home#home'
   var pattern2= /home/
   var newStr2 = str.replace(pattern2, 'home1') //得到newStr2的结果为"#home1#home"

若要实现多次匹配，方法如下：
1.带有全局标志g的正则

var  str = '#home#home'
	var pattern3= /home/g
	var newStr3= str.replace(pattern3, 'home1') //得到newStr3的结果为"#home1#home1"

2.有捕获组的情况下

var str = "John Smith";
	var pattern4 = /(\w+)\s(\w+)/;
	var newStr4= str.replace(pattern4, 'zyp') //得到newStr4的结果为"zyp"

上面 针对参数1pattern是捕获组的情况，参数2是字符串，那么该字符串替换第一个捕获组，其余的捕获组被空字符串替换，所以当参数1pattern中存在捕获组的情况下，参数2一般是一个函数或者特殊变量名（这样才不会出现其余的捕获组被空字符串所替换掉）

有捕获组情况时，参数2一般为函数或特殊变量名
(1)参数2的字符串中可以插入以下特殊的变量名：

$$ ：插入一个 “$”。
$& ：插入匹配的子串。
$` ：插入当前匹配的子串左边的内容。
$’ ：插入当前匹配的子串右边的内容。
$n ：假如第一个参数是 RegExp对象，并且 n 是个小于100的非负整数，那么插入第 n 个括号匹配的字符串。索引是从1开始。
最常见的特殊变量名是 $n：

var str = "John Smith";
   var pattern5 = /(\w+)\s(\w+)/;
   var newStr5= str.replace(pattern5, '$2 $1') //得到newStr5的结果为"Smith John"

(2)参数2为函数，函数可能有以下几个参数

a. match: 每次匹配得到的字符串。如果正则表达式中含有全局标志g的话，那么函数每次匹配到结果函数都会执行一次，即函数会执行多次，每次匹配得到的字符串就是match。

针对参数match来说，以下例子可以进行说明：

function styleHyphenFormat(propertyName) {
  function upperToHyphenLower(match) {
    return '-' + match.toLowerCase();
  }
  return propertyName.replace(/[A-Z]/g, upperToHyphenLower);
}
var styleFormat = styleHyphenFormat('borderLeftWidth') // styleFormat的结果是"border-left-width"

上述例子应该即是jquery的css函数中的实现，巧用match参数可以有效的避免循环。

b. p1, p2…: 捕获组匹配到的字符串。如果正则表达式中含有捕获组的话，
针对p1,p2…等参数来说，以下例子可以进行说明：

function replacer(match, p1, p2, p3, offset, string) {
	console.log(match)
  	return [p1, p2, p3].join(' - ');
}
var newString = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer); // newString的结果是 abc - 12345 - #$*%

注意上述例子中的match打印出来的结果是‘abc12345#$*%’，即如果pattern中没有全局标志g的话，match参数得到的就是match方法中参数1pattern中包含捕获组情况下得到的数组的第一个元素。

c. offset：每次匹配得到的字符串在源字符串中的偏移量。（比如，如果原字符串是“abcd”，匹配到的子字符串是“bc”，那么这个参数将是1）

d. string: 被匹配的原字符串。

---

join()方法用于把数组中的所有元素放入一个字符串。
1、join方法的参数不传或者传入undefined会默认用逗号分隔。

var arr = ["red","yellow","blue"];
var array = [];
array = arr.join(undefined);
console.log(array);  //red,yellow,blue
array = arr.join("|");
console.log(array);  //red|yellow|blue

2、如果用join来分隔数组的话，这个变量就会变成字符串类型，就算之前是数组也会变成字符串类型。