ES6新語法

本文轉載自查看原文 2017-04-23 10:24 3467 ES6新語法

個人小總結：1年多沒有寫博客，感覺很多知識點生疏了，雖然工作上能解決問題，但是當別人問到某個知識點的時候，還是迷迷糊糊的，所以堅持寫博客是硬道理的，因為大腦不可能把所有的知識點記住，有可能某一天忘了，但是我們工作上還是會使用，只是理論忘了，所以寫博客的好處是可以把之前的東西重新看一遍后會在大腦里面重新浮現起來，特別在面試的時候，別人問你的知識點的時候答不上來那種尷尬，但是平時經常使用到，只是說不出所以來的，因此寫博客是最好的思路。

閱讀目錄

1.let And const命令
2.變量的解構賦值
3.數組的擴展
4.函數的擴展
5.對象的擴展
6.set 和 Map的數據結構
7.class

回到頂部

1.let And const命令

1. let的含義及let與var的區別：

let 聲明的變量只在它所在的代碼塊有效；如下：

for (let i = 0; i < 10; i++) {
  console.log(i);
}
console.log('aaa');
console.log(i); // i is not defined

上面代碼中，計數器i只在for循環體內有效，在循環體外引用就會報錯。如下var代碼：

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function() {
    console.log(i);
  }
}
a[6](); // 10

變量i是var聲明的，在全局范圍內都有效，所以每一次循環，新的i值都會覆蓋舊值，導致最后輸出的是最后一輪i的值。

但是如果使用let，聲明的變量僅在塊級作用域內有效，最后輸出的是6. 如下：

var b = [];
for (let j = 0; j < 10; j++) {
  b[j] = function() {
    console.log(j);
  }
}
b[6](); // 6

2. 不存在變量提升

let 不像var 那樣會發生 '變量提升' 現象，因此，變量需要先聲明然后再使用，否則報錯；

// var 的情況
console.log(foo);  // undefined
var foo = 2;

// let的情況；
console.log(bar);  // 報錯
let bar = 2;

3. 暫時性死區

快級作用域內存在let命令，它所聲明的變量就綁定在這個區域，不再受外部影響；如下代碼：

var tmp = 123;
if (true) {
  tmp = 'abc';
  let tmp;
  console.log(tmp); // tmp is not defined
}

上面代碼定於全局變量tmp，但是在快級作用域內let又聲明了一個局部變量tmp，導致綁定了這個快級作用域；因此打印出tmp會報錯。

4. 不允許重復聲明

let 不允許在相同作用域內，重復聲明同一個變量。如下代碼排錯

function a() {
  let a = 10;
  var a = 1;
  console.log(a);
}
a();
function a() {
  let a1 = 10;
  let a1 = 1;
  console.log(a1);
}
a();

也不能在函數內部重新聲明參數。

function func1(arg) {
  let arg; // 報錯
}
function func2(arg) {
  {
    let arg; // 不報錯
  }
}

ES6的塊級作用域

function f1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
} 
f1()

上面的代碼有2個代碼塊，都聲明了變量n，運行后輸出5，說明了外層代碼塊不受內層代碼塊的影響，如果使用了變量var，那么輸出的就是10；

二：const命令

const 聲明一個只讀的常量，一旦聲明，常量的值就不允許改變。如下代碼：

const a = 1; 
a = 2; 
console.log(a);  //報錯

也就是說 const 一旦聲明了變量，就必須初始化，不能留到以后賦值。如果使用const聲明一個變量，但是不賦值，也會報錯；如下代碼：

const aa;  // 報錯

2-1 const的作用域與let命令相同；只在聲明所在的塊級作用域內有效。

if (true) {
 const aa = 1;
} 
console.log(aa);  // 報錯

2-2 不可重復聲明 (和let一樣)

var message = "Hello!";
let age = 25;
// 以下兩行都會報錯
const message = "Goodbye!";
const age = 30;

但是對於復合類型的變量，比如數組，存儲的是一個地址，不可改變的是這個地址，即不能把一個地址指向另一個地址，但是對象本身是可變的，比如可以給它添加新的屬性；如下代碼：

const a33 = [];
a33.push('Hello'); // 可執行
a33.length = 0;    // 可執行
a33 = ['55']  // 報錯

回到頂部

2.變量的解構賦值

ES6可以寫成這樣

var [a, b, c] = [1, 2, 3];
console.log(a);
console.log(b);
console.log(c);

可以從數組中提取值，按照對應位置，對變量賦值。下面是一些使用嵌套數組進行解構的列子；

let [foo2, [[bar2], baz]] = [1, [[2], 3]];
console.log(foo2);  // 1
console.log(bar2);  // 2
console.log(baz);  // 3

let [, , third] = ['foo', 'bar', 'baz'];
console.log(third); // baz

let [x1, , y1] = [1, 2, 3];
console.log(x1); // 1
console.log(y1); // 3

let [head, ...tail] = [1, 2, 3, 4];
console.log(head); // 1
console.log(tail); // [2, 3, 4]

let [x2, y2, ...z2] = ['a'];
console.log(x2); // 'a'
console.log(y2); // undefined
console.log(z2); // []

var [foo3] = [];
var [bar4, foo4] = [1];
console.log(foo3);  // undefined
console.log(bar4);  // 1
console.log(foo4);  // undefined

另一種情況是不完全解構，即等號左邊的模式，只匹配一部分等號右邊的數組；如下代碼：

let [x3, y3] = [1, 2, 3];
console.log(x3); // 1
console.log(y3); // 2

let [a2, [b2], d2] = [1, [2, 3], 4];
console.log(a2); // 1
console.log(b2); // 2
console.log(d2); // 4

如果左邊是數組，右邊不是一個數組的話，那么將會報錯。

// 報錯
let [f] = 1;
let [f] = false;
let [f] = NaN;
let [f] = undefined;
let [f] = null;
let [f] = {};

2. 默認值

解構賦值允許指定默認值。如下代碼：

var [foo = true] = [];
console.log(foo); // true

var [x, y = 'b'] = ['a'];
console.log(x); // a
console.log(y); // b

var [x2, y2 = 'b'] = ['a', undefined];
console.log(x2); // a
console.log(y2); // b

ES6內部使用嚴格相等運算符(===)，判斷一個位置是否有值，所以，如果一個數組成員不嚴格等於undefined，默認值是不會生效的。

