js中的传递，解构，this指向，访问器属性等介绍

值传递与引用传递

1.值传递
值传递适用的数据类型为：原始类型包括string,number,bool等主要特征是互不影响，只是传递值

let a=1;
let b=a;
console.log(a,b);
a=2;
//更新a,不影响b,b没有变化
console.log(a,b);

1. 引用传递
   引用传递适用的是引用类型包括：object，array.

let obj1={a:1,b:2};
let obj2=obj1;
obj1.a=10;
console.log(obj1);
//obj2中的a值也变成了10
console.log(obj2);

模板字面量与标签函数

1.模板字面量
将表达式嵌入到字符串。使用反引号``。

let a=1;
b=2;
let res=a+"+"+b+"="+(a+b);
console.log(res);
//模板字面量
res=`${a}+${b}=${a+b}`;
console.log(res);

2.标签函数
自定义模板字面量的行为
使用自定义函数来处理模板字面量，它的参数约定
第一个参数：模板字面量中的字符串字面量组成的数组
从第二个参数开始，将模板字面量中的变量依次传入

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

解构

快速从集合数据(数组/对象)解构出独立变量

• 数组

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

• 对象

  let {id,name}={id:10,name:"电脑"};
  console.log(id,name);
  //属性名与变量名必须对应，顺序无所谓
  ({name,id}={name:"电脑",id:20});

• 参数解构
  数组传参

let sum=([a,b])=>a+b;
console.log([1,2]);

对象传参

let user=({name,id})=>({name,id});
console.log(user({name:"你好",id=2}));

对象字面量的简化

let user={
    userName:"老师",
    userEmail:"tp@php.cn",
    getInfo:function(){
     return `${this.userName}(${this.userEmail})`;
    }
}
console.log(user.getInfo());
let {userName,userEmail}={userName:"师傅",userEmail:"qq@163.com"};
 user={
     //当属性名与同一个作用域的变量名一样，可以直接使用属性名来引用该变量的值
    userName,
    userEmail,
    getInfo(){
     return `${this.userName}(${this.userEmail})`;
    }
}
console.log(user.getInfo());
user={
    userName,
    userEmail,
    getInfo:()=>`${this.userName}(${this.userEmail})`,
     //this指向了window因为对象没有作用域，所以会this会逐层搜寻直到window
    test:()=>console.log(this),
}
console.log(user.getInfo());

call,apply,bind

bind的作用就是将this指向改变。
call，apply跟bind的区别就是，bind只是返回一个函数声明，不会执行，而call，apply会立即执行

<button>按钮</button>
    <script>
        function hello(name){
            this.name=name;          console.log(this.name);
}
        const obj={name:'admin'};
        //给 obj 绑定 hello函数  bind() 不会立即执行，只返回一个函数声明
let f=hello.bind(obj,'同学');
//加上（）才会执行
console.log(f());
//call接收一个变量
f=hello.call(obj,"数学老师");
console.log(f);
//apply接收一个数组参数
f=hello.apply(obj,['语文老师']);
 console.log(f);

访问器属性

就是将对象里的方法变为属性
使用get和set来定义，get是得到属性的值，set设置属性的值

     const product={
         data:[
             {name:"手机",price:3000,num:3},
             {name:"电脑",price:5000,num:5},
             {name:"相机",price:7000,num:2},
         ],
         getAmounts(){
            return this.data.reduce((t,c)=>(t +=c.price * c.num),0);
         },
     }  
     console.log("总额：",product.getAmounts());
    products={
         data:[
             {name:"手机",price:3000,num:3},
             {name:"电脑",price:5000,num:5},
             {name:"相机",price:7000,num:2},
         ],
        get getAmounts(){
            return this.data.reduce((t,c)=>(t+=c.price*c.num),0);
         },
        set getAmounts(price){
            this.data[1].price=price;
        }
     } 
     products.getAmounts=3000;
     console.log(products.data[1].price); 
     console.log("总额：",products.getAmounts);

流程控制

if分支是用来控制区间值，switch一般用来单值

let a=2;
if(a>=1){
console.log('大了');
}else{
console.log('小了');
}
let b=success;
switch(b){
case "fail":console.log('失败');
break;
case "success":console.log('成功');
break;
default: console.log('平局');
}

三元运算

方便简单简化代码。但只能用来控制简单的流程。

let score=40
(score>60)?'合格':'失败';