摘要：函數(shù)更好的尾遞歸優(yōu)化實(shí)現(xiàn)傳入類數(shù)組對象且每次的值在改變。尾遞歸實(shí)現(xiàn)改寫一般的遞歸函數(shù)確保最后一步只調(diào)用自身。返回一個(gè)遍歷器對象用循環(huán)遍歷。和循環(huán)它是一種遍歷器接口為各種不同的數(shù)據(jù)結(jié)構(gòu)提供統(tǒng)一的訪問機(jī)制。

//數(shù)組的解構(gòu)賦值
let [a, b, c] = [1, 2, 3];
a // 1
b // 2
c // 3

let [a, [[b], c]] = [1, [[2], 3]];
a // 1
b // 2
c // 3

let [a, , c] = [1, 2, 3];
a // 1
c // 3

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

//默認(rèn)值引用其他變量
let [x = 1, y = x] = []; // x = 1, y = 1
let [x = 1, y = x] = [2]; // x = 2, y = 2
let [x = 1, y = x] = [1, 2]; // x = 1, y = 2
let [x = y, y = 1] = []; // Error x用到默認(rèn)值y時(shí), y還沒被聲明。

//對象的解構(gòu)賦值
let { foo: one, bar: two } = { foo: "aaa", bar: "bbb" };
one // "aaa"
two // "bbb"
foo // foo is not defined 對象的解構(gòu)賦值是先找到同名屬性, 然后再賦值給對應(yīng)的變量

let { foo, bar } = { foo: "aaa", bar: "bbb" }; //簡寫
foo // "aaa"
bar // "bbb"

//指定默認(rèn)值
let { x, y = 5 } = { x: 1 };
x // 1
y // 5

let { x: y = 3 } = { x: 5 };
y // 5

//字符串的解構(gòu)賦值
const [a, b, c, d, e] = "hello";
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

let { length: len } = "hello";
len // 5

//函數(shù)參數(shù)的解構(gòu)賦值
[[1, 2], [3, 4]].map(([a, b]) => a + b );
// [3, 7]

//函數(shù)參數(shù)指定默認(rèn)值
function desc({ x = 0, y = 0} = {}) {
  return [x, y];
}
desc({ x: 3, y: 8 }) // [3, 8]
desc({ x: 3 }) // [3, 0]
desc({}) // [0, 0]
desc() // [0, 0]

//undefined觸發(fā)函數(shù)參數(shù)的默認(rèn)值
[1, undefined, 3].map((x = "2") => x);
// [1, 2, 3]

/*--常見用途--*/

//交換變量
let x = 1, y = 2;
[x, y] = [y, x];

//函數(shù)返回多個(gè)值
function example() {
  var obj = {
    foo: [1, 2, 3],
    bar: { d: 4, e: 5 }
  }
  return obj;
}
let { foo: [a, b, c], bar : { d, e } } = example();

//提取JSON數(shù)據(jù)
var json = {
  result: "success",
  info: {
    id: 22,
    name: "RetroAstro",
    avatar: "cream.png",
    detail: ["111", "222", "333"]
  }
}
let { result, info: { id , name, avatar, detail: [a, b, c] } } = json;

//遍歷Map接口
var map = new Map([
    ["first", "one"],
    ["second", "two"]
]);
for ( let [key, value] of map.entries() ) {
   console.log(key, value);
}

