模板字面量与标签模板
一、数组解构中不定元素
let fruits = ["apple", "cherry", "peach", "pear", "lemon", "mango"];//任务：从第三个元素开始，将所有元素放到另一个数组中//第一种方法let arr = fruits.slice(2);console.log(arr);//第二种方法 ...两种应用场景 ...rest:归纳 ...sprad:打散let [firstFruit, secondFruit, ...restFruits] = fruits;console.log(firstFruit, secondFruit);console.log(restFruits);console.log(...restFruits);
//数组合并let old = [1, 2, 3];let tmp1 = [8, 9, 10];let tmp2 = ["a", "b", "c"];let res = old.concat(tmp1, tmp2);console.log(res);console.log(old);console.log(old.concat(old, old));
//数组克隆let n = old.concat();console.log(n);//...restlet [...newArr] = old;console.log(newArr);console.log(newArr === old);newArr[0] = 50;console.log(newArr);console.log(old);
二、函数中的解构参数
//1.传统方式let setUser = function (id, userInfo) {//要求第二个参数必须是一个对象userInfo = userInfo || {};let name = userInfo.name;let email = userInfo.email;let status = userInfo.status;return { id, name, email, status };};let user = new setUser(1);user = new setUser(1, {name: "admin",email: "admin@qq.com",status: true,});console.dir(user);
//2.解构参数进行简化setUser = function (id, { name, email, status }) {return { id, name, email, status };};user = new setUser(1, {name: "wang",email: "wang@qq.com",status: true,});console.dir(user);//user = setUser(3);会报错//在解构中禁止使用undefined,null来初始化//let { x, y } = null;//let { x, y } = undefined;setUser = function (id, { name, email, status } = {}) {return { id, name, email, status };};console.log(setUser(3));
//尽可能传一个有意义的值，不要传空对象{}setUser = function (id,{ name = "defaultName", email = "defaultEmail", status = false } = {}) {return { id, name, email, status };};console.log(setUser(3));//也可以统一给解构参数赋值setUser = function (id,{ name, email, status } = {name: "defaultName",email: "defaultEmail",status: false,}) {return { id, name, email, status };};console.log(setUser(3));
//也可以把参数独立拿出来const userInfo = {name: "defaultName",email: "defaultEmail",status: false,};setUser = function (id, { name, email, status } = userInfo) {return { id, name, email, status };};setUser1 = function (id, { name, email, status } = userInfo) {return { id, name, email, status };};console.log(setUser(2));//数组const userArr = ["defaultName", "defaultEmail", "defaultStatus"];let arr = function (id, [name, email, status] = userArr) {return { id, name, email, status };};console.log(arr(1));
三、解构声明应用场景
//变量交换//1.传统方式let x = 10,y = 20,tmp;console.log("x=%d,y=%d", x, y);tmp = x;x = y;y = tmp;console.log("x=%d,y=%d", x, y);//2.解构方式[y, x] = [x, y];console.log("x=%d,y=%d", x, y);//从函数返回多值let demo = (function () {return [10, 20, 30];})();console.log(demo);
四、传统多行字符串与变量的嵌入
//换行let info ="This is a first line string \This is a second line string \This is a three line string";// \n \ 可以换行info ="This is a first line string \n \This is a second line string \n \This is a three line string";info = ["This is a first line string ","This is a second line string","This is a three line string",].join("<br>");//join() 方法用于把数组中的所有元素放入一个字符串//并指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符const p = document.createElement("p");p.innerHTML = info;document.body.appendChild(p);console.log(info);
//变量嵌入let list = ["汽车", "电脑", "水果"];let str = "";list.forEach(function (item) {str += "<li>" + item + "</li>";});console.log(str);const ul = document.createElement("ul");ul.innerHTML = str;document.body.appendChild(ul);
五、模板字面量/模板字符串
//es6 使用一对反引号来解决前面的两大问题，多行字符串和变量嵌套//1.换行let str = `This is a first line stringThis is a second line stringThis is a three line string`;console.log(str);str1 = `<ul><li>peter</li><li>peter@qq.com</li><li>php</li></ul>`.trim();//trim() 去除字符串的头尾空格console.log(str1);
//2.变量嵌入//占位符:${js表达式}let username = "peter zhu";//let message = "hello" + username;let message = `Hello ${username}`;console.log(message);//表达式支持计算console.log(`35 * 47 = ${35 * 47}`);function getUsername() {return username;}//占位表达式支持函数console.log(`我的姓名是：'${getUsername("小王")}`);//模板字面量支持嵌套//`${`模板字面量`}`console.log(`Hello ${`我的姓名是：'${getUsername("小王")}`}`);</script>
六、标签模板/模板标签
//1.传统函数//alert("Hello php中文网");//换个方式调用//在模板字面量前面添加一个标签，就可以起到函数调用的效果//alert Hello php中文网//alert`你好，我又弹出来了`;function getUser(name, email) {console.log("My name is ", name);console.log("My email is ", email);}let name = "孙悟空";let email = "wukong@qq.com";getUser(name, email);//用标签模板来调用它getUser`${name},${email}`;//标签模板：模板字面量前是一个标识符，本质上是一个函数//所以，我们可以认为标签模板是函数调用的特殊形式//函数名：模板字面量前面的标识符//调用参数：标签后面的模板字面量
//2.标签函数//tag(strings,...vfalues)let width = 100;let height = 40;//标签后面的模板字面量必须要保证第一个和最后一个必须是字符串let area = calculateArea`Width:${width} * Height: ${height} = Area: ${width * height}`;//定义这个标签对应的函数function calculateArea(strings, ...values) {//strings返回字面量console.log(strings);//values返回变量console.log(values);//任何时候values的值都比strings的值少1//当前模板字面量中的子面量数组元素数量总是比表达式占位符数量多1console.log(strings.length);console.log(values.length);console.log(strings.length === values.length + 1);let result = "";for (let i = 0; i < values.length; i++) {result += strings[i];result += values[i];}//添加最后一个字符字面量到结果中result += strings[strings.length - 1];return result;}console.log(area);
七、模板原始值
let msg = `Hello \n php.cn`;console.log(msg);//raw返回原始值let str = String.raw`Hello \n php.cn`;console.log(str);//标签函数function getRaw(strings, ...values) {console.log(strings);let result = "";for (let i = 0; i < values.length; i++) {result += strings.raw[i];result += values[i];}//添加最后一个字符字面量到结果中result += strings.raw[strings.length - 1];return result;}let site = "php中文网";msg = getRaw`Hello \n ${site}`;console.log(msg);
八、学习总结
1.数组解构中不定元素
slice()返回一个新的数组，包含从 start 到 end 的 arrayObject 中的元素...两种应用场景 …rest:归纳 …sprad:打散concat()数组合并，不传参的话会合并自身产生新的数组let [...newArr] = arr;数组克隆
2.函数中的解构参数
在解构中禁止使用undefined,null来初始化
尽可能传一个有意义的值，不要传空对象{}
可以把参数独立拿出来
3.解构声明应用场景
变量交换
从函数返回多值
4.传统多行字符串与变量的嵌入
传统用
\n \换行join() 方法用于把数组中的所有元素放入一个字符串
并指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符
传统用
forEach()来嵌套变量
5.模板字面量/模板字符串
es6 使用一对反引号来解决前面的两大问题，多行字符串和变量嵌套
trim()去除字符串的头尾空格变量嵌入:占位符:${js表达式}
表达式支持计算
占位表达式支持函数
模板字面量支持嵌套
${`模板字面量`}
6.标签模板/模板标签
用一对 `` 来表示模板字面量
在模板字面量前面添加一个标签，就可以起到函数调用的效果
标签模板：模板字面量前是一个标识符，本质上是一个函数
所以，我们可以认为标签模板是函数调用的特殊形式
函数名：模板字面量前面的标识符
调用参数：标签后面的模板字面量
标签后面的模板字面量必须要保证第一个和最后一个必须是字符串
当前模板字面量中的子面量数组元素数量总是比表达式占位符数量多1
7.模板原始值
raw返回原始值