Table of Contents
1 做用域
- 全局做用域
- 函數做用域
- 塊級做用域
- 循環語句
- 條件語句
- ｛｝
2 變量聲明方式
| 形式 | 聲明提高 | 支持塊級做用域 | 支持重複聲明 |
|---|---|---|---|
| var | y | n | y |
| let | n | y | n |
| const | n | y | n |
| function | y | n | y |
3 Symbol
應用場景例子：私有化（數據保護）css
const Person = function (name, age) { const sym = Symbol('name'); this[sym] = name; this.age = age; this.getName = function () { // 只有這個方法能夠操做name return this[sym]; } }; Person.prototype = { constructor : Person, }; const p = new Person('pick', 78); console.log(p.getName(), p.age);
4 解構
- 解構數組
const [a, , c] = [1, 2, 3];
- 解構對象
const {a, b} = {a : 1, b:2}
- 多重解構
//const a, b const {val : [a, b]} = {val : [1, 2]}; //const aa, bb const [{val: {a : aa, b : bb}},t] = [{val:{a:1, b:2}},1];
5 擴展運算符
//使用方式一 const a = {a : 1}; const b = {b : 2}; const c = {...a, ...b}; //使用方式二 const a1 = [1, 2, 3]; Math.max(...a1);
6 模板字符串
- 保持格式
-
表達式解析html
const val = 'hello world'; const view = ` <html> <body> <div> ${val} </div> </body> </html> `;
7 進制
var val = 0b10; //2 var val = 0o10; //8 var val = 10; //10 var val = 0x10; //16
8 對象擴展
- 屬性簡寫
const a = 1; const b = {a};//{a : a}
- 屬性名錶達式
const a = 'age'; const b = {[a] : a}; // {age: 'age'}
- 擴展方法
- Object.defineProperty
const obj = {a : 123, b : 'abc'}; Object.defineProperty(obj, 'a', { //默認值 configurable : false, //不等刪除 writable : false, //不能修改 enumerable : false, //不能迭代，相似原型對象 value : 'hhh' });
9 迭代
- 迭代協議
- 迭代器
- 迭代對象
-
迭代語句java
type for … in for … of Array index item Object 能夠枚舉的key 不支持（沒有迭代實現） - Object 迭代實現的例子
const obj = {a: 123, b: 'abc'}; obj[Symbol.iterator] = function () { const keys = Object.keys(this); const len = keys.length; let cur = 0, next = 0; return { next: () => { cur = next++; return { done: cur >= len, value : { key : keys[cur], value : this[keys[cur]] } } } }; }; for(let o of obj){ console.log(o) } //{ key: 'a', value: 123 } //{ key: 'b', value: 'abc' }
10 函數擴展
- 默認值
function add(a, b = 123) {//默認參數在右邊 return a + b; }
- rest 剩餘參數
function append(arr, ...r) {//剩餘參數...在最後 for(var val of r){ arr.push(val); } } const arr = [11, 22,]; append(arr, 1, 2, 'a'); console.log(arr);
- 箭頭函數
- 不能用做構造函數
- 函數中的this是靜態的
- 沒有arguments參數
- 不能做爲生成器函數
var fn = () => 1 + 2; // function() { return 1 + 2; } var fn = a => a * a; // function(a) { return a * a; } var fn = (a) => {a * a}; // function(a) { a * a; } 返回值是undefined var fn = (a, b) => { a += 10; b += 5; return a + b; };
11 Set
應用場景：數組去重python
const set = new Set([1,2,1,3]); const arr = [...set]; console.log(arr)
12 Map/weakMap
- Map 強引用，實例對象中的key不會被回收（key是對象的話）
- weakmap 弱引用，實例中的key必須是對象，這個對象在其餘地方不適用會自動回收
使用例子（不是很好）sql
const Teacher = (function () { let retire = new Map(); //保存全部老師的狀態 function P(name, age) { this.age = age; this.name = name; retire.set(this, age > 65); } P.prototype = { constructor : P, isRetirement() { return retire.get(this); }, getTeachers() { return retire; } }; return P; })(); const t1 = new Teacher('tea', 50); const t2 = new Teacher('tea', 80); console.log(t1.getTeachers()); console.log(t2.isRetirement());
13 Class
- 定義
class Person { constructor(name, age){ this.name = name; this.age = age; } getType(){ return 'goven'; } } const p1 = new Person('aa', 11); console.log(p1.getType());
- 繼承
class Person { constructor(name, age){ this.name = name; this.age = age; } getType(){ return 'goven'; } } const p1 = new Person('aa', 11); console.log(p1.getType()); class Teacher extends Person{ constructor(name, age){ super(name, age); //父類有constructor是必須有super } say(){ console.log('hello', this.getType()); } } const t1 = new Teacher('tt', 60); console.log(t1.name, t1.age, t1.getType()); t1.say();
14 異步編程
14.1 Promise
- 簡單例子
new Promise((resolve, reject) => { setTimeout(function () { if (Math.random() > 0.5) { resolve('保留'); } else { reject('丟棄'); } }, 1000); }).then(res => { console.log(res); }).catch(err => { console.log(err); });
- 簡寫
//resolve Promise.resolve(100); new Promise(resolve => { resolve(100); }); //reject Promise.reject(100); new Promise((resolve, reject) => { reject(100); });
- 多個任務一塊兒完成
let p1 = new Promise((resolve, reject) => { setTimeout(function () { resolve('p1完成了'); // reject('p1完成了'); }, 1500); }); let p2 = new Promise(resolve => { setTimeout(function () { resolve('p2完成了'); }, 2000); }); let p3 = new Promise(resolve => { setTimeout(function () { resolve('p3完成了'); }, 1000); }); Promise.all([p1, p2, p3]).then(res=>{ //[ 'p1完成了', 'p2完成了', 'p3完成了' ] console.log(res); }).catch(err=>{ console.log('出錯: ', err); });
- 多個任務有一個完成（優先完成）
let p1 = new Promise((resolve, reject) => { setTimeout(function () { resolve('p1完成了'); // reject('p1完成了'); }, 1500); }); let p2 = new Promise(resolve => { setTimeout(function () { resolve('p2完成了'); }, 2000); }); let p3 = new Promise(resolve => { setTimeout(function () { resolve('p3完成了'); }, 1000); }); Promise.race([p1, p2, p3]).then(res=>{ //p3完成了 console.log(res); }).catch(err=>{ console.log('出錯: ', err); });
14.2 Generator
// 任務一個接一個的作，順序執行任務 function *fn() { let r1 = yield new Promise(resolve => { setTimeout(function () { resolve('3000') }, 3000); }); console.log(r1); let r2 = yield new Promise(resolve => { setTimeout(function () { resolve('1000') }, 1000); }); console.log(r2); let r3 = yield new Promise(resolve => { setTimeout(function () { resolve('2000') }, 2000); }); console.log(r3); } //next 函數執行fn函數，遇到yield中止， 執行yield後面的表達式並返回ret //ret 包含狀態和返回值 function co(f) { let gen = f();//獲取迭代對象 next(); function next(val){ let ret = gen.next(val); // console.log('next: ', val) if(ret.done === false){ ret.value.then(res=>{ next(res); }).catch(err=>{ next(err); }); } } } co(fn);
14.3 async/await 相似Generator（不須要本身實現相似co的函數了）
(async function () { let r1 = await new Promise(resolve => { setTimeout(function () { resolve('3000') }, 3000); }); console.log(r1); let r2 = await new Promise(resolve => { setTimeout(function () { resolve('1000') }, 1000); }); console.log(r2); let r3 = await new Promise(resolve => { setTimeout(function () { resolve('2000') }, 2000); }); console.log(r3); })();