ES6参数处理,解构赋值,模板字面量(模板字符串),对象的扩展

一、参数处理

1、给函数设置默认参数值，注意参数从左往右赋值

function multiply(a, b = 1) {
  return a * b;
}

multiply(5, 2); // 10
multiply(5);    // 5

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

f(); // [1, undefined]
f(2); // [2, undefined]

2、处理函数剩余参数（...）

****剩余参数:****允许我们将一个不定数量的参数表示为一个数组。

function(a, b, ...theArgs) {
   alert(theArgs.length);//可以使用所有数组属性方法
}
//必须是函数的最后一个参数以...为前缀
//它是由剩余实参组成的Array数组
//这个例子中的theArgs收集第三个以及之后的所有实参
fun1();  // 弹出 "0", 因为theArgs没有元素
fun1(5); // 弹出 "1", 因为theArgs只有一个元素

3、展开运算符（...），可以用作浅拷贝

可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开；还可以在构造字面量对象时, 将对象表达式按key-value的方式展开。

(注: 字面量一般指[1, 2, 3] 或者{name: "mdn"} 这种简洁的构造方式)

function sum(x, y, z) {
  return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers));//6

/****下例表示可以多次使用****/

function myFunction(v, w, x, y, z) { }
var args = [0, 1];
myFunction(-1, ...args, 2, ...[3]);

/****构造字面量数组或连接数组****/
var parts = ['shoulders', 'knees']; 
var lyrics = ['head', ...parts, 'and', 'toes']; 
// ["head", "shoulders", "knees", "and", "toes"]
var arr = [...parts, ...lyrics];

/****支持浅拷贝(一维数组)****/
var arr = [1, 2, 3];
var arr2 = [...arr];
arr2.push(4); 
// arr2 此时变成 [1, 2, 3, 4]
// arr 不受影响

二、模板字面量(模板字符串)

由反引号 ` 来代替单引号 ' 或者双引号 " 。

`string text ${expression} string text`

var a = 5;
var b = 10;
console.log(`a + b is ${a + b}`);//不再用"+"连接表达式

带标签的模板字符串：

标签使我们可以用函数来解析模板字符串。

var person = 'Mike';
var age = 28;

function myTag(strings, personExp, ageExp) {

  var str0 = strings[0]; // "that "
  var str1 = strings[1]; // " is a "

  var ageStr;
  if (ageExp > 99){
    ageStr = 'centenarian';
  } else {
    ageStr = 'youngster';
  }

  return str0 + personExp + str1 + ageStr;
}

var output = myTag`that ${ person } is a ${ age }`;

console.log(output);
// that Mike is a youngster

原始字符串：raw

在标签函数的第一个参数中，存在一个特殊的属性raw ，我们可以通过它来访问模板字符串的原始字符串，而不经过特殊字符的替换。

例子：

function tag(strings) {
  console.log(strings.raw[0]);
}
tag`string text line 1 \n string text line 2`;
// logs "string text line 1 \n string text line 2"

如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。

var greeting = `\`Yo\` World!`;

三、解构赋值

**解构赋值：**是一种 Javascript 表达式，它使得将值从数组，或属性从对象，提取到不同的变量中，成为可能。 

目的就是将数组中的值或对象中的属性方便的提取到其他变量中

//数组解构
var x, y;
[x, y] = [1, 2, 3];
console.log(x); // 1
console.log(y); // 2

//或者：
var [x, y] = [1, 2, 3];
console.log(x); // 1
console.log(y); // 2

