• 技术文章 >web前端 >前端问答

    es6能用var声明变量吗

    青灯夜游青灯夜游2022-04-11 16:07:15原创97

    es6能用var声明变量。var是声明变量的一个关键字,使用var关键字声明的变量,其作用域有两种:全局作用域和函数作用域;由于var支持变量提升,所以用var声明的全局变量在整个脚本代码中有效,使用var声明的局部变量在整个函数中有效。

    本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。

    ES5 只有两种声明变量的方法:var命令和function命令。

    ES6 除了添加let和const命令,还有两种声明变量的方法:import命令和class命令。

    所以,ES6 一共有 6 种声明变量的方法:

    用关键字var声明变量

    var是声明变量的一个关键字,声明方法:

    var 变量名;

    举几个例子:

    var str;  //用来存储字符串
    var age;  //用来存储年龄
    var prePage;  //用来存储上一页

    定义变量时,可以一次定义一个或多个变量,若定义多个变量,则需要在变量名之间使用逗号,分隔开,如下例所示:

    var a, b, c;    // 同时声明多个变量

    变量定义后,如果没有为变量赋值,那么这些变量会被赋予一个初始值——undefined(未定义)。

    变量定义后,可以使用等于号=来为变量赋值,等号左边的为变量的名称,等号右边为要赋予变量的值,如下例所示:

    var num;    // 定义一个变量 num
    num = 1;    // 将变量 num 赋值为 1

    此外,也可以在定义变量的同时为变量赋值,如下例所示:

    var num = 1;                // 定义一个变量 num 并将其赋值为 1
    var a = 2, b = 3, c = 4;    // 同时定义 a、b、c 三个变量并分别赋值为 2、3、4
    // var a = 2,               // 为了让代码看起来更工整,上一行代码也可以写成这样
    //     b = 3,
    //     c = 4;

    说明:

    扩展知识:

    let 和 const 关键字声明变量

    2015 年以前,JavaScript 只能通过 var 关键字来声明变量,在 ECMAScript6(ES6)发布之后,新增了 let 和 const 两个关键字来声明变量,其中:

    注意:IE10 及以下的版本不支持 let 和 const 关键字。

    示例代码如下:

    let name = "小明";      // 声明一个变量 name 并赋值为“小明”
    let age  = 11;          // 声明一个变量 age
    let age  = 13;          // 报错:变量 age 不能重复定义
    const PI = 3.1415       // 声明一个常量 PI,并赋值为 3.1415
    console.log(PI)         // 在控制台打印 PI

    var、let和const的作用域

    使用 var 声明的变量的作用域有全局作用域和函数作用域;使用 let 和 const 声明的变量有全局作用域、局部作用域和块级作用域。

    由于 var 支持变量提升,所以 var 变量的全局作用域是对整个页面的脚本代码有效;而 let 和 const 不支持变量提升,所以 let 和 const 变量的全局作用域指的是从声明语句开始到整个页面的脚本代码结束之间的整个区域,而声明语句之前的区域是没有效的。

    同样,因为 var 支持变量提升,而 let 和 const 不支持变量提升,所以使用 var 声明的局部变量在整个函数中有效,而使用 let 和 const 声明的局部变量从声明语句开始到函数结束之间的区域有效。需要注意的是,如果局部变量和全局变量同名,则在函数作用域中,局部变量会履盖全局变量,即在函数体中起作用的是局部变量;在函数体外,全局变量起作用,局部变量无效,此时引用局部变量将出现语法错误。

    用关键字function声明变量

    function add(a) {
      var sum = a + 1;
      return sum;
    }

    用关键字class声明变量

    关于class,后期我会单独写一篇文章,详细的介绍一下,这里就简单说一下: 首先通过看ES5中的构造函数,然后再用ES6的class去实现:

    // ES5写法 :
      function fun ( x, y ){
        this.x = x;
        this.y = y;
      };
      fun.prototype.GetHair = function(){
        return `${this.x}掉了两根头发,${this.y}说俺也一样!`;
      };
      let setHair = new fun('小明','老王');
      console.log(setHair.GetHair()); // 小明掉了两根头发,老王说俺也一样!

    再来看一下ES6的class写法:

     class Interest {
        constructor( x, y, e, z ){
          this.x = x;
          this.y = y;
          this.e = e;
          this.z = z;
        }
        MyInterest(){
          let arr = [];
          console.log(`我会${[...arr,this.x,this.y,this.e,this.z]}!`);
        }
      }
      let GetInterest = new Interest('唱','跳','rap','篮球');
      console.log(GetInterest.MyInterest());  //我会唱,跳,rap,篮球!

    ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已,constructor方法就是构造方法,而this关键字则代表实例对象。也就是ES5 的构造函数Point,对应 ES6 的Point类的构造方法。

    用关键字import声明变量

    import用于加载文件,在大括号接收的是一个或多个变量名,这些变量名需要与你想要导入的变量名相同。

    举个栗子:你想要导入action.js文件中的某一个变量,这个变量里保存了一段代码块,所以你要写成:import { Button } from 'action',这个时候,你就从action.js中获取到了一个叫 Button 的变量,既然获取到了,你就可以对Button里的代码猥琐欲为了

    如果想为输入的变量重新取一个名字,import命令要使用as关键字,将输入的变量重命名,比如:

    import { NewButton as Button } from 'action.js';

    上面的代码表示从action.js文件中,获取一个变量名称叫做Button的代码段,然后你又声明了一个变量 NewButton ,将 Button 保存在 NewButton

    【相关推荐:javascript视频教程web前端

    以上就是es6能用var声明变量吗的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:es6 var 声明变量
    上一篇:javascript中有没有hash 下一篇:javascript怎么禁止拷贝
    Web大前端开发直播班

    相关文章推荐

    • es6关键字super是什么意思• es6中promise对象的状态有哪些• es6中为什么不用var而是用let• es6箭头函数在哪里不能用• ES6中class是语法还是语法糖• es6怎么检测数组中有没有某个元素

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网