ECMAScript6相關實用特性
阿新 • • 發佈：2018-01-21
設置 eof 無法使用 數組 als integer 管家 st2 關閉
本文總結ECMAScript6相關實用特性
目錄
let和const
箭頭函數
class
對象字段
模板字符串
解構賦值
函數參數擴展
叠代器for...of
模塊加載
map和weakmap
set和weakset
對象代理
Symbol數據類型
類型方法的擴展
Promise規範
let和const
let 聲明變量 const 聲明常量 兩者沒有作用域提升箭頭函數
箭頭函數不存在this調用模式的問題，函數在哪兒定義的this就是這個上下文 var fn = () => { console.log(this); }class
基本使用 class Demo { constructor(a, b) { // 構造函數 this.a = a; // 實例屬性 this.b = b; } get myA () { // getter return this.a; } fn() { // 自定義函數 console.log(11); } static staticFn() { // 靜態函數 console.log(22); } } const demo =new Demo(1, 2); console.log(demo.b); console.log(demo.myA); demo.fn(); Demo.staticFn(); 類繼承 子類沒有構造函數 class Demo1 extends Demo { fn() { console.log(this.a); } } const demo1 = new Demo1(1); demo1.fn(); 子類有構造函數 classDemo1 extends Demo { constructor(a, b) { super(a, b) } fn() { console.log(this.a); super.fn(); // 父類中的方法 } } const demo1 = new Demo1(1); demo1.fn();對象字段
var handler = ‘aa‘ var obj = { __proto__: {}, // 設置原型對象 handler, // 對象字段簡寫 toString() { // 重寫toString方法，使用super調用原型中的方法 return "d " + super.toString(); }, [ ‘prop_‘ + (() => 42)() ]: 42 // 字段名，使用表達式計算 };模板字符串
var a = 11, b = 22; var str = ` ${a} + ${b} = ${a + b} `;解構賦值
數組解構 var [a, , b] = [1,2,3]; // a -> 1 b -> 3 對象解構 var {a: a1, b: b1, c: {d: c1}} = { a: 1, b: 2, c: { d: 3 } }; // a1 -> 1 b1 -> 2 c1 -> 3 簡寫 var {a, b, c: {d}} = { a: 1, b: 2, c: { d: 3 } }; // a -> 1 b -> 2 c -> 3 函數解構 function fn({a}){ console.log(a); // 1 } fn({a: 1});函數參數擴展
默認值 function fn(a, b=10){ // b如果沒傳默認10 console.log(a + b); } fn(1); 參數rest function fn(a, ...b){ console.log(a + b.length); // b接受剩余參數，生成一個數組 } fn(1, 2, 3, 4, 5); 參數spread function fn(a, b, c){ console.log(a + b + c); } fn(...[1,2,3]);叠代器for...of
能夠使用叠代器for...of進行叠代的結構必定是iterable結構 最基本的iterable結構 function* fn() { yield 1; yield 2; yield 3; } for(let item of fn()) { console.log(item); break; // 關閉叠代器 } 內置iterable結構：數組，字符串，map，set... 使用generators 寫法一 function* fn() { let [prev, curr] = [0, 1]; while(true) { [prev, curr] = [curr, prev + curr]; yield curr; } } for(let item of fn()) { console.log(item); if(item >= 1000) { break; } } 寫法二 var obj = { [Symbol.iterator]: function* fn() { let [prev, curr] = [0, 1]; while(true) { [prev, curr] = [curr, prev + curr]; yield curr; } } } for(let item of obj) { console.log(item); if(item >= 1000) { break; } } 原始寫法 let obj = { [Symbol.iterator]() { let pre = 0, cur = 1; return { next() { [pre, cur] = [cur, pre + cur]; return { done: false, value: cur } } } } } for (var item of obj) { if (item > 1000) break; console.log(item); }模塊加載
導出 test.js export function fn () {} export let a = 1; test1.js export * from ‘test.js‘ // 導出test.js中所有成員 export let b = 2; test2.js export default {} 導入 import { fn, a } from "test.js" import * as obj from "test.js" import obj from "test2.js"map和weakmap
map [[ 1, ‘one‘ ],[ 2, ‘two‘ ]] 這種結構就是map，相當於是對象的另一種表現形式 基本使用 var map = new Map(); map.set("name", "ye"); map.set("age", "11"); console.log(map.get("name")); console.log(map.size); 遍歷map 遍歷鍵值對 for(var [key, value] of map) { console.log(key + "|" + value); } 等價於 for(var [key, value] of map.entries()) { console.log(key + "|" + value); } 遍歷鍵 for(var key of map.keys()){ console.log(key); } 遍歷值 for(var value of map.values()){ console.log(value); } weakmap weakmap和map類似，只不過鍵必須是引用類型 基本使用 var key = {} var wMap = new WeakMap(); wMap.set(key, "ye"); console.log(wMap.get(key)); wMap.delete(key); console.log(wMap.has(key));set和weakset
set 和數組類似，不過成員是不重復的 基本使用 const set = new Set([1,2,3,4,5]); set.add(6); console.log(set.size); set.delete(6); console.log(set.has(6)); 遍歷set const set = new Set([1,2,3,4,5]); for(let item of set) { console.log(item); } let arr = Array.from(set); // set轉化成array WeakSet 和set類似，不過成員時引用 const wSet = new WeakSet(); var obj = {} wSet.add(obj); wSet.delete(obj); console.log(wSet.has(obj));對象代理
對象代理的作用就像土豪的管家一樣 基本使用 var obj = { a: 11 } var guanjia = new Proxy(obj, { // 代理處理函數 get: function(target, name) { console.log(target, name); // target是原對象，name是屬性名 return name } }) console.log(guanjia.a); in操作符使用 var guanjia = new Proxy(obj, { get: function(target, name) { return name in target? target[name]: "沒有此屬性" } }) console.log(‘b‘ in guanjia); false // 屬性是否存在 console.log(guanjia.‘b‘); "沒有此屬性" 給函數寫代理 var fn = function() { console.log("函數"); } var guanjia = new Proxy(fn, { apply: function(target, ...args) { // 調用fn之前觸發 target(); console.log(args[1]); } }) guanjia("a", "b", "c");Symbol數據類型
Symbol用來獲取一個獨一無二的值 const symbol = Symbol("myFirstSymbol"); console.log(typeof symbol); // symbol console.log(symbol.toString()); // Symbol(myFirstSymbol) 註意：symbol作為對象的屬性，無法使用for...in遍歷，另外JSON.stringify對此屬性也無法訪問類型方法的擴展
Number.isInteger(1.1) 判斷是否是整數 "abcd".includes("cd"); 字符串是否包含指定字符 "abc".repeat(3); 字符串重復 Array.from(new Set()); 轉數組 Array.of(1); 創建數組 [0, 0, 0, 0].fill(7, 1); 數組填充，第一參數是要填充的元素，第二個參數是開始填充的索引 [1, 2, 3, 3].find(x => x == 3); 找出第一個滿足添加的元素 [1, 2, 3, 3].findIndex(x => x == 3); 找出第一個滿足添加的元素的索引Promise規範
function fn (duration = 0) { return new Promise((resolve, reject) => { setTimeout(function() { resolve("執行成功" + duration); }, duration) }) } fn(1000).then(data => { console.log(data); return fn(1000); }).then(() => { throw new Error("故意拋出的錯誤"); }).catch(err => { return Promise.all([fn(1000), fn(2000)]); }).then(data => { console.log(data); })
ECMAScript6相關實用特性