es6語法 · 前端技術總結

現在es6已經很火了，作為前端的我們也要去學習下，即使目前的工作上用不到，但在未來，瀏覽器升級了，兼容性高了，這些新的語法也將會慢慢出現，就像html5、css3一樣。。。下面來簡單的介紹下關于ES6的語法。 ## 一、let const ~~~ // let聲明變量，代碼塊內有效 for(let i=0; i<10; i++) { console.log(i); } console.log(i); // 塊外調用會報錯：Uncaught ReferenceError: i is not defined // const聲明常量 const AGE = 123; AGE = 344; // 再次修改會報錯：Uncaught TypeError: Assignment to constant variable. ~~~ ## 二、解構賦值（從左往右運算，沒有就是undefined） ~~~ // 數組解構賦值 var [name, age, gender] = ['tom', 24]; console.log(name); // tom console.log(gender); // undefined // 對象解析賦值 var {foo, bar} = {foo: 'tom', bar: 'jack'}; console.log(bar); // jack // 默認值 var [name, age=24] = ['tom', 36]; console.log(age); // 36 var {foo='rose', bar} = {bar: 'jack'}; console.log(foo); // rose ~~~ ## 三、字符串擴展 1、codePointAt（能夠正確處理4個字節儲存的字符，返回一個字符的碼點） ~~~ var s = 'a'; console.log(s.codePointAt(0))// 134071 ~~~ 2、fromCodePoint（可以識別大于0xFFFF的字符，彌補了String.fromCharCode方法的不足） ~~~ console.log(String.fromCodePoint(0x20BB7))// ~~~ 4、字符串遍歷器（遍歷器最大的優點是可以識別大于0xFFFF的碼點） ~~~ var str = String.fromCodePoint(0x20BB7); for(let i of str) { console.log(i); // } ~~~ 5、normalize（用來將字符的不同表示方法統一為同樣的形式，這稱為Unicode正規化） ~~~ console.log('\u01D1'.normalize()); // ǒ ~~~ 6、includes() startsWith() endsWith() ~~~ var str = 'abs1234de0'; console.log(str.includes('s12')); // true console.log(str.startsWith('abs')); // true console.log(str.endsWith('de0')); // true ~~~ 7、repeat（字符串重復） ~~~ var str = 'hello world !'; console.log(str.repeat(3)); // hello world !hello world !hello world ! ~~~ 8、模板字符串 ~~~ var str = 'hello world'; var strong = `<strong>${str}</strong>`; console.log(strong); // <strong>hello world</strong> ~~~ 9、String.raw（方法可以作為處理模板字符串的基本方法，它會將所有變量替換，而且對斜杠進行轉義）、 ~~~ console.log(String.raw`Hi\\n`); // Hi\\n console.log(String.raw({ raw: 'test' }, 0, 1, 2)); // t0e1s2t ~~~ ## 四、正則擴展 1、source（返回正則表達式的正文）flags（返回正則表達式的修飾符） ~~~ console.log(/abc/ig.source); // abc console.log(/abc/ig.flags); // gi ~~~ 2、u修飾符（含義為“Unicode模式”，用來正確處理大于\uFFFF的Unicode字符） ~~~ console.log(/^\uD83D/.test('\uD83D\uDC2A')); // true ~~~ 3、y修飾符（全局匹配，后一次匹配都從上一次匹配成功的下一個位置開始） ~~~ var s = 'aaa_aa_a'; var r1 = /a+/g; var r2 = /a+/y; console.log(r1.exec(s)); // ["aaa"] console.log(r2.exec(s)); // ["aaa"] console.log(r1.exec(s)); // ["aa"] ~~~ ## 五、數值擴展 1、Number.isFinite()（用來檢查一個數值是否為有限的） ~~~ console.log(Number.isFinite(0.8)); // true console.log(Number.isFinite(NaN)); // false console.log(Number.isFinite(Infinity)); // false console.log(Number.isFinite('15')); // false console.log(Number.isFinite(true)); // false ~~~ 2、Number.isNaN()（用來檢查一個值是否為NaN） ~~~ console.log(Number.isNaN(0.8)); // false console.log(Number.isNaN(NaN)); // true console.log(Number.isNaN(-Infinity)); // false console.log(Number.isNaN('15')); // false console.log(Number.isNaN(true)); // false ~~~ 3、Number.isInteger()（用來判斷一個值是否為整數） ~~~ console.log(Number.isInteger(25.0)); // true console.log(Number.isInteger(25.1)); // false console.log(Number.isInteger("15")); // false console.log(Number.isInteger(true)); // false ~~~ 4、parseInt()和parseFloat()，移植到Number對象上面 ~~~ console.log(Number.parseInt('12.34')); // 12 console.log(Number.parseFloat('123.45#')); // 123.45 ~~~ ## 六、數組擴展 1、Array.from ~~~ // 對象形式 var data = {0: 'zhang', 1: 'san', length: 2}; console.log(Array.from(data)); // ["zhang", "san"] // 字符串形式 console.log(Array.from('hello')); // ["h", "e", "l", "l", "o"] // new Set()形式 console.log(Array.from(new Set(['tom', 24]))); // test.html:12 ["tom", 24] ~~~ 2、Array.of（方法用于將一組值，轉換為數組） ~~~ Array.of(3, 11, 8) // [3,11,8] Array.of(3) // [3] Array.of(3).length // 1 ~~~ 3、copyWithin(target, start, end)（將指定位置的成員復制到其他位置） ~~~ console.log([1, 2, 3, 4, 5].copyWithin(0, 3, 5)); // 將3~5號位復制到0號位 [4, 5, 3, 4, 5] ~~~ 4、find()（數組實例的find方法，用于找出第一個符合條件的數組成員） findIndex()（返回第一個符合條件的數組成員的位置，如果所有成員都不符合條件，則返回-1） ~~~ // find var num = [1, 5, 10, 15].find(function(value, index, arr) { return value > 9; }); console.log(num); // 10 // findIndex var num = [1, 5, 10, 15].findIndex(function(value, index, arr) { return value > 9; }); console.log(num); // 2 ~~~ 5、fill(val, start, end)（方法使用給定值，填充一個數組） ~~~ console.log(['a', 'b', 'c'].fill(7)); // [7, 7, 7] console.log(new Array(3).fill(7)); // [7, 7, 7] console.log(['a', 'b', 'c'].fill(7, 1, 2)); // ["a", 7, "c"] ~~~ 6、數組實例的entries()，keys()和values() ~~~ for (let index of ['a', 'b'].keys()) { console.log(index); // 0 1 } for (let elem of ['a', 'b'].values()) { console.log(elem); // a b } for (let [index, elem] of ['a', 'b'].entries()) { console.log(index, elem); // 0,a 1, b } ~~~ ## 七、函數擴展 1、rest參數（數組） ~~~ function foo(a, ...args) { console.log(a); // 1 console.log(args); // [2, 3] } foo(1,2,3); ~~~ 2、箭頭函數 ~~~ document.querySelector('button').addEventListener('click', function(e) { console.log(e.clientX); // 889 setTimeout(()=>{ console.log(this); // button }, 1000); setTimeout(function() { console.log(this); // window }, 1000); }); ~~~ ## 八、對象擴展 ~~~ var key = 'name'; var foo = { [key+'2']: 'tom', // 鍵可以使用表達式 say() { console.log(this.name2); } } foo.say(); // tom ~~~ ## 九、Symbol（一種新的原始數據類型，是一個獨一無二的值） ~~~ let s = Symbol(); console.log(typeof s); // symbol console.log(Symbol('foo') == Symbol('foo')); // false （參數只是描述，主要是為了區分） // Symbol.for() 可以重新使用同一個Symbol值 console.log(Symbol.for('foo') == Symbol.for('foo')); // true // Symbol.keyFor() 返回Symbol的key var s1 = Symbol.for("foo"); console.log(Symbol.keyFor(s1)) // foo ~~~ ## 十、set map ~~~ // Set var set = new Set([1, 2, 3, 4, 4]); console.log([...set]); // [1, 2, 3, 4] // WeakSet（成員只能是對象） var arr = [[1, 2], [3, 4]]; var ws = new WeakSet(arr); console.log(ws); // WeakSet {[3, 4], [1, 2]} // Map var map = new Map([ ['name', '張三'], ['title', 'Author'] ]); console.log(map.size); // 2 console.log(map.has('name')); // true console.log(map.get('name')); // "張三" // WeakMap const k1 = [1, 2, 3]; const k2 = [4, 5, 6]; const wm2 = new WeakMap([[k1, 'foo'], [k2, 'bar']]); console.log(wm2.get(k1)); // foo ~~~ ## 十一、proxy（代理） ~~~ var proxy = new Proxy({}, { get: function(target, property, receiver) { return target[property]; }, set: function(target, key, value, receiver) { target[key] = value; } }); proxy.time = 1200; console.log(proxy.time); // 1200 ~~~ ## 十二、reflect（映射） ~~~ var obj = { foo: 1, bar: 2, get baz() { return this.foo + (this.bar||0); }, } // 設置、獲取、刪除屬性 Reflect.set(obj, 'foo', 2); console.log(Reflect.get(obj, 'baz')) // 4 console.log(Reflect.has(obj, 'name')) // false Reflect.deleteProperty(obj, 'bar'); console.log(Reflect.get(obj, 'baz')) // 2 // 構造函數 var obj2 = Reflect.construct(function(...args) { console.log(args); // ["tom", "jack"] }, ['tom', 'jack']); // 設置、獲取原型 Reflect.setPrototypeOf(obj2, {name: 'rose'}); console.log(Reflect.getPrototypeOf(obj2)); // Object {name: "rose"} // apply console.log(Reflect.apply(Math.max, Math, [1, 2, 3])); // 3 // 定義屬性 Reflect.defineProperty(obj2, 'time', { value: (()=>new Date().toLocaleString())() }); console.log(obj2.time); // 2017/5/12 下午6:29:32 // 獲取屬性描述符 console.log(Reflect.getOwnPropertyDescriptor(obj2, 'time')); // Object {value: "2017/5/12 下午6:31:08", writable: false, enumerable: false, configurable: false} // 阻止擴展、獲取是否可擴展 Reflect.preventExtensions(obj2); console.log(Reflect.isExtensible(obj2)); // false // 獲取keys console.log(Reflect.ownKeys(obj2)); // ["time"] ~~~ ## 十三、promise（是異步編程的一種解決方案） ~~~ var promise = new Promise(function(resolve, reject) { var xhr = new XMLHttpRequest(); xhr.open('get', 'test.php', true); xhr.send(null); xhr.onload = function(res) { resolve(res.target.response); } xhr.onerror = reject(); }).then(function(data) { console.log(data); }, function() { console.log('請求失敗~'); }).catch(function(error) { console.log(error); }); // promise.all([p1, p2, p3]) 3個promise都成功才進行下一步操作 // promise.race([p1, p2, p3]) 3個promise率先成功那個進行下一步操作 ~~~ ## 十四、generator（生成器） ~~~ function* foo(x) { var y = 2 * (yield (x + 1)); var z = yield (y / 3); return (x + y + z); } var a = foo(5); // next()參數會當成上一個yield的返回值 console.log(a.next()); // Object {value: 6, done: false} 5+1 x=5 console.log(a.next(12)); // Object {value: 8, done: false} 2*12/3 y=24 console.log(a.next(10)); // Object {value: 39, done: true} 5+24+10 z=10 // for of循環 function *foo() { yield 1; yield 2; yield 3; return 4; } var a = foo(); console.log(a.next()); // Object {value: 1, done: false} console.log(a.next()); // Object {value: 2, done: false} console.log(a.next()); // Object {value: 3, done: false} console.log(a.next()); // Object {value: 4, done: true} for(let v of foo()) { console.log(v); // 1 2 3 next的done為true時循環會停止 } ~~~ ## 十五、async await（可以當成Generator的語法糖） ~~~ // generator寫法 var gen = function* () { var f1 = yield readFile('/etc/fstab'); var f2 = yield readFile('/etc/shells'); console.log(f1.toString()); console.log(f2.toString()); }; // async await寫法 var asyncReadFile = async function () { var f1 = await readFile('/etc/fstab'); var f2 = await readFile('/etc/shells'); console.log(f1.toString()); console.log(f2.toString()); }; ~~~ ## 十六、decorator（裝飾器） ~~~ function test(target) { target.name = 'tom'; } @test class User {} console.log(User.name); // tom ~~~ ## 十七、module（模塊） ~~~ // profile.js var firstName = 'Michael'; var lastName = 'Jackson'; var year = 1958; export {firstName, lastName, year}; // main.js import {firstName, lastName, year} from './profile'; function setName(element) { element.textContent = firstName + ' ' + lastName; } // 別名導出 function v1() { ... } function v2() { ... } export { v1 as streamV1, v2 as streamV2, v2 as streamLatestVersion }; // 導出默認 export default function () { console.log('foo'); } ~~~ ## 十八、class ~~~ class User { constructor() { this.name = '張三'; } say() { console.log('hello '+this.name); } } var user = new User(); user.say(); // hello 張三 // 繼承 class ColorPoint extends Point { constructor(x, y, color) { super(x, y); // 調用父類的constructor(x, y) this.color = color; } toString() { return this.color + ' ' + super.toString(); // 調用父類的toString() } } ~~~ ## 十九、二進制數組 ~~~ // ArrayBuffer var buffer = new ArrayBuffer(32); console.log(buffer.byteLength); // 32 // 切割 var buffer = new ArrayBuffer(8); var newBuffer = buffer.slice(0, 3); console.log(newBuffer.byteLength); // 3 // DataView var buffer = new ArrayBuffer(24); var dv = new DataView(buffer); console.log(dv.byteLength); // 24 // TypedArray（ArrayBuffer對象作為內存區域，可以存放多種類型的數據） Int8Array：8位有符號整數，長度1個字節。 Uint8Array：8位無符號整數，長度1個字節。 Uint8ClampedArray：8位無符號整數，長度1個字節，溢出處理不同。 Int16Array：16位有符號整數，長度2個字節。 Uint16Array：16位無符號整數，長度2個字節。 Int32Array：32位有符號整數，長度4個字節。 Uint32Array：32位無符號整數，長度4個字節。 Float32Array：32位浮點數，長度4個字節。 Float64Array：64位浮點數，長度8個字節。 ~~~ 參考鏈接：[http://es6.ruanyifeng.com/](http://es6.ruanyifeng.com/) 后續補充