ES6(1)

1. let关键字

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01_let关键字</title>
</head>
<body>

<button>测试1</button>
<br>
<button>测试2</button>
<br>
<button>测试3</button>
<br>
<!--
***let
1. 作用:
  * 与var类似, 用于声明一个变量
2. 特点:
  * 在块作用域内有效
  * 不能重复声明
  * 不会预处理, 不存在提升
3. 应用:
  * 循环遍历加监听
  * 使用let取代var是趋势
-->
<script type="text/javascript">
    //console.log(age);// age is not defined
    let age = 12;
    //let age = 13;不能重复声明
    console.log(age);
    let btns = document.getElementsByTagName('button');
  
  //var 声明
    // for(var i=0; i<btns.length; i++){
    //     (function(i){  //产生闭包
    //         btns[i].onclick=function(){
    //         alert(i)
    //     }
    //     })(i)
       
    // }

//使用let
    for(let i=0; i<btns.length; i++){

        btns[i].onclick=function(){
          alert(i)  //i就是每个按钮的索引
        }
       
    }

</script>
</body>

</html>

 

2.const关键字

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>02_const关键字</title>
 6 </head>
 7 <body>
 8 <!--
 9 1. 作用:
10   * 定义一个常量
11 2. 特点:
12   * 不能修改
13   * 其它特点同let
14 3. 应用:
15   * 保存不用改变的数据
16 -->
17 <script type="text/javascript">
18     const sex = '';
19     console.log(sex);
20     //sex = '女';//不能修改
21     console.log(sex);
22 </script>
23 </body>
24 </html>

 

3.变量的解构赋值

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>03_变量的解构赋值</title>
 6 </head>
 7 <body>
 8 <!--
 9 1. 理解:
10   * 从对象或数组中提取数据, 并赋值给变量(多个)
11 2. 对象的解构赋值
12   let {n, a} = {n:'tom', a:12}
13 3. 数组的解构赋值
14   let [a,b] = [1, 'atguigu'];
15 4. 用途
16   * 给多个形参赋值
17 -->
18 <script type="text/javascript">
19     let obj = {name : 'kobe', age : 39};
20 //    let name = obj.name;
21 //    let age = obj.age;
22 //    console.log(name, age);
23     //对象的解构赋值
24     let {age,name} = obj;
25     console.log(age,name);
26 //    let {name, age} = {name : 'kobe', age : 39};
27 //    console.log(name, age);
28 
29     //3. 数组的解构赋值  不经常用
30     let arr = ['abc', 23, true];
31     let [a, b, c, d] = arr;
32     console.log(a, b, c, d);
33     //console.log(e);
34     function person(p) {//不用解构赋值
35         console.log(p.name, p.age);
36     }
37     person(obj);
38 
39     function person1({name, age}) {  //{name, age}=obj,结构赋值
40      console.log(name, age);
41     }
42     person1(obj);
43 
44 
45 </script>
46 </body>
47 </html>

 

4.模板字符串
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>04_模板字符串</title>
 6 </head>
 7 <body>
 8 <!--
 9 1. 模板字符串 : 简化字符串的拼接
10   * 模板字符串必须用 `` 包含
11   * 变化的部分使用${xxx}定义
12 -->
13 <script type="text/javascript">
14     let obj = {
15         name : 'anverson',
16         age : 41
17     };
18     console.log('我叫:' + obj.name + ', 我的年龄是:' + obj.age);
19 
20     console.log(`我叫:${obj.name}, 我的年龄是:${obj.age}`);
21 </script>
22 </body>
23 </html>

 

5.简化的对象写法
 
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7 </head>
 8 <body>
 9     <script>
10 // <!--
11 // 简化的对象写法
12 // * 省略同名的属性值
13 // * 省略方法的function
14 
15         let name= 'cobo';
16         let age= 45;
17         // let obj={
18         //     name:name,
19         //     age:age
20         // }
21 
22         // console.log(obj.name)
23 
24 
25         let obj1={
26             name,
27             age
28         }
29 
30         console.log(obj1.name)
31 
32 
33             //普通额写法
34 //    let obj = {
35 //        x : x,
36 //        y : y,
37 //        getPoint : function () {
38 //            return this.x + this.y
39 //        }
40 //    };
41     //简化的写法
42     let obj = {
43         x,
44         y,
45         getPoint(){
46             return this.x
47         }
48     };
49     console.log(obj, obj.getPoint());
50     </script>
51 
52 </body>
53 </html>

 Symbol

1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Symbol</title>
</head>
<body>
    <script>
        // boolean  string  number null undefined Object
        // usonb 
        // you is so niubility

        //1. 创建 Symbol
        let s = Symbol();

        //2. 传入字符串描述创建
        let s2 = Symbol("UP");
        let s3 = Symbol("UP");

        //3. 调用对象的方法创建
        let s4 = Symbol.for("Down");
        let s5 = Symbol.for("Down");

        console.log(s4 === s5);
    </script>
</body>
</html>

2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //创建一个对象
        let obj = {
            a: 'xxx',
            run: function(){
                console.log("abc");
            }
        }

        //快速向对象中添加一个方法 run => 输出 测试
        // obj.run = function(){
        // };

        //通过 Symbol 添加属性或者方法
        // let run = Symbol('run');//121y212joi1hro1j2lke1
        // obj[run] = function () {
        //     console.log('测试');
        // };

        // console.log(obj);

        // console.log(obj.run());
        // console.log(obj[run]());


        let up = Symbol('up');
        
        let game = {
            name: "飞机大战",
            [up]: function(){
                console.log("向上")
            },
            [Symbol('down')]: function(){
                console.log("向下");
            }
        };
        console.log(game);
    </script>
</body>

</html>

3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Symbol属性遍历</title>
</head>
<body>
    <script>
        let game = {
            name: "飞机大战",
            [Symbol('up')]: function(){
                console.log('向上')
            },
            [Symbol('down')]: function(){
                console.log('向下')
            },
            [Symbol('left')]: function(){
                console.log('向左')
            },
            [Symbol('right')]: function(){
                console.log('向右')
            },
        }
        //1. for...in 不能遍历 Symbol 类型的属性
        for(let i in game){
            console.log(i);
        }

        //2. Reflect.ownKeys 反射得到对象所有的属性名, 返回一个数组
        let attrs = Reflect.ownKeys(game);

        //遍历数组
        for(let i=0;i<attrs.length;i++){
            // attrs[0] = name
            // attrs[1] = Symbol('up')
            console.log(attrs[i])
            console.log(game[attrs[i]]);
        }
    </script>
</body>
</html>

4

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Symbol内置属性</title>
</head>

<body>
    <script>
        // Symbol 是一个函数还是一个对象   Symbol('abc')  Symbol.for() 函数对象
        // Symbol 内置属性都是固定的写法    $().attr html
        // Symbol 的内置属性是为了扩展对象的功能

        let school = {
            name: "尚硅谷",
            //当对象用来判断类型的时候
            [Symbol.hasInstance]: function(){
                console.log('我被当做类型检测啦!!');
                return true;
            },
            //
            [Symbol.match]: function(){
                console.log("我被当做正则放在了 match 中调用");
                return 123456;
            }
        };

        let obj = {};
        //检测类型
        console.log(obj instanceof school);

        //用作正则使用
        let str = "iloveyou";
        console.log(str.match(school));


    </script>
</body>

</html>

 

 

posted @ 2020-06-06 18:46  全情海洋  阅读(125)  评论(0编辑  收藏  举报