var [x = 1] = [undefined];
console.log(x); // 1

var [x2 = 2] = [null];
console.log(x2); // null

上面代碼中，如果一個數組成員是null，默認值就不會生效的；因此x2為null；

但是如果默認值是一個表達式，那么這個表達式是惰性求值的，即只有在用到的時候，才會求值的。如下代碼：

function f() {
  console.log('aaa');
}
let [x2 = f()] = [1]; 
console.log(x2); // 1

3. 對象的解構賦值

解構不僅可以用於數組，還可以用於對象。

var { foo, bar } = { foo: 'aaa', bar: 'bbbb'};
console.log(foo); // aaa
console.log(bar); // bbbb

對象的解構與數組有一個重要的不同，數組的元素是按順序排序的，變量的取值是由他的位置決定的，而對象的屬性沒有順序的，變量必須和屬性同名，才能取到正確的值.

var { baz } = { foo: "aaa", bar: "bbb" };
console.log(baz); // undefined

4. 字符串的解構賦值

字符串被轉換成了一個類似數組的對象。

const [a, b, c, d, e] = 'hello';
console.log(a); // h
console.log(b); // e
console.log(c); // l
console.log(d); // l
console.log(e); // o

類似數組的對象有一個length屬性，還可以對這個對象進行解構賦值。

let {length: len} = 'hello';
console.log(len); // 5

5. 函數參數的解構賦值

函數參數也可以使用解構賦值，如下代碼：

function add([x, y]) {
  return x + y;
}
console.log(add([1, 2])); // 3

function move({x = 0, y = 0} = {}) {
  return [x, y];
}
console.log(move({x:3, y:8})); // [3, 8]
console.log(move({x: 3})); // [3, 0];
console.log(move({})); // [0, 0]
console.log(move()); // [0, 0]

但是下面的寫法會得到不一樣的結果，如下代碼：

function move({x, y} = {x: 0, y: 0}) {
  return [x, y];
} 

console.log(move({x: 3, y: 8})); // [3, 8]
console.log(move({x:3})); // [3, undefined]

因為move函數指定的參數有默認值，而不是給變量x和y指定默認值，所以會得到與前一種寫法不同的結果；

5.變量解構的用途

5-1 交換變量的值

[x, y] = [y, x];

從函數返回多個值

函數只能返回一個值，如果需要返回多個值，只能將他們放在數組或者對象里面返回，但是有了解構賦值，取出這些值就非常方便了；

// 返回一個數組
function example() {
  return [1, 2, 3];
}
var [a, b, c] = example();
console.log([a, b, c]); // [1, 2, 3]
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

// 返回一個對象
function example2() {
  return {
    foo: 1,
    bar: 2
  }
}
var {foo, bar} = example2();
console.log(foo); // 1
console.log(bar); // 2

5-2 函數參數的定義

解構賦值可以方便地將一組參數與變量名對應起來

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

// 參數是一組無次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});

5-3 提取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-4. 函數參數的默認值，如下代碼：

function move({x = 0, y = 0} = {}) {
  return [x, y];
}
console.log(move({x:3, y:8})); // [3, 8]
console.log(move({x: 3})); // [3, 0];
console.log(move({})); // [0, 0]
console.log(move()); // [0, 0]

5-5 遍歷map結構如下代碼：

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

5-6 輸入模塊的指定方法

加載模塊的時候，往往需要指定輸入那些方法，解構賦值可以做這一點

const { Afun, Bfun } = require('./A')

回到頂部

3.數組的擴展

1. Array.from() 將類數組對象轉化為真正的數組。

let arrayLike = {
  '0': 'a',
  '1': 'b',
  '2': 'c',
  length: 3
};

// ES5
var arr1 = [].slice.call(arrayLike); 
console.log(arr1); // ['a','b','c'];

// ES6的寫法
let arr2 = Array.from(arrayLike);
console.log(arr2);  // ['a', 'b', 'c']

// 對於類似數組的對象是DOM操作返回的NodeList集合，以及函數內部的arguments對象。
// Array.from都可以將它們轉為真正的數組。
let doms = document.querySelectorAll('p');
Array.from(doms).forEach(function(p) {
  console.log(p); // 打印dom節點
});
// 上面的代碼中，querySelectorAll方法返回一個類似的數組對象，只有將該返回類似數組對象轉化為真正的數組對象，才能使用forEach.
// arguments 對象
function foo(arrs) {
  var args = Array.from(arguments);
  console.log(args);  // ['aa']
}
var obj = {
  "0": 'aa'
};
foo(obj);

// 只要部署了Iterator接口的數據結構，比如字符串和Set結構，都可以使用Array.from將其轉為真正的數組。
// 字符串
console.log(Array.from('hello')); // ['h', 'e', 'l', 'l', 'o']
// set結構的
let namesSet = new Set(['a', 'b']);
console.log(Array.from(namesSet)); // ['a', 'b'];

// 如果參數是一個真正的數組，那么使用Array.from 也會返回一個真正的數組。
console.log(Array.from([1, 2, 3])); // [1, 2, 3]

// 擴展運算符，也可以將其轉化為數組的，如下
// arguments對象
function foo() {
  var args = [...arguments];
  console.log(args); // []
}
foo();

// NodeList對象
console.log(...document.querySelectorAll('p')); // 打印dom節點

// Array.from 還可以接受第二個參數，作用類似於數組的map方法，用來對每個元素進行處理，將處理后的值放入返回的數組。
// 形式如下：
console.log(Array.from([1, 2, 3], (x) => x * x));  // [1, 4, 9]
// 等價如下：
console.log(Array.from([1, 2, 3]).map(x => x * x)); // [1, 4, 9]

// 下面可以將數組中布爾值的成員轉為0
console.log(Array.from([1, , 2, , 3], (n) => n || 0)); // [1, 0, 2, 0, 3]

2. Array.of() 用於將一組值，轉換為數組。

console.log(Array.of(3, 10, 8)); // [3, 10, 8];
console.log(Array.of(3)); // [3]
console.log(Array.of(3).length); // 1

console.log(Array.of()); // []
console.log(Array.of(undefined)); // [undefined]
console.log(Array.of(1)); // [1]
console.log(Array.of(1, 2)); // [1, 2]

