ES6

最新推荐文章于 2023-05-11 11:43:07 发布

wrang_hh

最新推荐文章于 2023-05-11 11:43:07 发布

阅读量124

点赞数

本文链接：https://blog.csdn.net/m0_37666988/article/details/88936542

版权

在这里插入图片描述

1. 在这里插入图片描述

2.
在这里插入图片描述

上图最后一句语句输出a=1；b=5；
3.
在这里插入图片描述

<body>
    <ul id="test"></ul>
    <script type="text/javascript">
        //ES5的写法:将变量或表达式直接嵌入字符串
        // var obj = {"name":"john","age":20};
        // var name = obj.name;
        // var age = obj.age;
        // alert(name+"的年龄是"+age);

        //ES6
        let obj = {"name":"john","age":20};
        let{name,age} = obj; 
        alert(`${name}的年龄是${age}`);//`是Tab上面的键

        var arr = [0,1,2,3,4];
        let oUl = document.getElementById("test");

        var html = "";
        for(var i in arr) {
        //    html += "<li>" + arr[i]+"</li>" //ES5
            html += `<li>
            <a href = "">${arr[i]}
            </li>`//ES6
        }
        oUl.innerHTML = html;
    </script>

4.
在这里插入图片描述

<body>
    <script type="text/javascript">
        //ES5
         var foo = function() {
            return 1;
         }
         alert(foo());

        //ES6,单条语句
        let foo1 =() => 1;
        alert(foo1());

        //有参数
        let foo2 = (a) => a;
        alert(foo2(10));

         //多条语句
         let foo4 = (b) => {
             let c = 10;
             return b+c;
         }
         alert(foo4(10));
    </script>
</body>

5.this的指向问题（重点，难点）

<body>
    <script type="text/javascript">
        // var foo = () =>{
        //     alert(this);//和ES5一样，this指向window
        // }
        // foo();

        var name = "window";
        // var obj = {
        //     "name":"Jhon",
        //     "sayHello":function() {
        //         alert(this.name);
        //     }
        // }
        //obj.sayHello();//输出Jhon,this指向obj

        // var obj = {
        //     "name":"Jhon",
        //     "sayHello":()=>{
        //         alert(this.name);
        //     }
        // }
        // obj.sayHello();//输出window,this指向定义的name【注】this指向定义时的作用域而不是执行时的定义域

        // var obj = {};
        // obj.name = "Marry";
        // alert(this);
        // obj.sayHello = () =>{
        //     alert(this.name);//输出window
        // }
        // obj.sayHello();


        // var obj = {
        //  "name":"Jhon",
        //     "sayHello":function(){
        //         alert(this);//输出Object
        //     setTimeout(()=>{alert(this.name)},1000)

               
        //     }
        // }
        // obj.sayHello();//输出Jhon

        var obj = {
         "name":"Jhon",
            "sayHello":()=>{
                alert(this);//输出window
            setTimeout(()=>{alert(this.name)},1000)

               
            }
        }
        obj.sayHello();//输出window
    </script>
</body>
</html>

6.set结构
在这里插入图片描述

和数组比较相似
属性：
set.has(num);：判断set中是否含有某个元素
上图的keys()和value()返回的一样，都是set中的值

  <script type="text/javascript">
        var set = new Set([1,2,3,2,4]);
        console.log(set);//打印出Set(4) {1, 2, 3, 4}
        //与数组之间的转换，用扩展运算符...
        var arr = [...set];
        console.log(arr);//打印出(4) [1, 2, 3, 4]
        //遍历set  for  of
        for(var i of set) {
            console.log(i);
        }

        for(var item of set.keys()){
            console.log(item);
        }

        for(let [key,item] of set.entries()) {
            console.log(key,item);
        }

        set.forEach((item,key)=>console.log(item*2,key*2));
    </script>

在这里插入图片描述

map结构
在这里插入图片描述

set：向map中追加键值对

7.生成器函数
在这里插入图片描述

yield：暂停函数运行，并返回一个值
return：停止函数运行，并返回一个值

wrang_hh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6

1.2.上图最后一句语句输出a=1；b=5；3.<body> <ul id="test"></ul> <script type="text/javascript"> //ES5的写法:将变量或表达式直接嵌入字符串 // var obj = {"name":"john","age":20};...
复制链接

扫一扫

ES6

“相关推荐”对你有帮助么？