# js

typeof undefined //undefined
typeof 'abc' // string
typeof 123 // number
typeof true // boolean
typeof {} // object
typeof [] // object
typeof null // object
typeof console.log // function
typeof Symbol() // symbol

  []+[]  ''
  {}+{}  [object Object][object Object] -> 看成2个字符串相加
  {}+[]  0 -> {}被看成es6一个块级作用域 最后变成 +[] 转换为数值 即为0
  []+{}  [object Object] -> [] 经过valueOf() 变成 [] 在经过 toString() 变成''(空)  {} 同理 最后变成 [object Object]
   +{}    NaN  + 强制转换成数值
   +[]    0  + 强制转换成数值
   -[]    -0 - 强制转换成数值
   //特例   alert , [x].join(“”) 均调用toString() ,如果强制改写内置方法 返回的不是一个原始值 就报错
   // 注意  
   // "-"减号运算符把两个操作数都转换成数字  
   // "+"两边其中一个是对象 "+"运算符将对象转换成原始值  "==" ">" "<" 一样

   // http://www.codes51.com/article/detail_388155_3.html
   // {}+[] ：根据语句优先原则  {}被理解为复合语句块，因此相当于 {}; +[]   。[]为空，结果为0

   // console.log({}+[]) : js把()中的语句当做一个表达式，因此{}不能被理解为语句块，而被理解为对象直接量,因此结果为对象

   // 其实 console.log({}+[])和[]+{}的结果相同，原理相同，{}作为右值出现被理解为对象直接量

// 只有这中情况用双等 其他都是 ===
if(obj.a == null){
  // 这里相当于 obj.a === null || obj.a ===  undefined, 简写形式
  // 这里 jquery 源码中推荐的写法
}

Object
Array
Boolean
Number
String
Function
Date
RegExp
Error

child.prototype = Object.create(parent.prototype)
child.prototype.constructor = child

var a = {} //其实是 var a = new Object()的语法糖
var a = [] //其实是 var a = new Array()的语法糖
funciton Foo(){} // 其实就是 var Foo = new Function(..)

var item;
for (item in f){
  if(f.hasOwnProperty(item)){
    console.log(item)
  }
}

function Fn(){
  let xx = {name:'1'}
  return xx
}
let r1 = Fn()
let r2 = new Fn()
r1 === r2

function Fn(){
  this.name = 'sg'
}
let proto = {
  url :'xxxxxxxxx'
}
Fn.prototype.address = '北京'
let one = new Fn()
let two = new Fn()
Object.setPrototypeOf(one,proto)
console.log(one.address) // undefined
console.log(one.url)  // xxxxxxxxx
console.log(two.address) // 北京

function Fn(){
  function route(){}
  Object.setPrototypeOf(route,proto)
  return route
}
let proto = Object.create()
proto.a1 = ()=>'a1'
proto.a2 = 'a2'

// 用法一
let rs = new Fn()
console.log(rs.a1())
console.log(rs.a2)
// 用法二
console.log(Fn().a1())
console.log(Fn().a2)

var a = {
  name:'A',
  fn:function(){
    console.log(this.name)
  }
}
a.fn() // this === a
a.fn.call({name:'B'}) // this === {name:'B'}
fn1() // this === window

function fn(name,age){

}
// call 参数是字符串
fn.call({x:100},'zhangsan',20)
// apply 参数是数组
fn.apply({x:100},['zhangsan',20])

Function.prototype.myCall = function(context,...args){
  context = context ? Object(context) : window;
  context.fn = this;
  if(!args){ 
    return context.fn()
  }
  // 利用toString 的特性
  let r = eval('context.fn('+args+')')
  delete context.fn;  
  return r
}
Function.prototype.myApply = function(context,args){
  context = context ? Object(context) : window;
  context.fn = this;
  if(!args){
    return context.fn()
  }
  let r = eval('context.fn('+args+')')
  delete context.fn;  
  return r
}

//  1、bind 方法可以绑定this指向
//  2、bind 方法返回一个绑定后的函数(高级函数)
//  3、如果绑定的函数被new了 当前函数的this就是当前的实例
Function.prototype.myBind = function(context){
  let that = this;
  let bindArgs = Array.prototype.slice.call(arguments,1)
  function Fn(){} 
  function fBound(){
    let args = Array.prototype.slice.call(arguments);
    // fBound被new 那么this就是this  否则就是context
    return that.apply(this instanceof fBound ? this: context,bindArgs.concat(args)) 
  }
  Fn.prototype = this.prototype;
  fBound.prototype = new Fn()
  return fBound
}