// Array.of方法可以使用下面的代碼模擬實現。
function ArrayOf() {
  return [].slice.call(arguments);
}

3. 數組實例 copyWithin()

該實例方法，在當前數組內部，將指定位置的成員復制到其他位置上(會覆蓋原有的成員)，然后返回當前的數組。

Array.prototype.copyWithin(target, start = 0, end = this.length)

target (必須)：從該位置開始替換數據

start （可選): 從該位置開始讀取數據，默認為0，如果為負值，表示倒數。

end(可選): 到該位置前停止讀取數據，默認等於數組的長度，如果為負值，表示倒數。

console.log([1, 2, 3, 4, 5].copyWithin(0, 3)); // [4, 5, 3, 4, 5]
// 將3號位復制到0號位
console.log([1, 2, 3, 4, 5].copyWithin(0, 3, 4)); // [4, 2, 3, 4, 5]

// -2 相當於倒數第二個數字，-1相當於倒數最后一位
console.log([1, 2, 3, 4, 5].copyWithin(0, -2, -1)); // [4, 2, 3, 4, 5]

4. 數組實例的 find()和findIndex()

find()方法用於找出第一個符合條件的數組成員，該參數是一個回調函數，所有的數組成員依次執行該回調函數，直到找到第一個返回值為true的成員，

然后返回該成員，如果沒有找到的話，就返回undefined console.log([1, 4, 5, 10].find((n) => n > 5)); // 10

console.log([1, 4, 5, 10].find(function(value, index, arrs){
  return value > 9;
}));  // 10

findIndex()方法返回第一個符合條件的數組成員的位置，如果沒有找到，就返回-1

console.log([1, 5, 10, 15].findIndex(function(value, index, arrs) {
  return value > 9; // 2 
}));

5. 數組實例 fill()

fill方法使用給定值，填充一個數組

// fill 方法用於空數組初始化非常方便，數組中已有的元素，會被全部抹去
console.log(['a', 'b', 'c'].fill(7)); // [7, 7, 7]

// fill方法接收第二個和第三個參數，用於指定填充的起始位置和結速位置
console.log(['a', 'b', 'c'].fill(7, 1, 2)); // ['a', '7', 'c']

回到頂部

4.函數的擴展

1. 函數參數的默認值

ES6允許為函數的參數設置默認值，即直接寫在參數定義的后面。

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

function Point(x = 0, y = 0) {
  this.x = x;
  this.y = y;
}
var p = new Point();
console.log(p.x); // 0
console.log(p.y); // 0

ES6的寫法好處：

1. 閱讀代碼的人，可以立刻意識到那些參數是可以省略的，不用查看函數體或文檔。

2. 有利於將來的代碼優化，即使未來的版本在對外接口中，徹底拿調這個參數，也不會導致以前的代碼無法執行；

參數變量默認聲明的，所以不能用let或const再次聲明。

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

2-2. 與解構賦值默認值結合使用。

參數默認值可以與解構賦值的默認值，結合起來使用。

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(); // Uncaught TypeError: Cannot read property 'x' of undefined

只有當函數的參數是一個對象時，變量x與y 才會通過解構賦值而生成，如果函數調用的不是一個對象的話，變量x就不會生成，從而導致出錯;

下面是另一個對象的解構賦值的列子

function fetch(url, { body = '', method='GET', headers = {}}) {
  console.log(method);
}
fetch('http://www.baidu.com', {}); // 'GET'
fetch('http://www.baidu.com'); // 報錯  Uncaught TypeError: Cannot read property 'body' of undefined

上面的代碼不能省略第二個參數，如果結合函數參數的默認值，就可以省略第二個參數。這樣就出現了雙重默認值；如下代碼：

function fetch(url, { method = 'GET', body = '' } = {} ) {
  console.log(method);
}
fetch('http://www.baidu.com'); // GET

再看下面兩種寫法有什么差別

// 寫法1
function m1({x = 0, y = 0} = {}) {
  return [x, y];
}

// 寫法2
function m2({x, y} = { x: 0, y: 0}) {
  return [x, y];
}

// 函數沒有參數的情況下 
console.log(m1());  // [0, 0]
console.log(m2());  // [0, 0]

// x 和 y都有值的情況下
console.log(m1({x:3, y: 8}));   // [3, 8]
console.log(m2({x:3, y: 8}));   // [3, 8]

// x有值，y無值的情況下 
console.log(m1({x:3}));  // [3, 0]
console.log(m2({x: 3}));  // [3, undefined]

// x 和 y都無值的情況下 
console.log(m1({}))  // [0, 0]
console.log(m2({}))  // [undefined, undefined]

console.log(m1({z:3}));  // [0, 0]
console.log(m2({z:3}));  // [undefined, undefined]

上面兩種寫法都對函數的參數設定了默認值，區別是寫法一函數的默認值是空對象，但是設置了對象解構賦值的默認值，寫法2函數的參數的默認值是一個有具體屬性的對象，

但是沒有設置對象解構賦值的默認值。

3. 參數默認值的位置

一般情況下，定義了默認值的參數，應該是函數的尾參數，因為這樣比較容易看出來，到底省略了那些參數，如果非尾部參數設置默認值，這個參數是無法省略的。

// demo 1
function f(x = 1, y) {
  return [x, y];
}
console.log(f()); // [1, undefined]
console.log(f(2)); // [2, undefined]
f(, 1); // 報錯

// demo 2
function f(x, y = 5, z) {
  return [x, y, z];
}
console.log(f());  // [undefined, 5, undefined]
console.log(f(1));  // [1, 5, undefined]
console.log(f(1, , 2)); // 報錯
console.log(f(1, undefined, 2));  // [1, 5, 2]

function foo(x = 5, y = 6) {
  console.log(x, y);
}
foo(undefined, null);  // 5, null

4. 函數的作用域

如果參數默認值是一個變量，則該變量所處的作用域，與其他變量的作用域規則是一樣的，則先是當前作用域，再是全局作用域。

var x = 1;
function f(x, y = x) {
  console.log(y);
}
console.log(f(2));  // 2

如果在調用時候，函數作用域內部的變量x沒有生成，結果不一樣。

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

但是如果，全局變量x不存在的話，就會報錯

function f( y = x) {
  let x = 2;
  console.log(y);
}
f(); // 報錯 x is not defined

