本文总结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(); 子类有构造函数 class Demo1 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); })
原文地址：https://www.cnblogs.com/ye-hcj/p/8322370.html
时间： 2024-11-07 20:39:50