var i
for (i=0;i<10;i++){
  (function (i){
    var a = document.createElement('a')
    a.innerHTML = i + '<br>'
    a.addEventListener('click',(e)=>{
      e.preventDefault()
      alert(i)
    }) 
    document.body.appendChild(a)
  })(i)
}

function isFirstLoad(){
  var _list =[]
  return function(id){
    if(_list.indexOf(id) >= 0) {
      return false
    } else {
      _list.push(id)
      return true
    }
  }
}
// 使用
var firstLoad = isFirstLoad()
firstLoad(10) // true
firstLoad(10) // false
firstLoad(20) // true

Date.now() //获取当前时间毫秒数
var dt= new Date()
dt.getTime() // 获取毫秒数
dt.getFullYear() //年
dt.getMonth() // 月 (0-11)
dt.getDay() //周(0-6)
dt.getDate() // 日(0-31)
dt.getHours() // 小时(0-23)
dt.getMinutes() // 分钟(0-59)
dt.getSeconds() // 秒(0-59)

  new Date(year,month,0).getDate()

function formatDate(dt){
  if(!dt){
    dt = new Date()
  }
  var year = dt.getFullYear()
  var month = dt.getMonth()+1
  var date = dt.getDate()
  if(month < 10){
    //强制类型转换
    month = '0' + month
  }
  if(date < 10){
    date = '0' + date
  }
  return year+'-'+month+'-'+date
}
var dt = new Date()
var formatDate = formatDate(dt)
console.log(formatDate)

// x- y
Math.round(Math.random()*(y-x)+x)
// 1- x
Math.ceil(Math.random()*x)||1
// 0- x-1
Math.floor(Math.random()*x)
// 0- x
Math.round(Math.random()*x)

  //4个增加
    push()
    // 添加末尾 
    unshift()
    // 添加前面
    pop()
    // 删除末尾
    shift()
    // 删除前面
    // 原数组变动 返回数组的长度

  // (替 倒 牌(排)) 原数组都会变化
    splice() //用新元素替换旧元素
    //   splice(start,deletecount,item)  start开始位子  deletecount 删除个数  item 替换内容
    //   0参数     直接返回空数组
    //   1个参数   截取数组，参数开始到结束
    //   2个参数   截取的个数
    // 原数变成更新后的数组  返回删除后的内容 是一个数组
    // 括号里面的都是包前不包后
    reverse() //颠倒数组
      // 返回值和原数组都 变成颠倒后数组
      // 原数组变动 返回变动后的数组
    Arr.sort((a,b)=>{ 
      //从小到大
      return a-b
      //从大到小
      return b-a
    })
    // 无参数 按照字符编码的顺序进行排序
    // 原数组变，返回新数组


     Arr.forEach((a1,a2,a3)=>{  //(----------------原数组不变动)
          //a1 当前数组中的某个数据
          //a2 当前数据的索引
          //a3 数组本身
        })
    // 没有返回值

    // (连 脚(join) 截)  原数组不变动
    concat() //连接数组
    // 用法 数组.concat(A1,A2) 合并多个，参数也可以是非数组
    // 原数组不变动 返回组合后的新数组

    join() //将数组所有的元素连接成一个字符串
    //   数组.join(a1)   a1就是一个连接符号，用他把数据连接成一个字符串
    // 原数组不变动 返回新值
    slice() //截取数组
    //   slice(begin,end) begin开始位子  end结束位子(可以用负数,-1是最小的,最后一个元素，但不包括，第一个参数要小于第二个参数的位子)
    //   0参数     直接返回数组
    //   1个参数   截取数组，参数开始到结束
    // 原数组不变动 返回截取后的数组

    // (every one 重 过 index)
    Arr.every((item,index)=>{
      //用来判断所有数组元素都满足一个条件
      if(item<4){
        return true
      }
    })
    // 原数组不变动 所有都满足<4 返回值true 否则false
    
    Arr.some //同上 判断所有数组元素中，只要一个元素满足条件即可
    // 原数组不变动 满足<4 返回值true 否则false


    Arr.map((item,index)=>{ //(----------------原数组不变动)
      //将元素重新组装并返回
      return '<b>'+item+'</b>'
    })
    原数组不变，返回重装后的元素

    Arr.filter((item,index)=>{ //(----------------原数组不变动)
      //通过某一个条件过滤数组
      if(item>=2){
        return true 
      }
    })
    //原数组不变，返回满足条件的元素

    Arr.findIndex(x)=>{ //(----------------原数组不变动)
      return x == 4
    }
    //原数组不变，返回满足条件的第一个元素下标

    Arr.reduce((pre,next,index,target)=>{
      
    })
    //返回新的数组 原数组不变

