javascript
简单谈谈 Proxy：在目标对象之前架设一层 拦截 ，当对该对象进行 访问/赋值 时，必须先通过这层拦截，从而实现对属性进行 访问/赋值 时的过滤和改写。 一个简单的例子 let obj = new Proxy({}, { get(target, key, receiver) { console.log(`getting ${key}!`); return Reflect.get(target, key, receiver); }, set(target, key, value, receiver) { console.log(`setting ${key}!`); return Reflect.set(target, key, value, receiver); } }); obj.count
javascript
ES5 中的作用域 * function 作用域（由 function 声明的作用域，包括函数表达式、函数声明或是用 Function 所创建对象） // 函数表达式 function fun1 (){ var test = "test"; return test; } // 函数声明 var fun2 = function () { var test = "test"; return test; } console.log(test); // ReferenceError: test is not defined console.log(fun1()); // "test" // test 在 fun 这个函数的作用域内才能被访问
javascript
简单说说 假设有这样一个场景：你需要向你的服务器获取一些基本的数据（config 对象）来初始化页面。当你需要去获取其中的配置项时， ES5 是这么写的： var config = { params1: 520, params2: 1314 }; // 为了确保下方的代码不依赖于 config 对象，重新赋值为一个更有意义的名称。 var params1 = config.params1, params2 = config.params2 console.log(params1 + ' !! ' + params2) // 520 !! 1314 看着代码量也不是很大，但这只有两个配置项，万一要有几十个呢，不得一直 congif.xxx 了。不得不得这的确很烦，那有没更简单的方式呢？ ES6 提出了以下方式： var config = { params1: 520, params2:
javascript
简单谈谈 ES5 中原本就提供了数组，这里谈谈数组下都有哪些方法新增，哪些方法进行了变更。 Array.from 在 javascript 中有这样一类的存在：类数组，它不是数组，却能像数组那么操作，如下便是一个类数组结构。 let arrayLike = { "0": "a", "1": "b", "2": "c", length: 3 }; 类数组结构：可以像数组那样取值、 for 循环，但是却不能适用数组 forEach/splice 等数组特定的方法，在 ES5 中必须使用一些特殊的方法来将一个类数组结构转化成数组，而在 ES6 中，
javascript
默认值 想必在写函数时，都会有一个困惑：要是在这个函数调用的时候，参数没有传入时，该怎么办？设置默认值。对，所以大部分的函数都会有以下的代码。 function func(param1, param2) { param1 = param1 || {/*...*/} /* ... */ } 以上代码相信绝大多数的 javascript 开发者都写过，乍一看是没啥大问题的，但是如果传入的值是 false 呢？那么 param1 就会被替换成默认值。为了避免这个问题就应该将代码改一改： if( typeof a === 'undefined' ){ a = {/* ... */} } 这就大大增加了代码量，而且一个痛点莫名其妙的增加了：增加了代码的不可读性。 在 ES6 中允许为函数设置默认值，而且定义明确，代码的可读性大大增加。 function log(x, y = 'World') { console.log(
javascript
简单谈谈 对于箭头函数的出现，我是这样理解的： function 在 javascript 中是一种类似与流程的一种存在，一个 function 代表一种处理数据的逻辑。在 ES6 中， function 的这一特性被进一步的认可和强调，因此产生了箭头函数。 箭头函数 let f = v => v; 上面的箭头函数的约等于以下函数 var f = function(v) { return v; }; 当然函数参数存在没有或者多个情况 var f = () => 5; // 约等于 var f = function () { return 5; }; var sum = (num1, num2) => num1 + num2; // 约等于 var sum
javascript
简洁的表达方式 * 直接在对象下写属性 const foo = 'bar'; const baz = { foo }; baz // {foo: "bar"} // 等同于 const baz = { foo: foo }; * 可以在对象下直接写方法 const o = { method() { return "Hello!"; } } // 等同于 const o = { method: function () { return "Hello!"; } } 简单使用： 1. 函数的返回值 2. CommonJS 模块输出一组变量 // 直接输出变量 function getPoint() { const x = 1; const
javascript
Set ES6 提供了新的数据结构 Set 。它类似于数组，但其成员的值是唯一的，不会重复。 Set 的简单使用： // 单个添加 const s = new Set(); [2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x)); for (let i of s) { console.log(i); } // 2 3 5 4 // 将数组转换为 set 对象 const set = new Set([1, 2, 3, 4,
javascript
简单谈谈 Reflect：反射，语言层面上的内容，在 ES6 中其出现的目的主要有以下几个： * 将 Object 下属于语言内部的方法，放到 Reflect 上，让 Object 更加纯粹。 * 修正之前在 Object 下的一些方法的返回值不合理照成的逻辑混乱。 * 将命令式的行为变成函数行为，如： name in obj ==> Reflect.has(obj, name)。 * 与 Proxy 下的方法一一对应，Proxy 可以更方便的完成默认行为的调用。 拥有的方法 目前一共有 13 个方法，与 Proxy 下的方法一一对应，直接调用这些方法就完成了 Proxy 默认的行为。 * Reflect.apply(target, ctx, args) * Reflect.
javascript
简单谈谈 Iterator（遍历器）是一种机制：当外部访问所属对象时，提供统一的访问机制。任何的数据结构一旦部署了 Iterator 接口，就相当于实现了统一的遍历机制，使得外部程序在使用这些不同的数据结构时，有一致的写法。 具体到语言层面，需要实现了以下内容： 1. 对象下需要部署 Symbol.iterator 方法。 2. 该方法需要返回一个含有 next 方法的对象：{ next: () => { value: any, done: boolean } }`。 3. 该对象的 next 方法需要有统一的返回结构：{ value: any, done: boolean }。 部署了上述特性的对象，就叫做：可遍历对象。在 ES6 中，Map、Set、Array、String 等的实例都具备上述结构。但并非仅有这些类的实例时可遍历对象，只要是对象有上述特性，
javascript
简单谈谈 Generator：状态机，封装了多个内部状态。执行 Generator 返回一个遍历器对象，用于变量每一次的状态。 简单来说，一个 Generator 函数，就像一段楼梯，规定了楼梯的步数以及没一步的状态，调用它就生成了一段楼梯，每走一步都会有具体的执行内容以及返回值，并且只能往前走（ yield ），或是走到头了（ return ）。 Generator 函数的标志就是 function 后面带 * 号。 一个简单的例子： function* helloWorldGenerator() { yield 'hello'; yield 'world'; return 'ending'; } let hw = helloWorldGenerator(); 该 Generator 函数规定了 3 级台阶（两个 yield
javascript
简单谈谈 async 是什么？一句话，它就是 Generator 函数的语法糖。 既然是语法糖，那么先来对比下 async 函数和 Generator 函数的区别。以下是分别用 async 和 Generator 写的异步操作： const fs = require('fs'); const readFile = function (fileName) { return new Promise((resolve, reject) => { fs.readFile(fileName, (error, data) => { if (error) return reject(error); resolve(data); }); }); }; // Generator 的写法 &