//常用實(shí)例
var obj = {
  username: "RetroAstro",
  avatar: "user.png",
  info() {
    var x = 1, y = 2;
    return x + y;
  }
}
var str = 
`

    ${obj.username}
    /g, ">");
      str += template[i];
   }
   return str;
}
var user = "";
safeHTML`
${user} has sent you a message.
`;
// "
 has sent you a message.
"

//函數(shù)參數(shù)默認(rèn)值
var $ = {
  ajax({
     method = "GET",
     url = "",
     async = true,
     headers = {},
     encType = "",
     data = "",
     dataType = "json",
     success = function() {},
     error = function() {}  
  }) {
     // start xhr ...
  }
}

//箭頭函數(shù)
var x = 5, y = 6;
    
var f = () => { return x + y }; 
//等價(jià)于
var f = () => x + y;
//等價(jià)于
var f = function() {
   return x + y;
}

//rest參數(shù)和變量解構(gòu)
var f = ({first, last}, ...values) => [first, values, last];
f({ first: "Retro", last: "Astro" }, 2, 3, 4, 5);
// ["Retro", [2, 3, 4, 5], "Astro"]
    
//箭頭函數(shù)中的this指向
function foo() {
  setTimeout(() => {
    console.log(this.id);
  }, 1000)
}
// 等價(jià)于
function foo() {
  var that = this;
  setTimeout(function() {
     console.log(that.id);
  }, 1000)
}
foo.call({id: "233"}); // 233

/*
 @ 箭頭函數(shù)里面根本沒有自己的this, 而是引用外層的this。
 @ 箭頭函數(shù)里沒有arguments, super, new.target 三個(gè)變量, 而指向外層函數(shù)對應(yīng)的值。
 */

//尾調(diào)用優(yōu)化
function fatorial(n) {
   if ( n === 1 ) { return 1; }
   return n * factorial(n-1); // 一般的遞歸, 保存多個(gè)調(diào)用記錄, 非常消耗內(nèi)存。
}

function factorial(n, total) {
   if ( n === 1 ) { return total; }
   return factorial(n-1, n * total); // 尾遞歸優(yōu)化
}

//蹦床函數(shù), 將遞歸執(zhí)行轉(zhuǎn)為循環(huán)執(zhí)行。
function trampoline(f) {
   while ( f && f instanceof Function ) {
      f = f();
   }
   return f;
}

function sum(x, y) {
   if (y > 0) {
      return sum.bind(null, x+1, y-1);
   } else {
      return x;
   }
}
trampoline(sum(1, 100000)); // 100001

//tco函數(shù) —— 更好的尾遞歸優(yōu)化實(shí)現(xiàn)
function tco(f) {
  
   var value;
   var active = false;
   var accumulated = [];
  
   return function accumulator() {
      accumulated.push(arguments); // 傳入類數(shù)組對象[x, y]且每次的值在改變。
      if ( !active ) {
         active = true;
         while ( accumulated.length ) {
            value = f.apply(this, accumulated.shift());
            /*
            調(diào)用外部函數(shù), 此時(shí)while循環(huán)繼續(xù)。
            active為true, 但accumulated中參數(shù)變化。
            當(dāng)accumulated中的值為空時(shí), x值value接收并返回。
            */
         }
         active = false;
         return value;
      }
   }
   
}

var sum = tco(function(x, y) {
   if ( y > 0 ) {
      return sum(x+1, y-1); // 相當(dāng)于再次執(zhí)行accumulator函數(shù), 且傳入新的參數(shù)值。 
   } else {
      return x;
   }
})
sum(1, 100000) // 100001

/*
 @ 尾遞歸實(shí)現(xiàn) —— 改寫一般的遞歸函數(shù), 確保最后一步只調(diào)用自身。
 --- 尾遞歸優(yōu)化 ---
 @ 實(shí)現(xiàn)意義 —— 防止棧溢出, 相對節(jié)省內(nèi)存。(函數(shù)里面調(diào)用函數(shù)才叫遞歸執(zhí)行, 產(chǎn)生前面的副作用)
 @ 實(shí)現(xiàn)要點(diǎn) —— 減少調(diào)用棧, 采用循環(huán)從而替換掉遞歸。
 */

//擴(kuò)展運(yùn)算符
...[1, 2, 3, 4, 5] 
// 1 2 3 4 5

var nodeList = document.querySelectorAll("div");
[...nodeList];
// [
, 
, 
]

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
arr1.push(...arr2)
console.log(arr1) // [1, 2, 3, 4, 5, 6]

let map = new Map([
    [1, "one"],
    [2, "two"],
    [3, "three"]
])

let arr = [...map.keys()]; // [1, 2, 3]

/*
 --- 用途 ---
 @ 將數(shù)組轉(zhuǎn)為用逗號分隔的參數(shù)序列
 @ 可以展開任何含有Iterator接口的對象, 從而將其轉(zhuǎn)變?yōu)閿?shù)組。
 */

// Array.from()
function foo() {
  var args = Array.from(arguments);
  // ...
}

let spans = document.querySelectorAll("span");
// ES5
let names1 = Array.prototype.map.call(spans, s => s.textContent); 
// ES6
let names2 = Array.from(spans, s => s.textContent);

/*
 --- 用途 ---
 @ 將兩類對象轉(zhuǎn)為真正的數(shù)組。
 @ 類似數(shù)組的對象 (array-like object)
 @ 可遍歷對象 (iterable)
 */

// Array.of() --- 將一組值轉(zhuǎn)換為數(shù)組
Array.of(1, 2, 3, 4, 5) // [1, 2, 3, 4, 5]

// find() --- 找出數(shù)組中符合條件的第一個(gè)成員并返回該成員。
[1, 3, -8, 10].find( n => n < 0 ); // -8

// findIndex() --- 找出數(shù)組中符合條件的第一個(gè)成員并返回該成員的位置。
[1, 3, -8, 10].findIndex( n => n < 0 ); // 2

// keys() values() entries() --- 返回一個(gè)遍歷器對象, 用for...of循環(huán)遍歷。
var arr = ["a", "b"];

for ( let key of arr.keys() ) {
   console.log(key);
}
// 0 1

for ( let value of arr[Symbol.iterator]() ) {
   console.log(value); // Chrome, Firefox 未實(shí)現(xiàn) arr.values()
}
// a b

for ( let [key, value] of arr.entries() ) {
   console.log(key, value);
}
// 0 "a"
// 1 "b"

// includes() --- 表示某個(gè)數(shù)組是否包含特定的值, 返回一個(gè)布爾值。(第二個(gè)參數(shù)表示搜索的索引位置)
[1, 2, 3].includes(2, 1) // true
[1, 2, 3].includes(2, 2) // false

// Object.is() --- 比較兩個(gè)數(shù)是否嚴(yán)格相等, 比 === 符號更好。
+0 === -0 // true
NaN === NaN // false
Object.is(+0, -0) // false
Object.is(NaN, NaN) // true

// Object.assign() --- 將源對象所有可枚舉的屬性復(fù)制到目標(biāo)對象。
// 屬于淺復(fù)制, 對于嵌套的對象只是復(fù)制對象的引用。

/* --- 常見用途 ---*/

// 為對象添加屬性。
class Point {
  constructor(x, y) {
     Object.assign(this, {x, y}); 
  }
}

//為對象添加方法
var foo = {};

Object.assign(foo.prototype, {
  method1() {
      //...
  },
  method2() {
      //...
  },
  method3() {
      //...
  }
})

// 克隆對象, 保持繼承鏈。(淺復(fù)制) 
function clone(obj) {
   var proto = Object.getPrototypeOf(obj);
   return Object.assign(Object.create(proto), obj);
}

// Object.setPrototypeOf()  Object.getPrototypeOf()
// 設(shè)置或獲取原型對象。

let proto = {};
let obj = { x: 10 };
Object.setPrototypeOf(obj, proto);
proto.y = 20;
obj.y; // 20;
Object.getPrototypeOf(obj) === proto // true

// Object.keys()  Object.values()  Object.entries()
// 對可遍歷的屬性起作用, 且可以用for...of循環(huán)遍歷。

let { keys, values, entries } = Object;
let obj = { a: 1, b: 2, c: 3 };

for ( let key of keys(obj) ) {
   console.log(key); // a b c
}

for ( let value of values(obj) ) {
   console.log(value); // 1 2 3
}

for ( let [key, value] of entries(obj) ) {
   console.log([key, value]); // ["a", 1]  ["b", 2]  ["c", 3]
}

// Set --- 成員值唯一的數(shù)據(jù)結(jié)構(gòu)

// 數(shù)組去重
var arr = [1, 2, 3, 3, 4, 5, 5];
// 方法一
[...new Set(arr)]; // [1, 2, 3, 4, 5]
// 方法二
Array.from(new Set(arr)); // [1, 2, 3, 4, 5]

/*
 @ 具有 add(), delete(), has(), clear() 方法。
 @ 包含 keys(), values(), entries(), forEach() 遍歷操作方法。
 */

// Map --- 屬于鍵值對的數(shù)結(jié)構(gòu), 且與對象不同。各種類型的值都可以當(dāng)作鍵。

// Map轉(zhuǎn)數(shù)組
var arr = ["a", "b", "c"];
let map = new Map( arr.map((p, i) => [i, p]) );
[...map]  // [[0, "a"], [1, "b"], [2, "c"]]

// Map轉(zhuǎn)對象
function mapToObj(map) {
   let obj = {};
   for ( var [k, v] of map ) {
      obj[k] = v;
   }
   return obj;
}

// 對象轉(zhuǎn)Map
function objToMap(obj) {
   let map = new Map();
   for ( var k of Object.keys(obj) ) {
      map.set(k, obj[k]);
   }
   return map;
}

/*
 @ 具有 set(key, value), get(key), has(key), delete(key), clear() 方法。
 @ 包含 keys(), values(), entries(), forEach() 等遍歷方法。 
 */

// WeakSet, WeakMap

// WeakSet 實(shí)例
class Foo {
  constructor() {
    foo.add(this);
  }
  method() {
    if ( !foo.has(this) ) {
       throw new TypeError("只能在Foo的實(shí)例上使用!");
    }
  }
}

// WeakMap 實(shí)例
let Element = document.querySelector(".logo");
let wm = new WeakMap();
wm.set(Element, { timesClicked: 0 });

Element.addEventListener("click", () => {
  var logo = wm.get("Element");
  logo.timesClicked++;
});
// 一旦DOM節(jié)點(diǎn)被刪除, 點(diǎn)擊一次更新的狀態(tài)就會消失。

const listener = new WeakMap();
listener.set(element, handler);
element.addEventListener("click", listener.get(element), false);
// 一旦DOM對象消失, 其綁定的監(jiān)聽函數(shù)也會消失。


/*
 --- 特點(diǎn) ---
 @ 其成員都只能是對象而且為弱引用, 即垃圾回收機(jī)制不考慮對該對象的引用。
 @ 所引用的對象在外部被清除, 里面的鍵名對象和對應(yīng)的鍵值對自動消失從而防止了內(nèi)存泄漏。
 */

/*
 --- Iterator ---
 @ 它是一種遍歷器接口, 為各種不同的數(shù)據(jù)結(jié)構(gòu)提供統(tǒng)一的訪問機(jī)制。
 --- 作用 --- 
 @ 使數(shù)據(jù)結(jié)構(gòu)的成員能夠按某種次序排序。
 @ 部署了Iterator接口的數(shù)據(jù)結(jié)構(gòu)可供for...of循環(huán)遍歷。
 */

/*
 --- 原生具備Iterator接口的數(shù)據(jù)結(jié)構(gòu) ---
 @ Array
 @ Map
 @ Set
 @ String
 @ TypedArray
 @ 函數(shù)的arguments對象
 @ NodeList對象
 */

// 為對象添加Iterator接口
var obj = {
    data: ["hello", "world"],
    [Symbol.iterator]() {
       const self = this;
       let index = 0;
       return {
          next() {
             if ( index < self.data.length ) {
                return {
                   value: self.data[index++],
                   done: false
                }
             } else {
                return {
                   value: undefined,
                   done: true
                }
             }
          }
       }
    }
}

for ( var x of obj ) {
   console.log(x);
}
// hello world

var itrable = obj[Symbol.iterator]();
iterable.next();
// {value: "hello", done: false}
iterable.next();
// {value: "world", done: false}
iterable.next();
// {value: "undefined", done: true}

/*
 --- for...of ---
 @ 用于遍歷鍵值, 遍歷數(shù)組時(shí)只返回具有數(shù)字索引的屬性比for...in更加可靠。
 @ 用于循環(huán)遍歷部署了Symbol.iterator接口屬性的數(shù)據(jù)結(jié)構(gòu)。
 */

let arr = [3, 5, 7];
arr.foo = "hello";

for (let i in arr) {
   console.log(i) // "0", "1", "2", "foo"
}

for (let i of arr) {
   console.log(i) // "3", "5", "7"
}

參考書籍 : 《 ES6標(biāo)準(zhǔn)入門 》( 阮一峰 )