ECMAScript6入门精简摘要

内容来源于阮一峰ECMAScript入门
有缩略和精简，大的特性中没有generator函数和promise对象。
细节上择要，备查。

增加块级作用域

var [foo, [[bar], baz]] = [1, [[2], 3]]

• codePointAt()相当于charAt()，但能正确处理4字节字符，如UTF-16的中文。
• contains(),startsWith(),endsWith()
  查询，头部，尾部。第二参数表示开始搜索位置。
  s.startsWith("o", 4) // true
s.endsWith("o", 8) // true
s.contains("o", 8) // false
• repeat()将原字符串修改N次返回

  "x".repeat(3) // "xxx"
  "hello".repeat(2) // "hellohello"

• 模板字符串
  ``反引号表示。

  var obj = {x: 1, y: 2};
  console.log(`${obj.x + obj.y}`)

• Array.from()将对象转换为数组
• Array.of()构造数组，避免array(3)这样的语义分歧
• find()和findIndex()返回第一个符合要求元素的数值（位置）

  [1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
  }) // 10

• fill()数组填充

  ['a', 'b', 'c'].fill(7, 1, 2)
  // ['a', 7, 'c']

• 数组推导

  var years = [ 1954, 1974, 1990, 2006, 2010, 2014 ];
  [for (year of years) if (year > 2000) year];
  // [ 2006, 2010, 2014 ]
  [for (year of years) if (year > 2000) if(year < 2010) year];
  // [ 2006]
  [for (year of years) if (year > 2000 && year < 2010) year];
  // [ 2006]

  对象增强
• 属性表达简化

  var Person = {
  name: '张三',
  //等同于birth: birth
  birth,
  // 等同于hello: function ()...
  hello() { console.log('我的名字是', this.name); }
  };

  • 属性名表达式

    let obj = {
    };

• 参数默认值

  function foo({x, y = 5}) {
  console.log(x, y);
  }
  foo({}) // undefined, 5
  foo({x: 1}) // 1, 5
  foo({x: 1, y: 2}) // 1, 2

• rest参数（...value）
  rest参数必须在所有参数的最后

  function add(...values) {
  let sum = 0;
  for (var val of values) {
    sum += val;
  }
  return sum;
  }
  add(2, 5, 3) // 10

• 扩展运算符(...)
  只要有迭代接口都可用

  var numbers = [4, 38];
  add(...numbers) // 42

• 箭头函数
  (val）=> {function}

  var sum = (num1, num2) => { return num1 + num2; }
  };
  // 等同于
  var sum = function(num1, num2) {
  return num1 + num2;
  };

  箭头函数绑定定义时的对象，而不是使用时的对象

• set

  特点:类似数组，内部元素不重复。可迭代。
  set连续添加空对象不相等，内部元素以===判定相等性。

方法:add,delete,has,clear（增，删，查，清空）

技巧：运用扩展运算符和set结构，去除数组重复元素

let arr = [3, 5, 2, 2, 5, 5];
let unique = [...new Set(arr)]; 
// [3, 5, 2]

• Map

  特点：类似于对象字面量，但键可以使各种类型的数值（包括对象）。

• 方法:
  set,get,has,delete,delete,clear

  var m = new Map(); 
  m.set("edition", 6)        // 键是字符串
  m.set(262, "standard")     // 键是数值
  m.set(undefined, "nah")    // 键是undefined
  var hello = function() {console.log("hello");}
  m.set(hello, "Hello ES6!") // 键是函数
  m.has("edition")     // true
  m.has("years")       // false
  m.has(262)           // true
  m.has(undefined)     // true
  m.has(hello)         // true
  m.delete(undefined)
  m.has(undefined)       // false
  m.get(hello)  // Hello ES6!
  m.get("edition")  // 6

  遍历:

  for (let [key, value] of map) {
  console.log(key, value);
  }

类和模块内部默认是严格模式，考虑到未来所有的代码，其实都是运行在模块之中，所以ES6实际上把整个语言升级到了严格模式

• class关键字

  class Point {
  constructor(x, y) {
  this.x = x;
  this.y = y;
  }
  toString() {
  return '('+this.x+', '+this.y+')';
  }
  }
  \\相当于ES5的
  function Point(x,y){
  this.x = x;
  this.y = y;
  }
  Point.prototype.toString = function () {
  return '('+this.x+', '+this.y+')';
  }

  可使用extends继承，终于不用折腾尼玛原型链了

  class ColorPoint extends Point {
  constructor(x, y, color) {
  super(x, y); 
  // super指代父类同名方法。等同于super.constructor(x, y)
  this.color = color;
  }
  toString() {
  return this.color+' '+super();
  }
  }

• 模块化
  模块定义 export

  export var firstName = 'Michael';
  export var lastName = 'Jackson';
  export var year = 1958;
  //相当于
  var firstName = 'Michael';
  var lastName = 'Jackson';
  var year = 1958;
  export {firstName, lastName, year};
  //输出函数：
  export function area(radius) {
  return Math.PI * radius * radius;
  }
  export function circumference(radius) {
  return 2 * Math.PI * radius;
  }
  //输出匿名函数：
  export default function () {
  console.log('foo');
  }

  模块加载 import&module

  1. import

     import customName,{firstName, lastName, year，area，circumference} from 'profile';
     //从模块文件中加载变量核函数,其中customName为匿名函数名称，可任意指定

  2. module

     module pofile from 'profile';
     //相当于
     import * as profile from 'profile';
     //访问变量使用
     profile.area

     inpoort模块后可继续export，继承模块。