function forEach(obj,fn){
  var key 
  if(obj instanceof Array){
    //准确判断是不是数组
    obj.forEach((item,index)=>{
      fn(index,item)
    })
  }else{
    // 不是数组就是对象
    for(key in obj){
      fn(key,obj[key])
    }
  }
}

  字符
    indexOf() //查下标
    lastIndexOf() //从右往左找

    slice('开始位子','结束位子') //截取字符串
      //包前不包后,可以放负，开始位子不能大于结束位子
    //原字符串不变  返回截取后的
    
    split('分隔符','分割成数组的个数') //用指定的分隔符把字符串分隔成数组
      //一个参数都没有和一个空格字符的话，会把整个字符串作为数组中的一个数据
    
    trim() //去掉首空格
    toLowerCase() //大写变小写
    toUpperCase() //小写变大写

    substring('开始位子','结束位子') //截取一段字符
      // 0参数,返回整个字符串
      // 1参数，从这个参数截到最后
      // 2参数，不包括最后一个参数
      // 返回截取后的字符串，原字符串不变
    //与slice区别
      // 1、slice起始位子不能大于结束位子
      //    substring起始位子可大于结束位子，并会自动调换位子
      // 2、slice可放负数，substring不可放负数
    
    substr('开始','个数') //截取一段指定开始位子与个数的字符串
      // 0个参,返回整个字符串
      // 1个参，默认第一个参数到最后
      
    startsWith() //方法用于检测字符串是否以指定的前缀开始。

var random = Math.random()
var random = random + '0000000000' //后面加 10个零
var random = random.slice(0,10)
console.log(random) 

//创建表格
		var table = document.createElement('table')
				table.borber = 1
				table.width = 100%
	//	创建tbody
		var tbody = document.createElement('tbody')
				table.appendChild(tbody)
		//创建第一行
				tbody.insertRow(0)
				tbody.rows[0].insertCell(0)
				tbody.rows[0].cells[0].appendChild(document.createTextNode('cell 1,1'))

var btn = document.getElementById('btn1')
btn.addEventListener('click',(event)=>{
  console.log('clicked')
})
function bindEvent(elem,type,fn){
  elem.addEventListener(type,fn)
}
var a = document.getElementById('link1')
bindEvent(a,'click',(e)=>{
  e.perventDefault() //阻止默认行为
  alert('clicked')
})

<div id = 'div1'>
  <a href='#'>a1</a>
</div>
var div1 = document.getElementById('div1')
div1.addEventListener('click',function(e){
  var target = e.target
  if(target.node === 'A'){
    alert(target.innerHTML)
  }
})

function bindEvent(elem,type,selector,fn){
  if(fn == null){
    fn = selector
    selector = null
  }
  elem.addEventListerner(type,(e)=>{
    var target 
    if(selector){
      target = e.target
      if(target.matches(selector)){
        fn.call(target,e)
      }
    }else{
      fn(e)
    }
  })
}
// 使用代理
var div1 = document.getElementById('div1')
bindEvent(div1,'click','a',function(e){
  console.log(this.innerHTML)
})
// 不何用代理
var a = document.getElementById('div1')
bindEvent(div1,'click',function(e){
  console.log(a.innerHTML)
})

/*
  鼠标事件
      click 点击
      dbclick 双击
      mousedown  按下
      mouseup    抬起
      mousemove  移动
        会传给子元素
      mouseover  移入
      mouseout   移除
        不会传给子元素
      mouseenter 移入 
      mouseleave 移出
    鼠标坐标  
      event.clientX/event.clientY
      坐标根据可视区左上角进行
    事件源
    
      event.target(他是一个属性)
      触发事件的元素
      dom.matches('选择器')=>event.target.matches
      判断选择器是否是对象里面得的

      焦点事件
      focus 有焦点事件的元素获取焦点就会触发
      blur  失去
      tabindex  用来更改tab键切换顺序
      使用 dom.focus()  dom.blur()

      事件绑定与移出
      on
        dom.on事件名 = 函数
        on只能添加一个，多个会覆盖
      addEventlistener
        dom.addEventlistener(事件名称,函数a(event),boolean)
        function a(e){
          console.log(e)
        }
        函数里面的参数event(event点击事件源,可以不写,要写只能是他) 即是事件event
        注意:当事件为mousemove 的话不能传参也不能加()写函数名即可 ：传参导致程序只能执行一次不行连续执行

        boolean 
          为true   捕获
          为false  冒泡(默认)
    移出
      on
        dom.on事件名 = null
      addEventlistener
        dom.removeEventlistener(事件名称,函数名字,boolean)
        不能移出addEventlistener添加的匿名函数
        只能移出同一阶段的绑定函数

    阻止事件冒泡
      非IE:event.stopPropagation() 不会往上层传递
      IE:event.cancelBubble= true
    
    阻止浏览器默认行为
      on
        在函数里面写return false
      addEventlistener
        event.preventDefault()
    */