5. rest參數

ES6引入rest參數(形式為 "...變量名")，用於獲取函數的多余參數，rest參數搭配的變量是一個數組，該變量將多余的參數放入一個數組中。

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

rest參數中的變量代表一個數組，所以數組特有的方法都可以用於這個變量。下面是一個利用rest參數改寫數組push方法的例子。

function push(array, ...items) {
  items.forEach(function(item) {
    array.push(item);
    console.log(item);
  });
}

var a = [];
push(a, 1, 2, 3);  // 1,2,3

注意，rest參數之后不能再有其他參數（即只能是最后一個參數），否則會報錯。

// 報錯
function f(a, ...b, c) {
  // ...
}

6. 擴展運算符

擴展運算符(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) {
  return x + y;
}

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

上面的代碼使用了擴展運算符，該運算符是一個數組，變為參數序列。

替代數組的apply方法

擴展運算符可以展開數組，所以不需要apply方法，將數組轉為函數的參數。

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

// ES5的寫法
console.log(Math.max.apply(null, [14, 3, 77]))  // 77
// ES6的寫法
console.log(Math.max(...[14, 3, 77]))  // 77
// 等同於
console.log(Math.max(14, 3, 77));  // 77

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

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

擴展運算符的運用

1. 合並數組

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

// ES5 合並數組
var rets1 = arr1.concat(arr2, arr3);
console.log(rets1); // ["a", "b", "c", "d", "e"]

// ES6合並數組
var rets2 = [...arr1, ...arr2, ...arr3];
console.log(rets2); // ["a", "b", "c", "d", "e"]

2. 與解構賦值組合

擴展運算符可以與解構賦值結合起來，用於生成數組。

const [first, ...rest1] = [1, 2, 3];
console.log(first); // 1
console.log(rest1); // [2, 3]

const [first2, ...rest2] = [];
console.log(first2); // undefined
console.log(rest2); // []

const [first3, ...rest3] = ['foo'];
console.log(first3); // foo
console.log(rest3); // []

如果將擴展運算符用於數組賦值，只能放在參數的最后一位，否則會報錯

const [...butLast, last] = [1, 2, 3, 4, 5]; // 報錯
const [first, ...middle, last] = [1, 2, 3, 4, 5]; // 報錯

擴展運算符可以將字符串轉為真正的數組

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

var f = v => v;
console.log(f(2)); // 2

// 等價於如下函數
var f = function(v) {
  return v;
}

// 如果箭頭函數不需要參數或需要多個參數的話，可以使用圓括號代表參數的部分
var f2 = () => 5;
// 等價於如下
var f = function() {
  return 5;
}

var sum = (n1, n2) => n1 + n2;

console.log(sum(1, 2)); // 3

// 等價於 如下函數
var sum = function(n1, n2) {
  return n1 + n2;
}

//  或者也可以這樣寫 
var sum2 = (n1, n2) => {
  return n1 + n2;
}
console.log(sum2(2, 3)); // 5

// 如果要返回一個對象的話， 需要使用圓括號括起來
var getData = id => ({id: id});
console.log(getData(1)); // {id: 1}

// 正常函數的寫法 
[1, 2, 3].map(function(x) {
  return x * x;
});

// 箭頭函數的寫法 
[1, 2, 3].map(x => x * x);

7. 函數參數的尾逗號

ECMASCRIPT2017 允許函數的最后一個參數有尾逗號。

// ES217
function douhao(a, b,) {
  // 正常
}
console.log(douhao(1,2,))

回到頂部

5.對象的擴展

1. 屬性的簡潔表示法

var foo = 'bar';
var baz = {foo};
console.log(baz); // {foo: 'bar'}

// 等價於 
var baz = {foo: foo};

// ES6 允許在對象之中，直接寫變量，這時，屬性名為變量名，屬性值為變量值；如下：
function f(x, y) {
  return {x, y};
}
console.log(f(5, 6)); // {x: 5, y: 6}

// 除了屬性簡寫，方法也可以簡寫
var o = {
  method() {
    return 'Hello';
  }
};
// 上面的代碼等價於如下代碼：
var o = {
  method: function() {
    return 'Hello';
  }
};
// 如下代碼：
var birth = '2017/1/1';
var Person = {
  name: '張三',
  birth,
  hello() {
    console.log('我的名字是', this.name);
    console.log('我的生日是', this.birth);
  }
}; 
Person.hello(); // 我的名字是 張三, 生日是 2017/1/1

// 用於函數的返回值，非常方便
function getPoint() {
  var x = 1;
  var y = 10;
  return {x, y};
}
console.log(getPoint());// {x:1, y:10}

2. 屬性名表達式

// ES6 允許字面量 定義對象時，用作為對象的屬性名，即把表達式放在括號內
let propKey = 'foo';
var obj = {
  propKey: true,
  ['a' + 'bc']: 123
}
console.log(obj.propKey); // true
console.log(obj.abc); // 123

var lastWord = 'last world';
var a = {
  'first world': 'hello',
  [lastWord]: 'world'
};
console.log(a['first world']);  // hello
console.log(a['last world']);   // world
console.log(a[lastWord]);  // world

// 表達式還可以定義方法名
let obj2 = {
  ['h' + 'ello']() {
    return 'hi';
  }
}
console.log(obj2.hello()); // hi

3. Object.is()

ES5比較兩個值是否相等，只有兩個運算符，相等運算符("==")和嚴格相等運算符("==="), 他們都有缺點，前者會自動轉換數據類型，后者NAN不等於自身，以及+0 等於 -0；ES6有該方法是同值相等算法，Object.is()是比較兩個值是否嚴格相等，和('===')是一個含義

console.log(Object.is('foo', 'foo')); // true

console.log(Object.is({}, {}));  // false

console.log(+0 === -0) // true
console.log(NaN === NaN); // false

console.log(Object.is(+0, -0)); // false
console.log(Object.is(NaN, NaN)); // true

4. Object.assign()

// Object.assign()方法用於對象的合並，將源對象的所有可枚舉屬性，復制到目標對象中。第一個參數是目標對象，后面的參數都是源對象。
var target = { a: 1 };
var s1 = { b: 2};
var s2 = { c: 3};
Object.assign(target, s1, s2);
console.log(target); // {a:1, b:2, c:3}

