ES6语法基本用法

向右看齐 2022-05-15 05:57 234阅读 0赞

ES6是JavaScript语言的新版本，它也可以叫做ES2015，之前学习的JavaScript属于ES5，ES6在它的基础上增加了一些语法，ES6是未来JavaScript的趋势，而且vue组件开发中会使用很多的ES6的语法，所以掌握这些常用的ES6语法是必须的。

**变量声明let和const**

let和const是新增的声明变量的开头的关键字，在这之前，变量声明是用var关键字，这两个关键字和var的区别是，它们声明的变量没有预解析，let和const的区别是，let声明的是一般变量，const申明的常量，不可修改。

alert(iNum01) // 弹出undefined
    // alert(iNum02); 报错，let关键字定义变量没有变量预解析
    // alert(iNum03); 报错，const关键字定义变量没有变量预解析
    
    var iNum01 = 6;
    // 使用let关键字定义变量
    let iNum02 = 12;
    // 使用const关键字定义变量
    const iNum03 = 24;
    
    alert(iNum01); // 弹出6
    alert(iNum02); // 弹出12
    alert(iNum03); // 弹出24
    
    iNum01 = 7;
    iNum02 = 13;
    //iNum03 = 25; // 报错,const定义的变量不可修改,const定义的变量是常量
    
    alert(iNum01)
    alert(iNum02); 
    alert(iNum03);

**箭头函数**

可以把箭头函数理解成匿名函数的第二种写法，箭头函数的作用是可以在对象中绑定this，解决了JavaScript中this指定混乱的问题。

// 定义函数的一般方式
    /*
    function fnRs(a,b){
        var rs = a + b;
        alert(rs);
    }
    fnRs(1,2);        
    */
    
    // 通过匿名函数赋值来定义函数
    /*
    var fnRs = function(a,b){
        var rs = a + b;
        alert(rs);
    }
    fnRs(1,2);
    */
    
    // 通过箭头函数的写法定义
    var fnRs = (a,b)=>{
        var rs = a + b;
        alert(rs);
    }        
    // fnRs(1,2);
    
    // 一个参数可以省略小括号
    var fnRs2 = a =>{
        alert(a);
    }
    fnRs2('haha!');
    
    
    // 箭头函数的作用，可以绑定对象中的this
    var person = {
        name:'tom',
        age:18,
        showName:function(){
            setTimeout(()=>{
                alert(this.name);
            },1000)            
        }
    }
    person.showName();

**模块导入import和导出export**

javascript之前是没有模块的功能的，之前做js模块化开发，是用的一些js库来模拟实现的，在ES6中加入了模块的功能，和python语言一样，python中一个文件就是一个模块，ES6中，一个js文件就是一个模块，不同的是，js文件中需要先导出(export)后，才能被其他js文件导入(import)

// model.js文件中导出
    var person = {name:'tom',age:18}
    export default {person}
    
    // index.js文件夹中导入
    import person from 'js/model.js'
    
    // index.js中使用模块
    person.name
    person.age
    
    /*
    上面导出时使用了default关键字，如果不使用这个关键字，导入时需要加大括号：
    import {person} from 'js/model.js'
    */

目前ES6的模块功能需要在服务器环境下才可以运行。

对象的简写

javascript对象在ES6中可以做一些简写形式，了解这些简写形式，才能方便我们读懂一些在javascript代码中简写的对象。