es6 笔记

爱被打了一巴掌 2022-01-12 13:25 180阅读 0赞

1 let 块级作用域

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

执行结果：

![693756-20190330175017498-1982213718.png][]

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

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

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

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

结果：

![693756-20190330180256545-2105603123.png][]

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); //表示查询是否开启了粘连模式
    }

{
      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));
    }

{
      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();
    }

转载于:https://www.cnblogs.com/xiaozhumaopao/p/10628364.html

[693756-20190330175017498-1982213718.png]: /images/20220109/89703376b4b24c84840d81135526cc9a.png
[693756-20190330180256545-2105603123.png]: /images/20220109/2a072db5001f47e4b3bee55aa79c9bd5.png