zoukankan      html  css  js  c++  java
  • ES6新增特性

    ES6:  ECMA 第六次改版
     
    块级作用域:
      凡是被{ }包裹住的代码都是块级作用域,除了对象
          特点:会造成一个暂时性死区
     
     新增声明变量的两种方式:
    let: 
       a. 不能重复被定义
       b.没有变量声明提升
       c.有块级作用域的用法,可以在块级作用域里做个保留
      
    const:
        a.定义一个常量,不允许被修改
        b.没有变量声明提升
        c.声明了不能不允许不赋值
        d.支持块级作用域
     
    字符串模板:
       ES6之前
    var age = 20;
    var str = "<div class = 'box'><span>"+age+"</span></div>"
     
     ES6之后
    var age = 20;
    var str = `<div class = 'box'><span>${age}</span></div>`
     
    var age = "20";
    var str = `<div class = 'box'><span>${age.slice(1)}</span></div>`  // 变量可以做很多js操作
     
     
    字符串新增api:
    includes:
     匹配当前字符是否出现在字符串中,如果存在则返回true,不存在则返回false
    var str = "1906"
    console.log(str.includes(5)) //false
    console.log(str.includes(1)) //true
     
    startsWith:
      匹配字符串的第一个字符 如果存在则返回true 不存在返回false
    var str="1906"
    console.log(str.startsWith(9)) //false
     
    endsWith:
    匹配字符串的最后一个字符 如果存在则返回true 不存在返回false
    var str="1906"
    console.log(str.endsWith(9)) //false
     
    repeat(n) 重复多少次
    var str="1906"
    console.log(str.repeat(4) //代表当前这个句话重复4次
     
     
    解构赋值:
         按照某种规则,将数据进行拆分
    let arr = [10,20,30]
    let [a,b] = arr
    console.log(a,b)  //10 20
    let [,c,d] = arr
    console.log(c,d)  //20 30
     
    let obj = {a:1,b:2}
    let {a,b} = obj
    console.log(a,b)  //1 2
     
    var obj = {a:10,b:20,info:{name:"张三"}}
    var {info:{name:_name}} = obj;
    console.log(_name)  //张三
     
     
    扩展运算符:
    var arr = [10,20,30,40]
    fn(...arr)  //将数组的值展开传入fn中
     
    var obj = {"100px",height:"200px"}
    var obj = {background:"red",lineHeight:"30px"}
    var newObj = {...obj,...obj1}
    console.log(newObj)    //   {"100px",height:"200px",background:"red",lineHeight:"30px"}将两个对象值展开合并到一个对象里
     
    Symbol:独一无二
     
    作用:保护对象的属性和值
              数据保护
     
        Symbol是一个函数,
        也是ES6新增的数据类型,基本数据类型变成6个
       for in 是遍历不出来对象中Symbol的属性
       一般情况下用来做对象的key值
    const a = Symbol();
    console.log(typeof a)   //Symbol
     
    const a = Symbol("a");
    const b = Symbol("a");
    console.log(a == b)   //false
     
    var obj = {}
    var mySymbol = Symbol()
    obj[mySymbol] =18
    obj[Symbol()] =19
    obj[Symbol()] =20
    obj.a = 10
    obj.b = 23
    console.log(obj) //{Symbol():18,Symbol():19,Symbol():20,a:10,b:23}
     
    //object.keys( ),这个方法可以获取对象身上所有的key值,不包括Symbol,返回值是一个数组
    let arr = Object.keys(obj);
    console.log(arr);  //["a","b"]
     
    //获取Symbol的key值
    var arr1 = Object.getOwnPropertySymbols(obj);
    console.log(arr1) //[Symbol(),Symbol(),Symbol()]
    console.log(obj[arr1[0]]) //18
     
    对象新增方法
     
    对象的简写:
    let a = 10;
    let obj = {
     //a=a;  
       a, //key与value值相同的情况下 ,可以写一个值
     // show:function(){}
      show(){}  //方法简写
    }
     
    Object.is( )  用来判断两个对象的索引是否指向同一索引地址
    let obj = {a:10,b:20}
    let obj1 = obj
    let obj2 = {a:10,b:20}
    console.log(Object.is(obj,obj1)) //true
    console.log(Object.is(obj,obj2)) //false
     
    Object.assign( )  合并对象
      参数1:需要合并的对象
      参数2:被合并的对象
      参数3:被合并的对象
        ......
    返回值是一个新的对象
    var obj = {a:10,b:13}
    var obj1 = {c:131,d:23}
    var newObject = Object.assign(obj,obj1)
    console.log(newObj) //{a:10,b:13,c:131,d:23}
     
    数组新增方法:
     
    Array.of:将一组数值转换成数组
                 返回值是一个数组
    let arr = Array.of(1,2,3,4)
    console.log(arr)  //[1,2,3,4]
     
    includes:查找当前值是否属于当前数组  成功true  失败false
    var arr = [12,13,14,111]
    console.log(arr.includes(11))  //false
     
    Array.from:将一个伪数组转换成纯数组
    function fn(){
      console.log(Array.from(arguments))
    }
    fn(1,2,3,4,5)  //[1,2,3,4,5]
     
    console.log(Array.from(arguments) instanceof Array) //true
     
    Array.fill( )填充
    参数1:需要填充的数据
    参数2:(包括)填充开始的下标
    参数3:(不包括)结束的下标
    var arr = [10,20,30,40]
    console.log(arr.fill("a",1,3)) //[10,"a","a",40]
     
    Array.find( ) 根据条件找到相对应的值(最近的一个值)
    var arr = [10,20,30,40]
    var n = arr.find(function(item,index,array)){
      return item>20
    }
    console.log(n) //30
     
    Array.findIndex( ) 根据条件找到相对应值的下标(最近的一个值)
    var arr = [10,20,30,40]
    var n = arr.findIndex(function(item,index,array)){
      return item>20
    }
    console.log(n) //2
     
    函数参数的扩展   
    ES6之前
    function fn(a){
            var a = a || 10;  //用户传递参数就用参数,没传参数就是10
            console.log(a);
        }
        fn();   
    ES6之后
    function fn1(a=10){
            console.log(a);
        }
        fn1();  // 10
        fn1("aaa"); //"aaa"
     
    箭头函数:
         简单的来说就是把function 换成了 =>
            var fn = ()=>{
                console.log("111")
            }
            fn();
        语法1:
              var fn = a=>a;
              console.log(fn(2))
              var fn = (a,b)=>a+b;
              不写{}代表的是return
         语法2:
                var fn = ()=>({})
                console.log(fn())
            特点:
                1、箭头函数中没有this的指向,在箭头函数中this的指向会指向离他最近的那个作用域
                2、箭头函数中没有arguments这个参数
                3、不能当做构造函数
                4、箭头函数不能当做generator函数
        
  • 相关阅读:
    前端发版后清理浏览器缓存处理
    CF235A 【LCM Challenge】
    CF39H 【Multiplication Table】
    CF171C 【A Piece of Cake】
    CF450A 【Jzzhu and Children】
    CF387B 【George and Round】
    火柴棒等式
    P1062 数列 题解
    P1045 麦森数
    (原创)最短路径那些事-1
  • 原文地址:https://www.cnblogs.com/class1/p/11179375.html
Copyright © 2011-2022 走看看