zoukankan      html  css  js  c++  java

  • ES6 语法

    1. let
      • let 定义变量没有变量的提升（没有预解释）
      • let 定义的变量不能重复定义（无论函数还是let定义的变量都不可以重复定义）
      • 虽然不进行预解释，但是代码执行前，也是将定义的变量提前过滤一遍，一旦发现不合法的就直接报错了，代码也不会执行了。
    2. { } 
      • 是一个私有作用域 ，块级作用域 
      • // 自执行函数 { let a = 100; console.log(a); }
      • 注意：eval将字符串转为对象的时候，一定要加一个()
     
    let test = "{ name: 'Tom', age: '28' }";
    let obj = eval('('+ test +')');
    console.log('obj:',obj);    
        
        3. const
    • 定义的是静态变量(常量)，不能修改值，必须要赋值（不赋值会报错）
    • const不能重复声明（不管变量a是let动态变量，还是const静态变量，都不可以重复定义）----前提：同一作用域下
     
        4. 数组赋值        
    • 解构赋值
    let [a,b,c] = [1,2,3];
    console.log(a,b,c); //1,2,3
     
    let ary = ["a", "b"];
    let [a,b,c] = ary;
    console.log(a,b,c);  //a,b,undefined
     
    let ary = ["a", "b", "c", "d"];
    let [a,b,c] = ary;
    console.log(a,b,c);  //a,b,c
    • 嵌套赋值
    let [x,y,[s],[[f]]] = [1,2,[3],[[4]]];  // s、f均为变量，非数组
    console.log(x,y,s,f);
    • 省略赋值
    let array= [1,2,3,4,5];
    let a = array[0];
    let b = array[array.length - 1];
     
    //x是array的第一项，y是array的第五项
    let [x,,,,y]=array;
    console.log(x,y);
    • 不定参数赋值
    let [a,...b] = [1,2,3,4,5];
    console.log(a,b); // 1, [2,3,4,5]
     
    let [,,x,,...y] = [1,2,3,4,5,6,7,8,9,0];
    console.log(x,y);
    • 默认值
    // 1、变量名==属性名
    let {n1, n2} = obj;
    console.log(n1,n2);
    // 2、变量名不等于属性名
    let {n1: x1, n2: x2} = {n1: 'n1', n2: 'n2'};
    let {n, m:m1} = {n: 'nn', m: 'mm'};
    console.log(n,m1); //
     
     
    let [f0,f1]= [1];
    console.log(f0,f1);
     
    let [f2,f3=2] = [1];
    console.log(f2,f3);
    //判断一个位置是否有值，严格===判断，如果数组中成员不严格等于undefined，默认值不会生效。
    let [f=1] = [null];
    console.log(f);
     
     
    function fn(){
        console.log("哈哈哈");
    }
    let [x=fn(),y=0] = [1];
    console.log(x,y);
    //只要变量（比如x）所占在数组中的位置的值不是undefined，fn()根本不会触发执行
    1. 对象赋值
      • 解构赋值
    let {x,y="Y"}={x:"X",y:"YY"};
        let {m:[m1],n}={m:[1],n:1};
     
      //赋的值不是一个对象，是个其他数据类型的值，会默认将其他数据类型转为对象，再进行解构赋值
        let {x,y,__proto__}=1; //{__proto__:Number}
      console.log(x,y); //undefined,undefined
        console.log(__proto__);
        console.log(Object(1));    //{__proto__:Number}
     
     
        let {b,constructor}=Boolean.prototype;
     
        console.log(Object(Boolean.prototype));
        console.log(constructor);
     
        //没有默认值的形参的长度
        let {length,name} = function (a,b=1) {    };
        console.log(Object(function (a, b) {    }));
        console.log(length,name);
     
        //null和undefined 不能转为对象 会报错
        //let {nn}=null;
        let {mm}=undefined;
        console.log(nn);
        console.log(mm);
    • 对象数组的嵌套
    let obj = {a1:[1,2,3], a2:"123"};
    //x=obj.a1[0]、y=obj.a1[1]
    let {a2, a1:[x,y]} = obj;
    console.log(a2, x, y);
     
    let obj1 = {s:{n:'1'}, n:[1,'2',3,'4'], m:[[1]]};
    let {m:[x1], s:{n}, n:[,...m2]} = obj1;
    console.log(x1,n,m2); //[1], '1', ['2',3,'4']
    • 默认值
    let obj = {y: 2};
    console.log(obj.x); //undefined
    let {x=1,y} = {y: 2};
    console.log(x,y); 
     
    let {m:n} = {}; //m: undefined
    console.log(n); //n: undefined
     
    let {m:n=4} = {}; //m: undefined
    console.log(n); //n: 4
     
    let {a:cc=22} = {a: 12};
    console.log(cc); //12
    //默认值生效的条件是对象的属性必须是undefined 
    let {v=3} = {v: undefined};
    console.log(v); // v:3 
    let {v=3}={v:null};
    console.log(v); //null
     
    let {f:{b}} = {b: 'bb'};
    //f: undefined
    //{b}=undefined
    console.log(b);  //Cannot destructure property `b` of 'undefined' or 'null'
    //如果解构模式中嵌套的是对象，而且子对象所在的父属性不存在，就会报错
     
    • 其他问题
    1. 赋的值不是一个对象，是个其他数据类型的值，会默认将其他数据类型转为对象；
    2. 为了避免错误，不要将{}写在行首，JavaScript引擎会将{a}理解为一个代码块；
    3. null和undefined 不能转为对象 会报错
    • 比如：eval("{s: 'ss',d: 'd'}");
    • ({a}={a: 'a'}); console.log(a); //a
     
    6. 字符串
    • 解构赋值
    //此时是将字符串转为类似数组的一个对象
    let [x,y,z] = '123';
    console.log(x,y,z);
     
    let {length} = '12345';
    console.log(length);            
    • 方法
      • includes();  //判断字符串中有没有指定字符，有的话返回true，没有返回false、第二个参数~~开始查找的索引，默认是0；
      • startsWidth(); //是不是以某个字符作为开头,第二个参数：开始查找的索引，默认是0；true/false
      • endsWidth(); //是不是以某个字符作为结尾，第二个参数：开始查找的索引，默认是0；true/false
    let str = 'asdfghjkl';
    console.log(str.includes('a',2));
     
    console.log(str.startsWith('a',2));
    console.log(str.endsWith('l'));
    • repeat(n); //将 字符串重复n次返回，原字符串不变 
     
    console.log(str.repeat(2),str);
     
    //小数,向下取整
    console.log(str.repeat(2.6));
     
    //负数、Infinity  报错
    console.log(str.repeat(-2));
    console.log(str.repeat(Infinity));
     
    //0~-1,  先向下取整运算结果为0
    console.log(str.repeat(-0.3)); // ''
     
    //NaN  -->  0
    console.log(str.repeat(NaN)); // ''
     
    //字符串, 将字符串转为数字
    console.log(str.repeat('2')); // 'asdfghjklasdfghjkl'
    console.log(str.repeat('sdfsdf')); // ''
     
     
    • 模板字符串（字符串）
    let str = 'I love U';
    document.body.innerHTML = '<h1>'+ str +'</h1>';
     
    //模板字符串
    let str1 = `<h1>${str}</h1>`; //拼接字符串
    document.body.innerHTML += str1;
     
    //es6 保留换行和空格
    console.log('hahahahah hahahah'); //平时 换行 console 
    let s1 = `hhhha
    the weather is
    fine.
    `;
    console.log(s1); //es6保留换行 console
     
    //`特殊符号需转义(\`)
    console.log(`sss\`1234`);
     
    //{可以实现运算}
    let x=1;
    let y=2;
    console.log(`${x}+${y}=${x+y}`);
     
    //调用函数
    function fn(x){
        return x;
    }
    let s2 = 'sss';
    console.log(`函数fn输出的结果是${fn(s2)}`);
     
    let s3 = 'return' + '`hello ${wd}`';
    let fun = new Function('wd',s3);
    fun('ZFPX');
     
    7. 数组的扩展
    • Array.from(), Array.of()
    // Array() ----即是一个类，也是一个方法，将传进来的值变成数组返回；【注意】只传一个参数n，代表返回数组的长度（4个空位）（eg: Array(1,2,3,4)、Array(4)）
     
    //1、Array.of ----跟Array()一样，只有一点区别：就是传一个参数时候返回就是当前参数组成的数组（eg: Array.of(1,2,3,4)、Array.of(4)）
     
    //2、Array.from() ----参数是：数组或者类数组；返回值是一个新的数组。将类数组对象（ 所谓类数组对象，最基本的要求就是具有length属性的对象）变成数组
    • 数组实例的copyWithin()
    copyWithin(target,start,end);
       //target: 必填，从该位置开始替换数据
       //start: 选填，默认值0，从该位置开始读取数据
       //end: 选填，默认值是数组的长度，到该位置前停止读取数据 
    • 数组实例的find() 和 findIndex()
    //1、find ----先遍历数组，一项一项的执行，一旦函数返回值是true，停止查找，返回当前项，一直到最后一项还没有返回true，最终结果就是undefined。
        let arr = [1,2,3,4,5,6];
          arr.find(function (item, index, input){ 
               //item:当前项， index：索引， input： 原数组
               return item==4;
         });
     
    //2、findIndex ----返回值是当前项的索引，一直到最后都没有返回true的最终结果就是undefined
    • 数组实例的fill()
    fill(value,start,end) ----填充数组的
       //value: 必填的，填充的值
       //start: 开始填充的位置，默认值0，可选的
       //end: 停止填空的位置，可选的，不包括
     
    eg: //得到有7个1的数组
        Array(7).fill(1);
    • 数组实例的entries() 和 keys()
    //1、keys() ----数组索引值
    eg: let arr = [1,2,3,4,5];
        for(var key in arr){
            console.log("索引"+key);
        };
     
        for(let item of arr){
            console.log("当前项"+item);
        }
     
        //keys()  遍历索引
        for(let key of arr.keys()){
            console.log(key);
        }
     
    //2、entries() ----索引+对应项的值
        for(let [index,item] of arr.entries()){
            console.log(index,item);
        }
    • 数组实例的includes()
    includes() ----判断数组中有没有某一项，返回值是true/false
    • 数组的空位
    //1、ES5中方法对空位处理都不太一致，大部分都是跳过空位
        [1,,,2,,].forEach(function(item){
            console.log(item);
        });
     
    //2、ES6不跳过空位，会将空位处理为undefined
        [1,,,2,,].map(function(item){
            return item;
        });
     
    1. 函数的扩展时
      • 函数参数问题
        • 一般把函数形参变量的默认值放后面
          • function fn(x,y,z=1){ }; fn(1,2);
        • 参数集合
          • function fn5(){ console.log(arguments.length); }; fn5(1,2,3,4,5); // arguments.length~~实参的长度
          • function fn6(x,y,z){}; console.log(fn6.length); //1、形参没有默认值，fn6.length：形参的长度；2、形参有默认值，fn6.length是默认值参数的位置
      • 参数作用域问题
        • 形参所在的小括号是一个单独的作用域，遇到了变量，想看自己作用域下有没有，没有再往上一级找
      • 扩展运算符  ...
        • ...  可以将数组变成非数组，也可以将非数组变成数组
          • let ary=[123];console.log(...ary);
        • ... 可以将字符串变成数组
          • let str='12345';console.log([...str]);
        • ... 可以将类数组变成数组
          • function fn(){ return  [...arguments].sort() }; fn(3,2,5,4,1,6);
        • ... 应用场景
          • 求最大值的方法 let ary1 = [1,3,2,31,123,234];
            1.  //eval   :eval("Math.max("+ ary1 +")");
            2. //apply   : Math.max.apply(null, ary1);
            3. //...    :Math.max(...ary1);
      • 函数的name
        • let fn = function(){}; console.log(fn.name); // fn
        • 匿名函数name：  console.log((function(){}).name); // ''
        • bind ----> bound fn
          • let obj = {};var fn1=fn.bind(obj);fn1(); console.log(fn1.name); //bound fn
        • new Function ----> anonymous
          • let f= new Function('n', 'return n');console.log(f.name); //anonymous
      • 箭头函数
    let fn = function(){
        let a=1;
        return a;
    }
     
    let fn = (x) => {
        let a =1;
        return a;
    }
     
    // x=> x;   如果函数体只有一行代码而且是return，可以简写成这样
     
    function fn(x){
        return x;
    }
    • 箭头函数中this问题
      • 箭头函数没有this指向，它里面的this是谁----看它上一级作用域中的this（保证上一级函数不是箭头函数 ）
    let obj = {
        fn: function(){
            console.log(this);
            let f=()=>{
                console.log(this);
            }
               f();
        },
        fn1: ()=>{
            console.log(this);
        }
    };
    obj.fn();  //this==obj
    obj.fn1(); //this==window
     
    document.querySelector('#box').onclick=()=>{
        console.log(this); //window
    };
     
     
    1. 对象的扩展
      • 属性的简洁表示
    let a = 'aa', b='bb';
    let obj = {
        [a]: 'AAA',  //属性，通过变量传值
        [a+b]: 'AAA+BBB',
        fn(){
     
        },
     
        /*
        fn: function(){
     
        }
        */
     
    };
    console.log(obj.a);
    console.log(obj['a']);
    console.log(obj);
    • Object类上的方法
      • Object.is();
        • console.log(Object.is(NaN, NaN));
    //数组去重
    let arr = [1,2,NaN,NaN,1,3];
    let newArr = [];
    arr.forEach((item)=>{
       var flag = true;
        for(var i=0;i<newArr.length;i++){
           if(Object.is(item, newArr[i])){
                flag = false;
           }
       }
        if(flag){
            newArr.push(item);
        }
    });
     
    console.log(newArr);
    • Object.assign(obj1, obj2);
      • 将obj2合并到obj1上，返回obj1
    • Object.getOwnPropertyDescriptor();  //获取对象的属性描述
    console.log(Object.getOwnPropertyDescriptor(str, 'length'));
     
    console.log(Object.getOwnPropertyDescriptor([1,2,3], 'length'));
    • 属性的变量
      • for   in
      • Object.keys()
        • 返回值是一个数组，包括对象自身的（私有属性）所有的可枚举的属性；
      • Obeject.getOwnPropertyNames()
        • 返回值是一个数组，包括对象自身的（私有属性）所有的不可枚举的属性；
     
     
    1. Set 和 Map 数据结构
      • Set
        • 1、使用构造函数方式创建Set的实例；参数是个数组，返回值是一个Set实例，去重后的类数组；
    let set1 = new Set([1,2,3,NaN,NaN,1,2,3,4,5]);
    console.log(set1);
     
    //将Set实例变成数组
    console.log([...set1]); //1、... 将类数组转化为数组
    console.log(Array.from(set1)); //2. Array.from()  将类数组转为数组
     
     
    /* 利用set实现数组去重 */
    function fn(arr){
        return [...new Set(arr)];
    }
    console.log(fn([1,1,1,1,3,3,5,76,4,65]));
    •   2、Set原型上的方法(let set = new Set([1,2,3,1,2,3]))
      • size 长度
      1. add()  ----增加一项，之前没有才可以加上，加在后面。返回值是当前实例，实现链式写法
        • console.log(set.add(5).add(4));
      2. has() ----判断有没有某一项，返回值是true、false
        • console.log(set.has(1));
      3. delete() ----删除，返回值是true、false
        • console.log(set.delete(6));
        • console.log(set);
      4. clear() ----清空，没有返回值，undefined
        • console.log(set.clear());
        • console.log(set);
    let arr1 = [1,2,3,4,5,6];
    let arr2 = [2,4,6,8,10];
     
    //数组并集
    function bj(arr1,arr2){
        return [...new Set([...arr1,...arr2])];
    }
    bj(arr1,arr2);
     
    //数组交集
    function jj(arr1,arr2){
        return arr1.filter((item)=>{
            return arr2.includes(item);
        });
    }
    jj(arr1,arr2);
     
    //数组差集
    function cj(arr1,arr2){
        return bj(arr1,arr2).filter((item)=>{
            return !jj(arr1,arr2).includes(item);
        });
    }
    cj(arr1,arr2);
     
     
        var set1=new Set(["z","h","u","f","e","n","g"]);
        console.log(set1);
        //遍历set数据的实例只能遍历value值
        set1.forEach((item,index)=>{
            //item当前项
            console.log(item, index);
        });
     
        for(var key of set1.keys()){
            console.log(key);
        }
        for(var val of set1.values()){
            console.log(val);
        }
        for(var en of set1.entries()){
            console.log(en);
        }
     
     
    • Map
      • 1.使用构造函数方式创建一个实例
      • 2.参数是个数组,数组的每一项都是一个数组,这个数组有两项,第一项作为键key,第二项作为值value
      • 3.这里的key键可以是任意数据类型的
        var map1=new Map([[1,"a"],["a","A"],[{name:"珠峰"},"珠峰"],[/d+/,"正则"]]);
        console.log(map1);
     
        //方法
        //get(key)
        console.log(map1.get("a"));
     
        //set(key,value);
        map1.set(2,"JS");
        console.log(map1);
        //delete,has,clear
     
        let ary=[1,2,3,4,5,6];
        //将数组变成Map
        //1,[1]
        //2,[1,2]
        //3,[1,2,3]
        //....
        var map=new Map();
        ary.forEach((item,index)=>{
            map.set(index+1,ary.slice(0,index+1))
        });
        console.log(map);
     
        //forEach(),keys(),values(),entries();
     
        map.forEach((val,key,map)=>{
            //val:值,
            //key:键
            //map:原Map实例
        })
        for(var key of map.keys()){
            //key:键
        }
        for(var val of map.values()){
            //val:值,
        }
        for (var [key,val] of map.entries()){
            //val:值,
            //key:键
        }


     




     
     
     
  • 相关阅读:
    iot 表索引dump《2》
    heap表和iot表排序规则不同
    Cannot complete the install because one or more required items could not be found.
    iot表输出按主键列排序,heap表不是
    iot 表主键存放所有数据,且按数据插入顺序排序
    iot表和heap表排序规则不同
    org.eclipse.graphiti.ui.editor.DiagramEditorInput.
    Oracle 排序规则
    perl 异步超时 打印错误
    14.6.3 Grouping DML Operations with Transactions 组DML操作
  • 原文地址：https://www.cnblogs.com/queende7/p/8668598.html
Copyright © 2011-2022 走看看