ES6 笔记二

1. 函数

1.1 函数参数默认值

基本用法

function log(x, y='Worlds'){
  console.log(x,y)
}
log('Hello'); // Hello, World

function Poin(x=0,y=0){
  this.x = x;
  this.y = y;
}

var p = new Point();
p // {x:0, y:0}

参数变量是默认声明的，不能用 let const 再次声明

function foo(x = 1){
  let x = 2; // error
  const x = 3; // error
}

与解构赋值默认值结合使用

function fetch(url, {method='GET'}={}){
  console.log(method)
}
fetch('/index.html') // 'GET'

function m({x=0,y=0}={}){
  console.log([x,y])
}

m() // [0,0]
m({x:1, y:2}) // [1,2]
m({x:3}) // [3,0]
m({}) // [0,0]
m({xx:1}) // [0,0]

参数默认值位置

通常把函数的尾参数作为有默认值的参数。因为这样比较容易看出到底忽略那些参数。
```
function f(x,y=1,z){
  console.log([x,y,z])
}

f() // [undefined, 1, undefined]
f(1) // [1, 1, undefined]
f(1,,2) // 出错
f(1,undefined,3) // [1, 1, 3]
```
上面的函数，有默认值的参数不是尾参数，因此无法省略该参数而不省略其后的参数，除非显式的输入 undefined
函数length属性

指定了默认值后函数的 length 属性将返回没有指定默认值的参数个数
```
(function(a){}).length // 1
(function(a,b,c=1){}).length //2
```
PS: rest参数不会计入 length 属性
作用域

如果参数默认值是一个变量，则该变量所处的作用域与其它变量的作用域规则是一样的，即先是当前函数的作用域，然后才是全局作用域。
```
var x = 1;
function f(x, y=x){
  console.log(y)
}
f(2)  // 2
```
由于函数作用域内部的变量 x 已经生成所以 y 等于参数 x 而不是全局变量x。
```
let x = 1;
function f(y=x){
  let x= 2;
  console.log(y)
}
f() // 1
```
上述代码函数调用时 y 的默认值变量 x 尚未在函数内部生成，所以 x 指向全局变量。

如果函数A的默认值是函数B
那么由于函数的作用域是其声明时的作用域，函数B的作用域就不是函数A，而是全局作用域。如下：
```
let foo = 'outer';

function bar(func = x => foo){
  let foo = 'inner';
  console.log(func());
}
bar(); // outer
```
上述代码等同于
```
let foo = 'outer';
let f = x => foo;

function bar(func = f) {
let foo = 'inner';
console.log(func()); 
}
bar(); // outer
```
关于babel的一个bug
应用

可指定函数某一个参数不得省略，省略就会抛出错误
```
function throwIfMissing() {
throw new Error('Missing parameter');
}

function foo(mustBeProvided = throwIfMissing()) {
return mustBeProvided;
}

foo()
// Error: Missing parameter
```
上述代码可知参数 mustBeProvided 的默认值等于 throwIfMissing 函数的运行结果。这说明函数参数的默认值不是在定义时执行，而是在运行时执行。

如果把函数参数默认值设置为 undefined 则表示这个参数是可以省略的。

1.2 rest 参数

rest参数("...变量名"),用于获取函数的多余参数。rest参数搭配的变量是一个数组，该变量将多余的参数放入其中。

function push(array, ...items){
    items.forEach(item => {
        array.push(item);
    })
}
var a = [];
push(a,1,2,3)

rest 参数只能作为最后一参数。

函数的 length 属性不包括 rest 参数。

(function(...a){}).length // 0
(function(a, ...b){}).length // 1

1.3 扩展运算符

含义

扩展运算符(spread)是三个点(...)。它好比rest参数的逆运算，将一个数组转为用逗号分隔的参数序列。

console.log(...[1,2,3])
// 1 2 3

console.log(1, ...[2,3,4], 5)
// 1 2 3 4 5

该运算符主要用于函数的调用

function add(x,y){
  console.log(x+y);
}
var arr = [1,10];
add(...arr); // 11  ...运算符把arr数组变为参数序列

替代数组的 apply 方法

由于扩展运算符可以展开数组，所以不需要apply将数组转为函数的参数了。

// ES5
function f(x,y,z){}
var args = [1,2,3];
f.apply(null, args)

// ES6
function f(x,y,z){}
var args = [1,2,3];
f(...args)

使用 Math.max 求数组最大元素

// ES5
Math.max.apply(null, [1,2,3,4])

// ES6
Math.max(null, ...[1,2,3,4])

通过 push 将一个数组添加到另一数组尾部

// ES5
var arr1 = [0,1,2];
var arr2 = [3,4,5];
Array.prototype.push.apply(arr1,arr2)

// ES6
var arr1 = [0,1,2];
var arr2 = [3,4,5];
arr1.push(...arr2)

扩展运算符的应用
1. 合并数组
```
//ES5
[1,2].concat(more);
arr1.concat(arr2,arr3)

//ES6
[1,2, ...more]
[...arr1, ...arr2, ...arr3)
```
2. 与解构赋值结合生成数组
```
// ES5
a = list[0], rest = list.slice(1)
// ES6
[a, ...rest] = list

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

const [first, ...rest] = [];
first // undefined
rest  // []:

const [first, ...rest] = ["foo"];
first  // "foo"
rest   // []
```
  如果将扩展运算符用于数组赋值，只能放在参数的最后一位
3. 字符串将字符串转为真正的数组
```
[...'hello']
// [ "h", "e", "l", "l", "o" ]
```
  还有一个好处是 能够正确识别32位的Unicode字符
  
  其中Unicode字符如: 'x\uD83D\uDE80y' 也就是 "x🚀y"
