ES6——（三）

目录：

(十二) 函数的扩展
(十三) 严格模式

(十二) 函数的扩展

函数参数的默认值

ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。

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

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

注意

（1）参数变量是默认声明的，所以不能用 let 或 const 再次声明。

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

（2）使用参数默认值时，函数不能有同名参数。

function foo(x, x, y = 1) {
  // ...
}
// SyntaxError: Duplicate parameter name not allowed in this context

（3）如果参数默认值是变量，那么参数就不是传值的，而是每次都重新计算默认值表达式的值。也就是说，参数默认值是惰性求值的。

let x = 99;
function foo(p = x + 1) {
  console.log(p);
}
foo() // 100

x = 100;
foo() // 101

上面代码中，参数p的默认值是x + 1。这时，每次调用函数foo，都会重新计算x + 1，而不是默认p等于 100。

---

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

function foo({x, y = 5}) {
  console.log(x, y);
}

foo({}) // undefined, 5
foo({x: 1}) // 1, 5
foo({x: 1, y: 2}) // 1, 2
foo() // TypeError: Cannot read property 'x' of undefined 参数不是一个对象

以上的例子，只有当函数foo的参数是一个对象时，变量x和y才会通过解构赋值而生成。如果函数foo调用时参数不是对象，变量x和y就不会生成，从而报错。如果参数对象没有y属性，y的默认值5才会生效。

注意

（1）如果某个参数有默认值，这时调用的时候可以省略该参数

// 第二个参数是对象，有默认值
function fetch(url, { method = 'GET' } = {}) {
  console.log(method);
}

fetch('http://example.com')
// "GET"

---

函数的参数默认值、对象解构赋值的默认值 的比较

// 函数的参数默认值
function m1({x = 0, y = 0} = {}) {
  return [x, y];
}

// 对象解构赋值的默认值 
function m2({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}

// 函数没有参数的情况
m1() // [0, 0]
m2() // [0, 0]

// x和y都有值的情况
m1({x: 3, y: 8}) // [3, 8]
m2({x: 3, y: 8}) // [3, 8]

// x有值，y无值的情况
m1({x: 3}) // [3, 0]
m2({x: 3}) // [3, undefined]

// x和y都无值的情况
m1({}) // [0, 0];
m2({}) // [undefined, undefined]

m1({z: 3}) // [0, 0]
m2({z: 3}) // [undefined, undefined]

---

参数默认值的位置

通常定义了默认值的参数，应该是函数的尾参数，如果非尾部的参数设置了默认值，实际上这个参数是没法省略的，除非显式输入undefined。。

// 例一
function f(x = 1, y) {
  return [x, y];
}

f() // [1, undefined]
f(2) // [2, undefined])
f(, 1) // 报错
f(undefined, 1) // [1, 1]

// 例二
function f(x, y = 5, z) {
  return [x, y, z];
}

f() // [undefined, 5, undefined]
f(1) // [1, 5, undefined]
f(1, ,2) // 报错
f(1, undefined, 2) // [1, 5, 2]

---

函数的 length 属性

返回没有指定默认值的参数个数

（1）这是因为length属性的含义是，该函数预期传入的参数个数。某个参数指定默认值以后，预期传入的参数个数就不包括这个参数了。同理，rest参数也不会计入length属性。

（2）如果设置了默认值的参数不是尾参数，那么length属性也不再计入后面的参数了。

(function (a) {}).length // 1
(function (a = 5) {}).length // 0
(function (a, b, c = 5) {}).length // 2

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

---

作用域

一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域（context）。等到初始化结束，这个作用域就会消失。这种语法行为，在不设置参数默认值时，是不会出现的。

var x = 1;

function f(x, y = x) {
  console.log(y);
}

f(2) // 2

let x = 1;

function f(y = x) {
  let x = 2;
  console.log(y);
}

f() // 1

function f(y = x) {
  let x = 2;
  console.log(y);
}

f() // ReferenceError: x is not defined

---

应用

利用参数默认值，可以指定某一个参数不得省略，如果省略就抛出一个错误。

function throwIfMissing() {
  throw new Error('Missing parameter');
}

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

foo()  // Error: Missing parameter

上面代码的foo函数，如果调用的时候没有参数，就会调用默认值throwIfMissing函数，从而抛出一个错误。

---

reset 参数

形式为“…变量名”，用于获取函数的多余参数，可以把剩余的参数改写为数组形式的参数

注意，rest 参数之后不能再有其他参数（即只能是最后一个参数），否则会报错。

// 该变量将多余的参数放入数组中。

function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10

---

扩展运算符

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

（1）用于函数调用。

function add(x, y) {
  return x + y;
}

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

（2）替代数组的apply方法

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

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

（3）合并数组

var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e'];

// ES6的合并数组
[...arr1, ...arr2, ...arr3]     // [ 'a', 'b', 'c', 'd', 'e' ]

（4）函数的返回值

JavaScript的函数只能返回一个值，使用扩展运算符可以返回多个值

（5）字符串

扩展运算符还可以将字符串转为真正的数组。

[...'hello']
// [ "h", "e", "l", "l", "o" ]

（6）实现了Iterator接口的对象

任何Iterator接口的对象，都可以用扩展运算符转为真正的数组。

var nodeList = document.querySelectorAll('div');
var array = [...nodeList];

上面代码中，querySelectorAll方法返回的是一个nodeList对象。它不是数组，而是一个类似数组的对象。这时，扩展运算符可以将其转为真正的数组，原因就在于NodeList对象实现了Iterator接口。

---

name 属性

如果将一个匿名函数赋值给一个变量，ES5 的name属性，会返回空字符串； ES6 的name属性会返回实际的函数名。

var f = function () {};

// ES6
f.name // "f"

如果将一个具名函数赋值给一个变量，则 ES5 和 ES6 的name属性都返回这个具名函数原本的名字。

const bar = function baz() {};

// ES5
bar.name // "baz"

// ES6
bar.name // "baz"

---

箭头函数 =>

var f = (v)  => v ;
// 上面的表达等同于下面的表达
var f = function(v) {
  return v;
};

如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。

var sum = (num1, num2) => { return num1 + num2; }

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

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

注意

箭头函数有几个使用注意点。

（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 });
// id: 42