// 注意：如果目標對象與源對象有同名屬性，或多個源對象有同名屬性，則后面的屬性會覆蓋前面的屬性。
var target2 = { a: 1, b: 1};
var s11 = { b:2, c:2 };
var s22 = {c:3};
Object.assign(target2, s11, s22);
console.log(target2);  // { a: 1, b:2, c:3 }

擴展運算符(...) 也可以用於合並兩個對象，比如如下代碼：

let ab = { ...a, ...b };

等價於

let ab = Object.assign({}, a, b);

// 如果該參數不是對象，則會先轉成對象，然后返回
console.log(typeof Object.assign(2)); // 'object'

由於undefined和null無法轉成對象，所以如果它們作為參數，就會報錯。

Object.assign(undefined) // 報錯
Object.assign(null) // 報錯

// Object.assign 方法實現的是淺拷貝，而不是深拷貝，如果對象某個屬性值發生改變，那么合並對象的屬性值也會發生改變。如下代碼：
var obj1 = {a: {b: 1}};
var obj2 = Object.assign({}, obj1);
obj1.a.b = 2;
console.log(obj2.a.b); // 2

// 同名屬性覆蓋
var target = { a: {b: 'c', d: 'e' }};
var source = {a: {b: 'hello'}};
console.log(Object.assign(target, source)); // { a: {b: 'hello'}}

// Object.assign 可以用來處理數組，但是會把數組視為對象, 
console.log(Object.assign([1,2,3], [4, 5])); // [4, 5, 3]
// 上面代碼中，Object.assign把數組視為屬性名0,1,2的對象，因此原數組的0號屬性4覆蓋了目標數組的0號屬性。

5. 常見用途

5-1 為對象添加屬性

// 如下代碼：
class Point {
  constructor(x, y) {
    Object.assign(this, {x, y});
  }
}
console.log(new Point(1, 2)); // {x:1, y:2}

5-2 為對象添加方法

// 2. 為對象添加方法
var A = function() {};
A.prototype = {
  init: function() {}
}
Object.assign(A.prototype, {
  test(a, b) {

  },
  test2() {

  }
});

var AInter = new A();
console.log(AInter);  // {init: function(){}, test: function(a, b){}, test2: function(){} }

5-3 克隆對象

// 3. 克隆對象 將原始對象拷貝到一個空對象內，就得到了原始對象的克隆
function clone(origin) {
  return Object.assign({}, origin);
}
var obj = {
  name: 'kongzhi'
};
console.log(clone(obj)); // {name: 'kongzhi'}

采用這種方法克隆，只能克隆原始對象自身的值，不能克隆它繼承的值，如果想要保持原型繼承，如下代碼：

function clonePrototype(origin) {
  let originProto = Object.getPrototypeOf(origin);
  return Object.assign(Object.create(originProto), origin);
}
var AA = {
  init: function() {

  }
}
AA.prototype = {
  BB: function() {

  }
}
var AAP = clonePrototype(AA);
console.log(AAP);  // {init: function(){}, prototype:xx}

6-1 Object.keys() 對象轉為數組

// ES5引入了Object.keys方法，返回一個數組(對象轉為數組)，成員是參數對象自身的（不含繼承的）所有可遍歷屬性的鍵名。
var obj1 = {
  foo: 'bar',
  baz: 42
};
console.log(Object.keys(obj1));  // ['foo', 'baz']

6-2 Object.values()

該方法返回一個數組，成員是參數對象自身(不含繼承的)所有可遍歷屬性的鍵值。

var obj2 = {
  foo: 'bar',
  baz: 42
};

console.log(Object.values(obj2)); // ["bar", 42];

// 如果參數不是對象，Object.values 會先將其轉為對象。最后返回空數組
console.log(Object.values(42)); // []
console.log(Object.values(true)); // []

6-3 Object.entries()

該方法返回一個數組，成員是參數自身(不含繼承的)所有可遍歷屬性的鍵值對數組。

var obj3 = { foo: 'bar', baz: 42};
console.log(Object.entries(obj3)); // [ ["foo", "bar"], ["baz", 42] ]

回到頂部

6.set 和 Map的數據結構

set類似於數組，但是成員值都是唯一的，沒有重復的值。

set 有如下方法

1. add(value): 添加某個值，返回Set結構本身

2. delete(value): 刪除某個值，返回一個布爾值，表示刪除是否成功。

3. has(value): 返回一個布爾值，表示該值是否為Set的成員。

4. clear() 清除所有的成員，沒有返回值。

var s = new Set();
[2, 3, 5, 4, 5, 2, 2].map(x => s.add(x));
for (let i of s) {
  console.log(i); // 2, 3, 5, 4
}

// Set函數可以接受一個數組(或類似數組的對象)作為參數，用來初始化。
var set = new Set([1, 2, 3, 4, 4]);
console.log([...set]); // [1, 2, 3, 4]

var items = new Set([1, 2, 3, 4, 4, 5, 6, 5]);
console.log(items.size); // 6

function getElems() {
  return [...document.querySelectorAll('p')];
}
var s2 = new Set(getElems());
console.log(s2.size); // 2

去除數組重復的成員

var arrs = [1, 2, 3, 1, 3, 4];
console.log([...new Set(arrs)]); // [1, 2, 3, 4]

// 向Set加入值的時候，不會發生類型轉換，因此 5 和 "5" 是兩個不同的值，但是NaN等於NaN, 如下：
let s3 = new Set();
let a = NaN;
let b = NaN;
s3.add(a);
s3.add(b);
console.log(s3); // {NaN}

// 但是兩個對象是不相等的
let s4 = new Set();
s4.add({});
console.log(s4.size); // 1

s4.add({});
console.log(s4.size); // 2

var s5 = new Set();
s5.add(1).add(2).add(2);
console.log(s5.size); // 2
console.log(s5.has(1)); // true
console.log(s5.has(2)); // true
console.log(s5.has(3)); // false
s5.delete(2);
console.log(s5.has(2)); // false

// Array.from 方法也可以將Set結構轉為數組
var items2 = new Set([1, 2, 3, 4, 5]);
var array = Array.from(items2);
console.log(array); // [1, 2, 3, 4, 5]

去除數組重復的另外一種方法

