SOURCE

/**
	1.内层变量覆盖外层变量

//1.var
var name = 'Faker';
while(true){
  var name = 'zhuyong';
  console.log(name); //zhuyong
  break;
  
}

console.log(name);//zhuyong

//2.let
let names = 'Faker'
while(true){
  let names = 'zhuyong';
  console.log(names);//zhuyong
  break;
}

console.log(names);//Faker


/*
	2.循环变量泄露为全局变量


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

a[6]();//10

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

a[6]();//6

//const 声明常量，一旦声明，常量值不得改变 一般使用在对象的引用和常量定义,引入第三方库

const PI = 3.141596285;

PI = 8;
console.log(PI);//Assignment to constant variable.

const moment = require('moment');



//set 和map 数据结构 与Array曾
//删、盖查对比

let map = new Map();
let set = new Set();
let array = [];

//add 
map.set('t',1);
set.add({t:1});
array.push({t:1});

console.info(map,set,array);
//map{'t'=>1} set{{t:1}} 
//array[{t:1}]

//select
let map_exist = map.has('t');
let set_exist = set.has({t:1});
let array_exist = array.find(item => item.t);

console.info(map_exist,set_exist,array_exist);
//true false {t:1}

//modify
map.set('t',2);
set.forEach(item => item.t ? item.t = 2 : '');
array.forEach(item => item.t ? item.t = 2 : '');

console.info(map,set,array);

//delete
map.delete('t');
set.forEach(item => item.t ? set.delete(item) : '');
let index = array.findIndex(item => item.t);
array.splice(index,1);
console.info(map,set,array);




//calss extends super

class Human {
  constructor(name) {
    this.name = name;
  } 
  sleep() {
    console.log(this.name + " is sleeping"); 
  } 
} 
let man = new Human("Davis"); 
man.sleep(); 

class Boy extends Human {
  constructor(name, age) {
    super()
    this.name = name; 
    this.age = age; } 
  info(){
    console.log(this.name + 'is ' + this.age + 'years old'); 
  } 
} 
let son = new Boy('Faker','8'); 
son.sleep();
son.info();

//constructor 构造函数  子类必须调用 super();super关键字，它指代父类的实例（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。





//arrow function 箭头函数


//ES5
let arr = [1,3,5,7,9];
arr.forEach(function(val,key){
  return console.log(val,key);
});

//ES6
arr.forEach((val,key) => console.log(val,key));

class Human {
  constructor(name){
    this.name = name; 
  } 
  sleep() {
    setTimeout( () => { 
      console.log(this.name + "is sleeping");
    }, 1000) 
  } 
}

let man = new Human("mis Ma");
man.sleep();

//当我们使用箭头函数时，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，它的this 是继承外面的，因此内部的this就是外层代码块的this。





// template string  模板字符串 ：使用 '`'来创建的字符串，此种方法创建的字符串里面可有包含美元符号加花括号包裹的变量${val} ,可理解为java 中的格式化字符串中的占位字符串


let num = Math.random();
console.log(`num is ${num}`);

$("#main").html(` <h1>今天天气很好！</h1> <p>产生一个随机数${num}</p> `);
//模板字符串中所有的空格，新行缩进，都会原样输出在生成的字符串中。



//destructuring  解构：按一定模式，从数字和对象中提取值，对变量进行赋值。

//用途一：交换变量的值  不需要中间变量，

let a = 1;
let b = 2;
[a,b] = [b,a];
console.log(a,b);

//用途二，提取json 
let jsonData = {
  id : 1,
  name : 'zhuy',
  age : '26',
  data : [5,5]
  
};

let {id,name,age,data} = jsonData;

console.log(id,age,name,data);


//用途三，函数参数定义

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

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



//default 默认参数

//传统指定默认参数
function say1(name){
  var name = name || 'Faker';
  console.log('Hello'+name);
}

//ES6 默认参数
function say2(name = 'Davis'){
  console.log(`hello `);
}



//rest 参数
//rest 参数只包括那些没有给出名称的参数
//rest 参数是Array的实力，可以直接应用sort,map,forEach,pop 等方法；
//rest 参数之后不能再有其它参数
//函数的length属性，不包括rest参数；

function fn(x,y,...rest){
  console.log(rest);
}
fn(1,2,'pake',6) //['pake',6]
console.log(fn.length); //2

*/

//Proxy 代理服务，可监听对象身上发生了什么事，并在这些事情之后执行一些相应的操
//定义被监听的目标对象
let man = {name:'helle',age:26};

//定义处理程序
let handle = {
  set(receiver,property,value){
    console.log(property,'is changed to',value);
    receiver[property] = value;
  }
};

//创建代理进行侦听
man = new Proxy(man,handle);

//触发代理
man.age = 22;
man.name = 'zhuyong';

//Promise 对象状态 分为三种：
//1.pending (执行中)
//2.Resolved(已完成)
//3.Rejected(已失败)

<div id="main"><div>