首頁 >web前端 >前端問答 >es6能用var宣告變數嗎

es6能用var宣告變數嗎

青灯夜游
青灯夜游原創
2022-04-11 16:07:151855瀏覽

es6能用var宣告變數。 var是聲明變數的一個關鍵字,使用var關鍵字聲明的變量,其作用域有兩種:全域作用域和函數作用域;由於var支援變數提升,所以用var聲明的全域變數在整個腳本程式碼中有效,使用var宣告的局部變數在整個函數中有效。

es6能用var宣告變數嗎

本教學操作環境:windows7系統、ECMAScript 6版、Dell G3電腦。

ES5 只有兩種宣告變數的方法:var指令和function指令。

ES6 除了加入let和const指令,還有兩種宣告變數的方法:import指令和class指令。

所以,ES6 一共有6 種宣告變數的方法:

  • #用關鍵字var宣告變數

  • 用關鍵字function宣告變數

  • 用關鍵字const宣告變數

  • #用關鍵字let宣告變數

  • 用關鍵字class宣告變數

  • 用關鍵字import宣告變數



    ##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;
  • 說明:

##var定義的變數可以修改,如果不初始化會輸出undefined,不會報錯


var 宣告的變數在window上,用let或const去宣告變量,這個變數就不會放到window上

很多語言中都有區塊級作用域,但JS沒有,它使用var宣告變量,以function來分割作用域,大括號「{}」 卻限定不了var的作用域,因此用var宣告的變數具有變數提升的效果

    var 宣告的變數作用域是全域的或是函數級的
  • 擴展知識:

let 和const 關鍵字宣告變數

2015 年以前,JavaScript 只能透過var 關鍵字來宣告變數,在ECMAScript6(ES6)發布之後,新增了let 和const 兩個關鍵字來聲明變量,其中:

使用let 關鍵字聲明的變數只在其所在的程式碼區塊中有效(類似於局部變數),在這個程式碼區塊中,同名的變數不能重複宣告;

const 關鍵字的功能和let 相同,但使用const 關鍵字宣告的變數還具備另外一個特點,那就是const 關鍵字定義的變量,一旦定義,就不能修改(即使用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;
}

#宣告了一個名為add的新變數,並為其指派了一個函數定義

{}之間的內容被指派給了add############函數內部的程式碼不會被執行,只是儲存在變數中以備將來使用###############用關鍵字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