javascript第三天

一.值传递和引用传递

1.（赋值，更新）值传递：只在基本类型之间存在，数值，字符串

       // 赋值 
        let a = 1
        let b = 2
        console.log(a, b)   //1,2
        // 更新
        a = b
        console.log(a, b) //2，2
      

2.引用传递，适用于应用类型，对象，数组

        // 引用传递
        let obj1 = {
            a: 1,
            b: 2
        }
        let obj2 = obj1
        console.log(obj1, obj2) //Object { a: 1, b: 2 } Object { a: 1, b: 2 }

对象更新，使用点语法来访问内部成员

obj1.a = 6
        console.log(obj1.a) //6

3.传参：永远都是值传递

对象的传参需要对整个对象

  const f1 = (x) => (x = 5)
        let m = 3
        f1(m)
        console.log(f1(m)) // m=5

二.模板字面量和函数标签

1.模板字面量：将表达式/插值嵌入到字符串
通过·… ${标识符}·

let name = '小杰'
    let strs = "hello" + name
    console.log(strs)
    let strs1 = `hello  ${name}`
    console.log(strs1)

 let meau = ["一", "二", "三"]
    let htmlstr =
        `
    <nav>
        <a href="">${meau[0]}</a>
        <a href="">${meau[1]}</a>
        <a href="">${meau[2]}</a>
        </nav>
    `

2.标签函数：定义模板字面量的一些行为
参数约定：
1.第一个参数：所有字符串字面量组
2.第二个参数：插值组成的数组

当参数数量少时可以一个一个输入

let sum = (strs, a, b) => {
        console.log(strs);
        console.log(a, b);
    }
    let a = 1;
    b = 3;
    sum`${a} + ${b} = `;

数量多时用rest：归并函数

sum = (strs, ...arr) => {
        console.log(strs);
        console.log(...arr);
    }
    let c = 6
    sum`${a}+${b}+${c}=`

三.解构赋值

1.数组解构

let [a, b, c] = [1, 2, 3];
    console.log(a, b, c);
    //1,2，3

当有很多值对应时，需要全部打印

  [a, b, ...c] = [1, 2, 3, 4, 5, 6, 7, 8, 9];
        console.log(a, b, ...c);

当需要提取第几个数据时 可以使用逗号来代替不需要的。

 [, , , a, , , , , ,] = [1, 2, 3, 4, 5, 6, 7, 8, 9]
        console.log(a)

2. 对象解构

等号左边是右边的模板，必须长得一样

({ id, name } = { id: 40, name: "电脑" });
    console.log("id=%d,name=%s", id, name); 
    //id=40，name=电脑

3.参数解构
（1）数组传参

  let sum = ([a, b]) => a + b;
    console.log(sum([30, 50]));//80

（2）对象传参

let getUser = ({ name, email }) => [name, email];
    console.log(getUser({ name: "朱老师", email: "admin@php.cn" }), );
    //Array [ "朱老师", "admin@php.cn" ]
    ({ id, name } = { id: 40, name: "电脑" });
    console.log("id=%d,name=%s", id, name);
    //id=40，name=电脑

四.对象字面量的简化

let user = {
            id: "1",
            name: "2",
            getInfo: function () {
                return `${this.Name} ${this.id}`;
            }
        }
        //Object { id: "1", name: "2", getInfo: getInfo() }
        console.log(user)
         //   再次简化
    //   对象字面量中的属性值引用的变量,如果与对象在同一个作用域中,则不需要重新赋值
    //   并且这个变量与对象的属性同名,则可以省去不写
        user = {
            id: "",
            name: "",
            getInfo: function () {
                return `${this.Name} ${this.id}`;
            }
        }
        console.log(user)
        //Object { id: "1", name: "2", getInfo: getInfo() }

五. bind，call，apply

bind,call,apply:相同点，都可以改变this的指向
不同的点：
1.bind()只绑定，不执行
2.call，apply，绑定后立即执行，但参数不一样
3.call，参数是离散的一个一个传入
4.apply，参数以数组的形式统一传入

     function hello(name) {
            // this:执行上下文，程序的运行环境
            // this当前是window,全局
            this.name = name;
            // window.name=name
            console.log(this);
        }
        hello("123")
        const obj = {
            name,
        };
        hello.bind(obj, "admin")(console.log(hello))
        //name:admin
        hello.call(obj, "111");
        //name:灭绝老师
        hello.apply(obj, [222, 333])
        //222

六.访问器属性

访问器属性：将一个方法伪装/包装成一个属性
1.get：是读取，也叫读操作
2.set;是写入，也叫写操作
访问器属性的优先级高于同名的普通属性

let user = {
            data: { name: "111" },

            get name() {
                return this.data.name;
            },
            set name(A) {
                return this.data.name = A;
            }

        }
        console.log(user.name)
        //set写入的name