VSCode调试ES6：配置方法

一、let & const 关键字

1.1 let & var 对比

• let 声明的变量只在 let 命令所在的代码块内有效；
  var 是在全局范围内有效。

{
    let a = 10;
    var b = 20;
}
console.log(b);  //20
console.log(a); //a is not defined

• let只能声明一次；
  var可以声明多次。

let a = 10;
let a = 11;

var b = 20;
var b = 21;

  循环计数器：

for (var i = 0; i < 10; i++) {
  setTimeout(function(){
    console.log(i);   //10
  })
}

for (let j = 0; j < 10; j++) {
  setTimeout(function(){
    console.log(j); //0-9
  })
}

• let不存在变量提升；
  var存在变量提升。

console.log(a);  //ReferenceError
console.log(b); //undefined
let a = 10;
var b = 20;

1.2 const关键字

• const声明只读变量，声明后必须初始化；保证变量指向的内存地址所保存的数据不允许改动。

const age; //SyntaxError: Missing initializer in const declaration

• 代码块内存在let或const变量，代码块会形成一个封闭区域。暂时性死区：只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。

var PI = "a";
if(true){
  console.log(PI);  // ReferenceError: PI is not defined
  const PI = "3.1415926";
}

二、解构赋值

  针对数组或对象进行赋值，解构模型包括解构源（右侧）、解构目标（左侧）。

参考链接：解构赋值

let test = (a = 5,b = [1,2],c = {name:'luffy',age:5},callback = ()=>{})=>{
  console.log(a);
  b.forEach((item)=>{
    console.log(item);
  })

  let {name,age} = c;
  console.log(name);
  console.log(age);
  callback && callback(name);

  return ['hello','world',"luffy","lalala"]
}

let printName = (name = 'default')=>{
  console.log(name)
}

let [A,B,...C] = test(4,[2,4],{name:'lalala',age :7},printName);
console.log(A);
console.log(B);
console.log(C);

2.1 数组模型解构-剩余运算符

let [a,b,...rest] = ['a','b','c','d'];
console.log(a);  //a
console.log(b);  //b
console.log(rest); //["c","d"]

2.3 对象模型解构-剩余运算符

let {a,b,...rest} = {a:'a',b:'b',c:'c',d:'d'};
console.log(a);  //a
console.log(b);  //b
console.log(rest); //{c:"c",d:"d"}

2.4 对象模型解构

let {a,b} = {a:2,b:3};
console.log(a);
console.log(b);

let [c,d] = [{a:4,b:7},5];
console.log(c.a);
console.log(d);


//-------------------------------------------------------------------------------------
function sum1({a=100,b=101}={}){
  console.log(a);
  console.log(b);
}

function sum2([a=100,b=101]=[]){
  console.log(a);
  console.log(b);
}

function sum3(func = ()=>{}){
    if(typeof func == 'function'){
      func();
    }
}

function sum4(...array){
    
}
sum1({a:122});
sum2([900]);
sum3();
sum4({a:122})
//-----------------------------------------------

三、Symbol数据类型

  已有数据类型：NumberString;Boolean;Objec t;null;undefined。
  Symbol表示独一无二的值，不能使用new创建。

let a = Symbol("kkk");
let b = Symbol("kkk");
console.log(typeof(a)); //symbol
console.log(a == b);  //false

四、Map与Set

4.1 Map

  一个 Object 的键只能是字符串或者 Symbols，但一个 Map 的键可以是任意值（字符串、对象、函数、NaN）。

let map = new Map();
map.set("name","luffy");
map.set("age",2);
console.log(map.get("name"));

  Map遍历，for of & forEach。

let map = new Map();
map.set("name","luffy");
map.set("age",2);
for([key,value] of map){
    console.log(key+":"+value);
}
for([key,value] of map.entries()){
    console.log(key+":"+value);
}
for(key of map.keys()){
    console.log(key);
}
for(value of map.values()){
    console.log(value);
}
map.forEach(function(key,value){
    console.log(key+":"+value);
},map)

  其余操作：Map 与 Array的转换;Map克隆;Map合并。

参考链接：Map操作 & Set操作

4.2 Set

  存储唯一的值。

let set  = new Set();
set.add(1);
set.add(2);
set.add(3);
set.add(3);
set.forEach(function(value){
    console.log(value);  //1 2 3
},set)

