1. 程式人生 > >ES6入門筆記(初)

ES6入門筆記(初)

參照http://es6.ruanyifeng.com/  學習,寫的非常不錯,難得有寫的這麼好的開發學習資料,簡單易懂,非常方便查詢

http://es6.ruanyifeng.com/#docs/style  編碼風格(好)必學

function example() {

  return {

    foo: 1,

    bar: 2

  };

}

let { foo, bar } = example();

解構賦值對提取 JSON 物件中的資料,尤其有用

let jsonData = {

  id: 42,

  status: "OK",

  data: [867, 5309]

};

let { id, status, data: number } = jsonData;

遍歷 Map 結構

const map = new Map();

map.set('first', 'hello');

map.set('second', 'world');

for (let [key, value] of map) {

  console.log(key + " is " + value);

}

// 獲取鍵名 for (let [key] of map) {}

// 獲取鍵值 for (let [,value] of map) {}

 

http://es6.ruanyifeng.com/#docs/string

includes(), startsWith(), endsWith()

  • includes():返回布林值,表示是否找到了引數字串。
  • startsWith():返回布林值,表示引數字串是否在原字串的頭部。
  • endsWith():返回布林值,表示引數字串是否在原字串的尾部。

這三個方法都支援第二個引數,表示開始搜尋的位置。

let s = 'Hello world!';   s.startsWith('world', 6) // true

repeat方法返回一個新字串,表示將原字串重複n次  'x'.repeat(3) // "xxx"

padStart和padEnd一共接受兩個引數,第一個引數用來指定字串的最小長度,第二個引數是用來補全的字串。'x'.padStart(4, 'ab') // 'abax'; 'x'.padEnd(5, 'ab') // 'xabab'

模板字串中嵌入變數,需要將變數名寫在${}

合併陣列// ES6 的合併陣列[...arr1, ...arr2, ...arr3]

 

http://es6.ruanyifeng.com/#docs/module

整體載入:import * as circle from './circle';  如果circle有多個export,最好不使用,使用一個輸出

模組整體載入所在的那個物件(上例是circle),應該是可以靜態分析的,所以不允許執行時改變

export default命令,為模組指定預設輸出。上面程式碼的兩組寫法,第一組是使用export default時,對應的import語句不需要使用大括號;第二組是不使用export default時,對應的import語句需要使用大括號。

如果模組預設輸出一個函式,函式名的首字母應該小寫。如果模組預設輸出一個物件,物件名的首字母應該大寫。

 

http://es6.ruanyifeng.com/#docs/style

ESLint 是一個語法規則和程式碼風格的檢查工具,可以用來保證寫出語法正確、風格統一的程式碼。

靜態字串一律使用單引號或反引號,不使用雙引號。動態字串使用反引號。

在let和const之間,建議優先使用const,尤其是在全域性環境,不應該設定變數,只應設定常量。const b = `foo${a}bar`;

解構賦值

使用陣列成員對變數賦值時,優先使用解構賦值。const [first, second] = arr;

物件: const b = {  k1: v1,  k2: v2,}; 注意單行定義的物件,最後一個成員不以逗號結尾。多行定義的物件,最後一個成員以逗號結尾。

 

使用擴充套件運算子(...)拷貝陣列。const itemsCopy = [...items];

使用 Array.from 方法,將類似陣列的物件轉為陣列。const nodes = Array.from(foo);

函式:立即執行函式可以寫成箭頭函式的形式。(() => {console.log('Welcome to the Internet.');}) 使用函式表示式的場合,儘量用箭頭函式代替。因為這樣更簡潔,而且綁定了 this。

rest 運算子(...)可以提供一個真正的陣列