By

最近看 es6，语法点很多，挑出一些有意义的.

解构+默认参数

function foo({ x = 1, y = 2 }) {
  console.log(`${x + y}`);
}
//foo() error
//foo({}) 3 ok

//解构+默认
function foo({ x = 1, y = 2 } = { x: 1, y: 2 }) {
  console.log(`${x + y}`);
}
//foo() 3 ok
// foo({x:100}) 102

箭头函数的 this

普通的 this 跟随运行时，箭头函数的 this 跟随定义时:

window.x = 100;
function foo(x = 123) {
  console.log(this.x);
  setTimeout(() => console.log(this.x), 1000);
  setTimeout(function() {
    console.log(this.x), 1500;
  });
  console.log(this.x); // 101
}

foo.call({ x: 123 });

箭头函数可以让 this 指向固定化，这种特性很有利于封装回调函数.

this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。

正则具名分组

下面的代码项目里用到了: 解构+具名分组

// input 1m 2year 30day 2h 4min 40second
let { counts, unit } = orig_tzlize.match(
  /(?<counts>\d+)(?<unit>y|mon|d|h|m|s)/
).groups;
// output counts = 2,  unit = year

rest 参数

再也不用Array.slice.call(arguments)了。

function sum(...values) {
  let sums = 0;
  for (let v of values) sums += v;
  return sums;
}
sum(1, 2, 3); // 6

扩展运算符

合并对象:

//合并属性
a = { 1: 1, 2: 2 };
a = { ...a, 3: 3 }; // {1:1,2:2,3:3}

//合并2个对象
let ab = { ...a, ...b };

对象拷贝,但并不是深拷贝

a = [1, 2, 3];
b = [...a]; //1,2,3

a = [1, 2, [3]];
b = [...a];

a[2][0] = 666;
b[2][0]; // 666

解构赋值:将目标对象自身的所有可遍历的（enumerable）、但尚未被读取的属性，分配到指定的对象上面。

let [x, y, ...z] = [1, 2, 3, 4, 5];
z; // [3,4,5]
let [...z] = [1, 2, 3];
z; // 123

用数组代替多个参数的传参,注意和上面 rest 参数其实是反的.

function sum(x, y, z) {
  return x + y + z;
}
sum(...[1, 2, 3]);

//ES5的写法，用apply:
sum.apply(null, [1, 2, 3]);

与解构结合:

const [first, ...rest] = [1, 2, 3, 4, 5];

转实现了 Iterator 接口的对象，(NodeList,HtmlCollection)为数组

nodes = document.querySelectAll("div"); //Nodelist but not Array
let arr = [...nodes]; //ok
//写法2

修改对象某个属性:

let newVersion = {
  ...previousVersion,
  name: "New Name" // Override the name property
};

为对象设置默认值(扩展后的同名属性会覆盖前面的)

let aWithDefaults = { x: 1, y: 2, ...a };

Array.from

Array.from 方法转换具有 length 属性的伪数组伪真数组.比...更强点

let arr = Array.from(nodes);

可像 map 一样处理每个元素:

Array.from(arrayLike, x => x * x);

assign clone

function clone(origin) {
  let originProto = Object.getPrototypeOf(origin);
  return Object.assign(Object.create(originProto), origin);
}

for…of

http://es6.ruanyifeng.com/#docs/iterator#for---of-%E5%BE%AA%E7%8E%AF

对象属性遍历: https://blog.csdn.net/harmsworth2016/article/details/86619369