es6 笔记

1 let 块级作用域

function test(){
  for(let i=1;i<3;i++){
    console.log(i);
  }
  console.log(i);
}
test();

执行结果：

原因： let是for循环中的块级作用域中，所以在for循环中可以获取到i 但是在for循环外面 无法获取到i；

提示语法错误，是因为es6默认使用了严格模式： use strict； 未定义的变量 不能引用 所以提示语法错误；

 

2.const定义的常量 必须初始化：

const PI;
PI = 323123;
console.log(PI)

结果：

 

3 const定义的常量不可以改变，但是对象可以改变，因为声明的是指针，但是改变的是对象的值：

const s = {
  a:1
}

s.b = 2;

console.log(s);

 

4  解构赋值

//基本用法：交换两个值
{
  let a,b,rest;
  [a,b]=[1,2];
  console.log(a,b);
}
//rest=[3,4,5,6],数组赋值 
{
  let a,b,rest;
  [a,b,...rest]=[1,2,3,4,5,6];
  console.log(a,b,rest);
}
//对象赋值
{
  let a,b;
  ({a,b}={a:1,b:2})
  console.log(a,b);
}
//初始化
{
  let a,b,c,rest;
  [a,b,c=3]=[1,2];
  console.log(a,b,c);
}
//应用场景1：可以方便的交换两个数值；
{
  let a=1;
  let b=2;
  [a,b]=[b,a];
  console.log(a,b);
}
//应用场景2：可以方便的获取函数返回的数值
{
  function f(){
    return [1,2]
  }
  let a,b;
  [a,b]=f();
  console.log(a,b);
}
//输出的结果是1,4；
//类似的只想获取数组第一个元素：
//[a] = f();
{
  function f(){
    return [1,2,3,4,5]
  }
  let a,b,c;
  [a,,,b]=f();
  console.log(a,b);
}
//a=1;b=[3,4,5]
{
  function f(){
    return [1,2,3,4,5]
  }
  let a,b,c;
  [a,,...b]=f();
  console.log(a,b);
}
//对象的解构赋值，以前都是用 let p = o.p 去做
{
  let o={p:42,q:true};
  let {p,q}=o;
  console.log(p,q);
}
//使用默认值， a=3,b=5
{
  let {a=10,b=5}={a:3};
  console.log(a,b);
}
// 应用场景：例如取到返回的json数据，注意的是的获取name时，
//结构和返回结构一样，esTitle和 cnName是 自定义的值
//如果用以前的方法：
//let cnName = metaData.test[0].name;
//let esTitle = metaData.title;
{
  let metaData={
    title:'abc',
    test:[{
      name:'test',
      desc:'description'
    }]
  }
  let {title:esTitle,test:[{name:cnName}]}=metaData;
  console.log(esTitle,cnName);
}

 5 es6 正则

{
    // 正则的两种方式 #构造函数#
    let regex = new RegExp('xyz', 'i'); //第一个参数是字符串，第二个是修饰符
    let regex2 = new RegExp(/xyz/i); //第一个参数是正则表达式，不接受第二个参数，否则会报错
    console.log(regex.test('xyz123'), regex2.test('xyz123'));
    console.log(regex.test('xyZ123'), regex2.test('xyZ123'));

    let regex3 = new RegExp(/abc/ig, 'i'); //ES6的写法，可以接受第二个参数，覆盖第一个
    console.log(regex3.flags); //原有正则对象的修饰符是ig，它会被第二个参数i覆盖 flags获取修饰符

}

// 字符串对象的4个使用正则表达式的方法： match(),replace(),search(),split()这四个方法全部调用RegExp的实例的方法。

{
    let regex = new RegExp('xyz', 'ig');
    console.log(regex.test('xyz0XYZ1xyz2'), regex.exec('xyz0XYZ1xyz2'));
}

{
    // y修饰符
    let s = 'bbbb_bbb_bb_b';
    var a1 = /b+/g;
    var a2 = /b+/y;
    //第一次匹配之后，g 是从d第一次匹配之后_往后匹配到合适的位置
    //但是y，是从第一次匹配之后紧接着继续匹配，所以_不能匹配到；
    //如果 xyzxyzxyz,匹配xyz 则g和y都能匹配到
    console.log(a1.exec(s), a2.exec(s)); // ["bbbb"],["bbbb"]
    console.log(a1.exec(s), a2.exec(s)); // ["bbb"],null

    console.log(a1.sticky, a2.sticky); //表示查询是否开启了粘连模式
}

5.

{
  let str="string";
  console.log('includes',str.includes("c"));//字符串中是否包含c
  console.log('start',str.startsWith('str'));//字符串中以str开头
  console.log('end',str.endsWith('ng'));//字符串中以ng结尾
}

{
  let str="abc";
  console.log(str.repeat(2));//字符串重复N次
}
//字符串模板
{
  let name="list";
  let info="hello world";
  let m=`i am ${name},${info}`;
  console.log(m);
}
//ES7草案，但是有babel-polyfill就可以使用；
// padStart 第一个参数是 2 表示要有2位，第二个参数表示补充的值
// 例如日期 01
{
  console.log('1'.padStart(2,'0')); //向前补充
  console.log('1'.padEnd(2,'0')); //向后补充
}

