es6基础

Posted 2023-01-01 solaris-wwf

let的使用 

    1用来声明变量，类似于var，只在作用域中有效：存在块级作用域。

    2不存在声明提升：不允许重复申明，包括函数变量和函数参数。

const的使用

    用来声明常量，其他语法参照let。

        console.log(a);//返回undefined
        var a = 10;
        console.log(b);//返回错误，不存在声明提升，
        let b = 20;
        if(a = 10)let c = 30;
        console.log(c);//返回错误。存在块级作用域。

 

解构赋值：按照一定模式，从数组和对象中提取值，对变量进行赋值。

    数组：

        let [a,b,c] = [1,2,3];console.log(a,b,c);//返回1 2 3
        let [a=3,b] = [2];console.log(a,b);//返回2 undefined;
        let c; let [a=2] = [c];console.log(a);//返回2，undefined不会覆盖默认值

 

    对象

        let a,b = a:"aaa",b:"bbb";console.log(a,b);//返回aaa bbb;
        let a:b = a:"aaa";console.log(b);//返回aaa,如果输出a，则出错！！！
        let a,b=5 = a:1;console.log(a,b);//返回1 5

 

模版字符串

    将变量或表达式直接嵌入字符串。使用反引号（``）来拼接多个字符串；

        es5：

　　     var obj = "name":"john","age":18;
            var name = obj.name;var age = obj.age;console.log(name + "的年龄是" + age);

 

        es6:

　　     let obj = "name":"john","age":20;
            let name,age = obj;console.log(`$name的年龄是$age`);

 

    <ul id="test"></ul>

    var arr = [0,1,2,3,4];
    let oUl = document.getElementById("test");
    let html1 = "";
    for(var i in arr)
        /*  html += "<li>hao" + arr[i] + "</li>";
            
            oUl.innerHtml = html;//es5的方法；
        */
        /* let oLi = creatElementWithTxt("li","hao" + arr[i]);
            oUl.appendChild(oLi); */
        html1 += `<li><a href="#">$arr[i]</a></li>`; //es6使用反引号（``）来拼接多个字符串；
    
    oUl.innerHTML = html1; 

 

 

 箭头函数 

　　1、只含有1个表达式；

　　2、含有多条语句；

　　3、this的指向问题；

    var foo = function()return 1;
    console.log(foo());//es5 

     let foo = () => 1;
　　　console.log(foo()); //es6单条语句

　　let foo = (a) => a;
　　console.log(foo(10)); //带参数的单条语句

     let foo = (a) => let b = 10;return a + b;
    console.log(foo(10)); //多条语句

 

 this的指向问题 

    第一种.

        let foo = () => console.log(this);
        foo();//this 指向根元素window

 

    第二种.        

        var name = "window";
        let obj = "name":"john","sayHello":function()console.log(this.name);//es5的写法
        let obj = "name":"john","sayHello":() => console.log(this.name);//es6的写法，指向定义时的作用域，而不是执行时的作用域过程相当于   let obj = ;
                    obj.name = "john";
                    console.log(this);
                    obj.sayHello = () => console.log(this.name);
        obj.sayHello();//es5返回john，this 指向obj；es6返回name的值window，指向根元素window;

 

    第三种

        var name ="window";
        let obj = "name":"john","sayHello":function() setTimeout(() =>    这里用es5写法则指向obj 如果用es6写法则指向window
            console.log(this.name);
        , 1000);
        obj.sayHello();

 

set结构

    1. let set = new Set([1,2,3,4,4]); 构造函数，值不重复；

         console.log(set); 返回set(4)1,2,3,4;

    2.[...set] 扩展运算符，将类数组对象转换以逗号分割的序列

         var arr = [...set]; 转换成了数组；

    3.for of 遍历

         for (let i of set)console.log(set); 也可以遍历数组 for(let i of arr)console.log(i); 

    4.set.size 属性长度 set.add(0)  set.delete(0) set.has(0) set.clear();清空

        set.add(7)；添加一个值，排在最后，不能重复；

        set.has(6);是否含有值，返回true false;

    keys() :返回键名的遍历器 

         for (let item of set.keys())console.log(item);   返回1,2,3,4；item指值，不是索引下标；

    values();返回键值的遍历器；类似于keys();

    entries():返回键值对的遍历器

         for(let [key,item] of set.entries())console.log(key,item); key键名，item键值都指向了元素,都返回1,2,3,4

    forEach():使用回调函数遍历每个成员

         set.forEach((value,key,item) => console.log(value * 2,key * 2,item * 2);)   都返回2,4,6,8

 

map结构

    1. let map = new Map([["name","john"],["age",30]]); 

         console.log(map); 返回 map(2)"name" => "john" , "age" => 30;

    2.map.size 属性长度

    3.map.set(key,value); map.get(key); map.delete(key); map.has(key); map.clear();

         map.set(1,1); 添加键值对，排到最后面   map.set("sex","female"); 

        map.get(key);用键名取得相对应的值，

    　 keys()：返回键名的遍历器

    　 values()：返回键值的遍历器

    　 entries():返回键值对的遍历器

　　　　　　for (let [key,value] of map.entries()) console.log(key,value);

 

   　  forEach():使用回调函数遍历每个成员

       　　 map.forEach((key,item,value) => console.log(key * 2););

 

生成器函数(generator)

    多了一个关键字yield，暂停当前函数的运行，并且返回一个值，有点类似于return；next是直接给yield表达式赋值

        function* foo(x)yield x+1; yield x+2; return x+3;
        var f = foo(1);//返回GeneratorStatus  
        f.next(1);//才能返回值，2，done:false,done表示是否还有yield存在或者相应的返回值存在或者是否结束
        console.log(f.next(),f.next(),f.next());//运行三次最后done:true

   　　function*foo(x)var y = 2 * (yield(x + 1)); 
　　　　var z = yield(y / 3); 
　　　　return(x + y + z)
      　var it = foo(5);
　　　　console.log(it.next(3));
　　　　console.log(it.next(12));
　　　　console.log(it.next(13));
       next(n);//参数表示上一次的返回值，第一次传入3的参数是没有上一次的返回值的，第一个返回5+1=6；
　　　  //而第二次传入12是有上一次的返回值的，12则代表第一个yield(x+1)的值，到下一次yield暂停，返回8；
            //第三次13也是有上一次的返回值，所以代表yield(y/3),z被赋值13，y之前被赋值24，x最早被赋值5，

 

    斐波那契数列

        function* feibo(n)
            let a = 0;
            let b = 1;
            for(var i = 0; i < n ; i++)
                yield a;
               let temp = a+ b;
               a = b;
               b = temp; 
             
            console.log(temp);  
            var f = feibo(5);
            for(let i of f)
                console.log(i);//把每一次遍历的值赋值给i，
             

 

类(class)

    class Person
　　　　constructor(name)
　　　　　　this.name = name;
　　　　//构造函数属性
       sayHello()//方法
　　　　　　console.log(this.name);
　　　　
　　
     var person = new Person("john");