function makeIterator(array){
    var nextIndex = 0;
    return {
       next: function(){
           return nextIndex < array.length ?
               {value: array[nextIndex++], done: false} :
               {done: true};
       }
    };
}
// 初始化后， next方法可以用来依次访问对象中的key
var it = makeIterator(['yo', 'ya']);
console.log(it.next().value); // 'yo'
console.log(it.next().value); // 'ya'
console.log(it.next().done);  // true

var str = 'Hello';
var world = ['W', 'o', 'r', 'l', 'd'];

var it1 = str[Symbol.iterator]();
var it2 = world[Symbol.iterator]();

it1.next(); // {value: 'H', done: false}, 到最后一个的时候 {value: undefined, done: true}
it2.next(); // {value: 'W', done: false}

var str = 'Hello';

for(let it = str[Symbol.iterator](), v, result; 
    (result = it.next()) &&
    !result.done &&
    (v = result.value || true); ) {
        console.log(v);
    }

var str = 'Hello';
var it = str[Symbol.iterator]();

for(let v of it) {
    console.log(v);
}

for(let v of str) {
    console.log(v)
}

var str = 'Hello';

var letters = [...str];
console.log(letters);

var obj = {
    a: 1,
    b: 2,
    c: 3
}

for (let v of obj) {
    console.log(v);
} // Type Error

[...obj] // Type Error

var obj = {
    a: 1,
    b: 2, 
    c: 3,
    [Symbol.iterator]: function() {
        var keys  = Object.keys(this);
        var index = 0;

        return {
            // 在这里使用箭头函数的原因是因为， 需要使用到this关键字取到对象本身
            next: () => (index < keys.length) ?
                            {done: false, value: this[keys[index++]]}:
                            {done: true, value: undefined}
        }
    }
};

[...obj] // [1, 2, 3]

function* idMaker(ids = []) {
  let len = ids.length;
  if(len) {
     for(let i = 0; i < len; i++) {
        yield i;
     }
  } else {
     yield undefined;
  }
}

let gen = idMaker([0, 1, 2]);

console.log(gen.next().value); // 0
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
// ...

function *main () {
    yield 1;
    yield 2;
    yield 3;
    return 0;
}
// 明确一点， 当我们调用Generator的时候，其实就是实例化了一个iterators实例， 他的行为和我们上面说的iterator很像。只不过我们在iterator上再写一层语法糖， 就是generator
var it = main();
it.next(); // {value: 1, done: false}
it.next(); // {value: 2, done: false}
it.next(); // {value: 3, done: false}
it.next(); // {value: 0, done: true}

[...main()]

var obj = {
    a: 1,
    b: 2,
    c: 3,
    *[Symbol.iterator]() {
        for(let key of Object.keys(this)) {
            yield this[key];
        }
    }
}

[...obj]; // [1, 2, 3]

// before
const data = () => {
    return {
        a: 1,
        b: 2,
        c: 3
    }
}
var tmp = data();
var first = tmp.a;
var second = tmp.b;
var third = tmp.c;

// after
const data = () => {
    return {
        a: 1,
        b: 2,
        c: 3,
        d: 4,
        e: 5
    }
}
var tmp = data();
var {
    a: first,
    b: second,
    c: third,
    ...fourth
} = data();

const data = () => {
    return {
        a: 1,
        b: 2,
        c: 3,
        d: 4,
        e: 5
    }
}
var first, second;
{first, second} = data();

// before
const data = () => {
    return null;
}
var tmp = data() || {};
var first = tmp.a; // Throw Type Error
var second = tmp.b; // Throw Type Error
var third = tmp.c; // Throw Type Error

// after
const data = () => {
    return {
        a: 1,
        b: 2,
        c: 3,
        d: 4,
        e: 5
    }
}
var tmp = data();
var {
    a: first = 42,
    b: second,
    c: third,
    ...fourth
} = data() || {};

