ES6小结

ES6

• javascript 最新版
• 下面列出常用的一些

声明变量

<script>
    //es5 函数和变量的声明都会提前 以函数区分作用域


    // es6 块级作用域 以{}区分作用域

    if(true){
        var a=3
        //es6 用 let 声明变量  let不能重新声明
        let b=4
        console.log(b) 
    }

    console.log(a); // a
    console.log(b); // 报错,b只在括号内起作用
</script>

声明常量

<script>
    // 声明常量 
    const NUM = 20;
    // NUM = 10; 不能重新赋值

    const obj = {
        
    }
</script>

声明对象

<script>
    // es5的表达方式
    var a = 2;
    var b = 1;
    var str = {
           a:a,
           b:b,
           god:function(){
               console.log('1341');
           }
    }

    // es6对象的表达方式 声明变量前面用 let 声明对象前面用 const 或 let
    let name = '小白'
    let age = 2

    const cat={
        name,
        age,
        say(){
            console.log('12345')
        }
    }

    console.log(cat.name);
    console.log(cat.say());
    // say(); 会报错，访问不到
</script>

箭头函数

<script>
    // es5声明函数
    // 声明函数(定义)
    function add(a,b){
        return a+b;
    }
    // 函数表达式
    var ntb = function(){
        console.log(22);
    }

    // es6 箭头函数 function 用 => 代替并放在括号后面
    const add2 = function(a,b){
        return a+b;
    }
    
    const add3 = (a,b) => {
        return a+b;
    }

    const sum = res =>{
        console.log(14);
    }

    const str = ()=>{
        console.log(1564);
    }

    // 求平方
    const square = (a)=>{
        return a*a;
    }

    const square2 = (a) => a*a; // 简洁表达方式
</script>

• 小例子

<meta charset="utf-8">
<button>点击</button>

<script>
    // 箭头函数this的指向
    // var $button = document.querySelector('button');
    // $button.onclick=function(){
    //     console.log(this);// this指向button
    // }

        // 箭头函数  => 外面this指向哪里里面this就指向哪里
    var $button = document.querySelector('button');// 绑定元素
    console.log(this);//用箭头函数后这个this和箭头函数里面的this一样，在es5里却是不一样的
    $button.onclick=()=>{
        // 箭头函数的this指向的是绑定的时候this的指向
        console.log(this); // 这里this是指向window的  
    }
</script>

解构 数组、函数、对象解构

<script>
    const person = {
        name:'xiao zi',
        age:100
    }

    console.log(person.name);

    // es6 对象的解构
    let {name,age}=person; // 只取需要的
    console.log(name);
    console.log(age);

    // 数组解构
    let [a,b,c] = [1,54,6,4];
    console.log(a);

    // 函数解构
    function add({a,b}){
        console.log(a);
        console.log(b);
    }
    add({a:20,b:30})


    // let {a,b} = {a:20,b:30};

</script>

扩展运算符 ...

<script>
    const dog = {
        age:1,
        name:'狗',
        say(){
            console.log('汪汪汪');
        }
    }

    // 扩展运算符 ...
    const dog2 ={
        // 把dog的所有属性拿过来
        ...dog,
        color:'白色',  //在获取的属性里添加属性
        name:'小黑'   // 可以覆盖上面获取的属性
    }
    console.log(dog2);

    // 合并数组
    const arr1 = [1,5,8,7];
    const arr2 = [2,5,7,4];
    const arr3 = [2,6,7,5];
    const arr = {
        ...arr1,
        ...arr2,
        ...arr3
    }
    console.log(arr);
</script>