ES6：JavaScript开发者的速成手册(一）

前言

本教程将分为两大部分深入解读ES6的精髓。将带你领略ES6的基础语法，将深入探讨ES6的高级特性，通过浅显易懂的语言和大量精炼的代码示例，为你揭开现代JavaScript的神秘面纱。帮助你深入理解并掌握ES6的强大功能。无论你是初学者还是资深开发者，本教程都将是了解ES6、提升编程技能的宝贵资源，亦可作为你随时查阅的参考手册。

---

class

ES6 的class可以看作只是一个语法糖，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已
如果想了解ES5的特性，可以查看我之前写的JS 实现继承的5种方式

//class 关键字声明类
class Person {
	//构造函数， new 实例化调用的函数
  constructor(name, gender) {
    this.name = name;
    this.gender = gender;
  }
}

class Student extends Person {
  constructor(name,gender,age) {
  	//super 指向父类的构造函数关键字
    super(name, gender);
    this.age = age
  }
  getInfo(){
    return `name : ${this.name } + age: ${this.age}`
  }
  //静态方法
  static getInstance(name,gender,age) {
    return new Student(name,gender,age);
  }
}

// 通过new 来创建对象，实例化类
let stu = new Student('张三','男','20')
console.log(stu.getInfo());  // name : 张三 + age: 20
//静态方法调用
console.log(Student.getInstance('张三','男','20'));

对象扩展

增加 属性名表达式、super 关键字、对象的扩展运算符 等

let user= {
    name :'ziyu',
    age:20
}

const handler = ()=> 123

let obj = {
    // 设置原型链. "__proto__" or '__proto__' 
    __proto__: user,
    // ['__proto__']: user,
    
    // handler: handler 简写
    handler,
    // 方法
    toString() {
     // Super 调用
     return "d " + super.toString();
    },
    // 动态属性名
    [ "prop_" + (() => 42)() ]: 42
};

console.log(obj.__proto__ ,`name:` , obj.name); //{ name: 'ziyu', age: 20 } name: ziyu
console.log(obj.toString()); // d [object Object]

字符串扩展

增加 多行、变量插值 等

// 
console.log(`This is a pretty little template string.`)

// 多行字符串
console.log(
    `In ES5 this is
     not legal.`
);

// 插值变量绑定
let name = "Bob", time = "today";
console.log(`Hello ${name}, how are you ${time}?`)

// 未转义的模板字符串
console.log( String.raw`In ES5 "\n" is a line-feed.`)

解构

对象或数组的解构赋值，简化了很多代码量，

const getASTNode = () => ({
  op: { name: "张三" },
  lhs: { op: "李四" },
  rhs: { op: "王五" },
});

// 数组匹配
var [a1, , b1] = [1, 2, 3];
console.log(a1 === 1); // true
console.log(b1 === 3); // true

// 对象匹配
let {
  op: a,
  lhs: { op: b },
  rhs: c,
} = getASTNode();
console.log("a,b,c", a, b, c); // a,b,c { name: '张三' } 李四 { op: '王五' }

// 结构绑定 `op`, `lhs` and `rhs`
let { op, lhs, rhs } = getASTNode();
console.log(op, lhs, rhs); // { name: '张三' } { op: '李四' } { op: '王五' }

// Can be used in parameter position
function g({ name: x }) {
  console.log(x); // 5
}
g({ name: 5 });

// 无效解构
let [a2] = [];
console.log(a2 === undefined); // true

// 带有默认值的软故障解构
let [a3 = 1] = [];
console.log(a3 === 1); // true

// 结构 + 默认参数
function r({ x, y, w = 10, h = 10 }) {
  return x + y + w + h;
}
console.log(r({ x: 1, y: 2 }) === 23); // true

参数

默认参数

function f(x, y = 12) {
  return x + y;
}
f(3) == 15;

reset参数

function f(x, ...y) {
  // y is an Array
  return x * y.length;
}
f(3, "hello", true) == 6;

参数展开

function f(x, y, z) {
  return x + y + z;
}
// Pass each elem of array as argument
f(...[1, 2, 3]) == 6;

let、const

ES5 只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。

function f() {
  {
    let x;
    {
      // 这是一个独立的区域
      const x = "sneaky";
      // error, const 不能再赋值
      x = "foo";
    }
    // 复制成功,let声明
    x = "bar";
    // error, 已经在上面声明了
    //   let x = "inner";
  }
}

Iterator

遍历器（Iterator）,它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。

Iterator 的遍历过程是这样的。

• 创建一个指针对象，指向当前数据结构的起始位置。结构 {next: ()=> ({value: any , done: boolean })}

  每一次调用next方法，都会返回数据结构的当前成员的信息。具体来说，就是返回一个包含value和done两个属性的对象。其中，value属性是当前成员的值，done属性是一个布尔值，表示遍历是否结束。

• 不断调用指针对象的next方法，直到它指向数据结构的结束位置。

var it = makeIterator(['a', 'b']);
it.next() // { value: "a", done: false }
it.next() // { value: "b", done: false }
it.next() // { value: undefined, done: true }
function makeIterator(array) {
  var nextIndex = 0;
  return {
    next: function() {
      return nextIndex < array.length ?
        {value: array[nextIndex++], done: false} :
        {value: undefined, done: true};
    }
  };
}

for…of 循环

一个数据结构只要部署了Symbol.iterator属性，就被视为具有 iterator 接口，就可以用for...of循环遍历它的成员。也就是说，for...of循环内部调用的是数据结构的Symbol.iterator方法。

---

给对象赋予 for...of能力，就是自主实现 Symbol.iterator方法

let fibonacci = {
  friends: ["盖伦", "阿木木", "安妮"],
  [Symbol.iterator]() {
    let len = this.friends.length;
    let index = 0;
    return {
      next:()=> {
        if (index <= len - 1) {
          return { done: false, value: this.friends[index++] };
        }else{
          return { done: true, value: null };
        }
      },
    };
  },
};

for (var n of fibonacci) {
  console.log(n);
}
//打印结果
//盖伦
//阿木木
//安妮

Map、Set数据结构

请看 四步带你深入理解Map、Set数据结构 介绍，将讲述了Map、Set的用法，及对象和数组的之间的转化

箭头函数

请看一文讲透箭头函数和This,将带你完全弄懂 JS 的this、和箭头函数的使用，以及箭头函数中的this用法