// before
const data = () => {
    return {
        a: 1, 
        b: {
            c: 2,
            d: 3
        }
    };
}
var tmp = data() || {};
var first = tmp.a; 
var second = tmp.b.c;
var third = tmp.b.d;

// after
const data = () => {
    return {
        
        a: 1, 
        b: {
            c: 2,
            d: 3
        }
   }
}
var {
    a: first = 42,
    b: {
        c: second,
        d: thrid,
    },
    ...fourth
} = data() || {};

function data (tmp = {}) {
    var {
        a,
        b
    } = tmp;
}

function data ({
    a,
    b   
} = {})  {
}

var obj = {
    a: 1,
    b: {
        x: 2
    },
    c: [3, 4]
}

var {
    a,
    b,
    b: {
        x: w
    },
    c: [d, e]
} = obj;

var msg = 'Hello world';

msg.match(/(l.)/g);
// ['ll', 'ld']
msg.match(/(l.)$/g);
// ['ld']
msg.match(/(l.)(?=o)/g);
// 我要匹配l.的字符串，但是我希望这个字符串后面有'o'
// ['ll']
msg.match(/(l.)(?!o)/g);
// 我要匹配l.的字符串，但是我希望这个字符串后面没有'o'
// ['lo', 'ld']

var msg = 'Hello World';

msg.match(/(?<=e)(l.)/g);
// 我要匹配l.的字符串，但是我希望这个字符串前面有'e'
// ['ll']
msg.match(/(?<!e)(l.)/g);
// 我要匹配l.的字符串，但是我希望这个字符串前面没有'e'
// ['lo', 'ld']

var msg = 'Hello World';

// 使用括号的意思就是，我按这些匹配，但是最后出结果的时候也把我括号内的单独抽离出来， 成为结果之一
msg.match(/.(l.)/);
// ['ell', 'll']
msg.match(/([jkl])o Wor\1/);
// ['lo Worl']
// 让我们用捕获组重新写第一个例子
msg.match(/(?<groupName>l.)/);
// 把输出展开后, 我们得到了以下的内容:
//     0: "ll"
//     1: "ll"
//     groups:-> 这个就是我们捕获组的， 自然，在这个下方是我们对捕获组的命名和匹配结果， 真的很实用， 我们的正则不再是一串又一串没有意义的数字了
//         groupName: "ll"
//     index: 2
//     input: "Hello World"
//     length: 2
msg.match(/(?<cap>[jkl])o Wor\k<cap>/); 
// 对于这个正则，我没看懂的地方就是 \k 表达的是什么?

// 捕获组的应用场景： 替换
// 使用模板语法替换
msg.replace(/(?<cap>l.)/g, '-----------$<cap>----------');
// "He-----------ll----------o Wor-----------ld----------"
// 使用callback函数处理
msg.replace(/(?<cap>l.)/g, function re(...args) {
    debugger
    var [,,,,{cap}] = args;
    return cap.toUpperCase();
});
// "HeLLo WorLD"

var msg = `
The quick brown fox
jumps over the
lazy dog`;

msg.match(/brown.*over/);
// null
msg.match(/brown.*over/s);
// ["brown fox↵jumps over", index: 11, input: "↵The quick brown fox↵jumps over the↵lazy dog", groups: undefined]

const sum = 12.5;
const msg = format`sum is: ${sum}`;
console.log(msg);
// 然后解读一下入参：
// str: 非变量分割的字符串数组， 在这个例子中为['sum is: ', '']
// ...value: 变量以数组的形式传入第二个参数
function format (str, ...value) {
    debugger
    // 这里返回的就是最终的字符串了
    return `${str[0]}$${value[0]}`;
}

// before
var getData = () => [1, 2, 3];
var data = getData()

let a = data[0];
let b = data[1];
let c = data[2];

// after
var getData = () => [1, 2, 3];
var data = getData()

let [a, b, c] = [...data];

// before
var getData = () => [1, 2, 3];
var data = getData()

let a = data[0];
let b = data[1];
let c = data[2];

// after
var getData = () => [1, 2, 3];
var data = getData();

