ES6的学习过程总结0-10

ES6 第一课 let以及它的声明特性:
1:代码总结:

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

      <script>
          // <!--todo vs6 声明我们的变量  -->
          let a;
          let b, c, d;
          let e = 100;
          let f = 512, g = "jhjd", h = [];
          // 在我们的es6中我们的变量不能重复的声明,但是使用我们的var 关键字的话是可以的
          var star = "罗志祥";
          var star = "小猪";

          // todo --------> 在我们的se6中的块级作用域
          {
              let girl = "你的名字";
          }
          // todo if else else if ....的话只要是在我们的块级作用域中使用我们的let 也是我们的块级作用域
          // console.log(girl);
          // 3: todo ------> 在我们的let 中不存在变量提升

          // todo 4: 我们的块级作用域是不影响我们的作用域链的
          {
              let school = "黄涛";
              function fun(){
                  console.log(school);
              }
              fun(); // todo -----------> 函数的调用
          }
      </script>
</body>
</html>

效果:
ES6的学习过程总结0-10
let的颜色切换练习:
ES6的学习过程总结0-10

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>let的实践练习</title>
</head>
<body>
    <!--todo 在我们的这个body标签中添加我们的div标签    -->
    <div class="container">
       <h2 class="page-header">点击切换我们的颜色</h2>
       <div class="item" style="border: 1px solid #000000; width: 100px ; height: 100px" ></div>
       <div class="item" style="border: 1px solid #000000; width: 100px ; height: 100px"></div>
       <div class="item" style="border: 1px solid #000000; width: 100px ; height: 100px"></div>
    </div>
</body>
<script>
  // todo 第一步的话就是获取我们的div的元素对象
  let items = document.getElementsByClassName('item');
  // todo ------> 便利并绑定我们的事件
  for(let i = 0; i<items.length; i++) {
    // todo ---------> 添加我们的事件绑定器
    items[i].onclick = function () {
      //todo -----> 修改当前元素的背景颜色
      // this.style.background = "pink";
      items[i].style.background = "pink";
    }

  }

</script>
</html>

效果:
ES6的学习过程总结0-10
ES6 解构赋值:在遇到我们的方法频繁的被调用的时候就是使用我们的解构赋值:
ES6的学习过程总结0-10

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量的赋值解构</title>
</head>
<body>
    <script>
        /*
        *  todo -----> 在我们的es6中允许按照一定的模式从数组中和对象中提取值,对变量进行赋值
        *  todo 被称为解构赋值,
        *
        * */
       // 数组的结构
        const F4 = ["影响力","韭菜的自我修养","稀缺"];
        let [xhao , liou , zhao] = F4;
        console.log(xhao);
        console.log(liou);
        console.log(zhao);
        // 对象的解构
        const zha = {
          name :'你的名字',
          age : '不详',
          xiaopin:function (){
            console.log("我可以演品");
          }
        };
        // todo 在我们的这个位置的话就是设置我们的解构式
        let {name,age,xiaopin} = zha;
        console.log(name);
        console.log(age);
        console.log(xiaopin);
        // 在我们的这个位置调用我们的函数
        xiaopin();
    </script>
</body>

</html>

在我们的结果展示:
ES6的学习过程总结0-10
es6的模板字符串:
ES6的学习过程总结0-10
代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ES中的摸版字符串</title>
</head>
    <body>
    <script>
      let str =  "我是一个模板字符串";
      console.log(str,typeof str);
      // todo ---------> 以上是我们的模板字符串的声明格式
      /*
      * 1: todo ----> 在我们的内容中可以直接有换行符
      * */
      let string = `<ul>
          <li>沈腾</li>
          <li>玛丽</li>
          <li>魏翔</li>
          <li>艾伦</li>
          </ul>`
      //todo 我们的es6的话还可以进行我们的模板的拼接
      let lovest = '你的名字';
      let out =`${lovest}abcdefg`;
      console.log(out);
    </script>

    </body>

</html>

结果展示:
ES6的学习过程总结0-10
ES6对象的简化写法:

ES6的学习过程总结0-10

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ES6对象的简化写法</title>
</head>
<body>
   <script>
       // ES6 中允许在大括号里面,直接写入变量和函数,作为对象的属性和方法
       // 这样些更加的简便
       let name = "huangtao";
       // 创建我们的这个东西
       let change = function (){
           console.log("我可以改变你");
       }
       const school = {
           name,
           change,
           // todo 的话还有一个简化就是我们的方法声明的简化
           //在我们的es6中可以将我们的:function都省略掉
           // improve:function (){
           //     console.log("我们可以提高你的技能");
           // }
           improve(){
               console.log("我们可以提高你的技能");
           }
       }
       console.log(school);
   </script>
</body>
</html>

结果的展示:
ES6的学习过程总结0-10
ES6 的箭头函数及其声明的特点:
ES6的学习过程总结0-10
代码部分:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Es6Z中的箭头函数</title>
</head>
<body>
    <script>
        // todo 在我们的es6中允许我们使用箭头来定义函数
        // todo -----> 以前声明一个函数
        let fun = function (){

        }
        // 使用我们的es6来声明我们的函数
        let fn = (a,b) =>{
          // 这就是我们使用es6定义出来的函数
          return a + b;
        }
        let result = fn(1,2);
        console.log(result);

        /*
        * 箭头函数的特点
        * 1: this 是静态的, this 在声明时始终指向所在作用域下的this的值
        * 2: 设置我们的window对我们的对象的操作
        * */
        function getName(){
            console.log(this.name);
        }
        let getName2 = ()=>{
            console.log(this.name);
        }

        window.name = "他的名字";
        const scholl = {
            name:"action"
        }
        getName();
        getName2();
        // 使用我们的call方法调用,我们的call方法可以指向函数内部的值的
        getName.call(scholl);
        // 箭头函数的话始终指向我们的初始定义的值
        getName2.call(scholl);
        // todo -------------》 在我们的这个位置的话就是实例化我们的对象
        // let Person = (name,age) =>{
        //     // todo----------> 在我们的这个位置的话就是
        //     this.name = name;
        //     this.age = age;
        // }
        // let me = new Person("xiao",30);
        // console.log(me);

        // todo 在我们的箭头函数里面的话不能使用argument变量
        // 如下所示:
        // let fu = () =>{
        //     console.log(argument);
        // }
        // fu(1,2,3);

        // todo 箭头函数的简写,党我们的形参有且只有一个的时候可以将我们的() 省略
        let add = n =>{
            return n + n ;
        }
        console.log(add(9)); // 赋值为9
        // 当我们的代码提只能有一条语句的时候可以将我们的{}省略
        let pow = (n) => n*n;
        console.log(pow(9));
    </script>
</body>
</html>

ES6的学习过程总结0-10

上一篇:设计模式--适配器模式


下一篇:大数据中各种框架的连接器(Spark, Flink, MongoDB, Kafka, Hive, Hbase等)