Learn-ES6-Iterator

1.Iterator(遍历器) Javascript 现有的表示集合的数据结构,出了原本的对象(Object)和数组(Array),ES6 又增加了 Set 和 Map。Iterator 是可以用来统一处理所有不同的数据结构的接口机制。任何数据结构只要部署了 Interator 接口,就可以完成遍历操作。 Iterator 的作用有三个:一是为各种数据结构,提供一个统一的、简便的访问接口;二是使得数据结构的成员能够按某种次序排列;三是 ES6 创造了一种新的遍历命令for…of循环,Iterator 接口主要供for…of消费。 Interator 的遍历过程是首先创建一个指针对象,指向当前数据结构的起始位置,然后调用指针对象的 next 方法,从数据结构的第一个成员开始,依次指向每个成员,直到指向数据结构的结束位置。 每一次调用next方法,都会返回数据结构的当前成员的信息。具体来说,就是返回一个包含value和done两个属性的对象。其中,value属性是当前成员的值,done属性是一个布尔值,表示遍历是否结束。 一个模拟 next 方法返回值的例子 const makeInterator = (array) => { let nextIndex = 0 return { next() { return nextIndex < array.length ? {value: array[nextIndex++], done: false} : {value: undefined, done: true} } } } var it = makeInterator(['a', 'b']) it.next() // {value: 'a', done: false} it.next() // {value: 'b', done: false} it....

February 24, 2018 · 4 min · vdorchan

Learn-ES6-set-map

1.Set ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。 Set 本身是一个构造函数,用来生成 Set 数据结构。 const s = new Set() [2, 3, 5, 4, 5, 2, 2].foreach(x => s.add(x)) for (const i of s) { console.log(i) } // 2 3 5 4 上面代码通过add方法向 Set 结构加入成员,结果表明 Set 结构不会添加重复的值。 // Set 函数可以接受一个数组(或者具有 iterable 接口的其它数据结构)作为参数, 来初始化 const set = new Set([1, 2, 3, 4, 4]) [...set] // [1 2 3 4] set.size // 4 const divSet = new Set([...document.querySelectorAll('div')]) divSet....

February 24, 2018 · 3 min · vdorchan

Learn-ES6-object

1. 属性的简洁表示法 ES6 允许直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。 const age = 18 const person = {age} console.log(person); // {age: 18} 除了属性简写,方法也可以简写。 const Person = { sayHello() { console.log('hello'); } } // 等同于 const Person = { sayHello: function () { console.log('hello'); } } 因为简写写法的属性名始终是字符串,所以下面代码里的 class 因为是字符串,所以它不属于关键字,而导致解析错误。 const o = { class() {} } // 等同于 const o = { 'class': function () { } } 如果某个方法的值是一个 Generator 函数,前面需要加上 * 号。 const obj = { * m() { yield 'hello world' } } 2....

January 14, 2018 · 1 min · vdorchan

学习 JavaScript 的闭包(翻译)

1. 扩展运算符 闭包(Closures): 闭包是指一个拥有很多变量和与这些变量绑定的环境的表达式(大多数时候是一个函数),这些变量也属于这个表达式。 Closures are one of the most powerful features of ECMAScript (javascript) but they cannot be property exploited without understanding them. They are, however, relatively easy to create, even accidentally, and their creation has potentially harmful consequences, particularly in some relatively common web browser environments. To avoid accidentally encountering the drawbacks and to take advantage of the benefits they offer it is necessary to understand their mechanism....

December 13, 2017 · 12 min · vdorchan

ES6学习笔记-数组的扩展

1. 扩展运算符 扩展运算符(spread)是三个点(…)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。 console.log(...[1, 2, 3]); // 1 2 3 console.log(1, ...[2, 3, 4], 5); // 1 2 3 4 5 [...document.querySelectorAll('div')] // [<div>, <div>, <div>] 该运算符可以将一个数组变为参数序列。 function push(array, ...items) { array.push(...items) } function add(x, y) { return x + y } const number = [2, 3] add(...number) // 5 扩展运算符后面可以放置表达式。 const arr = [ ...( x > 0 ? ['a'] : []), 'b' ] 如果扩展运算符后面是一个空数组,则不产生任何效果。...

October 26, 2017 · 5 min · vdorchan

ES6学习笔记-函数的扩展

1. 函数参数的默认值 在 ES6 之前,我们如果想要为函数参数制定默认的话,我们的做法是 function log(x, y) { y = y || 'World' console.log(x, y) } log('Hello') // Hello World log('Hello', 'China') // Hello China log('Hello', '') // Hello World // 因为 y 的值为 false 或者 为空的时候,都会被改为默认值,所以更好的做法是 if (typeof y === 'undefined') { y = 'World' } ES6 则允许直接为参数设置默认值,方式是写在参数定义的后面。 function log(x, y = 'World') { console.log(x, y) } log('Hello') // Hello World log('Hello', 'China') // Hello China log('Hello', '') // Hello ES6 的这种写法简直是太简洁了,并且,阅读代码的时候,将很容易的意识到,有哪些参数是可以忽略的。...

October 19, 2017 · 6 min · vdorchan

ES6学习笔记-数值的扩展

