zoukankan      html  css  js  c++  java
  • ES6随笔

    ------------恢复内容开始------------

    1、var 和 let 声明变量有什么区别:

      1)作用于不同:let 是在代码块内有效,var 是在全局范围内有效

      2)var具有变量声明提升,let没有变量声明提升

      3)var 可以在同一作用域重复声明变量,let不可以

      4)let 声明的变量具有暂时性死区,var没有 (ES6 明确规定,代码块内如果存在 let 或者 const,代码块会对这些命令声明的变量从块的开始就形成一个封闭作用域。代码块内,在声明变量 PI 之前使用它会报错。)

    2、let 和 const

      1)let 声明变量

      2)const 声明常量,声明的时候需要赋值,否则会报错! 声明赋值后不可以再修改

      3)目前const 修饰的数组或者对象,他们内部的元素是可以被修改的

    eg:  const names=['zhangsan','wangwu','ermazi']
       names[0] = ['lisi']
       console.log(names[0]) ->lisi

    3、解构赋值

       let obj = {p: ['hello', {y: 'world'}] };
      let         {p: [x, { y }] } = obj;
      // x = 'hello' // y = 'world'
    
      let obj = {p: ['hello', {y: 'world'}] };
      let         {p: [x, { }] } = obj; 
      // x = 'hello'
      //es6内部使用严格相等运算符(===),判断一个位置是否有值,所以,只有当一个数组成员严格等于undefined,默认值才会生效
      let [x = 1] = [undefined]   //console.log(x) ->1
      let [x = 1] = [null]  //console.log(null)
      // 函数形参解构赋值最终形式
      function({name, age=10, address, sex='男'} = {}){  // 这里需要等于一个默认的空对象{}
    
      }

    4、对象属性名表达式

    let obj = {}   // obj={A:[], B:[], ...Z:[]}
    
    for(let i=0;i<26;i++){
    
      // 65的ascii是A,每加1就是一直到Z
    
      let char = String.fromCharCode(65+i)  // 将十进制ASCII码转换成对应的字符
    
      obj[char] = []   // 对象属性名表达式
    
    }

    5、函数rest参数

    es5的接受实参的方式和es6不一样 
    
    es5:  function(){ console.log( arguments )}
    
    es6:function(...args){ console.log( args)}  //rest运算符的表现形式为...  ,剩余参数运算符只能出现在形参列表的最后面

    6、语句标签 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/label

     var i, j;
    
        loop1:
        for (i = 0; i < 3; i++) {      //The first for statement is labeled "loop1"
           loop2:
           for (j = 0; j < 3; j++) {   //The second for statement is labeled "loop2"
              if (i === 1 && j === 1) {
                 continue loop1;
              }
              console.log('i = ' + i + ', j = ' + j);
           }
        }
    
    // Output is:
    //   "i = 0, j = 0"
    //   "i = 0, j = 1"
    //   "i = 0, j = 2"
    //   "i = 1, j = 0"
    //   "i = 2, j = 0"
    //   "i = 2, j = 1"
    //   "i = 2, j = 2"
    // Notice how it skips both "i = 1, j = 1" and "i = 1, j = 2"

    7、箭头函数

      当箭头函数函数体有多行语句,用 {} 包裹起来,表示代码块,当只有一行语句,并且需要返回结果时,可以省略 {} , 结果会自动返回。

      当箭头函数要返回对象的时候,为了区分于代码块,要用 () 将对象包裹起来

      注意点:没有 this、super、arguments 和 new.target 绑定。

      箭头函数体中的 this 对象,是定义函数时的对象,而不是使用函数时的对象。!!!!!!!!

    var f = (a,b) => a+b;
    f(6,2);  //8
    // 当箭头函数函数体有多行语句,用 {} 包裹起来,表示代码块,当只有一行语句,并且需要返回结果时,可以省略 {} , 结果会自动返回。
    var f = (a,b) => {
     let result = a+b;
     return result;
    }
    f(6,2);  // 8
    // 当箭头函数要返回对象的时候,为了区分于代码块,要用 () 将对象包裹起来
    // 报错
    var f = (id,name) => {id: id, name: name};
    f(6,2);  // SyntaxError: Unexpected token :
     
    // 不报错
    var f = (id,name) => ({id: id, name: name});
    f(6,2);  // {id: 6, name: 2}
    
    // 箭头函数里面没有 this 对象,
    // 此时的 this 是外层的 this 对象,即 Window 
    // 箭头函数体中的 this 对象,是定义函数时的对象,而不是使用函数时的对象。
    function fn(){
      setTimeout(()=>{
        // 定义时,this 绑定的是 fn 中的 this 对象
        console.log(this.a);
      },0)
    }
    var a = 20;
    // fn 的 this 对象为 {a: 19}
    fn.call({a: 18});  // 18

    8、Set、Map

    1)Set 和 数组比较相似,有如下方法:

      size, add, delete, has, clear, forEach

      let aSet = new Set()

    // 数组去重
    var mySet = new Set([1, 2, 3, 4, 4]);
    [...mySet]; // [1, 2, 3, 4]
    
    // 并集
    var a = new Set([1, 2, 3]); 
    var b = new Set([4, 3, 2]);
    var union = new Set([...a, ...b]); // {1, 2, 3, 4} // 交集 var a = new Set([1, 2, 3]);
    var b = new Set([4, 3, 2]);
    var intersect = new Set([...a].filter(x => b.has(x))); // {2, 3} // 差集 var a = new Set([1, 2, 3]);
    var b = new Set([4, 3, 2]);
    var difference = new Set([...a].filter(x => !b.has(x))); // {1}

    2)Map

    var myMap = new Map();

    方法:set,get,has,delete,clear,forEach

    
    
    
    
    

    ------------恢复内容结束------------

  • 相关阅读:
    整合Spring与Hibernate
    基本正则
    vue权限指令
    vue数字动态转换大写
    element ui 表格动态生成多级表头、一级表头,可无限嵌套
    vuex和vue-router全家桶
    element表格内容过多title提示
    HBuilder打包App方法
    mui底部选项卡切换页面
    mui框架的地步选项卡公用加载对应页面demo
  • 原文地址:https://www.cnblogs.com/zhengyulu/p/14504574.html
Copyright © 2011-2022 走看看