收藏
天蓬老师批改状态：合格
老师批语：其实原始值几乎用不上的, 这里只是一个知识的扩展
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>数组解构中不定元素</title></head><body><script>let fruits = ["apple", "cherry", "peach", "pear", "Lemon", "mango"];// 任务:从第3个元素开始,将所有元素放到另一个数组中let arr = fruits.slice(2);console.log(arr);// ...name: ...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] = 88;console.log(newArr);console.log(old);</script></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>函数中的解构参数</title></head><body><script>// 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 = setUser(1);user = new setUser(1, {name: "admin",email: "admin@php.cn",status: true,});console.dir(user);// 2. 解构参数进行简化setUser = function (id, { name, email, status }) {return { id, name, email, status };};user = setUser(1, {name: "admin",email: "admin@php.cn",status: true,});console.dir(user);// user = setUser(3);// console.log(user);// 在解构中,禁止使用undefind,null来初始化// let { x, y } = undefined;setUser = function (id,{ name = "defaultName", email = "defaultEmal", status = false } = {}) {return { id, name, email, status };};user = setUser(3);console.log(user);const userInfo = {name: "username",email: "my@qq.com",status: true,};setUser = function (id, { name, email, status } = userInfo) {return { id, name, email, status };};setUser1 = function (id, { name, email, status } = userInfo) {return { id, name, email, status };};user = setUser(3);console.log(user);</script></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>解构声明应用场景</title></head><body><script>// 变量交换let x = 10,y = 20,tmp;console.log("x = ", x, ", y = ", y);// tmp = x;// x = y;// y = tmp;// console.log("x = ", x, ", y = ", y);console.log("-----------------------------");// [x, y] = [x, y];[y, x] = [x, y];// console.log("x = ", x, ", y = ", y);console.log("x = %d, y = %d", x, y);</script></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>传统多行字符串与变量的嵌入</title></head><body><script>// 多行字符串let info ="This is a first line string \This is a second line string \This is three line string. ";info ="This is a first line string \n \\n \This is three line string. ";info = ["This is a first line string","This is a second line string","This is three line string",].join("<br>");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>";});const ul = document.createElement("ul");p.innerHTML = str;document.body.appendChild(ul);</script></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>模板字面量/模板字符串</title></head><body><script>// es6 使用一对反引来解决前面的二大问题// 1. 多行字符串let str = `This is a first line stringThis is a second line stringThis is three line string.`;str = `<ul><li>Peter</li><li>peter@php.cn</li><li>lecture</li></ul>`.trim();console.log(str);// 2. 变量嵌入// 占位符: ${js表达式}let username = "Peter Zhu";// let message = "Hello " + username;let message = `Hello ${username} , 晚上好呀`;console.log(message);// 占位表达式支持计算console.log(`30 * 40 = ${30 * 40}`);function getUsername(username) {return username;}// 占位表达式支持函数console.log(`我的姓名是: ${getUsername("朱老师")}`);// 模板字面量支持嵌套// `${`模板字面量`}`console.log(`Hello ${`我的姓名是: ${getUsername("朱老师")}`}`);</script></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>标签模板/模板标签</title></head><body><script>// 1. 传统函数// alert("Hello php中文网");// 在一个模板字面量前面添加一个标签,就可以起到函数调用的效果// alert`Hello php中文网`;function getUser(name, email) {console.log("My name is ", name);console.log("My email is ", email);}let name = "admin";let email = "admin@php.cn";// getUser(name, email);// 用标签模板来调用它// getUser`${name}, ${email}`;// 标签模板: 模板字面量前是一个"标识符,本质上是一个函数"// 所以,我们可以认为标签模板是函数调用的特殊形式// 函数名: 模板字面量前面的标识符// 调用参数: 标签后面的模板字面量// 2. 标签函数// tag(strings, ...values)let width = 100;let height = 30;// 标签后面的模板字面量必须要保证第一个和最后一个必须是字符串let area = calculateArea`Width: ${width} * Height: ${height} = Area: ${width * height}`;// 定义这个标签对应的函数function calculateArea(strings, ...values) {// console.log(strings);// console.log(values);// 当前模板字面量中的字面量数组元素数量总是比表达式占位符数量多1// 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);// 3. 模板原始值let msg = `Hello \n php.cn`;console.log(msg);let str = String.raw`Hello \n php.cn`;console.log(str);function getRaw(strings, ...values) {}</script></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>模板原始值</title></head><body><script>let msg = `Hello \n php.cn`;console.log(msg);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);</script></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
