分分鐘帶你欣賞ES6語法糖

2019 年 10 月 3 日
筆記

let , const關鍵字

var

看習慣了java, 看js真的是忍不住想笑,比如說這個var,它太自由了,自由到{}根本限制不住它的生命周期

js的var關鍵字,無論在何處聲明,都會被視為聲明在函數的最頂部,不在函數裡面的就被視為在全局的最頂部,這就是所謂的變數提升

function aa(bool) {      if (bool) {          var test = "hello";      } else {          console.log(test);      }  }  aa(false);

比如上面的程式碼, 他就不會報錯,而是說undifined, 因為var的變數提升, 相當於下面那樣:

function aa(bool) {      var test;      if (bool) {          test = "hello";      } else {          console.log(test);      }  }  aa(false);

let

換成let關鍵字,就會普通變數, 它的生命周期被限制在 { }

function aa(bool) {        if (bool) {          let test = "hello";      } else {          console.log(test);      }  }

const

const 聲明常量, 值不允許被修改,而且必須初始化

function aa() {      let a = 'abc';      const test = a;      a = "world";      alert('a=='+a);      alert('test=='+test);  }  aa();

結果就是 abc world

如果嘗試直接對test賦值, 編譯器會報錯的

模板字元串的拼接

這樣取值完全沒問題, 但是js的設計者認為他 + 太多了,low爆了

console.log(name1 + "喜歡" + name2);

於是: ${} , 注意啊, 是esc下面的鍵位

console.log(`${name1}喜歡${name2}`);

方法入參的默認值

如果我們不給入參傳值, 默認就是空, 一用就報錯, 所以參數需要默認值是很有必要的

這時候, 用戶傳遞進來值了,使用的就是用戶傳遞進來的值, 在java中想干這個事,得在參數位置加老長的註解

function sayName(name = "張三") {      alert(name);  }

箭頭函數

es6的箭頭函數和java8的lambda表達式如出一轍, 因為學了java8, 所以es6的箭頭函數也是秒上手了, 包括流式的操作也如出一轍

對象的簡寫和解構

原來,如果方法想返回一個對象,需要這樣寫

function people(name, age) {  return {      name: name,      age: age  }  }

在es6中,如果屬性和值相同 ,就變成了這樣

function people(name, age) {      return {          name,          age      }  }

動態的添加屬性, 在java想都別想,

let p = {name: '張三', age: 680};  alert(p.name);  alert(p.age);

添加屬性

p.address = '山東';

添加函數

p.add = () => {};

其實js這麼自由也不一定是好事, 起碼不能亂點了, 它也不給報錯, 一不留神就多了個屬性

組裝對象或數組SpreadOperator …

const color = ['red', 'blue'];  const colorful = [...color, 'green']  // 現在 colorful數組就是 三個顏色的數組 , 同樣換成{}  也一樣

Import 和 export

這個特性vue用的最多, 模組化的感覺很強烈

let fun = function () {      console.log("fun")  }  export {fun}      // 在第二個文件 導入  import fun from "./fun";  // 然後使用  fun()

面向對象的編程模式-類

class person {      // 構造函數      constructor(name) {          this.name = name; // 不提前定義變數? 不存在的,直接點就行了老鐵      }        // 方法      sayHello() {          console.log("hello");      }  }    // 類的繼承  class Student extends person {      constructor(name) {          super(name);      }        sayHaha() {          console.log("haha");      }  }

使用:

它並不能寫父類引用指向子類對象

//person stu = new Student('zhangsan');  var stu = new Student('zhangsan');  stu.sayHaha();