ES6

ES6

严格模式

  1. 两种方式开启严格模式

    • 在script标签内的开头使用 “use strict”;

    • //模块开发,自动严格模式
  2. 开启严格模式的注意事项

    • 变量必须声明后再使用

    • 函数的形参不能有同名,否则报错

    • 不能使用with语句

      • with(div.style){
            width="100px";
            height="100px";
            backgroundColor="red";
            border="1px solid #000000";
        }//给div增加样式
        
    • 不能对只读属性赋值,否则报错

      • div.offsetLeft=300;
        
        var str="";
        str.length=0;
        
        var obj={};
        Object.defineProperty(obj,"a",{
            writable:false//obj下面的a不能被修改
        })
        obj.a=10;
        
    • 不能使用前缀 0 表示八进制数,否则报错

      • 因为八进制数基本用不上
    • 不能删除不可删除的属性,否则报错

      • var arr=[1,2];
        delete arr.length;//数组的长度不能被删除,否则报错
        
        var obj={}
        Object.defineProperty(obj,"a",{
            configurable:false  //表示不能删除a
        });
        delete obj.a;
        
    • eval不会在它的外层作用域引入变量

      • eval 反射,将字符串反射为该字符串变量名的对象

      • var obj1={};
        var obj2={};
        var obj3={};
        var obj4={};
        for(var i=1;i<5;i++){
            eval("obj"+i).a=i*10;//将eval里面的字符串反射为对象
            //eval括号里面用+进行字符串拼接,表示第几个obj,给对应obj下面的a赋值
        }
        console.log(obj1,obj2,obj3,obj4)
        
        for(var i=0;i<6;i++){
            eval("div"+i).innerHTML=i;
        }//给对应div里面添加对应的i的值,不用获取div元素,直接赋值
        
        
    • eval和arguments不能被重新赋值

    • 不能使用arguments.callee

    • 不能使用arguments.callee.caller

    • 在顶层函数中this不能执行window了,是undefined

      • function abc(){
            console.log(this);
        }
        abc();//普通函数调用,里面的this指向的是window;在严格模式下是undefined
        
        

let和const

  1. let

    • let定义的变量仅在{}作用域内使用
    • var 和 let可以混合使用
    • var和let,const的区别
      • var 会进行预解析
        • => let 和 const 不会进行预解析
        • => 你如果需要使用 let 或者 const 定义的变量
        • => 必须要先声明后使用
      • var 可以声明重复变量名
        • => let 和 const 不允许声明重复变量名
        • => 如果你使用 let 或者 const 定义变量
        • => 那么你要保证你变量名的唯一性
      • var 没有块级作用域
      • => let 和 const 有块级作用域
      • => 块级作用域:
      • -> 只针对于 let 或者 const 定义的变量
      • -> 任何可以书写代码段的 大括号({}) 都能限制变量的使用范围
      • 注意:对象不是块级作用域,var obj = { 不是代码段, 是数据 }
  2. const

    • 常量

    • 常量的变量名全部大写

    • 在声明时必须赋值,并且常量不可以修改值

    • 注意声明对象时,只能保证对象指针地址不变,对象自身的改变不会因此影响

    • const obj={a:1,b:2};
      obj={a:4,b:5};//不能这样写,会报错  //这样做可以防止obj的引用地址发生改变
      obj.a=10;//可以改变对象里面的值
      obj=null;//不能这样写,会报错  //会一直存在堆中,无法销毁
      
      

箭头函数

  1. 箭头函数是对 函数表达式 的简写

    • 函数表达式 - 也叫做匿名函数
  2. 箭头函数的特点

    • 箭头函数 只有一个形参 的时候可以省略小括号不写,没有形参或者多个形参必须写小括号
    • 箭头函数 只有一句话 的时候可以省略大括号不写,并且会自动把这一句话的结果返回
    • 箭头函数里面没有 this 关键字
      • 官方: 箭头函数里面的 this 是外部作用域的 this, 学名叫做上下文(context)
      • 私人: 箭头函数写在哪一行, 上一行的 this 就是这个箭头函数里面的 this
  3. 一个注意的地方

    var obj={
        a:function(){
            // ES5的方法
            console.log("a")
        },
        b(){
            // ES6的方法
            console.log("b");
        },
        c:()=>{
            // ES6箭头函数
            console.log("c");
        }
    }
    obj.a();
    obj.b();
    obj.c();
    

解构赋值

  • 把 对象 或者 数组 中的成员单独得到

  • 数组解析最重要的是按位解析,对象是按照属性名解析

  • 对象作为函数参数时,参数解构赋值后可以跳位,不需要按照顺序写

    • function fn({a,b=3,c}){
          console.log(a,b,c);
      }
      fn({a:10,c:20});
      
      
      var {a,b,c}={b:10,a:20,c:30};
      console.log(a,b,c);//自动解析
      var {a,b,c:{a:a1,b:b1}}={a:10,b:20,c:{a:30,b:40}};
      //对象里面还有对象时,给对象里面的值起个名字,可以输出
      var {a,b=100,c:{a:a1,b:b1=200}}={a:10,c:{a:30}};
      //=后面赋的值时初始值,后面没有值就给初始值
      var {a,b=100,c:{a:a1,b:b1=200}}={a:10,c:{a:30,b:40}};
      console.log(a,b,c)
      console.log(a,b,a1,b1);
      
  • 作用

      1. 函数返回多个元素时

        function fn(){
            var a=1;
            var b=2;
            var c=3;
            a++;
            b--;
            c+=4;
            return [a,b,c] //函数返回多个元素
        }
        //var arr=fn();
        //console.log(arr);
        var [a,b,c]=fn();
        console.log(a,b,c);//接收多个值
        
      2. 可以让函数的参数赋初值

        //c=3是是默认值,如果在实参中给c赋值,那么就是赋的那个值
        function fn([a,b,c=3]){
            console.log(a,b,c);
        }
        fn([1,2]);
        
        //函数参数直接赋值也可以
        function fn(a,b,c=3){
            console.log(a,b,c);
        }
        fn(3,5);
        
      3. 将加载进来的对象中方法解构出来形成全局的函数

        var {randomColor,ce}=Utils;
        console.log(randomColor());
        ce("div",{width:"50px",height:"50px",backgroundColor:randomColor()},"body");
        
      4. JSON解析

      5. 交换变量

        var x=3;
        var y=4;
        [x,y]=[y,x];
        

