ES6：JS基础知识扩展

变量赋值

1.原始类型变量的值传递:把自己的值传个过去,后当前变量就和新变量没有关系了
2.数组以及对象的引用传递:两个变量指向同一个地址的值,等于起别名

只要改变其值,所有引用的变量都同步改变

变量赋值在函数参数中全部都是值传递;

数组和对象整体赋值更新才是值传递

模板字面量和标签函数

1.模板字面量:

模板字面量用反引号` 作为界定符
模板字面量中可以使用变量,用${}包括界定
模板字面量可以保留多行中的格式

2.标签函数:

标签函数定义与普通函数一样,但调用时实参是模板字面量
参数:第一参数默认接收模板字面量中的字符组成的数组,后面的变量依次接收模板字面量中的参数
标签函数在使用时:传入的值(实参)是模板字面量,不需要小括号,直接标签函数名+模板字面量即可

解构赋值

1.快速从集合数据(数组/对象)解构出独立变量
2.解构赋值两边类型必须一致
3.对象解构可以别名解构,例如

({name:username,age:userage}={name:"ldy",age:20});
console.log(username,userage);

4.解构赋值也可以用于函数的参数中

对象简化:

1.属性,如果全局声明赋值了相同的变量,在对象内就可以简写:变量即可;
2.对象中的方法:可以通过匿名函数和箭头函数简写

bind|call|apply:把函数绑定到指定对象上

1.bind(obj,参数)返回的是一个函数声明,并不立即执行
2.apply和cal绑定并立即执行
3.如果函数中有this,bind|call|apply可以动态改变函数的this指向
4.apply的第二个参数必须是个数组;例如: func.apply(obj,[argumet])

对象的访问器属性

1.访问属性的关键字get(访问)和set(设置) ,后跟一个函数;
2.访问属性优先级高于同名普通属性

JS循环语句：

1.单分支if(){};
2.双分支if(){}else{};
3.多分支if(){}else if(){} …..else{};
4.switch(){case 值: 语句 break; ……;default:语句;}
5.break和continue关键字;

代码演练

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>
<body>
</body>
<script type="text/javascript">
    // 箭头函数 中this指向
    let user={
        name:"ldy",
        age:20,
        getInfo:function(){
            console.log(this.name,this.age);
            console.log(this);
        }
    }
    user.getInfo();
    function get(){
        console.log(this);
    }
    get();
    // 原始类型的值传递
    let a=1;
    let b=a;
    console.log(a,b);
    a=2;
    console.log(a,b);
    // 数组和对象的引用传递,修改的是地址中的值,所有引用的输出值都改变,不论在什么位置使用,只要值改变都跟着改变
    let item1={
        name:"ldy",
        age:12,
    }
    let item2=item1;
    console.dir(item1);
    console.dir(item2);
    item1.age=30;
    console.dir(item1);
    console.dir(item2);
    // 函数参数值传递:数组和对象整体赋值
    console.log("&&&&&&&&&&&&&&");
    function add(o){
        o.a=10;
        console.log(o);
    }
    let o={
        a:1,
        b:"ldy"
    }
    console.dir(o);
    add(o);
    function add1(o){
        o={};
        console.dir(o);
    }
    add1(o);
    // 模板字面量
    let username="ldy";
    let userage=30;
    let User=`我是${username},今年${userage}岁`;
    console.log(User);
    // 标签函数
    console.log('00000000000000000000000000');
    function show(string,name,age){
        console.log(string);
        console.log(name,age);
    }
    show(User);
    // 标签函数:直接使用字面量为参数,不能用变量代替
    show`我是${username},今年${userage}岁`;
    //解构赋值
    let arr=[1,2,3,4];
    [a,b,c,d]=arr;
    console.log(a,b,c,d);
    ({name:username,age:userage}={name:"ldy",age:20})
    console.log(username,userage);
    // 对象简化
    console.log("对象简化");
    let user10={
        username,
        userage,
        getinput(){
            console.log(username,userage);
        },
        getin:()=>{
            console.log(username,userage);
        }
    }
    user10.getinput();
    user10.getin();
    console.log("&&&&&&&&&&&&&&&&&&&&&&&&&");
    // let func = ()=>console.dir(this);
    function func(name){
        // return this;
        console.log(this.name);
        this.name=name;
        console.log(this.name);
        console.log(this);
    }
    const obj={
        name:"ldy",
    }
    // console.log(func('ldy'));
    // func("dongya");
    // let f=func.bind(obj,"ddd");
    // f();
    func.apply(obj,["dy"]);//参数必须实个数组形式
    func.call(obj,"dy2");
    console.log("^^^^^^^^^^^^^^^^^^^^^^^^^");
    let obj1={
        name:'ldy',
        age:31,
        set sname(val){
            this.name=val;
        },
        get gname(){
            return this.name;
        }
    }
    console.log(obj1.name);
    obj1.sname="lll";
    console.log(obj1.name);
    if(obj1.age<18){
        console.log('未成年')
    }else if(obj1.age>18&&obj1.age<20){
        console.log('成年人')
    }else{
        console.log('无法判断');
    }
</script>
</html>

运行结果