javascript--es6
Table of Contents
1 作用域
- 全局作用域
- 函数作用域
- 块级作用域
- 循环语句
- 条件语句
- ｛｝
2 变量声明方式
| 形式 | 声明提升 | 支持块级作用域 | 支持重复声明 |
|---|---|---|---|
| var | y | n | y |
| let | n | y | n |
| const | n | y | n |
| function | y | n | y |
3 Symbol
应用场景例子：私有化（数据保护）
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 模板字符串
- 保持格式
-
表达式解析
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 迭代
- 迭代协议
- 迭代器
- 迭代对象
-
迭代语句
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
应用场景：数组去重
const set = new Set([1,2,1,3]); const arr = [...set]; console.log(arr)
12 Map/weakMap
- Map 强引用，实例对象中的key不会被回收（key是对象的话）
- weakmap 弱引用，实例中的key必须是对象，这个对象在其他地方不适用会自动回收
使用例子（不是很好）
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); })();
Created: 2019-06-24 周一 09:44