function unique(array) {
  return Array.from(new Set(array));
}
console.log(unique([1, 2, 2, 3])); // [1, 2, 3]

遍歷操作

Set結構的實列有四個遍歷方法

1. keys() 返回鍵名的遍歷器。

2. values() 返回鍵值的遍歷器。

3. entries() 返回鍵值對的遍歷器。

4. forEach() 使用回調函數遍歷每個成員。

let set = new Set(['red', 'green', 'blue']);
for (let item of set.keys()) {
  console.log(item); // red, green blue
}

for (let item of set.values()) {
  console.log(item); // red, green blue
}

for (let item of set.entries()) {
  console.log(item); // ['red', 'red']  ['green', 'green'] ['blue', 'blue']
}

// Set結構的實列默認可遍歷，它的默認遍歷生成函數就是它的values方法
// 因此可以省略values方法，直接使用for.. of 循環遍歷Set
let set2 = new Set(['red', 'green', 'blue']);
for (let x of set2) {
  console.log(x); // red green blue
}

// forEach()方法
let s3 = new Set([1, 2, 3]);
s3.forEach((value, key) => console.log(value * 2)); // 2 4 6

// 遍歷的應用 
// 擴展運算符(...) 內部使用 for...of循環，
let s6 = new Set(['a', 'b', 'c']);
let arr6 = [...s6];
console.log(arr6); // ['a', 'b', 'c']

// 使用Set可以很容易地實現並集， 交集和差集
let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);
// 並集
let union = new Set([...a, ...b]);
console.log(union); // {1, 2, 3, 4}

// 交集
let jj = new Set([...a].filter(x => b.has(x)));
console.log(jj); // {2, 3}

// 差集
let diff = new Set([...a].filter(x => !b.has(x)));
console.log(diff); // {1}

Map

// Object結構提供了 '字符串-值'的對應，Map結構提供了值-值的對應，但是'鍵'的范圍不限於字符串，各種類型的值(包括對象)都可以當做鍵

var m = new Map();
var o = {p: 'hello world'};

m.set(o, 'content');
console.log(m.get(o)); // 'content'
console.log(m.has(o)); // true
console.log(m.delete(o)); // true
console.log(m.has(o)); // false

// 作為構造函數，Map也可以接受一個數組作為參數，該數組的成員是一個個表示鍵值對的數組。
var map = new Map([
  ['name', '張三'],
  ['title', 'aa']
])
console.log(map.size); // 2
console.log(map.has('name')); // true
console.log(map.get('name')); // 張三
console.log(map.has('title')); // true
console.log(map.get('title')); // aa

// 字符串true 和 布爾值true是兩個不同的鍵
var m2 = new Map([
  [true, 'foo'],
  ['true', 'bar']
]);
console.log(m2.get(true)); // 'foo'
console.log(m2.get('true')); // 'bar'

// 如果對同一個鍵多次賦值，后面的值將覆蓋前面的值
let m3 = new Map();
m3.set(1, 'aaa').set(1, 'bbb');
console.log(m3.get(1)); // 'bbb'

// 如果讀取一個未知的鍵，則返回undefined
console.log(new Map().get('aaaaassd')); // undefined

// 對同一個對象引用是讀取不到值的，因為對象是比較內存地址的
var m4 = new Map();
m4.set(['a'], 555);
console.log(m4.get(['a'])); // undefined

m4.set(NaN, 123);
console.log(m4.get(NaN)); // 123
m4.set(-0, 123);
console.log(m4.get(+0)); // 123

// map 提供三個遍歷器生成函數和一個遍歷方法
// 1. keys()， 2. values(), 3. entries(). 4. forEach() Map遍歷的順序就是插入的順序
let m5 = new Map([
  ['a', 'no'],
  ['y', 'yes']
]);
for (let key of m5.keys()) {
  console.log(key); // a，y
}

for(let value of m5.values()) {
  console.log(value); // 'no', 'yes'
}

for (let item of m5.entries()) {
  console.log(item[0], item[1]); // 'a' 'no' 'y' 'yes'
}

// Map結構的默認遍歷器接口 (Symbol.iterator屬性) 就是 entries方法， map[Symbol.iterator] === map.entries
// Map結構轉為數組結構，比較快速的方法可以使用擴展運算符(...)
let m6 = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three']
]);
console.log([...m6.keys()]); // [1, 2, 3]

console.log([...m6.values()]); // ['one', 'two', 'three']

console.log([...m6.entries()]); //[[1, 'one'], [2, 'two'], [3, three]]

console.log([...m6]); //[[1, 'one'], [2, 'two'], [3, three]]

// 結合數組的map方法和filter方法，可以實現map的遍歷和過濾
let m0 = new Map().set(1, 'a').set(2, 'b').set(3, 'c');
let m00 = new Map([...m0].filter(([k, v]) => k < 3)); // {1 => 'a', 2 => 'b'}

let m11 = new Map([...m0].map(([k, v]) => [k*2, '_'+v])); 
// {2 => '_a', 4 => '_b', 6 => '_c'}

// Map轉為數組
let amap = new Map().set(true, 7).set({foo: 3}, ['abc']);
console.log([...amap]); // [ [true, 7], [{foo: 3}, ['abc'] ] ]

// 數組轉為Map
console.log(new Map([[true, 7],[{foo:3}, ['abc']]]));// Map {true => 7, Object {foo: 3} => ['abc']}

// Map轉為對象
function strMapToObj(strMap) {
  let obj = Object.create(null);
  for (let [k, v] of strMap) {
    obj[k] = v;
  }
  return obj;
}
let myMap = new Map().set('yes', true).set('no', false);
console.log(strMapToObj(myMap)); // {yes: true, no: false}

// 對象轉為map
function objToStrMap(obj) {
  let strMap = new Map();
  for (let k of Object.keys(obj)) {
    strMap.set(k, obj[k]);
  }
  return strMap;
}
console.log(objToStrMap({yes: true, no: false})); // [ ['yes', ture], ['no', false]]

// Map轉為json
// Map轉為JSON要區分二種情況，一種情況是,Map的鍵名都是字符串，這時可以選擇轉為對象的JSON
function strMapToJson(strMap) {
  return JSON.stringify(strMapToObj(strMap));
}
let myMap2 = new Map().set('yes', true).set('no', false);
console.log(strMapToJson(myMap2)); // '{"yes": true, "no": false}'