var xhr = new XMLHttpRequest()
xhr.open('GET','/api',true)
xhr.onreadystatechange = function(){
  //这里是异步执行
  // 4 (完成)响应内容解析完成,可以在客户端调用
  if(xhr.readyState == 4){
    if(xhr.status === 200){
      alert(xhr.responseText)
    }
  }
}
xhr.send(null)

 // https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=1&cb=xxx
    function jsonp({url,params,cb}){
        return new Promise((resolve,reject)=>{
            let dom = document.createElement('script')
            // cb 必须挂载window上 或者放在全局里 
            // script 请求后会返回一个cd('返回数据') 此时的cd会在全局上去查找 找不到就会报错   
            window[cb] = function (item){
                resolve(item)
            }
            params = {...params,cb}
            let arr = []
            for(let key in params){
                arr.push(`${key}=${params[key]}`)
            }
            params = arr.join('&')
            url = `${url}?${params}`  
            
            dom.src = url
            document.body.appendChild(dom)
        })
    }
    // let url = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su'
    let url = 'http://localhost:3000/jsonp'
    // 只能发送get请求 不支持post等  因为jsonp 依靠的的script标签
    // 不安全 xss攻击
    jsonp({
        url,
        params:{wd:'1'},
        cb:'callback'
    }).then(data=>{
        console.log(data)
    })

let express = require('express')
let app = express()
var bodyParser = require('body-parser');//解析,用req.body获取post参数
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
app.get('/jsonp',(req,res)=>{
    // req.query 获取get请求 ? 后前的东西
    // res.end('返回的数据') 这个接口返回的数据
    console.log(req.method,req.query)
    let rs = req.query.cb
    res.end(`${rs}(123)`)
})  

app.post('/form',(req,res)=>{
  console.log(req.method,req.url,req.body)

  res.end(`(123)`)
})

app.get('/form',(req,res)=>{
  console.log(req.method,req.url,req.query,req.params)

  res.end(`(123)`)
})

app.listen(3000,()=>{
    console.log('listen start')
})

let express = require('express')
let app = express()
let whitList = ['http://localhost:3000']
app.use((req,res,next)=>{
    console.log(req.headers.referer) 
    let origin = req.headers.origin
    /*
      1、返给浏览器的数据 在请求头里面 要是没有'Access-Control-Allow-origin' 请求头 
         浏览器就会显示跨域 这儿设置就可以  第二个参数是* 就是所有
    */
     if(whitList.includes(origin)){
        //设置那个源可以访问我
        res.setHeader('Access-Control-Allow-Origin',origin)
        //允许携带哪个头访问我
        res.setHeader('Access-Control-Allow-Headers','name')
        //允许哪个方法访问我 默认post get
        res.setHeader('Access-Control-Allow-Methods','PUT')
        //允许携带cookie  但是Access-Control-Allow-Origin 不能设置 * 其他都可以
        res.setHeader('Access-Control-Allow-Credentials',true)
        //允许前端获取哪个头
        res.setHeader('Access-Control-Expose-Headers','name,ss')
        //预检的存活时间 10s内 options请求只会发一次  
        res.setHeader('Access-Control-Max-Age',10)



        if(req.method === 'options'){
            res.end()// options 没有任何意义  他不是每次都发 在固定时间内 触发一次
        }
    }
    next()
})

