JavaScript初学习之赋值、传参、模板字面量、标签函数、解构赋值、访问器属性、流程控制：循环的初认识

1.赋值

// 1.2 值传递：原始类型、string、number、bool
    let a=1;
    let b=a;
    console.log("a=%d,b=%d",a,b);
    // 更新a，不影响b
    a=2;
    console.log("a=%d,b=%d",a,b);
    // 1.2引用传递：引用类型、object、array
    let obj={a:1,b:2};
    let obj2=obj;
    console.log(obj);
    // 更新obj时，obj2将同步更新
    obj.a=10;
    console.log(obj);
    console.log(obj2);

2.传参，传参时无论什么类型，都是“值传递”

const f1=x=>(x=10);
    let m1=5;
    console.log("m1=%d",m1);
    f1(m1);
    console.log("m1=%d",m1);
    // 入参：调用函数时传入的参数。
    // 以上两个输出结果都是m1=5，可以看出来函数中对参数的更新，并不会影响到入参
    const f2=x=>(x.a=10);
    let o={a:1,b:2};
    console.log(o); //{ a: 1, b: 2 }
    f2(o);
    console.log(o);//{ a: 10, b: 2 }
    // 此时使用函数时，看上去对o.a的更新失效了，实际上仍然是值传递；对于引用类型，只有全新赋值才算是更新，修改其属性不算的，赋值一个新的对象才算是更新。
    const f3=x=>(x={});
    f3(o);
    console.log(o);//{a:10,b:2}
    // 此时使用函数后，入参未变化，说明函数中对于对象参数/引用参数的更新并不影响入参。

3.模板字面量

将表达式嵌入到字符串中，使用反引号：“`”;组成部分：1.字符串字面量，例如下面的“+,=”；2.变量或者表达式：x,y,(x+y);

        let x=1,y=2;
        let res=x+"+"+y+"="+(x+y);
        console.log(res);//1+2=3
        // 使用模板字面量时上面简化
        let res2=`${x}+${y}=${x+y}`;
        console.log(res2);//1+2=3
        // 模板字面量创建多行字符串可保留格式
        let menu=["首页","视频","文章"];
        let htmlStr=`<ul>
    <li><a href="">${menu[0]}</a></li>
    <li><a href="">${menu[1]}</a></li>
    <li><a href="">${menu[2]}</a></li>
</ul>`;
            console.log(htmlStr);
        // 将创建的字符串添加到body中
        document.body.insertAdjacentHTML("beforeEnd",htmlStr);

4.标签函数

定义模板字面量的行为；使用标签函数来处理模板字面量时，它的参数约定：1.第一个参数：模板字面量中的字符串字面量组成的数据；2.第二个参数开始，将模板字面量中的变量依次传入。
let sum=(strs,a,b)=>{
        console.log(strs);
        console.log(a,b,);
    }
    sum(["+","=",""],a,b);
    sum`${a}+${b}=`;
    // 使用rest进行简化
    sum=(strs,...arrs)=>{
        console.log(strs);
        console.log(arrs);
    }
    sum`${a}+${b}=`;

5.解构赋值

快速从集合数据（数组、对象）中结构出独立变量

        let x=1,y=2,t;
        // t=x;
        // x=y;
        // y=t;
        // console.log("x=%d,y=%d",x,y);
        // 可用结构简化
        [y,x]=[x,y];
        console.log("x=%d,y=%d",x,y);

6.访问器属性

            const product={
            data:[
                {name:"电脑",price:5000,num:3},
                {name:"手机",price:3000,num:10},
                {name:"电视",price:2000,num:5}
            ],
            getAllPrice(){
                return this.data.reduce((t,c)=>(t+=c.price*c.num),0);
            },
            //访问器属性:将方法伪造成一个属性，其优先级高于同名的普通属性
            get total(){
                return this.data.reduce((t,c)=>(t+=c.price*c.num),0);
            },
        // 使用访问器属性修改属性值
            set setPrice(price){
                this.data[1].price=price;
            }
        };
        console.log("总金额：",product.getAllPrice());
        console.log("总金额(访问器属性)：",product.total);
        console.log(product.data[1])
        product.setPrice=1988;
        console.log(product.data[1])

7.流程控制：循环

7.1while，入口判断;需满足初始变量、循环条件、条件更新

<!-- 以数组为例 -->
const colors=['red','green','blue'];
let i=0;
    while(i<colors.length){
        console.log("%c%s","color:red",colors[i]);
        i++;
    }
    console.log("%c%s","color:green","----------");

7.2 while,出口判断;条件不满足时，至少也会执行一次循环体

i=0;
do {
    console.log("%c%s","color:blue",colors[i]);
    i++;
} while(i<colors.length);
console.log("%c%s","color:green","----------");

7.3 for(初始变量,循环条件,条件更新)

for(let i=0;i<colors.length;i++){
    console.log("%c%s","color:green",colors[i]);
}
console.log("%c%s","color:green","----------");

7.3.1 对象使用for-in;

const  lesson={name:"js",core:40};
for(let key2 in lesson){
    console.log("%c%s","color:violet",lesson[key2]);
}
console.log("%c%s","color:green","----------");

7.3.2 for-in也可以遍历数组

for(let key3 in colors){
    console.log("%c%s","color:red",colors[key3]);
}
console.log("%c%s","color:green","----------");

7.4 for-of是遍历的终结者，将所有的集合类型的数据遍历进行了统一;不可以遍历自定义对象，因为其不是一个可以迭代的对象。

for(let key4 of colors){
    console.log("%c%s","color:blue",key4);
}
console.log("%c%s","color:green","----------");