ECMAScript 6入门 互动版

简介
什么是ES6? 支持 环境支持
变量与字符串
let let应用 const声明常量 是否包含字符串三种新方法 repeat()原字符串重复 模板字符串 标签模板 String.raw()
数值
值是否无穷,NaN 值是否整数 Math对象 Math 对数方法
数组
Array.from() Array.of() 数组实例的find()和findIndex() 数组实例的fill() 数组实例的entries(),keys()和values()
对象
属性的简洁表示法 属性名表达式 比较两个值是否严格相等 Object.assign() proto属性 Symbol类型 Proxy内置代理
函数
默认参数 rest参数 扩展运算符 箭头函数 函数绑定 尾调用优化
Set
基本用法 Set实例的属性 Set实例的方法 遍历操作 WeakSet
Map
Map结构的目的和基本用法 实例的属性和操作方法 遍历方法 WeakMap
Iterator(遍历器)和for..of
Iterator(遍历器)的概念 数据结构的默认Iterator接口 调用默认Iterator接口的场合 原生具备Iterator接口的数据结构 Iterator接口与Generator函数 遍历器的return(),throw() for...of循环
Generator
简介 next方法的参数 for...of循环 throw方法 yield*语句 作为对象属性的Generator函数
Promise
Promise的含义 基本用法 Promise实例添加状态改变时的回调函数 指定发生错误时的回调函数 Promise.all()方法 Promise.race()方法 Promise.resolve()方法 Promise.reject()方法 Generator函数与Promise的结合 async函数
Class
Class基本语法 Class的继承 class的取值函数(getter)和存值函数(setter) Class的Generator方法 Class的静态方法 new.target属性 修饰器-类的修饰1 修饰器-类的修饰2
Module
export命令 import命令 模块的整体输入 module命令 export default命令 模块的继承
在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

内置代理

Proxy 内置的一个代理工具,使用他可以在对象处理上加一层屏障:

S6原生提供Proxy构造函数,用来生成Proxy实例。

var proxy = new Proxy(target, handler)

new Proxy()表示生成一个Proxy实例,它的target参数表示所要拦截的目标对象,handler参数也是一个对象,用来定制拦截行为。

var plain = {
    name : "hubwiz"
};
var proxy = new Proxy(plain, {
    get: function(target, property) {
        return property in target ? target[property] : "汇智网";
    }
});

proxy.name // "hubwiz"
proxy.title // "汇智网"

Proxy(target, handler), 这里的 handler有如下的方法:

  • get(target, propKey, receiver):拦截对象属性的读取,比如proxy.fooproxy['foo'],返回类型不限。最后一个参数receiver可选,当target对象设置了propKey属性的get函数时,receiver对象会绑定get函数的this对象。
  • set(target, propKey, value, receiver):拦截对象属性的设置,比如proxy.foo = vproxy['foo'] = v,返回一个布尔值。
  • has(target, propKey):拦截propKey in proxy的操作,返回一个布尔值。
  • deleteProperty(target, propKey) :拦截delete proxy[propKey]的操作,返回一个布尔值。
  • enumerate(target):拦截for (var x in proxy),返回一个遍历器。
  • hasOwn(target, propKey):拦截proxy.hasOwnProperty('foo'),返回一个布尔值。
  • ownKeys(target):拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy),返回一个数组。该方法返回对象所有自身的属性,而Object.keys()仅返回对象可遍历的属性。
  • getOwnPropertyDescriptor(target, propKey) :拦截Object.getOwnPropertyDescriptor(proxy, propKey),返回属性的描述对象。
  • defineProperty(target, propKey, propDesc):拦截Object.defineProperty(proxy, propKey, propDesc)、Object.defineProperties(proxy, propDescs),返回一个布尔值。
  • preventExtensions(target):拦截Object.preventExtensions(proxy),返回一个布尔值。
  • getPrototypeOf(target) :拦截Object.getPrototypeOf(proxy),返回一个对象。
  • isExtensible(target):拦截Object.isExtensible(proxy),返回一个布尔值。
  • setPrototypeOf(target, proto):拦截Object.setPrototypeOf(proxy, proto),返回一个布尔值。

如果目标对象是函数,那么还有两种额外操作可以拦截。

  • apply(target, object, args):拦截Proxy实例作为函数调用的操作,比如proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)
  • construct(target, args, proxy):拦截Proxy实例作为构造函数调用的操作,比如new proxy(...args)

浏览器兼容性:

Proxy内置代理