//可以将换行符 \n 再转成字符\n
{
  console.log(String.raw`Hi\n${1+2}`);
  console.log(`Hi\n${1+2}`);
}

 6 数组扩展

{
  let arr = Array.of(3,4,7,9,11);
  console.log('arr=',arr);//[3,4,7,9,11]

  let empty=Array.of();
  console.log('empty',empty);//[]
}

{
  let p=document.querySelectorAll('p');//并不是数值上的数组 比如不能使用forEach
  let pArr=Array.from(p);//这个方法，生成数组
  pArr.forEach(function(item){
    console.log(item.textContent);
  });
  //处理数组的每个值
  console.log(Array.from([1,3,5],function(item){return item*2}));
}

{
  console.log('fill-7',[1,'a',undefined].fill(7)); //把数组中的内容都变成7
  console.log('fill,pos',['a','b','c'].fill(7,1,3));//7表示替换为哪个元素，1和3表示起始和结束为止
}

{
  for(let index of ['1','c','ks'].keys()){ //获取数组的索引值
    console.log('keys',index);
  }
  for(let value of ['1','c','ks'].values()){//获取数组的value值
    console.log('values',value);
  }
  for(let [index,value] of ['1','c','ks'].entries()){//既可以获取索引也可以获取value值
    console.log('values',index,value);
  }
}

{
  console.log([1,2,3,4,5].copyWithin(0,3,4));//把0这个位置的数字 替换成 3到4位置的数字 
  //所以结果是 [4,2,3,4,5]
}

{
  console.log([1,2,3,4,5,6].find(function(item){return item>3}));//从前往后 找到第一个符合的value
  console.log([1,2,3,4,5,6].findIndex(function(item){return item>3}));//从前往后 找到第一个符合的index
}

{
  console.log('number',[1,2,NaN].includes(1));//相当于indexOf，但是处理了 NaN
  console.log('number',[1,2,NaN].includes(NaN));
}

 7

{
  function test(x, y = 'world'){
    console.log('默认值',x,y);
  }
  test('hello');
  test('hello','kill');
}

{
  //找本作用域中的x 结果是 作用域,kill,kill
  let x='test';
  function test2(x,y=x){
    console.log('作用域',x,y);
  }
  test2('kill');
}

{ 
  //y先找本作用块中的x 如果没有再找外层的 所以结果是 作用域，test，test
  let x='test';
  function test2(c,y=x){
    console.log('作用域',x,y);
  }
  test2('kill');
}

//把数组传入的参数 转成
{
  function test3(...arg){
    for(let v of arg){
      console.log('rest',v);
    }
  }
  test3(1,2,3,4,'a');
}

{
  console.log(...[1,2,4]);
  console.log('a',...[1,2,4]);
}

{
  let arrow = v => v*2;
  let arrow2 = () => 5;
  console.log('arrow',arrow(3));
  console.log(arrow2());

}
//尾调用 方便使用递归
{
  function tail(x){
    console.log('tail',x);
  }
  function fx(x){
    return tail(x)
  }
  fx(123)
}

{
  // 数据结构横向对比，增，查，改，删
  let map=new Map();
  let array=[];
  // 增
  map.set('t',1);
  array.push({t:1});

  console.info('map-array',map,array);

  // 查
  let map_exist=map.has('t');
  let array_exist=array.find(item=>item.t);
  console.info('map-array',map_exist,array_exist);

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

  // 删
  map.delete('t');
  let index=array.findIndex(item=>item.t);
  array.splice(index,1);
  console.info('map-array-empty',map,array);
}