app.get('/',(req,res)=>{
    res.setHeader('name','sg')
    res.setHeader('ss','sg11')
    res.end('xxxx123')
})
app.post('/',(req,res)=>{
    res.end('xxxx123')
})
app.put('/',(req,res)=>{
    res.end('xxxx123')
})
app.listen(4000,()=>{
    console.log('listen start')
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    a页面
    <iframe src="http://localhost:3000/b.html" frameborder="0" id="frame" onload="load()"></iframe>
    <script>
        function load(){
            let frame = document.getElementById('frame')
            // 发送
            frame.contentWindow.postMessage('我爱你','http://localhost:3000')
            // 接收
            window.onmessage = (e)=>{
                console.log('a页面',e.data)
            }
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    b页面
    <script>
        window.onmessage = (e)=>{

            console.log('接受的数据',e.data)
            //e.source 是从哪儿来的 e.origin 是之前的地址
            e.source.postMessage('我不爱你',e.origin)
        }   
    </script>
</body>
</html>

let express = require('express')

let app = express()

app.use(express.static(__dirname))

app.listen(3000)

// Promise.all 表示全部成功才成功 有任意一个失败 都会失败
Promise.all = function (promises) {
  return new Promise((resolve, reject) => {
    let arr = [];
    let currentIndex = 0;
    function processData(index, val) {
      arr[index] = val;
      currentIndex++; // 记录一下成功的次数
      // 如果达到了执行目标就让all的promise成功
      if (currentIndex === promises.length) {
        resolve(arr);
      }
    }
    for (let i = 0; i < promises.length; i++) {
      promises[i].then(function (data) {
        processData(i, data);
      }, reject)
    }
  });
}
// rece赛跑
Promise.race = function (promises) {
  return new Promise((resolve, reject) => {
    for (let i = 0; i < promises.length; i++) {
      promises[i].then(resolve, reject);
    }
  });
}
// reject
Promise.reject = function (reason) {
  return new Promise((resolve,reject)=>{
    reject(reason);
  })
}
// resolve
Promise.resolve = function (value) {
  return new Promise((resolve, reject) => {
    resolve(value);
  })
}
// finally
Promise.prototype.finally = function(callback){
  // 无论如何finally中传递的回调函数 必须会执行
  return this.then(function (data) {
    // 返回一个promise,将上一次的状态继续传递下去
    return Promise.resolve(callback()).then(()=>data)
  },function (reason) {
    return Promise.resolve(callback()).then(()=>{
      throw reason
    })
  })
}
// catch
Promise.prototype.catch = function (errFn) {
  // catch就是特殊的then方法,第一个参数resove给null,第二个也就是rejected
  return this.then(null, errFn)
}
// 调用
let Promise = require('./1.promise');
let p = new Promise(function (resolve,reject) {
  setTimeout(() => {
    resolve();
  }, 1000);
});
p.then(function (value) {
  console.log('val',value);
},function (reason) {
  console.log('rea',reason);
});
p.then(function (value) {
  console.log('val', value);
}, function (reason) {
  console.log('rea', reason);
});

// 基础Promise
function Promise(executor) {
  let self = this;
  // 保存成功的值和失败的原因
  self.value = undefined;
  self.reason = undefined;
  // 保存一下当前这个promise的状态(promise有三个状态)
  self.status = 'pending';
  function resolve(value) {
    if (self.status === 'pending') {
      self.value = value;
      self.status = 'resolved';
    }
  }
  function reject(reason) {
    if (self.status === 'pending') {
      self.reason = reason;
      self.status = 'rejected';
    }
  }
  executor(resolve, reject);
  // executor是立即执行的
}
// then方法中需要传递两个参数 分别是成功的回调和失败的回调
Promise.prototype.then = function (onFulfilled,onRejected) {
  let self = this;
  if(self.status === 'resolved'){
    onFulfilled(self.value);
  }
  if (self.status === 'rejected') {
    onRejected(self.reason);
  }
}
module.exports = Promise

// 基本用法
function * gen(){
  yield 1;
}
let it = gen()
let r = it.next()
console.log(r)
 r = it.next()
console.log(r)
// 自动迭代
function * gen(){
  yield 1;
  yield 2;
  yield 3;
}
let it = gen()
let flag = false
do{
  let {value,done} = it.next()
  flag = value;
  console.log(value)
} while (!flag);

function * r(){
  // read异步读取文件 先看作一个promise
  let age = yield read('xx.text')
  let adress = yield read(age)
  let r = yield read(adress)
}

function co(it){
  return new Promise((resolve,reject)=>{
    function next(data){
      let {value,done} = it.next(data)
      if(!done){
        value.then(data=>{
          next(data);
        })
      }else{
        resolve(value)
      }
    }
  })
  next()
}

/*
\  转义符
\n 换行(newline)
\s 空格(space)
\S 非空格
\' 单引号
\" 双引号
\d (digit)数字,正则中专门用来代表数字的,等级于 [0-9]
\D 非数字字符,等价于[^0-9]
\w 数字、字母、下划线
\W 非数字、非字母、非下划线
\b 单词的边界，独立的部分(起始位子、结束位子、空格)，它不匹配某个可见的字符，而是匹配位子(border)
\B 非边界的部分
.  任意一个字符
\. 真正的点
*/

// 参数 
// 第一个参数:字符串或者正则
// 第二个参数:字符串或者函数
//     函数参数说明
//       参一 要匹配的内容,与replace的第一个参数一样
//       参二 要匹配的内容对应的位子下标
//       参三 原字符串
//       注意:这个函数必须要有一个返回值,否则的话它就会拿undefined替换掉原来的内容
// 返回:替换后的新字符串,原来的字符串没有变化
    
//     第二个参数是一个函数,他的形参至少是3个
//     var str='adb22s22d22hsu222223673njAj2nj2234n45nk';
//     let a = str.replace(/(\d+)(\d)/g,(a1,a2,a3,a4,a5)=>{
//       console.log('-----------',a1,a2,a3,a4,a5)
//       return '--------'
//     })
//     a1 为(\d+)(\d)
//     a2 为第一个(\d+)
//     a3 为第二个(\d)
//     a4 为第一个满足的下标
//     a5 原字符串
//     console.log会把满足的条件都打印下来

// b.js
exports.a = '1'

// a.js
let b = require('./b.js')

console.log(b) //{a:1}

// b.js
module.exports = 1

// a.js
let b = require('./b.js')

console.log(b) // 1

// 导出多个变量
// a.js
export const a = 1 ; 
export const b = 2 ; 

// b.js 两种引入的办法
// import {a,b} from 'a.js'
import * as obj from 'a.js'
console.log(obj.a)// 1
console.log(obj.b)// 2

// a.js
export default {a:'123'}

// b.js obj名字随便写什么都可以 引入有2种写法
import obj from './a'
console.log(obj)//{a:'123'}

import * as obj from './a'
console.log(obj.default)//{a:'123'}

// a.js
exports.fl = false
let b = require('b.js')
console.log(`a.js ===> fl:${b.fl}`)
export.fl = true
console.log(`a.js ===> 执行完成`)

// b.js
exports.fl = false
let a = require('/a.js')
console.log(`b.js ===> fl:${a.fl}`)
export.fl = true
console.log(`b.js ===> 执行完毕`)

// index.js
let a = require('/a.js')
let b = require('/b.js')
console.log(` 代码执行完毕: a ===> fl:${a.fl}; b ===> fl:${b.fl}`);

/**
  b.js ===> fl:flase
  b.js ===> 执行完毕
  a.js ===> fl:true
  a.js ===> 执行完毕
  代表执行完毕: a ==> fl:true; b ==> fl:true
*/

// a.js
import {bar} from './b.js';
export function foo() {
  bar();  
  console.log('执行完毕');
}
foo();

// b.js
import {foo} from './a.js';
export function bar() {  
  if (Math.random() > 0.5) {
    foo();
  }
}

// even.js
import { odd } from './odd'
export var counter = 0;
export function even(n) {
  counter++;
  return n == 0 || odd(n - 1);
}
 
// odd.js
import { even } from './even';
export function odd(n) {
  return n != 0 && even(n - 1);
}


$ babel-node
> import * as m from './even.js';
> m.even(10);
true
> m.counter
6
> m.even(20)
true
> m.counter
17

    在with作用域里 变量名可以从obj的属性上取值
    let obj = {name:'xxx'}
    with(obj){
      console.log('hello',name)//=>xxx
    }

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

var tmp = 123;
if(true){
  // {}里面 有let 声明 tmp, let前面tmp是不能赋值的
  tmp = 'abc'
  let tmp
}

let [x, , y,...tail] = [1, 2, 3, 4, 5, 6];
x // 1
y // 3
tail // [4, 5, 6]

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

let [x = 1] = [undefined];
x // 1

let [x = 1] = [null];
x // null

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

let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined

const { log } = console;
log('hello') // hello

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'

var {x = 3} = {};
x // 3

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
// 类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。
let {length : len} = 'hello';

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

// 对象同理
function add([x, y]){
  return x + y;
}
add([1, 2]); // 3

// 字符串模板使用
String.raw`Hi\n${2+3}!`;
// 返回 "Hi\\n5!"
String.raw`Hi\\n`
// 返回 "Hi\\\\n"

// 函数使用
String.raw({ raw: 'test' }, 0, 1, 2);
// 't0e1s2t'

'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""
'na'.repeat(2.9) // "nana"

// 用途
// 补全指定位数
'1'.padStart(10, '0') // "0000000001"
// 另一个用途是提示字符串格式。
'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"

var regex = new RegExp('xyz', 'i');
// 等价于
var regex = /xyz/i;

new RegExp(/abc/ig, 'i').flags
// i

var s = 'aaa_aa_a';
var r1 = /a+/g;
var r2 = /a+/y;

r1.exec(s) // ["aaa"]
r2.exec(s) // ["aaa"]

r1.exec(s) // ["aa"]
r2.exec(s) // null

// ES5 的 source 属性
// 返回正则表达式的正文
/abc/ig.source
// "abc"

// ES6 的 flags 属性
// 返回正则表达式的修饰符
/abc/ig.flags
// 'gi'

// ES5的写法
parseInt('12.34') // 12
// ES6的写法
Number.parseInt('12.34') // 12
Number.parseInt === parseInt // true
// 这样做的目的，是逐步减少全局性方法，使得语言逐步模块化。

Math.trunc(4.1) // 4
Math.trunc(4.9) // 4
Math.trunc(-4.1) // -4
Math.trunc(NaN);      // NaN
Math.trunc('foo');    // NaN
Math.trunc();         // NaN
Math.trunc(undefined) // NaN

2 ** 3 // 8

// 相当于 2 ** (3 ** 2)
2 ** 3 ** 2
// 512


let a = 1.5;
a **= 2;
// 等同于 a = a * a;

let b = 4;
b **= 3;
// 等同于 b = b * b * b;

// 1
Array.isArray(arr)
// 2
Object.prototype.toString.call(arr)
// 3
arr.constructor === Array 
// 4
arr instanceof Array 

console.log(...[1, 2, 3])
// 1 2 3

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

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

 let obj = {
    // a:1,
    // b:2,
    // c:3,
    0:'a',
    c:'b',
    3:'c',
    length: 5
  }
  let arr = Array.from(obj)
  console.log(arr)// ["a", undefined, undefined, "c", undefined]

  Array.from(arrayLike, x => x * x);
  // 等同于
  Array.from(arrayLike).map(x => x * x);

  Array.from([1, 2, 3], (x) => x * x)
  // [1, 4, 9]

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

['a', 'b', 'c'].fill(7)
// [7, 7, 7]

new Array(3).fill(7)
// [7, 7, 7]

// 注意，如果填充的类型为对象，那么被赋值的是同一个内存地址的对象，而不是深拷贝对象。
let arr = new Array(3).fill([]);
arr[0].push(5);
// [[5], [5], [5]]

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]
[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]
[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]
[1, 2, , 4, 5].flat()
// [1, 2, 4, 5]

// 对象
let obj = {
        'a1':'1',
        'a2':'2',
        'a3':'3',
        'a4':'4',
      }
  delete obj.a1  // {'a2':'2','a3':'3','a4':'4'}
// 数组
let arr = [1,2,3,4,5]
  delete arr[1] // [1,3,4,5]

 -0 === 0 // true
 NaN === NaN //false

 Object.is(-0,0) //false
 Object.is(NaN,NaN) //true

const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

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]
}