上面代码中，setTimeout的参数是一个箭头函数，这个箭头函数的定义生效是在foo函数生成时，而它的真正执行要等到100毫秒后。箭头函数导致this总是指向函数定义生效时所在的对象（本例是{id: 42}），所以输出的是42；也可说箭头函数没有自己的this，而是引用外层的this。

由于箭头函数没有自己的this，所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向。

除了this，arguments、super、new.target在箭头函数之中也是不存在的，指向外层函数的对应变量。

（2）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。 （试验下非箭头函数的输出结果是什么）

function foo() {
  setTimeout(() => {
    console.log('args:', arguments);
  }, 100);
}

foo(2, 4, 6, 8)
// args: [2, 4, 6, 8]


function foo() {
  setTimeout(function(){
    console.log('args:', arguments);
  }, 100);
}

foo(2, 4, 6, 8);

（3）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

构造函数中的 this 指向新创建的对象，当执行 new Car() 的时候，构造函数 Car 的上下文就是新创建的对象，也就是说 this instanceof Car === true。显然，箭头函数是不能用来做构造函数，因为箭头函数没有自己的this 。

const Message = (text) => {
    this.text = text;
};
// Throws "TypeError: Message is not a constructor"
const helloMessage = new Message('Hello World!');

——————————————————
const Message = function(text) {
    this.text = text;
};
const helloMessage = new Message('Hello World!');
console.log(helloMessage.text); // => 'Hello World!'

（4）不可以使用yield命令，因此箭头函数不能用作Generator函数。

---

尾调用优化

尾调用指某个函数的最后一步是调用另一个函数

尾调用优化指只保留内层函数的调用帧。如果所有函数都是尾调用，那么完全可以做到每次执行时，调用帧只有一项，这将大大节省内存。

// 尾调用
function f(x){
  return g(x);
}

以下三种情况，都不属于尾调用。

// 情况一
function f(x){
  let y = g(x);
  return y;
}

// 情况二
function f(x){
  return g(x) + 1;
}

// 情况三
function f(x){
  g(x);
}

---

尾递归

函数调用自身，称为递归。如果尾调用自身，就称为尾递归

尾递归优化只在严格模式下生效

// 计算n的阶乘，最多需要保存n个调用记录，复杂度 O(n) 
function factorial(n) {
  if (n === 1) return 1;
  return n * factorial(n - 1);
}

factorial(5) // 120

————————————————

// 改写成尾递归，只保留一个调用记录，复杂度 O(1) 
function factorial(n, total) {
  if (n === 1) return total;
  return factorial(n - 1, n * total);
}

factorial(5, 1) // 120

尾递归的实现，往往需要改写递归函数，确保最后一步只调用自身。做到这一点的方法，就是把所有用到的内部变量改写成函数的参数。比如上面的例子，阶乘函数 factorial 需要用到一个中间变量 total ，那就把这个中间变量改写成函数的参数。这样做的缺点就是不太直观，第一眼很难看出来，为什么计算5的阶乘，需要传入两个参数5和1？可以通过参数默认值来改变这种效果：

function factorial(n, total = 1) {
  if (n === 1) return total;
  return factorial(n - 1, n * total);
}

factorial(5) // 120

---

函数参数的尾逗号

function clownsEverywhere(
  param1,
  param2,
) { /* ... */ }

clownsEverywhere(
  'foo',
  'bar',
);

---

（十三）严格模式
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode

开启严格模式

严格模式可以应用到整个脚本或个别函数中。不要在封闭大括弧 {} 内这样做;在这样的上下文中这么做是没有效果的。在 eval 代码，Function 代码，事件处理属性，传入 WindowTimers.setTimeout() 方法的字符串等都是整个脚本，开启严格模式会如预期一样工作。

（1）为某个script标签开启严格模式

为整个script标签开启严格模式, 需要在所有语句之前放一个特定语句 ‘use strict’;

// 整个语句都开启严格模式的语法
"use strict";
var v = "Hi!  I'm a strict mode script!";

（2）为某个函数开启严格模式

同样的，要给某个函数开启严格模式，得把 ‘use strict’; 声明一字不漏地放在函数体所有语句之前。

function strict(){
  // 函数级别严格模式语法
  'use strict';
  function nested() { return "And so am I!"; }
  return "Hi!  I'm a strict mode function!  " + nested();
}
function notStrict() { return "I'm not strict."; }

---

严格模式对正常的 JavaScript语义做了一些更改。

（1）严格模式消除了一些 JavaScript的静默错误，通过改变它们来抛出错误。

（2）严格的模式修复了 JavaScript引擎难以执行优化的错误：有时候，严格模式代码可以比非严格模式的相同的代码运行得更快。

（3）严格模式禁用了在ECMAScript的未来版本中可能会定义的一些语法。