let temp;
// 先把data-> temp -> 执行解构
let [a, b, c] = temp = [...data];

// before
var getData = () => [1, 2, 3];
var data = getData()

var o = {};

o.a = data[0];
o.b = data[1];
o.c = data[2];

// after
var getData = () => [1, 2, 3];
var data = getData();

let temp;
var o = {};
// 先把data-> temp -> 执行解构
[o.a, o.b, o.c] = temp = [...data];

// before
var getData = () => [1, 2, 3];
var data = getData()

let a = data[0];
// let b = data[1];
let c = data[2];

// after
var getData = () => [1, 2, 3];
var data = getData();

let temp;
// 先把data-> temp -> 执行解构
let [a, , c] = temp = [...data];

//before
var x = 10;
var y = 20;

{
    let temp = x;
    x = y;
    y = temp;
}

var x = 10;
var x = 20;

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

// before
function data (tmp = []) {
    var [
        first,
        second,
        third
    ] = tmp;
}

// before
function data ([first, second, third] = []) {

}

// before
var getData = () => [1, [2, 3], 4];
var data = getData() || [];
var data2 = data[1]

let a = data[0];
let b = data2[0];
let c = data2[1];
let b = data[2];

// after
var getData = () => [1, [2, 3], 4];
var data = getData()

function sum ({
    a = 1,
    b = 2
}) {
    return a + b;
}

sum({b: 3});

var default = {
    url: 'http://some.base.url/api',
    method: 'post',
    headers: [
        'Content-Type: text/plain'
    ]
}

console.log(default);
var setting = {
    url: 'http://some.base.url/api/1',
    data: 42,
    callback: funciton() {}
}

// 合并两个对象，带默认值
// 但是这样的作法存在问题
// 1. 依赖外部库
// 2. 需要文档才能看得懂
// 我们可以使用解构重构这部分的代码 
ajax( _.extend({}, default, setting));

function ajaxOption({
    url = 'http://some.base.url/api',
    methods = 'post',
    data,
    callback,
    headers: [
        header0 = 'Content-Type: text/plain',
        ...otherHeaders
    ] = []
} = {}) {
    return {
        url, method, data, callback,
        headers: [
            header0,
            ...otherHeaders
        ]
    }
}

var n = 42n;
typeof n === 'bigint';

typeof null === 'Object'

const isType = (value) => {
    return Object.prototype.toString.call(value).match(/(?<= )\w+/)[0]
    // String Number Null Undefined Object Date RegExp Symbol Boolean Function
}
// 这里涉及了正则的一个知识，就是匹配以xxx开头的字符串（不包含xxx）, 那么就要使用正则的前置断言(?<=[这是xxx的内容])

typeof a; // referentceError.
let a;

let myAge  = Number(42) // 42
let myCode = Number('tx123')  // NaN
myAge - 'Some' //  NaN
NaN === NaN // false
isNaN(myCode) // true
Number.isNaN(myCode) // false

let a= -0
a === -0
a.toString() // '0'
a === 0 //  true
a > 0 // false
a < 0 // false
Object.is(a, -0) // true
Object.is(a, 0) // false

Math.sign(-3) // -1
Math.sign(3) // 1
Math.sign(0) // 0
// 判断正负的函数
function sign (v) {
	return v  !== 0 ? Math.sign(v) : Object.IS(V, -0) ? -1 : 1;
}

// TODO: define polyfill for `Object.is(..)`
if (Object.is || true) {
    Object.is = (a, b) => {
        // 工具函数
        const isNegZero = v => v == 0 && (1 / v) == -Infinity
        const isNaN = v => v !== v
        const xNegZero = isNegZero(a)
        const yNegZero = isNegZero(b)

       if (xNegZero || yNegZero) {
            return xNegZero && yNegZero
        } else if (isNaN(a) && isNaN(b)) {
            return true
        } else {
            return x === y
        }
    }
}

var sum = new Function('a', 'b', 'return a + b');
console.log(sum(2, 6));
// expected output: 8
Function.length  // 数组参数的长度