```
'x\uD83D\uDE80y'.length // 4
[...'x\uD83D\uDE80y'].length // 3
```
  JavaScript会将32位Unicode字符，识别为2个字符，采用扩展运算符就没有这个问题。因此可以这样来写：
```
function length(str) {
return [...str].length;
}

length('x\uD83D\uDE80y') // 3
```
  凡是涉及到操作32位Unicode字符的函数，都有这个问题。因此，最好都用扩展运算符改写。
```
let str = 'x\uD83D\uDE80y';

str.split('').reverse().join('')
// 'y\uDE80\uD83Dx'

[...str].reverse().join('')
// 'y\uD83D\uDE80x'
```
  - 类似数组的对象
任何类似数组的对象都可以用扩展运算符转为真正的数组
```
[...document.quertSelectorAll('div')];
// [<div>, <div>, <div>]
```
- Map和Set结构，Generator函数
扩展运算符内部调用的是数据结构的Iterator接口，因此只要具有Iterator接口的对象，都可以使用扩展运算符。
```
let map = new Map([
      [1, 'one'],
      [2, 'two'],
      [3, 'three'],
    ]);

let arr = [...map.keys()]; // [1, 2, 3]
```
Generator函数运行后，返回一个遍历器对象，因此也可以使用扩展运算符。

1.4 name 属性

name属性返回该函数的函数名

匿名函数：

var fn = function(){}

//ES5
fn.name // ""

//ES6
fn.name // fn

Function构造函数返回的函数实例，name属性的值为“anonymous”。

(new Function).name // "anonymous"

bind返回的函数，name属性值会加上“bound ”前缀。

function foo() {};
foo.bind({}).name // "bound foo"

(function(){}).bind({}).name // "bound "

1.4 箭头函数

基本用法

var f = v => v;

var f = function(v){
  return v;
}

由于大括号被解释为代码块，所以如果箭头函数要返回一个对象，必须在对象外面加上括号。

var getTempItem = id => ({ id: id, name: "Temp" });

与解构赋值一起使用：

const full = ({first, last}) => first + ',' + last;
//等同于
function full(person){
  return person.first + person.last;
}

简化回调函数：

[1,2,3,4].map(x => x * x);
//等同于
[1,2,3,4].map(function(x){
  return x * x;
});

var result = values.sort((a,b) => a-b);
//等同于
var result = values.sort(function(a,b){
  return a - b;
})

结合rest参数使用

const numbers = (...nums) => nums;
numbers(1,2,3,4,5)
// [1,2,3,4,5]

headAndTail(1, 2, 3, 4, 5);
// [1,[2,3,4,5]]

注意点
1. 函数体内的this对象就是定义时所在的对象，而不是使用时所在的对象
2. 不可以当做构造函数。也就是不可使用new命令，否则会抛出一个错误。
3. 不可以使用arguments对象，该对象在函数体内不存在。如果用，可以用rest参数代替。
4. 不可以适用于 yeild 命令，因此箭头函数不可以用于 Generator 函数。
第一条尤其重要。this对象的指向是可变的，但是在箭头函数内部是固定的。
```
function foo(){
  setTimeout(() => {
      console.log("id:" + this.id)
  },1000)
}
foo.call({id:11})

//转为ES5代码
function foo() {
  var _this = this;
  setTimeout(function () {
      console.log("id:" + _this.id);
  }, 1000);
}
```
如果是个普通函数，执行的this应该指向 window 对象，但是箭头函数导致this对象总是指向函数所在的对象。

再比如：
```
function Timer(){
  this.seconds = 0;
  setInterval(()=>this.seconds++,1000)
}

var t = new Timer();
setTimeout(()=>console.log(t.seconds), 3100);

// 3
```
Timer函数内的 setInterval 调用了 this.seconds 属性，通过箭头函数让this总是指向Timer的实例对象。否则输出0 而不是3.

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

除了this，arguments super new.target 这三个变量在箭头函数中也是不存在的，分别指向外层函数对应的变量。
```
function foo() {
setTimeout(() => {
  console.log('args:', arguments);
}, 100);
}

foo(2, 4, 6, 8)
// args: [2, 4, 6, 8]
```
箭头函数内部的变量 arguments 其实是函数 foo 的 arguments 变量。

由于箭头函数没有自己的this，所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向。
```
(function() {
return [
  (() => this.x).bind({ x: 'inner' })()
];
}).call({ x: 'outer' });

// outer
```
上面的代码中箭头函数没有自己的 this，所以 bind 无效，内部的 this 指向外部的 this。
函数绑定

ES7提出了『函数绑定』运算符用来取代 call apply bind 调用。

函数绑定运算符是并排的双冒号 :: ，昨天冒号绑定一个对象，右边是一个函数。会自动将左边的对象作为上下文环境(this对象)绑定到右边的函数上。
```
foo::bar;
bar.bind(foo);

foo::bar(...arguments);
bar.apply(foo, arguments);

var foo = {ss: 112}
var bar = function(){console.log(this.ss)};
foo::bar(); // 112
```
双冒号运算符返回的还是原对象，因此可以采用链式写法
```
let { find, html } = jake;

document.querySelectorAll("div.classA")
::find("p")
::html("this is p");
```

ccforward / cc

30.ES6 笔记二 #31

ES6 笔记二

1. 函数

1.1 函数参数默认值

1.2 rest 参数

1.3 扩展运算符

1.4 name 属性

1.4 箭头函数