1. 程式人生 > 其它 >ES6新特性 ES6新特性總結

ES6新特性 ES6新特性總結

ES6新特性總結

1. let const

let 表示申明變數。const 表示申明常量。

  • 常量定義了就不能改了。物件除外,因為物件指向的地址沒變。
  • const在申明是必須被賦值。
  • 兩者都為塊級作用域。

塊級作用域與函式作用域。任何一對花括號({和})中的語句集都屬於一個塊,在這之中定義的所有變數在程式碼塊外都是不可見的,我們稱之為塊級作用域。函式作用域就好理解了,定義在函式中的引數和變數在函式外部是不可見的。

const a = 1
a = 0 //報錯

2. 模組字串``

可以使用反引號``來進行字元拼接。${}

3. 解構

可以使用{}來對陣列和物件進行解構。

4. 函式的引數預設值

函式傳參可以有預設值

// ES6;
function printText(text = 'default') {
    console.log(text);
}

5. Spread / Rest 操作符...

Spread / Rest 操作符指的是 ...,具體是 Spread 還是 Rest 需要看上下文語境。

  • 當被用於迭代器中時,它是一個 Spread 操作符:迭代器 (Iterator)是按照一定的順序對一個或多個容 器 中的元素行進遍歷的一種機制
function foo(x,y,z) {
  console.log(x,y,z);
}
 
let arr = [1,2,3];
foo(...arr); // 1 2 3
  • 當被用於函式傳參時,是一個 Rest 操作符:當被用於函式傳參時,是一個 Rest 操作符:
function foo(...args) {
  console.log(args);
}
foo( 1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

6. 箭頭函式

  • 不需要 function 關鍵字來建立函式
  • 省略 return 關鍵字
  • this始終指向函式申明時所在作用域下的this值
//es5
var fun = function() {

}
//es6
var fn = () => {

}

7. for of

  • for of遍歷的是鍵值對中的值
  • for in遍歷的是鍵值對中的鍵

8. class類

ES6 中支援 class 語法,不過,ES6的class不是新的物件繼承模型,它只是原型鏈的語法糖表現形式。

class Student {
  constructor() {
    console.log("I'm a student.");
  }
 
  study() {
    console.log('study!');
  }
 
  static read() {
    console.log("Reading Now.");
  }
}
 
console.log(typeof Student); // function
let stu = new Student(); // "I'm a student."
stu.study(); // "study!"
stu.read(); // "Reading Now."

9. 匯入匯出

  • 匯入improt
  • 匯出export default

10. promise

Promise 用於更優雅地處理非同步請求。

  <script>
    new Promise((resolve,reject) => {
      setTimeout(function() {
        resolve('成功了!')
      },1000)
      // reject("失敗了,wuwu")
    }).then(data => {
      console.log(data)
    }).catch(err => {
      console.log(err)
    })
  </script>

11. async/await

比promise更好的解決了回撥地獄。

async function() {
  awiat fn()
}

12. Symbol

新的基本型別

13. Set集合

儲存任何型別的唯一值,即集合中所儲存的元素是不重複的。類陣列結構。

arr = [1,2,3,1]
let arrNew = new Set(arr)
arrNew = [1,2,3]

類陣列不是陣列,要轉化為陣列Array.form(arrNew)這樣arrNew才是陣列了

1. let const

let 表示申明變數。const 表示申明常量。

  • 常量定義了就不能改了。物件除外,因為物件指向的地址沒變。
  • const在申明是必須被賦值。
  • 兩者都為塊級作用域。

塊級作用域與函式作用域。任何一對花括號({和})中的語句集都屬於一個塊,在這之中定義的所有變數在程式碼塊外都是不可見的,我們稱之為塊級作用域。函式作用域就好理解了,定義在函式中的引數和變數在函式外部是不可見的。

const a = 1
a = 0 //報錯

2. 模組字串``

可以使用反引號``來進行字元拼接。${}

3. 解構

可以使用{}來對陣列和物件進行解構。

4. 函式的引數預設值

函式傳參可以有預設值

// ES6;
function printText(text = 'default') {
    console.log(text);
}

5. Spread / Rest 操作符...

Spread / Rest 操作符指的是 ...,具體是 Spread 還是 Rest 需要看上下文語境。

  • 當被用於迭代器中時,它是一個 Spread 操作符:迭代器 (Iterator)是按照一定的順序對一個或多個容 器 中的元素行進遍歷的一種機制
function foo(x,y,z) {
  console.log(x,y,z);
}
 
let arr = [1,2,3];
foo(...arr); // 1 2 3
  • 當被用於函式傳參時,是一個 Rest 操作符:當被用於函式傳參時,是一個 Rest 操作符:
function foo(...args) {
  console.log(args);
}
foo( 1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

6. 箭頭函式

  • 不需要 function 關鍵字來建立函式
  • 省略 return 關鍵字
  • this始終指向函式申明時所在作用域下的this值
//es5
var fun = function() {

}
//es6
var fn = () => {

}

7. for of

  • for of遍歷的是鍵值對中的值
  • for in遍歷的是鍵值對中的鍵

8. class類

ES6 中支援 class 語法,不過,ES6的class不是新的物件繼承模型,它只是原型鏈的語法糖表現形式。

class Student {
  constructor() {
    console.log("I'm a student.");
  }
 
  study() {
    console.log('study!');
  }
 
  static read() {
    console.log("Reading Now.");
  }
}
 
console.log(typeof Student); // function
let stu = new Student(); // "I'm a student."
stu.study(); // "study!"
stu.read(); // "Reading Now."

9. 匯入匯出

  • 匯入improt
  • 匯出export default

10. promise

Promise 用於更優雅地處理非同步請求。

  <script>
    new Promise((resolve,reject) => {
      setTimeout(function() {
        resolve('成功了!')
      },1000)
      // reject("失敗了,wuwu")
    }).then(data => {
      console.log(data)
    }).catch(err => {
      console.log(err)
    })
  </script>

11. async/await

比promise更好的解決了回撥地獄。

async function() {
  awiat fn()
}

12. Symbol

新的基本型別

13. Set集合

儲存任何型別的唯一值,即集合中所儲存的元素是不重複的。類陣列結構。

arr = [1,2,3,1]
let arrNew = new Set(arr)
arrNew = [1,2,3]

類陣列不是陣列,要轉化為陣列Array.form(arrNew)這樣arrNew才是陣列了