解構(gòu)和模板標(biāo)簽

數(shù)組解構(gòu)

let fruits = ["蘋果", "香梨", "獼猴桃", "香蕉", "火龍果", "西瓜"];
// 把某一個(gè)元素之后的所有元素放入另一個(gè)數(shù)組中
// 傳統(tǒng)方法
let arr = fruits.slice(2);
console.log(arr);
// 用數(shù)組解構(gòu)中不定參數(shù)解決
let [firstfruit, secondfruit, ...rest] = fruits;
console.log(firstfruit, secondfruit, rest);
console.log(...rest);
// 數(shù)組合并
let tmp1 = [1, 2, 3];
let tmp2 = [4, 5, 6];
let tmp3 = [7, 8, 9];
let res = tmp1.concat(tmp2, tmp3);
console.log(res);
// concat方法支持自己再加上自己合并
// js中數(shù)組都是引用傳遞，沒有數(shù)組克隆，改變其中一個(gè)數(shù)組的值那么另一個(gè)數(shù)組的也改變了
let n = tmp1;
n[0] = 10;
tmp1[2] = 15;
console.log(tmp1);
console.log(n);
// 數(shù)組克隆
let [...newa] = tmp1;
// newa是一個(gè)新數(shù)組，不再和tmp1有關(guān)聯(lián)，
newa[0] = 30;
console.log(tmp1);

函數(shù)中的解構(gòu)參數(shù)

// 函數(shù)中的解構(gòu)參數(shù)
let setUser = function (id, userInfo) {
    userInfo = userInfo || {};
    let name = userInfo.name;
    let email = userInfo.email;
    let age = userInfo.age;
    return { id, email, name, age };
};
let user = new setUser(1);
console.log(user);
user = new setUser(1, { name: "admin", email: "admin@qq.com", age: 20 });
console.log(user);
// 用解構(gòu)參數(shù)簡(jiǎn)化
// 如果對(duì)象參數(shù)不寫入默認(rèn)值那么調(diào)用時(shí)必須傳入相應(yīng)參數(shù)不然會(huì)報(bào)錯(cuò)所以可以參數(shù)傳入空對(duì)象
// 也可以寫入默認(rèn)值
const userinfo = {
    name: "admin",
    email: "admin@qq.com",
    age: 18,
};
setUser = function (id, { name, email, age } = userinfo) {
    return { id, name, email, age };
};
user = new setUser(1);
console.log(user);
// 變量交換
let a = 10, b = 20;
console.log("x=%d,y=%d", a, b);
[a, b] = [b, a];
console.log("x=%d,y=%d", a, b);

模板字面量

// 傳統(tǒng)多行字符串
let str = "我是第一行，\n \
  我是第二行，\n \
  我是第三行";
// 也可以寫入數(shù)組中使用函數(shù)
let str1 = [
    "我是第一行，",
    "我是第二行，",
    "我是第三行。",
].join("\n");
console.log(str);
// 如果是\n那么需要渲染到頁面中時(shí)就不會(huì)換行，所以根據(jù)需要書寫br或者\(yùn)n
console.log(str1);
// 傳統(tǒng)變量嵌入
let list = ["蘋果", "香梨"];
console.log("我喜歡吃" + list);
// 模板字面量書寫多行字符串
// 如果書寫多行字符串時(shí)一般第一行不書寫，后面添加trim（）方法消除空格
let str2 = `
  我是第一行，
  我是第二行，
  我是第三行`.trim();
console.log(str2);
// 模板字面量的變量嵌入
let name = "小明";
console.log(`大家好呀 我叫${name}，很高興認(rèn)識(shí)你們`);
// 也支持函數(shù)
function func(name) {
    return name;
}
console.log(`hello 我叫${func("小明")}`);
// 也可以嵌套
let age = 20;
console.log(`hello 我叫${`${func("小明")}年齡是${age}`}`);

模板標(biāo)簽

// 模板標(biāo)簽
function func(name, ...email) {
    console.log("my name is ", name);
    console.log("my email is", email);
}
let name = "admin";
let email = "admin@qq.com";
func(name, email);
func`${name},${email}`;
let width = 27;
let height = 56;
let area = getarea`高為 ${height} *寬為 ${width} = 面積 ${width * height}`;
function getarea(str, ...val) {
    let res = "";
    for (let i = 0; i < val.length; i++) {
        res += str[i];
        res += val[i];
    }
    res += str[str.length - 1];
    return res;
}
console.log(area);
// 模板字面量獲取原始值
function func1(str, ...val) {
    let res = "";
    for (let i = 0; i < val.length; i++) {
        res += str.raw[i];
        res += val[i];
    }
    res += str.raw[str.raw.length - 1];
    return res;
}
let a = func1`my name is ${name} \n my email is ${email}`;
console.log(a);

總結(jié)

1.雖然百度了對(duì)于用new調(diào)用函數(shù)和不用new調(diào)用函數(shù)有什么區(qū)別，但還是沒有理解。
2.模板標(biāo)簽函數(shù)的作用是最后返回的是一個(gè)字符串是嗎？其應(yīng)用場(chǎng)景還不了解，這節(jié)課聽的有點(diǎn)懵。

批改老師：天蓬老師

批改狀態(tài)：合格

老師批語：相同的函數(shù), 調(diào)用方式不同, 返回結(jié)果不同...如同面粉, 可以做成面包,也可以做也面條, 只是加工方式不同....