ES6学习笔记

1.简介 Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多 class Point { } class ColorPoint extends Point { } 上面代码，ColorPoint 继承了 Point，因为没有部署代码，所以两个类是完全一样的。 子类必须在 constructor 中调用 super 方法，否则会出错。因为子类没有自己的 this 对象，所以需要 super 方法继承父类的 this 对象。 class ColorPoint extends Point { constructor(x, y, color) { super(x, y) this.color = color; } } ES5 的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。ES6 的继承机制完全不同，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。 作为子类的默认 constructor 方法 class ColorPoint extends Point { } class ColorPoint extends Point { constructor(...args) { super(...args) } 下面代码中，实例对象cp同时是ColorPoint和Point两个类的实例，这与 ES5 的行为完全一致。 let cp = new ColorPoint(25, 8, 'green'); cp instanceof ColorPoint // true cp instanceof Point // true 最后，父类的静态方法，也会被子类继承。...

1.简介 JavaScript 语言中，传统的生成实例对象的方法是通过构造函数 。 function Person(name, age) { this.name = name this.age = age } Person.prototype.say = function () { console.log('my name is ' + this.name + ', i am ' + this.age + ' years old') } var person = new Person('kobe', 30) person.say() // my name is kobe, i am 30 years old ES6 引入了 Class （类）这个概念，通过 class 关键字可以定义类，写法和其它传统语言类似，可以看作是一个语法糖，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法。 class Person { contructor(name, age) { this.name = name this....

1. generator Generator 函数可以理解成是一个状态机，封装了多个内部状态。 执行 Generator 函数可以返回一个遍历器对象，所以说，Generator 函数还是一个遍历器对象生成函数。返回的bi an li qi

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....

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....

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....

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' ] 如果扩展运算符后面是一个空数组，则不产生任何效果。...

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 的这种写法简直是太简洁了，并且，阅读代码的时候，将很容易的意识到，有哪些参数是可以忽略的。...

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....

正则一直是块难啃的骨头，乍一看就好复杂，各种符号字母交叉也不知道什么意思。编写一个正则，使用的时候是需要适应多种情况的，所以在掌握的不够深的时候，可能写出来的正则就容易出问题了。于是乎，大家就更倾向于复制粘贴大法咯，毕竟有些通用的正则，是能保证正确且足够可靠的。除了校验手机号码、邮箱这些常用的功能之外，其实正则是足够强大应用在很多方面的。正则很深奥，同时又很枯燥，要学好正则，可谓任重而道远啊。 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 修饰符...