es6語法詳解

我是七月呀發表於2021-01-23

什麼是ECMAScript？

ECMAScript是瀏覽器指令碼語言的規範，而我們熟知的js語言，如JavaScript則是規範的具體實現。es6就好比Java的jdk。

一、es6語法詳解：let宣告變數

1、var宣告的變數往往會越域；let宣告的變數有嚴格區域性作用域

    {
      var a = 1;
      let b = 2;
    }
    console.log(a)  // 1
    console.log(b)  // Uncaught ReferenceError: b is not defined

2、var 可以宣告多次；let只能宣告一次

 	var m = 1;
    var m = 2;
    let n = 1;
    let n = 2;
    console.log(m) //2
    console.log(n) //Uncaught SyntaxError: Identifier 'n' has already been declared

3、var會變數提升；let不存在變數提升

  	console.log(x);
    var x = 10; // undefined
    console.log(y);
    let y = 12; // Uncaught ReferenceError: Cannot access 'y' before initialization

注意：以後要習慣使用let宣告變數

二、es6語法詳解：const宣告變數 相當於宣告瞭一個常量

1、宣告之後不允許改變

	const a = 1;
    console.log(a) //1
    a = 2;
    console.log(a) // Uncaught TypeError: Assignment to constant variable.

2、一旦宣告必須初始化，否則會報錯

  const a;
  a = 1; 
  console.log(a) //Uncaught SyntaxError: Missing initializer in const declaration

三、es6語法詳解：解構表示式

1、陣列解構

 let arr = [1, 2, 3];
 let [a, b, c] = arr;
 console.log(a, b, c) //1,2,3

2、物件解構

    const person = {
      name: "qiyue",
      age: 23,
      language: ['java', 'js', 'css']
    }
    const { name, age, language } = person 
    console.log(name, age, language) //qiyue 23 (3) ["java", "js", "css"]

    const person = {
      name: "qiyue",
      age: 23,
      language: ['java', 'js', 'css']
    }
    //從person裡解析出name的值在賦值給abc
    const { name:abc, age, language } = person
    console.log(abc, age, language) //qiyue 23 (3) ["java", "js", "css"]

四、es6語法詳解: 字串擴充套件

 	let str = "hello.vue";
    console.log(str.startsWith("hello")) //true
    console.log(str.endsWith("vue")) //true
    console.log(str.includes("e")) //true
    console.log(str.includes("hello")) //true

五、es6語法詳解: 字串模板

let str = `<span>hello world</span>`
console.log(str) // <span>hello world</span>

六、es6語法詳解: 字串插入變數和表示式。變數寫在${}中，${}中可以放入js表示式

let info = `我是${abc},今年${age}`
console.log(info) //我是qiyue,今年23

let info = `我是${abc},今年${age}`
console.log(info) //我是qiyue,今年23

let info = `我是${abc},今年${age}`
console.log(info) //我是qiyue,今年23

   function fun() {
      return "這是一個函式";
    }
    let info = `我是${abc},今年${age + 10},我想說：${fun()}`
    console.log(info) //我是qiyue,今年33,我想說：這是一個函式

七、es6語法詳解: 函式優化

1、函式預設值：直接給引數寫上預設值，沒傳就會自動使用預設值

function add(a, b = 1) {
      return a + b;
    }
    console.log(add(10)) //11

2、不定引數：不定引數用了表示不確定的引數個數，形如...變數名，由...加上要給具名引數識別符號組成。具名引數只能放在引數列表的最後，並且有且只有一個不定引數

 function fun(...params) {
      console.log(params.length)
    }
    fun(1, 2) // 2
    fun(1, 2, 3, 4) //4

3、箭頭函式

//以前
var sum = function (a, b) {
      c = a + b
      return c
    }
console.log(sum(2, 3)) // 5
//箭頭函式
var sum2 = (a, b) => a + b;
console.log(sum2(2, 4)) // 6

4、箭頭函式結合解構表示式

    //以前
    function hello(person) {
      console.log("hello" + person.name)
    }
    hello(person); //helloqiyue
    //箭頭函式
    let hello2 = params => console.log("hello" + person.name)
    hello2(person) //helloqiyue
    //箭頭函式加解構表示式
    var hello3 = ({ name }) => console.log("hello" + name)
    hello3(person) //helloqiyue

