ES6(一)


 var name="小明",age=12,gender="男";
        // var newStr="我的名字是"+name+",今年"+age+"岁了，我是个小"+gender+"孩。"
        // console.log(newStr);
        var newStr2=`我的名字是${name},今年${age}岁了。`
        console.log(newStr2);

${}里面放的是变量或表达式，内容允许换行

三、解构语法

ES6允许按照一定模式，从数组或对象中提取值对变量进行赋值，这被称为解构

目的：简化代码

等号左边的变量，和对象属性值同名时，才可以解构赋值与顺序无关。

3.1完全结构和部分解构

 //完全解构
        var obj={
            name:"小明"，
            age:12，
            gender:"男"
        }
        let {name,gender,age}=obj;
        console.log(name,gender,age);
        //部分解构
        let {name}=obj;
        console.log(name);

解构后重新命名

 //解构后重命名
        let {name:myName}=obj;
        console.log(myName);

获取现有对象方法，赋值给变量

let {random}=Math;
        console.log(random);

3.2数组的解构赋值

//数组解构
        let arr=[10,20,30];
        let [a,b,c]=arr;
        console.log(a,b,c,d);//a=10,b=20,c=30,d=undefind
 //数组部分解构
        let [e]=arr;//e=arr[0]=10
        let[,,f]=arr;//f=arr[2]=30
 //复合解构
        let arr2=[10,20,[100,200,300]];
        let [p,,[x,y,z]]=arr2;

3.3字符串解构（伪数组）

//字符串解构
        let str="xyzsc";
        let [a,b,c,,]=str;
        //交换变量的值
        [a,b]=[b,a];
        console.log(a,b);

四、对象的简化写法

如果一个对象的属性名和外面的一个变量同名，可以直接交换变量名作属性名，并会自动把变量值作为属性值。

  var 
            name:"小明",
            age:12,
            gender:"男"
    let obj={
        name:name,
        age:age,
        gender:gender
    }
    //简写
    // let obj={
    //     name,
    //     age,
    //     gender
    // }

五、函数参数默认值和参数解构

5.1函数参数的默认值

 function add(a,b,c,d){
        //如果只传少于四个值
        // a=a||0;
        // b=b|0;
        // c=c||0;
        // d=d|0;
        return a+b+c+d;
    }
    console.log(add(10,20));
    console.log(add(10,20,30,40));
    //以上是ES5写法
    function add(a=0,b=0,c=0,d=0){
        return a+b+c+d;
    }
    console.log(add(10,20));//30

5.2解构赋值

可以数组解构，当参数是一组有序的值时

适用对象结构，当参数是一组无序的值时

 function fn([x,y,z]){
        console.log(x,y,z);
    }
    fn([1,2,3])
    function fun({x,y,z}){
        console.log(x,y,z);
    }
    fun({x:1,z:2,y:3})

六、rest参数和拓展运算符

6.1rest参数

rest参数搭配的变量是一个数组，该变量将多余的参数放入数组中

function fun(a,b,...rest){
console.log(rest);//Arry(3)真数组
    }
    fun(10,20,30,40,50);

重点是”...“不是一定要写rest,要写在形参的最后

rest获取的是剩余参数，以数组的形式呈现

6.2拓展运算符

ES6中的拓展运算符是一个非常有用的运算符，可以用来快速展开数组，对象...拆成一个个单独的数据。

let arr=[1,2,3,4];
console.log(...arr);

展开对象

//展开对象
let obj={
            name:"小明",
            age:12,
            gender:"男"
        }
console.log({id:1,date:"2021-09-03",...obj});

使用场景：

1、数组中值作为函数参数使用

2、数组合并 let newArr=[..arr1,...arr2]

3、对象合并

拓展运算符在解构中的使用

let str="xiaoming";
let [a,b,...strNew]=str;
    console.log(strNew);//strNew="aoming"

七、箭头函数

7.1固定语法

（参数）=>{函数体}

注：形参个数如果为一个，可以省略小括号不写

如果函数体里面只有一个语句，可以省略大括号不写，并且会返回=>符号后的数据

如果函数体只有多个语句，则不能省略大括号

如果函数体只有一个语句，且返回一个对象，建议不要写成简式。

箭头函数不可以使用arguments获取参数列表，可以用rest参数代替

  //创建无参无返回的函数
    let fun1=()=>{};//花括号可以省略，但小括号不可
    //创建无参有返回的函数
    let fun2=()=>{
        return "fun2";
    }//return与花括号可以省略
//创建有参无返回的函数
let fun3=x=>{
    console.log(x);
}//小括号可以省略
//创建有参有返回的函数
let fun4=(x,y)=>{
    let sum=x+y;
    return sum;
}
//箭头函数返回对象

箭头函数中的this

全局中使用指向window

对象调用指向该对象（事件中的事件源）

箭头函数没有自己的作用域，即箭头函数中的this指向外层作用域与function不同