模板字面量和闭包函数

// y 模板字面量 与模板函数
// ！模板字面量
// 传统
console.log("hello world");
// 模板自变量
console.log(`hello world`);
// 模板字面量中，可以使用插值（变量、表达式），可以解析变量
let name = "朱老师";
console.log("Hello" + name);
// 变量 / 表达式等插值， 使用$ {……}
// 插入到模板字面量中
console.log(`Hello ${name}`);
console.log(`10+20= ${10 + 20}`);
console.log(`${80 > 20 ? `大于` : `小于`}`);
// 模板函数
// 使用模板字面量为参数的函数
// 模板函数：第一个参数是字面量组成的数组，第二个参数起，是字面量里中的插值列表
// y 声明模板函数
function total(string, num, price) {
  console.log(string);
  console.log(num, price);
  //   console.log(price);
  let res = `${string[0]}${string[1]}${string[2]}${num * price}`;
  console.log(res);
}
let num = 10;
let price = 20;
// total`${num}*${price}总金额：${num * price}元`;
total`数量：${num} 单价：${price}`;
// 模板函数的优化，以后只用这一种
// 使用...rest将插值合并
function sum(strings, ...args) {
  console.log(strings);
  console.log(args);
  console.log(`[${args.join()}]之和是：${args.reduce((a, c) => a + c)}`);
}
// 调用
sum`计算多个数和：${1}${2}${3}${4}`;
// 总结：
// 模板字面量：是可以使用插值表达式的语法
// 模板函数：可以使用“模板字面量”为参数的函数
// 模板函数，就是在模板字面量之前加一个标签或标识符，而这个标签，就是一个函数名
// 模板函数的参数是有约定的，第一个是字面量数组，从第二个起才是内部的占位符参数
```javascript
// to闭包
// y 自由变量
let x = 90;
let fn = function(a, b) {
    // 函数内部的变量
    // 1.参数变量 a,b
    // 2.内部变量 c
    // abc都是私有变量
    let c = 3;
    return a + b + c + x;
    // x声明在函数外部，称为自由变量
};
console.log(fn(1, 2));
// 闭包
// 1.父子函数
// 2.子函数调用父函数中的变量
fn = function(a) {
    let f = function(b) {
        return a + b;
    };
    return f;
};
let f = fn(30);
console.log(typeof f);
console.log(f(20));
// 偏函数
// 当一个函数需要多个参数的时候，不一定一次性全部传入，可以分批传入
fn = function(a, b) {
    return function(c) {
        return a + b + c;
    };
};
f = fn(1, 2);
console.log(fn(1, 2, 3));
console.log(f(12));
fn = function(a) {
    return function(b) {
        return function(c) {
            return a + b + c;
        };
    };
};
// 将参数逐个传入，叫柯里化函数
console.log(fn(2)(3)(4));
// 改为箭头函数
fn1 = a => b => c => a + b + c;
console.log(fn1(1)(2)(4));
// 反闭包函数：纯函数
// 纯函数： 函数中用到的变量全是自己的，没有“自由变量”
// 如果函数内部必须用到外部变量，必须通过参数传入
let discount = 0.8;
function getPrice(price, discount = 1) {
    return price * discount;
}
console.log(getPrice(12000, discount));
// 关于对象变量的访问
// todo 访问器属性
let user1 = {
    data: { name: "teddy", age: 20 },
    getage() {
        return user1.data.age;
    },
    setage(age) {
        user1.data.age = age;
    },
};
// console.log(user1.data.name, user1.data.age);
console.log(user1.getage());
user1.setage(40);
console.log(user1.getage());
```
更多相关文章

随机推荐
