zoukankan      html  css  js  c++  java
  • ES6语法糖集锦

    sublime3安装Es6插件
    javascriptNext,然后安装即可
    Java​Script​Next - ES6 Syntax()高亮插件
    -----------------------------------------------------------------
    let、const命令 与var声明
    let块级作用域
    let不允许在代码块内重复声明一个变量
    function aa(){
     let a=3
      {
        let a=5 //子作用域
      }
    }
    使用var声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象;
    使用let声明的变量,其作用域为该语句所在的代码块内,不存在变量提升;
    使用const声明的是常量,在后面出现的代码中不能再修改该常量的值。
    -----------------------------------------------------------------
    数组结构:
    let [a,b,c,d] = ["aa","bb","23","44"]
    对象解构
    函数参数解构
    -----------------------------------------------------------------
    Symbol(值类型数据,唯一的)
    let a = 3
    let b = 3
    alert(a=b) //true
    -------------------
    let a = Symbol(3)
    let b = Symbol(3)
    alert(a=b)//false
    -----------------------------------------------------------------
    Set
    var set = new Set([1,2,3,4,5,2,8,4])//自动合并了重复值
    for(var key in set){
      console.log(key)  //1,2,3,4,5,8
    }
    ---------------------------------
    let arr = [1,2,3,4,2,86,4]
    arr.map(function(item){
      set add(elem) //添加元素
    })
    map---->Es5语法
    -----------------------------------------------------------------
    WeakSet(与Set类似唯一区别就是成员只能是对象)
    var weakset = new WeakSet();
    -----------------------------------------------------------------
    Map遍历 键可以是各种类型
    let obj1 = {};
    let obj2 = {};
    let obj = new Object();
    obj[obj1] = 33;
    obj[obj2] = 66;
    for(let key in obj){
      console.log(key) //只循环出一个object
    }
    ---------------------------------------
    var mapData = new Map();
    var obj1 = {};
    var obj2 = {};
    mapData.set(obj1,"22")  //添加新元素
    mapData.set(obj2,"22")  //添加新元素
    console.log(mapData.get("obj1")) //获取键
    console.log(mapData.has("obj1")) //判断是否含有键
    console.log(mapData.delete("obj1")) //删除键
    mapData.clear() //清空

    -----------------------------------------------------------------
    WeakMap不可遍历没有size属性
    var wm = new WeakMap();
    var obj = new Object();
    console.log(wm.get(obj)) //undefined
    console.log(wm.has(obj)) //false
    -----------------------------------------------------------------
    Itrator遍历器
    let arr = ["bob","pop","wow"];
    let op = arr[Symbol.iterator]();
    console.log(op.next());
    console.log([...arr]) //依旧是数组
    -----------------------------------------------------------------
    Generator函数;
    1.function的关键字和函数名称之间有个*号
    2.函数体内可以用yield语句
    3.函数调用后不会立即执行,返回的是一个遍历器对象;
    function Es.(){
    function *aa(){
    yield"中国";
    yield"美工";
    yield"技术";
    return "end";
    }
    let a = aa();
    console.log(a.netx());
    }
    -----------------------------------------------------------------
    Promise对象
    三种状态:Pending(等待)、resolve(成功)、reject(失败)
    异步操作解决方案,比原有的回调函数等方式更为合理
    该对象改变状态只有两种可能Pending转变为resolve,Pending转变为reject;

    
    

    function aa(){
    function bb(){
    return new Promise(function(resolve,reject){
    setTimeout(function(){
    console.log(123456)
    },1000)
    })
    }
    }
    -----------------------------------------------------------------
    async函数:(ES7)
    await Promise.reject("出错了") //抛出例外,直接到例外处理处
    var asyncFun = async function(){
    var a1 = await function(){
    setTimeout(function(){
    console.log(111)
    },3000)
    }();
    var a2 = await function(){
    setTimeout(function(){
    console.log(222)
    },1000)
    }();
    console.log("执行完毕")
    }
    asyncFun();//先打印222再打印111;
    ---------------------------------
    let asyncFun1 = async function(){
    console.log("aaa")
    return "第一个"
    }
    let asyncFun2 = async function(data){
    console.log("bbb"+data)
    return "第二个"
    }
    asyncFun1().then(asyncFun2).then(function(data){
    console.log("这是最后执行"+data)
    })

    
    

    -----------------------------------------------------------------
    箭头函数:(省去function关键字内部没有prototype和构造器constructor,不支持new操作,this指向会改变)

    
    

    Es5写法
    function a(a=6){
    return a*a
    }

    
    

    Es6写法
    let fn = (a=6)=>a*a;
    console.log(fn(9));//81

    
    

    Es5函数内部this不会改变,异步操作this也会改变如(async和setTimeout)
    -----------------------------------------------------------------
    class类(方法没有重载也就是说不可以覆盖)
    class Person{
    constructor(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
    }

    
    

    getName(){
    console.log(this.name)
    }
    }
    let person = new Person("bob",18,"男");
    person.getName();

     
  • 相关阅读:
    光线步进——RayMarching入门
    MATLAB GUI制作快速入门
    Python中用绘图库绘制一条蟒蛇
    node 常见的一些系统问题
    webpack 入门指南
    利用 gulp 来合并seajs 的项目
    移动端 解决自适应 和 多种dpr (device pixel ratio) 的 [淘宝] 解决方案 lib-flexible
    富有哲理的文章
    NodeJS 难点(网络,文件)的 核心 stream 四: writable
    Vue.js 源码学习笔记 -- 分析前准备2 -- Object.defineProperty
  • 原文地址:https://www.cnblogs.com/lhl66/p/8025782.html
Copyright © 2011-2022 走看看