[]->""
[1, 2, 3]-> '1, 2, 3'
[null, undefined]-> '.'
[[[], [], []], []]-> '...'
[...]->'...'

{}-> ‘[Object Object]’
{toString() {return 'X'}}-> "X"

[] == false;
[] == true;

var a = 1;
var a = 2;

//  a在内存中中是同一个地址， 因为在第一次定义的时候在内存中已经有a这个变量了， 第二次定义做了一次查询而已.

(sum) => {
    { // 大胡子推荐这种写法，显示的去告诉大家我需要let的块级作用域， 明确变量的范围
        let a = 1, 
            b = 2,
            c = 3;
        sum = a + b + c;
    }
    return sum;
}

const arr = [1, 2, 3]
arr = [2, 3, 4] // Throw Error
arr[0] = 2;
arr[1] = 3;
arr[2] = 4;

const obj = {
    a: 1
}

obj = {} // Throw Error
obj.a = 2; 

// 解决方案： freeze 但是注意， 分浅冻结和深冻结
Object.freeze();

a; // undefined
b; // undefined
var a = 1;
var b = 2;

var a;
var b;


a; // undefined
b; // undefined
a = 1;
b = 2;

a(); // a
function a () {
    console.log("a");
}

b(); // b is not a function 
var b = () => {console.log("b");};
b(); // b

var a = 'a';
function b () {
    console.log(a); // undefined
    var a = 'b';
}

// 实际上，js引擎做了以下处理
var a = 'a';
function b () {
    var a; // 初始化未赋值， 那么所有的初始值都是 undefined
    console.log(a); // undefined
    a = 'b';
}

{
    a = 'a'; // TDZ error
    let a; 
}

const timer = (text) => {
    setTimeout(() => {
        console.log(test)
    }, 1000)
}
timer('Hello World.')

const printer = x => () => console.log(x);

var teacher = 'Kyle';

var myTeacher = () => {
    console.log(teacher);
    // 这里的变量引用是软链接，不是自己创建一个封闭的作用域
    // 它并没有把这个变量抓住， 生成一个副本
}

teacher = 'Suzy';
myTeacher(); // Suzy

for(var i = 0; i < 4; i++) {
    setTimout(() => {
        console.log(i)
    }, i * 1000);
}

// 解决方案1： let
for(var i = 0; i < 4; i++) {
    let j = i;
    setTimout(() => {
        console.log(j);
    }, j * 1000);
}
// 解决方案2： 匿名函数
var main = () => {
    for(var i = 0; i < 4; i++) {
        ((i)=> { // 在setTimeout外面写一个匿名函数，新建作用域， 形成闭包变量
            setTimeout(() => {
                console.log(i)
            }, i * 1000);
        })(i);
       
    }
}
main();
// 解决方案3： 匿名函数
var main = () => {
    for(var i = 0; i < 4; i++) {
        setTimeout(((i) => {
            return () => {
                console.log(i)
            }
        })(i), i * 1000);
    }
}
main();

var workspace = {
    name: 'Kyle',
    ask (quetion) {
        console.log(quetion);
    }
}
// 这是命名空间，并不是模块化

var workspace = (function Module(teacher) {
    var publicAPI = { ask };
    return publicAPI;

    function ask (quetion) {
        console.log(teacher, quetion); 
    }

})('Kyle');

workspace.ask('what?');

 
function Module(teacher) {
    var publicAPI = { ask };
    return publicAPI;

    function ask (quetion) {
        console.log(teacher, quetion); 
    }

};

var workspace = Module('Kyle');
workspace.ask('what?');

// file is workspace.mjs
var teacher = 'Kyle';

// 暴露单个ask
export default function ask (quetion) {
    console.log(teacher, quetion);
}

// 或者使用多个
export default {
    ask,
}

// main.js
import ask from 'workspace.mjs';

ask('what?');

// 或者你可以给你模块赋予别名

import * as workspace from 'workspace.mjs';

workspace.ask('what?');