八、es6語法詳解: 物件優化

1、es6給Object擴充套件了許多新的方法，如

  • key(obj)：獲取物件的所有key形成的陣列
  • value(obj):獲取物件的所有value形成的陣列
  • entries(obj):獲取物件所有的key和value形成的二維陣列
  const person = {
      name: "qiyue",
      age: 23,
      language: ["java", "js", "css"]
    }
    console.log(Object.keys(person)) //["name","age","language"]
    console.log(Object.values(person)) // ["qiyue",23,Array(3)]
    console.log(Object.entries(person)) //[Array(2),Array(2),Array(2)]

2、Object.assign方法的第一個引數是目標物件，後面的引數都是源物件；將源物件的屬性賦值到目標物件中

	onst target = { a: 1 }
    const source1 = { b: 2 }
    const source2 = { c: 3 }
    Object.assign(target, source1, source2);
    console.log(target) //{a: 1, b: 2, c: 3}

3、 宣告物件簡寫

	//以前
	const name = 'sanyue'
    const age = 21
    //將屬性值name，age分別賦給person1物件的name，age,後面是屬性值
    const person1 = { name: name, age: age }
    console.log(person1) //{name: "sanyue", age: 21}
    
    //es6:屬性名和屬性值變數名一樣，可以省略
    const person2 = {name,age}
    console.log(person2) //{name: "sanyue", age: 21}

4、物件的函式屬性簡寫

 let person3 = {
      name: "qiyue",
      //以前
      eat: function (food) {
        console.log(this.name + "在吃" + food);
      },
      //箭頭函式中this不能使用，用物件.屬性
      eat2: food => console.log(person3.name + "在吃" + food),
      eat3(food) {
        console.log(this.name + "在吃" + food)
      }
    }
    person3.eat("蘋果") //qiyue在吃蘋果
    person3.eat2("香蕉") // qiyue在吃香蕉
    person3.eat3("西瓜") //qiyue在吃西瓜

5、物件的擴充套件運算子

擴充套件運算子（...)用於取出引數物件所有可遍歷屬性然後拷貝到當前物件

    //拷貝物件（深拷貝）
    let p1 = { name: "qiyue", age: 23 }
    let obj = { ...p1 }
    console.log(obj)//{name: "qiyue", age: 23}
	
	//合併物件
    let age1 = { age: 24 }
    let name1 = { name: "qiyue" }
    let p2 = {}
    p2 = { ...age1, ...name1 }
    console.log(p2) //{age: 24, name: "qiyue"}
    //如果p2中原本有name,age屬性會被覆蓋

九、es6語法詳解:map和reduce方法

1、map():接收一個函式，將原陣列中的所有元素用這個函式處理後放入新陣列返回

 let arr = ["1", "3", "4", "23"]
    arr = arr.map(item => item * 2)
    console.log(arr) //[2, 6, 8, 46]

2、reduce():為陣列中的每一個元素依次執行回撥函式，不包括陣列中被刪除或未被賦值的元素

語法：arr.reduce(callbace,[initialValue])

callback(執行陣列中每個值的函式，包含四個引數)

  • previousValue（上一次呼叫回撥返回的值，或者是提供的初始值（initialValue))
  • currentValue(陣列中當前被處理的元素)、
  • index(當前元素在陣列中的索引)
  • array(呼叫reduce的陣列)

initialValue(作為第一次呼叫callback的第一個引數)

    let arr1 = [2, 40, -10, 6]
    let result = arr1.reduce((a, b) => {
      return a + b
    }, 10)
    console.log(result)//48

十、es6語法詳解:模組化

什麼是模組化：模組化就是把程式碼進行拆分，方便重複利用。類似Java中的導包，要使用一個包，必須先導包。二Js中沒有包的概念，換來的就是模組

模組的功能主要有兩個命令構成：export和import

  • export命令用於規定模組的對外介面，export不僅可以匯出物件，一切js變數都可以匯出。比如：基本型別變數、函式、陣列、物件
  • import命令用於匯入其他模組提供的功能

相關文章