//对象解构
var o = {p: 42, q: true};
var {p, q} = o;
console.log(p); // 42
console.log(q); // true
//var { p: p, q: q} = {p: 42, q: true} ;var {p, q} = o;是这一句的简写//也就是说，对象的解构赋值的内部机制:是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。
var { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
foo // error: foo is not defined
//上面代码中，foo是匹配的模式，baz才是变量。真正被赋值的是变量baz，而不是模式foo。
var obj = {
    p: [
      'Hello',
      { y: 'World' }
    ]
};
var { p: [x, { y }] } = obj;
x // "Hello"
y // "World"//注意，这时p是模式，不是变量，因此不会被赋值。
var node = {
    loc: {
        start: {
            line: 1,
            column: 5
        }
    }
};
var { loc: { start: { line }} } = node;
line // 1
loc  // error: loc is undefined
start // error: start is undefined//上面代码中，只有line是变量，loc和start都是模式，不会被赋值。

注意：对象解构与数组解构有一个重要的不同点，数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

数组形式的解构赋值需注意：等号右边的数据结构只要具有Iterator接口，才可以采用数组形式的解构赋值

例：等号的右边不是数组（或者严格地说，不是可遍历的结构，参见《Iterator》一章），那么将会报错。

// 报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

对象形式的解构赋值需注意的是：只要等号右边的值不是对象，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true


let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError

解构赋值允许指定默认值。

var [foo = true] = [];
foo // true

[x, y = 'b'] = ['a']; // x='a', y='b'
[x, y = 'b'] = ['a', undefined]; // x='a', y='b'

注意，ES6内部使用严格相等运算符（===），判断一个位置是否有值。所以，如果一个数组成员不严格等于undefined，默认值是不会生效的。

圆括号问题

不能使用圆括号的情况

（1）变量声明语句中，不能带有圆括号。

// 全部报错
var [(a)] = [1];

var {x: (c)} = {};
var ({x: c}) = {};
var {(x: c)} = {};
var {(x): c} = {};

var { o: ({ p: p }) } = { o: { p: 2 } };

上面三个语句都会报错，因为它们都是变量声明语句，模式不能使用圆括号。

（2）函数参数中，模式不能带有圆括号。

函数参数也属于变量声明，因此不能带有圆括号。

// 报错
function f([(z)]) { return z; }

（3）赋值语句中，不能将整个模式，或嵌套模式中的一层，放在圆括号之中。

// 全部报错
({ p: a }) = { p: 42 };
([a]) = [5];

可以使用圆括号的情况: 赋值语句的非模式部分，可以使用圆括号。

[(b)] = [3]; // 正确
({ p: (d) } = {}); // 正确
[(parseInt.prop)] = [3]; // 正确

用途：

（1）交换变量的值

var a = 1;
var b = 3;
//等价于[a,b]=[3,1]
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

（2）从函数返回多个值

函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。

// 返回一个数组

function example() {
  return [1, 2, 3];
}
var [a, b, c] = example();

// 返回一个对象

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
var { foo, bar } = example();

（3）函数参数的定义

解构赋值可以方便地将一组参数与变量名对应起来。

// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);

// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});

（4）提取JSON数据

解构赋值对提取JSON对象中的数据，尤其有用。

var jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]

（5）函数参数的默认值

jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
}) {
  // ... do stuff
};

指定参数的默认值，就避免了在函数体内部再写var foo = config.foo || 'default foo';这样的语句。

（6）遍历Map结构

任何部署了Iterator接口的对象，都可以用for...of循环遍历。Map结构原生支持Iterator接口，配合变量的解构赋值，获取键名和键值就非常方便。

var map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
  console.log(key + " is " + value);
}
// first is hello
// second is world

如果只想获取键名，或者只想获取键值，可以写成下面这样。

// 获取键名
for (let [key] of map) {
  // ...
}

// 获取键值
for (let [,value] of map) {
  // ...
}

（7）输出模块的指定方法

加载模块时，往往需要指定输出那些方法。解构赋值使得输出语句非常清晰。

const { SourceMapConsumer, SourceNode } = require("source-map");

五. 对象的扩展

创建对象时可以简化方法和重名的键值对

//ES6简化后
var name="pan";
var age=20;
var people = {
      name,
      age,
      getName(){
           console.log(this.name)
      }
};

var i = 0;
var a = {
  ["foo" + ++i]: i,
  ["foo" + ++i]: i,
  ["foo" + ++i]: i
};
console.log(a.foo1); // 1
console.log(a.foo2); // 2
console.log(a.foo3); // 3

当定义的 属性：值 为 __proto__：值 时，不会创建名为__proto__的属性。
但当值为对象时，将更改原型（因为__proto__原本指向原型）。
所以不建议使用这个属性名（避免更改__proto__的指向）。