展开运算符的理解
function sum(...args) {
// args收集了所有的参数,形成一个数组(这里是剩余参数的用法)
//...args 表示把数组展开 形成以逗号隔开的参数形式
}
const obj = { name: "成哥", age: "18", love: "邓珊" }
console.log(...obj) //报错 ...展开运算符 不能展开对象
const obj1 = {
name: "成哥",
age: "18",
love: "邓珊"
}
const obj2 = { ...obj1} // obj2拷贝了obj1 以字面量的形式 外面包一个花括号
// 拷贝是浅拷贝,如果拷贝的对象属性里又是一个对象,属性会指向同一个地址。
// react 中 babel + react 可以用 {...p} 展开一个对象 此处的花括号作为 分隔符存在 只能在标签属性的传递 也就是传参的时候用------> 批量的传递props
const obj2 = {
...obj1,
name: "dengge"
};
console.log(obj2) //{name: "dengge", age: "18", love: "邓珊"}
// obj2拷贝了obj1,还更改了obj1的属性
replace 方法
str.replace(regexp|substr, newSubStr|function)
regexp (pattern)
一个RegExp 对象或者其字面量。该正则所匹配的内容会被第二个参数的返回值替换掉。
substr (pattern)
一个将被 newSubStr 替换的 字符串。其被视为一整个字符串,而不是一个正则表达式。仅第一个匹配项会被替换。
newSubStr (replacement)
用于替换掉第一个参数在原字符串中的匹配部分的字符串。该字符串中可以内插一些特殊的变量名。参考下面的使用字符串作为参数。
function (replacement)
一个用来创建新子字符串的函数,该函数的返回值将替换掉第一个参数匹配到的结果。参考下面的指定一个函数作为参数。
正则+替换的方式 两种
// 获取字符串 3 let str = document.getElementById(id).innerHTML; 4 // 书写正则 5 let reg = /{{\s*([a-zA-Z]+)\s*}}/g; //() 表示分组 \s* 表示匹配空格零次或多次 6 // 正则全局匹配替换 7 str = str.replace(reg, (...args) => { 8 return data[args[1]]; 9 });
// 正则匹配直接在replace中进行
1 var str = document.getElementById(id).innerHTML; 2 var reg = /{{\s*([a-zA-Z]+)\s*}}/; 3 var res = null; 4 while ((res = reg.exec(str))) { 5 str = str.replace(res[0], data[res[1]]); 6 } 7 return str;
//先调用正则 的.exec()方法 进行匹配 然后调用字符串的replace方法进行替换
正则的exec()方法
regexObj.exec(str) // 如果匹配成功,exec() 方法返回一个数组 // 完全匹配成功的文本将作为返回数组的第一项,arr[0] // 从第二项起,后续每项都对应正则表达式内捕获括号里匹配成功的文本。arr[1]