首頁  >  文章  >  web前端  >  es6宣告變數的方法有哪些

es6宣告變數的方法有哪些

青灯夜游
青灯夜游原創
2021-09-10 14:49:012177瀏覽

宣告變數的方法:1、使用var指令,語法「var 變數名稱;」;2、使用function指令;3、使用cosnt指令,語法「const 變數名稱;」;4、使用let指令,語法「let 變數名」;5、使用import指令;6、使用class指令。

es6宣告變數的方法有哪些

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

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

ES6 除了加入letconst指令,還有兩種宣告變數的方法: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) cosnt指令

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) import指令

1、ES6引進了自己的模組系統。透過export導出,import導入。

2、與CommonJS不同的是,它是取得模組的引用,到用的時候才會真正的去取值。

3、例如js中:

  let student = [
    {
      name: 'xiaoming',
      age: 21,
    },
    {
      name: 'xiaohong',
      age: 18
    }
  ]
  export default student; // 这种导出方式,你可以在import时指定它的名称。

4、在app.js中我們就可以這樣用:

  import StudentList from './student.js'; //指定名称
  console.log(StudentList[0].name); //xiaoming

(6) class指令

1:class作為es6的語法糖,實際上es5也可以實現的。

  class Point {
    constructor (x, y) {
      this.x = x;
      this.y = y;
    }
    toString () {
      return this.x + ',' + this.y;
    }
  }
//上面是一个类
  Object.assign(Point.prototype, {
    getX () {
      return this.x;
    },
    getY () {
      return this.y;
    }
  })
  let p1 = new Point(1,2);
  console.log(p1.toString()); //1,2
  console.log(p1.getX()); //1
  console.log(p1.getY()); //2
  console.log(Object.keys(Point.prototype)); // ["getX", "getY"]
  • 方法之間不需要逗號分隔

  • #toString () {} 等價於toString: function () {}

  • #你還是可以使用Point.prototype

  • 你可以用Object.assign()一次擴充很多方法

  • 類別內部定義方法多是不可以枚舉的

  • constructor(){}是一個預設方法,如果沒有添加,會自動添加一個空的。

  • constructor默认返回实例对象(this),完全可以指定返回其他的对象。

  • 必须用new调用

  • 不存在变量提升

  • 当用一个变量去接受class时,可以省略classname

  • es6不提供私有方法。

2:使用extends继承

class ThreeDPoint extends Point {
    constructor (x, y, z) {
      console.log(new.target); //ThreeDPoint
      super(x, y);
      this.z = z;
}
    toString () {
      return super.toString() + ',' + this.z;
    }
    static getInfo() {
      console.log('static method');
    }
    get z() {
      return 4;
    }
    set z(value) {
      console.log(value);
    }
}
  ThreeDPoint.getInfo(); // "static method"
  let ta = new ThreeDPoint(2,3,4);
  console.log(ta.toString()); //2,3,4
  console.log(ta.z); // 4
  ta.z = 200; // 200
  console.log(Object.getPrototypeOf(ThreeDPoint)); //Point
  • constructor中必须调用super,因为子类中没有this,必须从父类中继承。

  • 子类的__proto__属性总是指向父类

  • 子类的prototype属性的__proto__总是指向父类的prototype

  • Object.getPrototypeOf()获取父类

  • super作为方法只能在constructor中

  • super作为属性指向父类的prototype.

  • 在constructor中使用super.x = 2,实际上this.x = 2;但是读取super.x时,又变成了父类.prototype.x。

  • 原生构造函数是无法继承的。

  • get set 方法可以对属性的赋值和读取进行拦截

  • (静态方法不能被实例继承。通过static声明

  • 静态属性只能 ThreeDPoint.name = “123” 声明 (与static没什么关系)

【推荐学习:javascript高级教程

以上是es6宣告變數的方法有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn