装饰器是 ES7 的一个新提案，本质上是 Object.defineProperty(obj, prop, descriptor) 的语法糖，用于动态的修改类的行为，相比较集成的方式而言，这种方式无疑更加的灵活。 装饰器的使用装饰器用于类和类的成员上，但是不能用于函数，因为存在着函数提升。 作用于类的装饰器装饰器作用于类上的时候，它的第一个参数 target 则是被装饰的类的本身，签名如下： function(target) const sayHello = target => { target.sayHello = () => console.log("…
在任何一门语言中，变量的存在都是必不可少的，使用变量可以很方便的复用很多信息，比如网页的配色方案，使用方案只需要修改几个变量值即可完成对整个页面的配色的修改。而且变量本身包含了语义信息，更容易理解，比如 main-text-color 相对 #333 更容易理解。以前只能通过预处理器 Sass 、Less 等使用变量，而现在原生 css 终于也添加了变量的引入。 首先看一下 css 变量的兼容性： 从兼容性表格可以看出，css 变量的兼容性已经非常好了，主流浏览器 Chrome 、Safari 、Firefox 的支持度都挺高的。接下来开始使用： 变量声明和使用变量的声明使用两个连词线 --…
概述Symbol 类型是一种特殊的、不可变的数据类型，主要用于解决名称冲突的问题，是 es6 引入的第七种原始数据类型，其他六种分别是：null 、 undefined 、 boolean 、 string 、 number 、 object 。 创建 Symbol Symbol([description])创建一个全新的 Symbol ，description 是对 Symbol 实例的描述，先来看几个示例： var s0 = Symbol();var s1 = Symbol("desc");var s2 = Symbol("desc");conso…
柯里化 curry柯里化，是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。 var add = (x, y) => x + y;var curriedAdd = x => y => x + y;var addOne = curriedAdd(1);var addTen = curriedAdd(10);addOne(5);// 6addTen(5);// 15 上述示例，将原本接收两个参数的 add 改造成了接收一个参数的 addOne 和 addTen 函数，每个函数都具有独立的语义。 这种方式…
定义实际上纯函数的定义更近似于数学上的函数的定义，数学上的函数定义如下： 设A，B是非空的数集，如果按照某种确定的对应关系f，使对于集合 A 中的任意一个数 x，在集合B中都有唯一确定的数 y 和它对应，那么就称 f:A->B 为从集合A 到集合B 的一个函数。 而纯函数的定义为： 纯函数定义为这样一种函数：对于相同的输入，其输出的结果永远是相同的，而且没有可见的副作用。 从定义上可以看出，纯函数和数学上的函数都有要求：对于任意相同输入，其输出结果都是 唯一确定 的，不存在一个输入对应于多个输出结果的情况。 纯函数和非纯函数很经常看到，比如数组的 slice 和 splice 函…
这里收集了一些有趣的好玩的网站 Unsplash Unsplash 是一个真免费提供高质量照片的网站，照片都是真实的摄影，照片分辨率也很大，该照片网站每10天更新10张照片。 但是我要介绍的是它的一个获取随机图片的api [https://source.unsplash.com/](https://source.unsplash.com/) 支持多种方式的随机图片获取： 从指定分类中随机获取图片 从指定用户随机获取图片 从指定用户喜欢的图片 从指定图片集随机获取图片 从一个分类中随机获取图片 从一个关键字随机获取图片 还支持js、php等api，详细可以查看其页面，不再多言。 WebGra…
Generator 函数Generator （生成器）函数是 ES6 提供的新的解决异步回调嵌套的特性，先看个实例： function* test(){ yield 1; //执行顺序：3 yield 2; //执行顺序：6 return 3; //执行顺序：9}var g = test(); //执行顺序：1var rt;rt = g.next(); //执行顺序：2console.log(rt); // 执行顺序：4 输出：Object {value: 1, done: false}rt = g.next(); //执行顺序：5console.…
在一些应用场合下，由于事件被频繁的触发，导致为事件绑定的函数被频繁的调用，因为斌烦的执行大量无意义的DOM操作、Ajax请求等行为，造成页面的抖动和资源的大量消耗甚至错误的数据加载。常见的导致这些情况出现的事件主要这些： window 对象的 resize、scroll 事件 鼠标拖拽的 mousemove 事件 输入文本时的绑定的用于进行自动完成或自动加载的操作的 keyup 事件 对于这些情况通常可以延迟函数的执行时机，来进行优化，根据延迟的策略不同，有 debounce 和 throttle 两种解决办法： DebounceDebounce 就是强制一个函数在某个动作结束 n 毫秒后…
概述Proxy 对象是定义在全局对象上的一个对象的构造函数，通过对目标对象的一些基本操作进行重定义并生成新的代理对象。说起来比较绕，看如下示例： var obj = new Proxy({}, { set(target, key, val) { console.log('call setter'); return Reflect.set(target, key, val); }});obj.val = 3;// call setter// 3 Proxy 对象生成的新对象修改了 {…
Reflect 对象是 ES6 提供的一个内置的用于操作对象的的全局对象。但和其他的全局对象不同，Reflect 对象没有构造函数，不能使用 new关键字 创建对象。 Reflect 静态方法Reflect 对象提供以下静态函数，大部分与 Object 对象上同名方法的作用一样，同时将一些命令式的语法函数化。 Reflect.apply静态方法 Reflect.apply() 通过指定的参数列表发起对目标函数的调用，类似于 Function.prototype.apply.call(target, thisArgument, argumentsList) Reflect.apply(targ…