字符串扩展方法

  1. 字符的 Unicode 表示法 “\u4e00”

    • var num=0x4e00; var str;
    • str=String.fromCharCode(num); //将数字的Unicode编码转为字符
  2. includes()

    • 判断字符在字符串中是否存在

    • 返回值是一个布尔值

    • //能判断字符在字符串中是否存在的方法
      var str="ashdjsahdwi";
      console.log(str.indexOf("j")>-1);
      console.log(str.search(/j/)>-1);
      console.log(str.match(/j/));
      console.log(/j/.test(str));
      console.log(str.includes("j")); 
      
  3. startsWith()

    • 表示参数字符串是否在原字符串的头部

    • console.log("abcde".startWith("a"));判断字符串是不是以a开头
      console.log("abcde".startWith("b",1));判断第一位开始的是不是b
      console.log("car_0".startsWith("car_"));
      
  4. endsWith()

    • 表示参数字符串是否在原字符串的尾部

    • console.log("abc_car".endsWith("_car"));
      console.log("abc_car".endsWith("a",1));//第二个参数表示倒数第2个
      
  5. repeat()

    • 表示将原字符串重复几次,返回新的字符串

    • console.log("ab".repeat(3));
      
  6. padStart()

    • 字符串.padStart(长度,前面补充的字符);

    • console.log("#abcde".padStart(7,Math.floor(Math.random()*16).toString(16)))
      
  7. padEnd()

    • 字符串.padEnd(长度,后面补充的字符);
  8. 模板字符串

    • 可以直接换行书写

    • 当你需要在模板字符串里面解析变量的时候,你就写 ${ 你要解析的变量 }

    • var a=4;
      console.log(`abc${a}`);
      
  9. 标签模板

    alert `123`;//123
    
    function fn(a){
        console.log(a);
    }
    fn `3`;    //["3", raw: Array(1)]
    

symbol

  • 唯一,创建的永远没有相同的
  • 对象键值对中键可以是字符型也可以是Symbol型

Set和Map

  1. Set

    • Set数据类型,无重复列表类型

    • Set没有下标,不是按照下标存储,但是是有序的,不能使用下标循环遍历

    • 插入速度和删除速度非常快

    • 没有重复元素,任何元素存在唯一性,遍历查找速度也非常快,但是略低于对象类型

    • var ab=new Set();//创建
      ab.add(1);//添加数据
      ab.delete(2);//删除数据
      console.log(ab.has(3));//判断这个元素是否在列表中存在
      ab.clear();//清除所有数据
      console.log(ab.size);//size就是长度
      
    • 利用set进行数组去重(没有重复元素,任何元素存在唯一性)

      var arr=[1,3,5,7,2,4,3,5,1,2,6,5,7,8,9,1,2,4,3,5,7,9];
      arr=Array.from(new Set(arr));
      console.log(arr);
      
  2. Map

    • map是一种有长度的键值对数据结构

    • 具备数组的长度紧密型,又具备对象的键值对方法

    • 它的获取,删除,查询,遍历速度很快

      var map=new Map();
      map.set("name","tanxu");
      map.set("age",18);
      console.log(map.size);
      map.delete("name");//删除键名
      map.clear();//清楚掉所有数据
      console.log(map.get("age"))//获取某个键的值
      console.log(map.has("age"));//判断某个键是否存在
      console.log(map.values());//获取所有值的列表
      console.log(map.keys());//获取所有键的列表
      
      //遍历map
      map.forEach(function(value,key,map){
          console.log(value,key);
      })
      for(let key of map.keys()){
          console.log(key);
      }
      for(let value of map.values()){
          console.log(value);
      }
      for(let arr of map.entries()){
          console.log(arr[0],arr[1]);
      }//name tanxu
         age  18 
      
    • 任何类型都可以作为键使用

    • WeakSet WeakMap 弱引用类型

      • 弱引用,就是如果其中的强引用的类型地址设置为null,弱引用的关系会自动解除
      • 弱引用的类型不可以遍历
      • WeakMap 存储的key必须是对象

Generator生成器函数

  • 相当于打断点

  • function *abc(a,b){
        yield a;//一个yield相当于一个断点
        yield b;
        a++;
        yield a;
        b+=10;
        yield b;
        return a+b;
    }
    //生成器对象
    var a=abc(3,5);
    var obj=a.next();
    //value就是yield返回的结果,done就是是否函数运行完成
    console.log(obj);//{value:3,done:false}
    obj=a.next();
    console.log(obj);//{value:5,done:false}
    obj=a.next();
    console.log(obj);//{value:4,done:false}
    obj=a.next();
    console.log(obj);//{value:14,done:false}
    obj=a.next();
    console.log(obj);//{value:19,done:false}
    
    //通过循环来遍历
    while(!obj.done){
        obj=a.next();
        console.log(obj.value);
    }
    
    

    注意:

    var {a,b,c:{a:a,b:b}} = {a:10,b:20,c:{a:30,b:40}}
    console.log(a,b,a,b);//30 40 30 40
    
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值