let s1 = Symbol.for('foo');
let s2 = Symbol.for('foo');

s1 === s2 // true

// 数组去重
[...new Set(arr)]
function dedupe(array) {
  return Array.from(new Set(array));
}
dedupe([1, 1, 2, 3]) // [1, 2, 3]
// 字符串去重
[...new Set(string)].join('')

    let a = new Set([1, 2, 3]);
    let b = new Set([4, 3, 2]);
    // 并集
    let a1 = new Set([...a,...b])
    // 交集
    let a2 = new Set([...a].filter(x=>b.has(x)))
    // 差集
    let a3 = new Set([...a].filter(x=> !b.has(x)))
    console.log(a1,a2,a3,a4)

const myMap = new Map()
  .set(true, 7)
  .set({foo: 3}, ['abc']);
[...myMap]
// [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]

new Map([
  [true, 7],
  [{foo: 3}, ['abc']]
])

function strMapToObj(strMap) {
  let obj = Object.create(null);
  for (let [k,v] of strMap) {
    obj[k] = v;
  }
  return obj;
}

const myMap = new Map()
  .set('yes', true)
  .set('no', false);
strMapToObj(myMap)
// { yes: true, no: false }

function objToStrMap(obj) {
  let strMap = new Map();
  for (let k of Object.keys(obj)) {
    strMap.set(k, obj[k]);
  }
  return strMap;
}