{
  // set和array的对比
  let set=new Set();
  let array=[];

  // 增
  set.add({t:1});
  array.push({t:1});

  console.info('set-array',set,array);

  // 查
  let set_exist=set.has({t:1});//这里为false 因为需要单独保存一个对象 在查找；使用的是has方法
  let array_exist=array.find(item=>item.t);
  console.info('set-array',set_exist,array_exist);

  // 改
  set.forEach(item=>item.t?item.t=2:'');
  array.forEach(item=>item.t?item.t=2:'');
  console.info('set-array-modify',set,array);

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

{
  // map,set,object对比
  let item={t:1};
  let map=new Map();
  let set=new Set();
  let obj={};

  // 增
  map.set('t',1);
  set.add(item);
  obj['t']=1;

  console.info('map-set-obj',obj,map,set);

  // 查
  console.info({
    map_exist:map.has('t'),
    set_exist:set.has(item),
    obj_exist:'t' in obj
  })

  // 改
  map.set('t',2);
  item.t=2;
  obj['t']=2;
  console.info('map-set-obj-modify',obj,map,set);

  // 删除
  map.delete('t');
  set.delete(item);
  delete obj['t'];
  console.info('map-set-obj-empty',obj,map,set);
}

 promise 方法：

 {
  // 基本定义
  let ajax=function(callback){
    console.log('执行');
    setTimeout(function () {
      callback&&callback.call()
    }, 1000);
  };
  ajax(function(){
    console.log('timeout1');
  })
}

{
  let ajax=function(){
    console.log('执行2');
    return new Promise(function(resolve,reject){
      setTimeout(function () {
        resolve()
      }, 1000);
    })
  };

  ajax().then(function(){
    console.log('promise','timeout2');
  })
}

{
  let ajax=function(){
    console.log('执行3');
    return new Promise(function(resolve,reject){
      setTimeout(function () {
        resolve()
      }, 1000);
    })
  };

  ajax()
    .then(function(){
    return new Promise(function(resolve,reject){
      setTimeout(function () {
        resolve()
      }, 2000);
    });
  })
    .then(function(){
    console.log('timeout3');
  })
}

{
  let ajax=function(num){
    console.log('执行4');
    return new Promise(function(resolve,reject){
      if(num>5){
        resolve()
      }else{
        throw new Error('出错了')
      }
    })
  }

  ajax(6).then(function(){
    console.log('log',6);
  }).catch(function(err){
    console.log('catch',err);
  });

  ajax(3).then(function(){
    console.log('log',3);
  }).catch(function(err){
    console.log('catch',err);
  });
}

{
  // 所有图片加载完再添加到页面 再执行 resolve方法
  function loadImg(src){
    return new Promise((resolve,reject)=>{
      let img=document.createElement('img');
      img.src=src;
      img.onload=function(){
        resolve(img);
      }
      img.onerror=function(err){
        reject(err);
      }
    })
  }

  function showImgs(imgs){
    imgs.forEach(function(img){
      document.body.appendChild(img);
    })
  }

  Promise.all([
    loadImg('http://i4.buimg.com/567571/df1ef0720bea6832.png'),
    loadImg('http://i4.buimg.com/567751/2b07ee25b08930ba.png'),
    loadImg('http://i2.muimg.com/567751/5eb8190d6b2a1c9c.png')
  ]).then(showImgs)

}

{
  // 有一个图片加载完就添加到页面
  function loadImg(src){
    return new Promise((resolve,reject)=>{
      let img=document.createElement('img');
      img.src=src;
      img.onload=function(){
        resolve(img);
      }
      img.onerror=function(err){
        reject(err);
      }
    })
  }

  function showImgs(img){
    let p=document.createElement('p');
    p.appendChild(img);
    document.body.appendChild(p)
  }

  Promise.race([
    loadImg('http://i4.buimg.com/567571/df1ef0720bea6832.png'),
    loadImg('http://i4.buimg.com/567751/2b07ee25b08930ba.png'),
    loadImg('http://i2.muimg.com/567751/5eb8190d6b2a1c9c.png')
  ]).then(showImgs)

}

genertaor

{
  // genertaor基本定义
  let tell=function* (){
    yield 'a';
    yield 'b';
    return 'c'
  };

  let k=tell();

  console.log(k.next());
  console.log(k.next());
  console.log(k.next());
  console.log(k.next());
}

{
  let obj={};
  obj[Symbol.iterator]=function* (){
    yield 1;
    yield 2;
    yield 3;
  }

  for(let value of obj){
    console.log('value',value);
  }
}

{
  let state=function* (){
    while(1){
      yield 'A';
      yield 'B';
      yield 'C';
    }
  }
  let status=state();
  console.log(status.next());
  console.log(status.next());
  console.log(status.next());
  console.log(status.next());
  console.log(status.next());
}

// {
//   let state=async function (){
//     while(1){
//       await 'A';
//       await 'B';
//       await 'C';
//     }
//   }
//   let status=state();
//   console.log(status.next());
//   console.log(status.next());
//   console.log(status.next());
//   console.log(status.next());
//   console.log(status.next());
// }
//

{
  let draw=function(count){
    //具体抽奖逻辑
    console.info(`剩余${count}次`)
  }

  let residue=function* (count){
    while (count>0) {
      count--;
      yield draw(count);
    }
  }

  let star=residue(5);
  let btn=document.createElement('button');
  btn.id='start';
  btn.textContent='抽奖';
  document.body.appendChild(btn);
  document.getElementById('start').addEventListener('click',function(){
    star.next();
  },false)
}

{
  //使用es5方法，使用全局变量
  let count = 5;
  let draw=function(){
    //具体抽奖逻辑
    console.info(`剩余${count}次`)
  }
  let residue=function (){
    if (count>0) {
      count--;
      draw();
    }
  }
  let btn=document.createElement('button');
  btn.id='start';
  btn.textContent='抽奖';
  document.body.appendChild(btn);
  document.getElementById('start').addEventListener('click',function(){
    residue(count)
  },false)
}


{
  // 长轮询
  let ajax=function* (){
    yield new Promise(function(resolve,reject){
      setTimeout(function () {
        resolve({code:0})
      }, 200);
    })
  }

  let pull=function(){
    let genertaor=ajax();
    let step=genertaor.next();
    step.value.then(function(d){
      if(d.code!=0){
        setTimeout(function () {
          console.info('wait');
          pull()
        }, 1000);
      }else{
        console.info(d);
      }
    })
  }

  pull();
}