// 第二種情況是，Map的鍵名有非字符串，這時候可以選擇轉為數組的JSON
function mapToArrayJson(map) {
  return JSON.stringify([...map]);
}
let myMap3 = new Map().set(true, 7).set({foo: 3}, ['abc']);
console.log(mapToArrayJson(myMap3)); // '[[true, 7], [{"foo": 3}, ["abc"]]]'

// JSON轉為Map  
// 正常情況下，所有鍵名都是字符串
function jsonToStrMap(jsonStr) {
  return objToStrMap(JSON.parse(jsonStr));
}
console.log(jsonToStrMap('{"yes": true, "no": false}')); // Map {'yes' => true, 'no' => false}

// 有一種特殊情況，整個JSON就是一個數組，且每個數組成員本身，又是一個有兩個成員的數組。這時，它可以一一對應地轉為Map。這往往是數組轉為JSON的逆操作。
function jsonToMap(jsonStr) {
  return new Map(JSON.parse(jsonStr));
}

jsonToMap('[[true,7],[{"foo":3},["abc"]]]')
// Map {true => 7, Object {foo: 3} => ['abc']}

回到頂部

7.class

ES6的class

// ES5 定義類
function Point(x, y) {
  this.x = x;
  this.y = y;
}
Point.prototype.toString = function() {
  return '(' + this.x + ', ' + this.y + ')';
}

var p = new Point(1, 2);
console.log(p);

// ES6的語法,方法之間不需要使用逗號分隔
class Point2 {
  // 構造函數
  constructor(x, y) {
    
    this.x = x;
    this.y = y;
  }
  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

var p2 = new Point2(1, 2);
console.log(p2);

// 類的數據類型就是函數，類本身就指向構造函數
class Point3 {

}
console.log(typeof Point3); // 'function'
console.log(Point === Point.prototype.constructor); // true

// ES6 和 ES5 定義原型的區別如下：
class Point4 {
  constructor(props) {
    
  }
  toString() {}
  toValue() {}
}
// 等價於如下ES5的代碼
Point4.prototype = {
  toString() {},
  toValue() {}
}

// 也可以使用Object.assign方法合並對象到原型去，如下代碼：
class Point5 {
  constructor(props) {
    
    // ...
  }
}
Object.assign(Point5.prototype, {
  toString() {},
  toValue() {}
});

class的繼承

// 父類
class Point {
  init(x, y) {
    console.log('x:'+x, 'y:'+y);
  }
}

// 子類繼承父類
class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y); // 調用父類的 constructor(x, y)
    this.color = color;
  }
}
var c = new ColorPoint(1, 2, 'red');
console.log(c.init(1, 2)); // 繼承父類，因此有init方法 x:1, y:2
console.log(c.color); // 'red'

// 子類必須在constructor方法中調用super方法，否則新建實例會報錯，這是因為子類沒有自己的this對象，而是繼承父類的this對象，
// 如果不調用super方法，子類就得不到this對象。如下代碼：
class Point2 {

}
class Color2 extends Point2 {
  constructor() {
    
  }
}
let cp = new Color2(); // 報錯

注意：在子類構造函數中，只有調用super之后，才可以使用this關鍵字，否則會報錯，只有super方法才能返回父類的實例。

Object.getPrototypeOf()

該方法可以用來從子類上獲取父類；如下代碼：

// 父類
class Point {
  init(x, y) {
    console.log('x:'+x, 'y:'+y);
  }
}

// 子類繼承父類
class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y); // 調用父類的 constructor(x, y)
    this.color = color;
  }
}
console.log(Object.getPrototypeOf(ColorPoint) === Point); // true

Class的靜態方法

// 如果在一個方法中，加上static關鍵字，就表示該方法不會被實例繼承，而是直接通過類來調用
class Foo {
  static init() {
    return 'hello'
  }
}
console.log(Foo.init()); // 'hello'

var foo = new Foo();
console.log(foo.init()); // 報錯


// 父類的靜態方法，可以被子類繼承
class Foo {
  static init() {
    return 'hello';
  }
}
class Bar extends Foo {

}
console.log(Bar.init()); // 'hello'

// 靜態方法也可以從super對象上調用
class Foo2 {
  static init() {
    return 'world';
  }
}

class Bar2 extends Foo2 {
  static init2() {
    return super.init() + ', hello';
  }
}
console.log(Bar2.init2()); // world, hello

Class的靜態屬性和實例屬性

// 靜態屬性 其他的寫法不可以
class Foo {

}
Foo.prop = 1;
console.log(Foo.prop); // 1

// 類的實例屬性 可以使用等式，寫入類的定義之中
class MyClass {
  myProp = 42;
  constructor() {
    console.log(this.myProp); // 42
  }
}
// react 的寫法
class ReactCounter extends React.Component {
  state = {
    count: 0
  };
}
// 相當於如下的寫法
class ReactCounter2 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    }
  }
}

// 還可以使用如下新寫法
class ReactCounter3 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  state;
}

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 ES6新語法 ES6新語法之---函數擴展(7) 總結常見的ES6新語法特性。常用的ES6語法 ES6新增語法 ES6繼承語法 ES6基本語法入門 ES6 基本語法： javascript之ES6語法 ES6基本語法之let和const

ES6新語法

上面代碼中，計數器i只在for循環體內有效，在循環體外引用就會報錯。如下var代碼：

變量i是var聲明的，在全局范圍內都有效，所以每一次循環，新的i值都會覆蓋舊值，導致最后輸出的是最后一輪i的值。

但是如果使用let，聲明的變量僅在塊級作用域內有效，最后輸出的是6. 如下：

2. 不存在變量提升

let 不像var 那樣會發生 '變量提升' 現象，因此，變量需要先聲明然后再使用，否則報錯；

3. 暫時性死區

快級作用域內存在let命令，它所聲明的變量就綁定在這個區域，不再受外部影響；如下代碼：

上面代碼定於全局變量tmp，但是在快級作用域內let又聲明了一個局部變量tmp，導致綁定了這個快級作用域；因此打印出tmp會報錯。

4. 不允許重復聲明

let 不允許在相同作用域內，重復聲明同一個變量。如下代碼排錯

也不能在函數內部重新聲明參數。

ES6的塊級作用域