objToStrMap({yes: true, no: false})
// Map {"yes" => true, "no" => false}

function strMapToJson(strMap) {
  return JSON.stringify(strMapToObj(strMap));
}

let myMap = new Map().set('yes', true).set('no', false);
strMapToJson(myMap)
// '{"yes":true,"no":false}'

function mapToArrayJson(map) {
  return JSON.stringify([...map]);
}

let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);
mapToArrayJson(myMap)
// '[[true,7],[{"foo":3},["abc"]]]'

function jsonToStrMap(jsonStr) {
  return objToStrMap(JSON.parse(jsonStr));
}

jsonToStrMap('{"yes": true, "no": false}')
// Map {'yes' => true, 'no' => false}

function jsonToMap(jsonStr) {
  return new Map(JSON.parse(jsonStr));
}

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

  // 字符串 => 数组
  let str = 'abcd'
  console.log(str.split('')) // ['a','b','c','d']
  console.log(Array.from(str)) // ['a','b','c','d']
  console.log([...str]) // ['a','b','c','d']

  // 字符串 => 对象
  let str = 'abcd'
  console.log({...str}){} // {0: "a", 1: "b", 2: "c", 3: "d"}

  // 数组合并
  let arr = [...arr1,...arr2]

  // 数组 => 字符串
  let arr = ['a','b','c']
  console.log(arr.join('')) //abc 
  let arr = ['a','b','c']
  console.log(JSON.stringify(arr)) //"["a","b","c"]"  
  let arr = ['a','b','c']
  let s = arr.toString()
  let s1 = arr.join()
  console.log(s,s1) // a,b,c a,b,c

  // 数组 => 对象
  let arr = ['a','b','c']
  console.log({...arr}) //{0: "a", 1: "b", 2: "c"}

  // 数组 => Set
  let arr = ['a','b','c']
  console.log(new Set(arr)) //Set(3) {"a", "b", "c"}

  // 数组 => Map 参数里面多一层[]
