ES6 新语法

01声明let和const

 <script>
        /* 
        1.数据类型Set (集合) : 类似于数组，与数组唯一的区别是 ： 不能存储重复元素
        2.应用 ： 数组去重
            一行代码去重： let newArr =  Array.from( new Set(数组) )
        */    

        let arr = [10,20,60,80,20,60,99,10,100]//[10,20,60,80,99,100]

        //1.声明Set
        // let set =  new Set(arr)
        // console.log( set )
        //2.把set转成真数组
        // let newArr = Array.from(set)
        // console.log(newArr)

        /* 一行代码实现数组去重 */
        let newArr =  Array.from(new Set(arr))
        console.log(newArr)
        
    </script>

02 var关键字特点

  /*学习目标 
        
        1.ES5中声明变量var关键字特点 ：
            1.1 预解析：变量声明提升
            1.2 没有块级作用域： if和for大括号里面声明的变量也是全局的

        2.ES6中声明变量let与const特点 ：

        3.let与const区别 ：

        */    

        //1.ES5中声明变量var关键字特点 

        /* 1.1 预解析 ： js代码从上往下解析之前，会先对变量声明进行提升(预解析)
        var num//预解析,变量声明提升
        console.log( num )//undefined
        num = 10
        console.log( num )//10
        */
        console.log( num )//undefined
        var num = 10
        console.log( num )//10

        /* 1.2 没有块级作用域 
        (1)块级作用域： if和for语句大括号里面声明的变量也是局部的
        (2)没有块级： if和for大括号里面声明的变量不是局部的，是全局的
        */
        for(var i = 1;i<=5;i++){
            console.log(`循环内:${i}`)//1 2 3 4 5
        }
        console.log(`循环外:${i}`)//6
        

对象解构

//解构赋值  : 变量赋值简写语法 
//1重点掌握 
1.1 取出对象的属性  赋值给变量
let {name,age,sex}=对象名
1.2 取出边框的值 赋值给对象的属性
let 对象名 ={name,age,sex}

//1取出对象的属性 赋值给 变量
let obj{
name:"张三",
age:20,
sex:"男"
}
//es5
let name=obj.name
let age=obj.age
let sex=obj.sex
console.log(name,age,sex)

//es6解构赋值
let  hobby=obj.hobby
let {name.age,sex,hobby}=obj
console.log(nmae.age,sex,hobby)


//2取出变量的值 赋值给 对象的属性
let name="李四"
let age=30,
let sex="女"


//es5
let obj={
name:name,
age:age,
sex:sex.
}
console.log(obj)


let obj={
name,
age,
sex,
eat(){
        console.log("吃东西")
}
console.log(obj)

04数组解构

 let arr=[10,20,30]
 //1取出输的元素 赋值给 变量
 let [n1,n2,n3,n4]=arr
  //let n1=arr[0]
 //let n1=arr[1]
 //let n1=arr[2]
  //let n1=arr[3]
  console.log(n1,n2,n3,n4) //10,20,30,undefined
  
  //2取出变量的值 赋值给 数组的元素
  let num1=66
  let num2=88
  let num3=100
  let arr1=[num1,num2,num3]
  console.log(arr1)
  

05函数参数解构

//函数参树解构 当函数参数是对象类型,就可以对形参进行解构
//传参本质 实参给形参赋值
 function fn (obj){ //let obj={name:"张三",age:20,sex:'男'}
 //对函数形参进行解构
 let {name,sex,age}
 console.log(name,sex,age)
 }
  function fn1( {name,sex,age} ){// let {name,sex,age} = {name:'张三',age:20,sex:'男'}
            console.log( name,sex,age )
         }

         fn( {name:'张三',age:20,sex:'男'} )
         fn1( {name:'张三',age:20,sex:'男'} )
        
 

06 箭头函数

1箭头函数:相当于 function函数的简写
(1)去掉function,改成 箭头=> (2)形参小括号写到箭头左边
2箭头函数语法注意点
2.1如果箭头函数只有一个形参,则可以省略小括号
2.2如果箭头函数的 函数体 只有一行代码,则可以省略打括号(此时必须省略return)
let fn=(a,b)=>{
console.log(a+b)
}
fn(10,20)
//(1)如果箭头函数只能一个形参,则可以省略小括号
let fn1=a=>{
console.log(a*2)
}
fn1(66)

//(2)如果箭头函数的 函数体 只有一行代码 则可以省略大括号 (此时必须省略return)
let fn2=a=a82
let res =fn2(88)
console.log(res)

07展示运算符

//1展开运算符:...
相当于对象遍历的简写
//2应用
 2.1 连接两个数组
 2.2求数组最大值
 let arr1=[10,20,30]
 let arr2=[40,50,60]
 //es5:concat
 //let arr=arr1.concat(arr2)
 //aee.push(70)
 
 //es6
 let arr=[...arr1...]