1. 二进制和八进制表示法 ES6 中用前缀 0b(0B)表示二进制。 0b00001111 // 15 0b00001111 === 15 // true ES6 中用前缀 0o(或0O)表示八进制。明确不再允许使用前缀 0 来表示。 0o100 // 64 0o100 === 64 // true 使用 Number 方法转换成十进制 Number(0o100) // 64 Number(0b00001111) // 15 Number(0o100) === parseInt(0o100) // true Number(0b00001111) === parseInt(0b00001111) // true 2. Number.isFinite(), Number.isNaN() ES6 新增了 Number.isFinite() 和 Number.isNaN() 两个方法。 Number.isFinite() 用来检查一个值是否为有限的(finite)。 Number.isFinite(18) // true Number.isFinite(0.8) // true Number.isFinite(NaN) // false Number.isFinite(Infinity) // false Number.isFinite(-Infinity) // false Number....

October 18, 2017 · 5 min · vdorchan

ES6学习笔记-正则的扩展

正则一直是块难啃的骨头,乍一看就好复杂,各种符号字母交叉也不知道什么意思。编写一个正则,使用的时候是需要适应多种情况的,所以在掌握的不够深的时候,可能写出来的正则就容易出问题了。于是乎,大家就更倾向于复制粘贴大法咯,毕竟有些通用的正则,是能保证正确且足够可靠的。除了校验手机号码、邮箱这些常用的功能之外,其实正则是足够强大应用在很多方面的。正则很深奥,同时又很枯燥,要学好正则,可谓任重而道远啊。 1. RegExp 构造函数 通常使用 RegExp 构造函数有两种情况 第一种情况就是参数为字符串,这个时候第二个参数就是正则表达式的修饰符(flag) var regexp = new RegExp('[A-Z]', 'i') 另一种情况,参数是一个正则表达式,返回的是这个正则表达式的拷贝 var regexp = new RegExp(/A-Z/i) 上面的这种情况,是没有没办法传正则表达式的修饰符作为第二个参数,ES6 则允许了这种情况 var regexp = new RegExp(/A-z/i, 'g') regexp.flags // g 上面的代码中,第二个参数指定的修饰符,会覆盖掉原有的正则表达式的修饰符 2. 字符串的正则方法 to do … 3. u 修饰符 在字符串的扩展里也知道了很多 ES6 之前 JavaScript 是没办法识别大于 0xFFFF 的 Unicode 字符的,所以正则表达式也不能正确的处理大于 0xFFFF 的 Unicode 字符的,ES6 增加了 u 修饰符来解决这个问题。 /\ud848\udd04/.test('\ud848') // true /\ud848\udd04/u.test('\ud848') // false 出了上面代码的情况,加了 u 修饰符之后还会改变下面这些代码的行为 点标识符 原本的(.)字符是没办法识别大于 0xFFFF 的 Unicode 字符的,ES6 中可以加上 u 修饰符...

October 13, 2017 · 4 min · vdorchan

template-compile

现在经常能看到“模板编译”、“模板引擎”的字眼。对这些概念并没有进行过深入的了解,基本处于貌似知道是什么,但又说不出来是什么的状态。带着一堆的疑惑,去看了几篇文章,也算是搞懂了一部分。 模板(Template)和模板编译 什么是模板呢?folderc 上面的解释是 “一个包含了各种参数,并能够由模版处理系统通过识别某些特定语法来替换这些参数的文档。” 一个最基本的模板 My name is {{ name }}, I am {{ age }} years old. 上面所示的模板,它就包括了 name、age 参数,它将由模板处理系统通过识别某些特定的语法,用数据将 name、age 参数替换掉。 比如将模板中的 name、age 使用下面的数据对象给替换掉 const data = { name: 'jack', age: 20 } 期待的结果应该是 My name is jack, I am 20 years old. 这个从模板到上面结果的之间的过程就称之为模板编译 我们将用正则替换来简单实现下这个过程 const template = (tpl, data) => { let ret = tpl for (let item in data) { if (data.hasOwnProperty(item)) { const reg = new RegExp('{{' + item + '}}', 'g') ret = ret....

October 12, 2017 · 1 min · vdorchan

ES6学习笔记-字符串的扩展

1. 字符的 Unicode 表示法 unicode 是一个字符集,包含了世界上几乎所有的字符,并且为每个字符分配一个唯一的码点,unicode 的出现是为了能在计算机上更好的处理多国家的语言文字。unicode 每年都还在更新,每年都会加入很多新的字符。广义的 unicode 还包括了一系列的编码规则(UTF-8,UTF-16,UTF-32等等)。 JavaScript 有以下表示字符的方法 '\z' === 'z' // true '\172' === 'z' // true '\x7A' === 'z' // true '\u007A' === 'z' // true 其中 JavaScript 允许采用 \uxxxx 形式表示一个字符,其中 xxxx 表示字符的 Unicode 码点 '\u0061' \\ a '\u2210' \\ ∐ 但是当表示的字符的 Unicode 码点超过 0xFFFF 的时候,也就是从第 65537 (2的16次方) 个开始, 就没办法正常表示字符了 '\u22104' \\ ∐4 // 采用这种方式可以正确表达字符 '\ud848\udd04' \\ 𢄄 而 ES6 中只要将码点放入大括号中,就能正确表示该字符 '\u{22104}' \\ 𢄄 '\u{61}\u{62}\u{63}' \\ abc 2....

October 11, 2017 · 6 min · vdorchan