new Map([ [true, 7], [{foo: 3}, ['abc']] ])

  // 对象合并
  let obj = {...obj1,...obj2}
  // 对象 => 字符串
  let obj = {a:1}
  console.log(obj.toString()) // [object Object]
  
  // 对象 => 数组
  // 用Array.from 前提 obj参数有length
  let obj = {'0':1,'s':2,length:2}
  console.log(Array.from(obj)) // [1, undefined]
  
  let obj = {'a':'我','b':'你'}
  for (let [key,value] of Object.entries(obj)){
    console.log(key,value)
  }
  // 对象 =>  Map
  function objToStrMap(obj){
    let strMap = new Map()
    for(let [k,v] of Object.entries(obj)){
      strMap.set(k,v)
    }
     return strMap
  }
  objToStrMap({yes: true, no: false})

  // Set => 数组
  let set = new Set([1,2,3,4])
  console.log([...set]) // [1,2,3,4]

  // Set => 对象
  let set = new Set([1,2,3,4])
  console.log({...[...set]})

var proxy = new Proxy(target, handler);
handler = {
  get: function (target, key, receiver) {
    console.log(`getting ${key}!`);
    return Reflect.get(target, key, receiver);
  },
  set: function (target, key, value, receiver) {
    console.log(`setting ${key}!`);
    return Reflect.set(target, key, value, receiver);
  }

var myObject = {
  foo: 1,
  bar: 2,
  get baz() {
    return this.foo + this.bar;
  },
}
Reflect.get(myObject, 'foo') // 1
Reflect.get(myObject, 'bar') // 2
Reflect.get(myObject, 'baz') // 3

var myObject = {
  foo: 1,
  bar: 2,
  get baz() {
    return this.foo + this.bar;
  },
};

var myReceiverObject = {
  foo: 4,
  bar: 4,
};

Reflect.get(myObject, 'baz', myReceiverObject) // 8

var myObject = {
  foo: 1,
  set bar(value) {
    return this.foo = value;
  },
}

myObject.foo // 1

Reflect.set(myObject, 'foo', 2);
myObject.foo // 2

Reflect.set(myObject, 'bar', 3)
myObject.foo // 3

  let obj = {
    data:['hello','word'],
    [Symbol.iterator]:function(){
      let that = this
      let index = 0
      return {
        next:function(){
          index += 1
          if(index>2){
            return {value:that.data[index-1],done:true}
          }else{
            return {value:undefined,done:false}
          }
        }
      }
    }
  }
  for (let k of obj) {
    console.log(k)
  }

for (var n of fibonacci) {
  if (n > 1000)
    break;
  console.log(n);
}

function* helloWorldGenerator() {
    yield 'hello';
    yield 'world';
    return 'ending';
  }
  
  var hw = helloWorldGenerator();
  console.log([...hw]) // ["hello", "world"]

  console.log(hw.next()) // {value: "hello", done: false}
  console.log(hw.next()) // {value: "world", done: false}
  console.log(hw.next()) // {value: "ending", done: true}
  console.log(hw.next()) // {value: undefined, done: true}

@testable
class MyTestableClass {
  // ...
}

function testable(target) {
  target.isTestable = true;
}

MyTestableClass.isTestable // true

const obj = {
  prop: 42
};

Object.freeze(obj);

obj.prop = 33;
// Throws an error in strict mode

console.log(obj.prop);
// expected output: 42