首頁 > web前端 > 前端問答 > es6宣告變數有幾種方法

es6宣告變數有幾種方法

青灯夜游
發布: 2022-10-28 19:23:09
原創
4575 人瀏覽過

es6宣告變數有6種方法:1、用關鍵字var宣告變數;2、用關鍵字function宣告變數;3、用關鍵字const宣告變數;4、用關鍵字let宣告變數; 5.用關鍵字class宣告變數;6、用關鍵字import宣告變數。

es6宣告變數有幾種方法

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

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

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

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

1、用關鍵字var宣告變數

var a ;  //undefined
var b = 1;
登入後複製
  • var定義的變數可以修改,如果不初始化會輸出undefined,不會報錯
  • var 宣告的變數在window上,用let或const去宣告變量,這個變數不會放到window上
  • 很多語言都有區塊級作用域,但JS沒有,它使用var宣告變量,以function來分割作用域,大括號「{}」 卻限定不了var的作用域,因此用var宣告的變數具有變數提升的效果
  • var 宣告的變數作用域是全域的或是函數級的

2、用關鍵字function宣告變數

function add(a) {
  var sum = a + 1;
  return sum;
}
登入後複製
  • 聲明了一個名為add的新變量,並為其分配了一個函數定義
  • {}之間的內容被分配給了add
  • 函數內部的程式碼不會被執行,只是儲存在變數中以備將來使用

3、用關鍵字const宣告變數

#
const a;     //报错,必须初始化
const b = 1;
登入後複製
  • const定義的變數不可以修改,而且必須初始化
  • 該變數是個全域變量,或是模組內的全域變數
  • 如果一個變數只有在宣告時才被賦值一次,永遠不會在其它的程式碼行裡被重新賦值,那麼應該使用const,但是該變數的初始值有可能在未來會被調整(常變數)
  • 建立一個唯讀常數,在不同瀏覽器上表現為不可修改;建議申明後不修改;擁有區塊級作用域
  • const 代表一個值的常數索引 ,也就是說,變數名字在記憶體中的指標不能夠改變,但是指向這個變數的值可能會改變
  • ##const定義的變數不可修改,一般在require一個模組的時候用或定義一些
  • 全域常數
  • #可以在全域作用域或是函數內宣告常數,但是

    必須初始化常數

  • 常數不能和它所在作用域內其它變數或函數擁有相同名稱

4、用關鍵字let宣告變數

let a;  //undefined
let b = 1; 
function add(b) {
  let sum = b + 1;
  return sum;
}
let c = add(b);
登入後複製
     需要」javascript 嚴格模式」:
  • 'use strict';
  • 不存在變數提升
  • 不允許重複宣告
  • let宣告的變數作用域是在區塊層級域中,函數內部使用let定義後,對函數外部無影響(
  • 區塊層級作用域)
  • 可以在宣告變數時為變數賦值,預設​​值為undefined,也可以在腳本中給變數賦值,在生命前無法使用(暫時死區)

5、用關鍵字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類別的建構方法。

6、用關鍵字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宣告變數有幾種方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板