上面的代碼有2個代碼塊，都聲明了變量n，運行后輸出5，說明了外層代碼塊不受內層代碼塊的影響，如果使用了變量var，那么輸出的就是10；

二：const命令

const 聲明一個只讀的常量，一旦聲明，常量的值就不允許改變。如下代碼：

也就是說 const 一旦聲明了變量，就必須初始化，不能留到以后賦值。如果使用const聲明一個變量，但是不賦值，也會報錯；如下代碼：

2-1 const的作用域與let命令相同；只在聲明所在的塊級作用域內有效。

2-2 不可重復聲明 (和let一樣)

但是對於復合類型的變量，比如數組，存儲的是一個地址，不可改變的是這個地址，即不能把一個地址指向另一個地址，但是對象本身是可變的，比如可以給它添加新的屬性；如下代碼：

可以從數組中提取值，按照對應位置，對變量賦值。下面是一些使用嵌套數組進行解構的列子；

另一種情況是不完全解構，即等號左邊的模式，只匹配一部分等號右邊的數組；如下代碼：

如果左邊是數組，右邊不是一個數組的話，那么將會報錯。

2. 默認值

解構賦值允許指定默認值。如下代碼：

ES6內部使用嚴格相等運算符(===)，判斷一個位置是否有值，所以，如果一個數組成員不嚴格等於undefined，默認值是不會生效的。

上面代碼中，如果一個數組成員是null，默認值就不會生效的；因此x2為null；

但是如果默認值是一個表達式，那么這個表達式是惰性求值的，即只有在用到的時候，才會求值的。如下代碼：

3. 對象的解構賦值

解構不僅可以用於數組，還可以用於對象。

對象的解構與數組有一個重要的不同，數組的元素是按順序排序的，變量的取值是由他的位置決定的，而對象的屬性沒有順序的，變量必須和屬性同名，才能取到正確的值.

4. 字符串的解構賦值

字符串被轉換成了一個類似數組的對象。

類似數組的對象有一個length屬性，還可以對這個對象進行解構賦值。

5. 函數參數的解構賦值

函數參數也可以使用解構賦值，如下代碼：

但是下面的寫法會得到不一樣的結果，如下代碼：

因為move函數指定的參數有默認值，而不是給變量x和y指定默認值，所以會得到與前一種寫法不同的結果；

5.變量解構的用途

5-1 交換變量的值

從函數返回多個值

函數只能返回一個值，如果需要返回多個值，只能將他們放在數組或者對象里面返回，但是有了解構賦值，取出這些值就非常方便了；

5-2 函數參數的定義

解構賦值可以方便地將一組參數與變量名對應起來

5-3 提取JSON數據

5-4. 函數參數的默認值，如下代碼：

5-5 遍歷map結構 如下代碼：

5-6 輸入模塊的指定方法

加載模塊的時候，往往需要指定輸入那些方法，解構賦值可以做這一點

2. Array.of() 用於將一組值，轉換為數組。

3. 數組實例 copyWithin()

該實例方法，在當前數組內部，將指定位置的成員復制到其他位置上(會覆蓋原有的成員)， 然后返回當前的數組。

target (必須)：從該位置開始替換數據

start （可選): 從該位置開始讀取數據，默認為0，如果為負值，表示倒數。

end(可選): 到該位置前停止讀取數據，默認等於數組的長度，如果為負值，表示倒數。

4. 數組實例的 find()和findIndex()

find()方法用於找出第一個符合條件的數組成員，該參數是一個回調函數，所有的數組成員依次執行該回調函數，直到找到第一個返回值為true的成員，

findIndex()方法 返回第一個符合條件的數組成員的位置，如果沒有找到，就返回-1

5. 數組實例 fill()

fill方法使用給定值，填充一個數組

ES6允許為函數的參數設置默認值，即直接寫在參數定義的后面。

ES6的寫法好處：

1. 閱讀代碼的人，可以立刻意識到那些參數是可以省略的，不用查看函數體或文檔。

2. 有利於將來的代碼優化，即使未來的版本在對外接口中，徹底拿調這個參數，也不會導致以前的代碼無法執行；

參數變量默認聲明的，所以不能用let或const再次聲明。

2-2. 與解構賦值默認值結合使用。

參數默認值可以與解構賦值的默認值，結合起來使用。

只有當函數的參數是一個對象時，變量x與y 才會通過解構賦值而生成，如果函數調用的不是一個對象的話，變量x就不會生成，從而導致出錯;

下面是另一個對象的解構賦值的列子

上面的代碼不能省略第二個參數，如果結合函數參數的默認值，就可以省略第二個參數。這樣就出現了雙重默認值；如下代碼：

再看下面兩種寫法有什么差別

上面兩種寫法都對函數的參數設定了默認值，區別是寫法一函數的默認值是空對象，但是設置了對象解構賦值的默認值，寫法2函數的參數的默認值是一個有具體屬性的對象，

3. 參數默認值的位置

一般情況下，定義了默認值的參數，應該是函數的尾參數，因為這樣比較容易看出來，到底省略了那些參數，如果非尾部參數設置默認值，這個參數是無法省略的。

4. 函數的作用域

如果參數默認值是一個變量，則該變量所處的作用域，與其他變量的作用域規則是一樣的，則先是當前作用域，再是全局作用域。

如果在調用時候，函數作用域內部的變量x沒有生成，結果不一樣。

但是如果，全局變量x不存在的話， 就會報錯

5. rest參數

ES6引入rest參數(形式為 "...變量名")，用於獲取函數的多余參數，rest參數搭配的變量是一個數組，該變量將多余的參數放入一個數組中。

5-5 遍歷map結構如下代碼：

該實例方法，在當前數組內部，將指定位置的成員復制到其他位置上(會覆蓋原有的成員)，然后返回當前的數組。

findIndex()方法返回第一個符合條件的數組成員的位置，如果沒有找到，就返回-1

但是如果，全局變量x不存在的話，就會報錯

擴展運算符(spread) 是三個點 (...)，它好比rest參數的逆運算，將一個數組轉為用逗號分隔的參數序列。

上面的代碼使用了擴展運算符，該運算符是一個數組，變為參數序列。

注意：在子類構造函數中，只有調用super之后，才可以使用this關鍵字，否則會報錯，只有super方法才能返回父類的實例。