五、其余数据类型

  Object.assign(target, source_1, ···)->用于将源对象的所有可枚举属性复制到目标对象中。

Object.is(obj1,obj2);
Object.assign(obj1,obj2); //合并对象到obj1
Object.assign({},obj1,obj2); //不污染obj1

六、箭头函数

  格式：参数 => 函数体。
  箭头函数体中的 this 对象，是定义函数时的对象，而不是使用函数时的对象。（将外部 this 传递到回调函数中）

function fn(){
    setTimeout(()=>{
      // 定义时，this 绑定的是 fn 中的 this 对象
      console.log(this.a);
    },0)
  }
  var a = 20;
  fn.call({a: 18});  // 18

//this:谁调用这个函数，this指针指向谁
//sum.call(this);
function sum(){

}

//this:谁声明这个函数，this指针指向谁
let sum2 = ()=>{

}

七、Promise对象

  Promise是一个对象，从它可以获取异步操作的消息。Promise 异步操作有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。Promise解决异步编程（两个ajax请求调用）

• pending -> fulfilled
• pending -> rejected

  then 方法将返回一个 resolved 或 rejected 状态的 Promise 对象用于链式调用，且 Promise 对象的值就是这个返回值。

const p = new Promise(function(resolve,reject){
    resolve(1);
  }).then(function(value){ // 第一个then // 1
    console.log(value);
    return value * 2;
  }).then(function(value){ // 第二个then // 2
    console.log(value);
  }).then(function(value){ // 第三个then // undefined
    console.log(value);
    return Promise.resolve('resolve'); 
  }).then(function(value){ // 第四个then // resolve
    console.log(value);
    return Promise.reject('reject'); 
  }).then(function(value){ // 第五个then //reject:reject
    console.log('resolve:' + value);
  }, function(err) {
    console.log('reject:' + err);
  });

let promise = new Promise((resolve,reject)=>{
    2>3?resolve('success'):reject('fail'); 
    //return resolve('success);
})
promise.then((value)=>{
  console.log(value);
},(error)=>{
  console.log(error);
})
.catch(()=>{
  console.log('exeception')
})
.finally(()=>{
  console.log('finally')
})

八、async 函数

  async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。

async function asyncTest(){
    return "hello";
}

console.log(asyncTest());  // Promise { resolved }
asyncTest().then(
    (res) => {
        console.log(res); //hello
    }
)

  async 函数执行时，如果遇到 await 就会先暂停执行 ，等到触发的异步操作完成后，恢复 async 函数的执行并返回解析值;await 关键字仅在 async function 中有效。

function testAwait (x) {
    return new Promise((resolve) => {
      setTimeout(() => {
        // resolve(x);
      }, 2000);
    });
  }
async function helloAsync() {
    // let x = await testAwait("hello world");
    let x = testAwait("hello world");
    console.log(x);
    console.log("world"); 
  }
helloAsync ();

  await 针对所跟不同表达式的处理方式：

• Promise 对象：await 会暂停执行，等待 Promise 对象 resolve，然后恢复 async 函数的执行并返回解析值。
• 非 Promise 对象：直接返回对应的值。

九、回调函数

  方法就是对象，对象就是方法。

let func1 = (callback = ()=>{})=>{
  console.log("Hello!");
  callback && callback();
}

let func2 = ()=>{
  console.log(" world!");
}
func1(func2);

十、总结

  用async修饰的函数返回一个Promise对象，Promise对象与.then方法结合保证一致性（同步执行）。在用async函数修饰的内部使用await修饰的调用函数保证同步执行。【使用场景-取代Promise和.then方法结合使用，替换回调函数（callback）的写法】

async function testAsync(){
   return await printInfo();
};

let printInfo = ()=>{
  return new Promise((resolve,reject)=>{
      resolve('world');
      console.log("hhh");
      throw new Error('出错啦！');
  })
}

testAsync().then((value)=>{
    console.log(value);
},(reject)=>{
  console.log(reject);
});

async function asyncTest(){
    // let res = func1();
    let res = await func1();
    func2(res);
}

async function func1 (){

  return new Promise((resolve)=>{
      resolve('hello');
  })
}
let func2 = (res = 'default')=>{
  console.log(res);
}
asyncTest();