2020全新ES6精讲

收藏

1286人加入学习
价格
限期免费
教学计划
学习有效期
2020-04-09至2022-08-31
课程介绍

file

      ES6精讲(二)笔记

      1.ES6兼容表
      http://kangax.github.io/compat-table/es6/
      ES6兼容低版本浏览器
      在线转换(这种编译会加大页面渲染的时间)
      提前编译(强烈建议这种方式,不影响浏览器渲染时间)

      2.ES6兼容

      3.ES6新语法
      let与var的区别

      1. var 可以重复声明
      2. var 无法限制修改
      3. var 没有块级作用域

      1.let 声明的变量不可以重复声明
      2.let 声明的变量,只在 let 命令所在的代码块内有效(局部变量)
      3.计数器 i 只在 for 循环体内有效,在循环体外引用就会报错 for (let i = 0; i<10;i++){ }

      const命令声明的常量
      const 命令声明的常量,只在声明所在的块级作用域内有效
      const 命令声明的常量不提升,只能在声明的位置后使用
      const 命令声明的常量,与 let 一样不可重复声明

      注意:
      const 命令声明一个只读的常量。一旦声明,常量的值就不能改变
      const 命令声明的常量不得改变值。即一旦声明,就必须立即初始化。
      const a = 10;

      3.箭头函数
      A.不需要参数或需要多个参数,就用圆括号代表
      var f = () =>5;
      var f = function(){ return 5};
      var sum = (num1,num2)=>num1+num2;
      var sum = function(num1,num2){
      return num1+num2;
      }

      B.代码块部分多于一条语句,就用大括号括起来,并且用return返回
      var sum = (num1,num2)=>({ return num1+num2});

      C.箭头函数返回对象时,必须在对象外面加上括号
      var getTempItem = id = >( { id:id,name:'Temp'} );
      console.log(getTempItem(2));

      D.箭头函数能简化回调函数
      let num = [1,2,4,5,6];
      let result = num.sort(function(a,b){
      return a-b;
      })

      等同于
      let result = num.sort((a,b)=>a-b);

      4.关于箭头函数中的this的指向
      普通函数中的this:
      a.this总是代表它的直接调用者(js的this是执行上下文), 例如 obj.func ,那么func中的this就是obj
      b.在默认情况(非严格模式下,未使用 'use strict'),没找到直接调用者,则this指的是 window (约定俗成)
      c.在严格模式下,没有直接调用者的函数中的this是 undefined
      d.使用call,apply,bind(ES5新增)绑定的,this指的是 绑定的对象

      箭头函数中的this
      箭头函数中,this指向的固定化,并不是因为箭头函数内部有绑定this的机制,
      实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。
      function Person(){
      this.name = '123';
      this.age = 123;
      setInterval(()=>{
      console.log(this);
      },1000)
      }
      let p = new Person(); ==这段函数中,this指向的是Person对象.

      5.数组的新方法
      map 映射
      reduce 汇总
      filter 过滤器
      forEach 循环(迭代)
      some() 一个为true 就会返回true的
      every() 必须所有都返回true才会返回true

      6.字符串的新方法
      startsWith 判断以什么字符串开头
      endsWith 判断以什么字符串结尾

      7.函数的参数 ---三点运算符号

      8.结构赋值
      左右两边结构必须一样;
      右边必须有值;
      声明和赋值不能分开;

      9.ES6-class类声明
      ES6 的 Class(类)概念
      constructor 是构造方法
      this关键字代表实例对象

      ES6 class类继承
      extends——继承
      super关键字,表示父类的构造函数,用来新建父类的this对象
      class Teacther extends Person{ //Teacther 继承 Person
      constructor(name,age,school) {
      super(name,age); //父级继承的元素
      this.school= school;
      }

      10.JSON对象
      JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。
      JSON.parse() 方法用于将一个 JSON 字符串转换为对象。
      **服务器传过来的是json格式 ==》要在js使用就转换成对象 ==》数据就可以使用在页面上**
      //let str = '{"a":1,"b":2,"c":3}'; //标准写法 外面单引号是字符串
      //let obj = JSON.parse(str); //将字符串转成对象
      let obj = {a:2,b:3,c:4};
      let str = JSON.stringify(obj); //将对象转成字符串
      console.log(typeof str);

      11.Promise的使用
      Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件
      ==》(通常是一个异步操作--接口--Ajax--setTimeout--img)的结果。 主要用于异步计算,可将异步操作队列化,按照期望的顺序执行
      ES6 规定,Promise对象是一个构造函数,用来生成Promise实例。
      const promise = new Promise((resolve, reject) => {
      // ... some code

      if (/ 异步操作成功 /){
      resolve(value);
      } else {
      reject(error);
      }
      });

      Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。它们是两个函数,由 JavaScript 引擎提供,不用自己部署。
      resolve函数的作用是,将Promise对象的状态从“未完成”变为“成功”,
      ==》在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;
      reject函数的作用是,将Promise对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),
      ==》在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。

      Promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数。
      then方法可以接受两个回调函数作为参数。
      第一个回调函数是Promise对象的状态变为resolved时调用
      ,第二个回调函数是Promise对象的状态变为rejected时调用。
      其中,第二个函数是可选的,不一定要提供。这两个函数都接受Promise对象传出的值作为参数。
      new Promise((resolve, reject)=>{
      //resolve('100') //成功
      reject('error') //失败
      }).then(res=>{
      console.log(res); //成功返回res
      },err=>{
      console.log(err); //失败返回err
      })

      12.promise里面的方法
      Promise.all():发送多个请求并根据请求顺序获取和使用数据,使用Promise.all可以解决这个问题=>promise 执行完之后才执行这里面的代码.
      all() 方法:异步多个请求 一起执行
      race() 方法:使用方法同all(),区别是谁传的快,就先执行谁。
      catch() 方法:异常
      .catch((rea=>{ //有异常就打印下面的代码 并且把异常的问题返回到rea
      console.log("this is a rea......");
      console.log(rea);
      }))

      async/await 使用
      用async修饰的方法返回的是promise对象

      13.Map数据结构
      /*属性和操作方法
      1.size 属性
      size 属性返回 Map 结构的成员总数
      2.set(key,value)
      set 方法设置set方法设置键名key对应的键值为value,然后返回整个 Map 结构。
      如果key已经有值,则键值会被更新,否则就新生成该键。
      3.get(key)
      get方法读取key对应的键值,如果找不到key,返回undefined。
      4.has(key)
      has方法返回一个布尔值,表示某个键是否在当前 Map 对象之中。
      5.delete(key)
      delete方法删除某个键,返回true。如果删除失败,返回false。
      6.clear(key)
      clear方法清除所有成员,没有返回值。
      7.map遍历
      keys()
      返回键名的遍历器
      values()
      返回键值的遍历器
      entries()
      返回所有成员的遍历器
      forEach()
      遍历Map的所有成员

      */
      
      
      let map = new Map([['a',1],['b',2],['c',3]]);
      //数据的长度
      console.log(map.size);
      
      //添加键值,键名
      map.set(4,'dddd')
          .set(5,'eeeee')
          .set(6,'fffff');
      
      let fun = function(){
          console.log('abc');
      };
      map.set(fun,'this is a fun');
      console.log(map.get(fun));
      
      //删除某个键 输入对应key就可以
      //map.delete(6); //删除key=6的键值
      
      //清除所有成员  内容没有了 对象还在
      //map.clear();
      
      //获取key对应的键值
      console.log(map.get(5)); //获取key=5的键值
      console.log(map);
      
      //查找某个键是否在当前 Map 对象之中  返回布尔值
      console.log(map.has(5));
      
      
      //keys()    返回键名的遍历器
      //values()    返回键值的遍历器
      
      //entries()   返回所有成员的遍历器
      //forEach()   遍历Map的所有成员
      
      
      for ( let k of map.keys()){  //map.keys()  获取所有map里面的键名放到k里面
          console.log(k);
      }
      
      for ( let v of map.values()){ //map.values()  获取所有map里面的键值放到v里面
          console.log(v);
      }
      
      /*for (let [k,v] of map.entries()){  //map.entries() 同时获取 键名和键值
          console.log(k+'-----'+v);
      }*/
      
      //forEach()  方法同map.entries()
      map.forEach((value, key, map)=>{
          console.log(key+'-----'+value);
      })
      

      14.ES6中的模块化export和import

      Module 模块
      A.export命令:用于规定模块的对外接口 (输出变量)
      如果希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量。
      export let url = "https://www.baidu.com";
      B.import命令:用于输入其他模块提供的功能(接收变量)
      import命令接受一对大括号,里面指定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块(profile.js)对外接口的名称相同。

      export let url = "https://www.baidu.com"; //混合导出
      export let name = "百度"; //混合导出
      let fun = function () {
      return "hello world" ;
      };
      //一起导出

      export {
      url as myurl, //as 别名
      name as myname,
      fun as myfun
      }

      //默认导出 每个模块只能有一个默认导出 导出一个
      /export default function () {
      return 'this is a test';
      }
      /

      //默认导出 导出多个 (一个代码块)
      export default {
      myfun(){
      return 'aa'
      },
      myname:'xiaozhan'
      }

      /
      import {url,name,fun} from './one.js';
      console.log(url,name,fun);
      /

      /import {myurl,myname,myfun} from './one.js';
      console.log(myurl,myname,myfun);
      /

      //一起接收
      /import as info from './one.js';
      //console.log(info);
      console.log(info.myname,info.myurl);*/

      //接收默认导出 可以自己随意命名 不用大括号 导出一个
      /import myff from './one.js';
      console.log(myff());
      /

      //接收默认导出 接收代码块
      /import myff from './one.js';
      //console.log(myff);
      console.log(myff.myfun(),myff.myname);
      /

      //混合接收
      /import myff, {url,name}from './one.js';
      //console.log(myff);
      console.log(myff.myfun(),myff.myname,url,name);
      /

      //解决重复名 冲突问题
      import myff, {url as aurl,name as aname}from './one.js';
      //console.log(myff);
      console.log(myff.myfun(),myff.myname,aurl,aname);

      Ajax

      1.HTTP协议通过URL请求服务器
      2.请求的方法 get post post保密性高 接收时也有get和post两种接收方法
      3.请求有头信息+请求体(内容)
      4.响应有响应头+响应体(返回的内容)

      一.创建ajax对象:
      var ajax = createXMLHttpRequest();

      二.ajax请求服务器

      //open设置服务器其请求
      ajax.open("GET","http://localhost/server.php?username=admin&password=123456",true);
      ajax.send(null);

      //post设置服务器其请求 与get区别是第二点
      1.设置未决的请求的目标 URL,方法,和其他参数
      ajax.open("post","http://localhost/serverpost.php",true);

      2.post请求 设置header并和请求一起发送的固定写法
      ajax.setRequestHeader("Content-Type", 'application/x-www-form-urlencoded');

      3.发送请求
      ajax.send("username=admin&password=123456");

      三.ajax响应服务器数据
      btn2.onclick= function () {
      var ajax = createXMLHttpRequest(); //创建ajax对象

              ajax.open("GET","http://localhost/server.php?username=admin&password=123456",true);  //请求服务器
      
              ajax.send(null);//发送请求
      
              ajax.onreadystatechange = function () {  //onreadystatechange  状态改变的事件触发器  获取事件
                 //alert("请求成功");
      
                  //console.log(ajax.readyState);//readyState 服务区的状态
                  /*
                  对象状态(integer):
                  0 = 未初始化
                  1 = 读取中
                  2 = 已读取
                  3 = 交互中
                  4 = 完成
                  */
      
                  if (ajax.readyState == 4){ //完成的时候弹出
                      //alert("只执行一次");
                      //console.log(ajax.status);
                      //console.log(ajax.statusText);
      
                      /*
                      status
                      服务器返回的状态码, 如:404 = "文件未找到" 、200 ="成功"
                      statusText
                      服务器返回的状态文本信息
                      */
      
                      if (ajax.status == 200){
                          alert(ajax.responseText); //responseText 服务器进程返回数据的文本版本
                      }
      
                  }
      
              }
      
          }
      

      file_put_contents("message.txt",$str,FILE_APPEND); // FILE_APPEND 文件结尾追加的方式

      三.jquery 封装 ajax https://jquery.cuishifeng.cn/

      四.
      load(url, [data], [callback])
      $.post("test.php");
      $.get("test.php");
      以上三种默认异步
      如果要同步就要使用Ajax() 方法

      ES6精致视频笔记

      es6的介绍

      看过太多教学视频,这门课老师讲的特别清晰,思路很顺畅,太值得学习了。
      知识点比较密集,适合反复学习。老师讲的很清晰,很喜欢老师的讲课风格。迷妹+1
      结合实际应用场景, 能让人深刻理解, 想忘记都难! 感谢!
      老师讲的很棒哦。上课很自然好像聊天聊着就学会了。没有照本宣科的古板,听课很精神不会犯困。之前学过很久没有的知识点差不多快忘了。正好巩固一下
      真细腻啊 老师多多开发些课程啊
      吹爆,我所见过的最透彻的一门课
      推荐好课(试听)
      更新

      Java  实战   5275

      最新课程体验中
      限时免费

      升级

      前端  实战   2813

      最新课程体验中
      限时免费

      更新

      PHP  实战   3185

      最新课程体验中
      ¥9.9

      更新

      前端  中级   3195

      最新课程体验中
      限时免费

      更新

      前端  实战   2893

      最新课程体验中
      限时免费

      升级

      UI/UE  中级   1907

      最新课程体验中
      限时免费

      更新

      Linux  中级   2929

      最新课程体验中
      限时免费

      更新

      Python  实战   3703

      最新课程体验中
      限时免费

      辅导猿
      Sample avatar
      xxyd_h5x

      辅导猿

      最新成员
      Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar
      学习资料 内容数量
      任务数量 90 关
      视频教程 270 小时+
      教学案例 630 个+
      辅助资料 270 个+
      练习作业 380 个+
      阶段测评 1400 道+
      最新评价
      Image placeholder

      xuuuyp

      评价:看过太多教学视频,这门课老师讲的特别清晰,思路很顺畅,太值得学习了。

      Image placeholder

      bug_zs

      评价:知识点比较密集,适合反复学习。老师讲的很清晰,很喜欢老师的讲课风格。迷妹+1

      Image placeholder

      GEEKZHAO

      评价:结合实际应用场景, 能让人深刻理解, 想忘记都难! 感谢!

      Image placeholder

      KyoChou

      评价:老师讲的很棒哦。上课很自然好像聊天聊着就学会了。没有照本宣科的古板,听课很精神不会犯困。之前学过很久没有的知识点差不多快忘了。正好巩固一下

      Image placeholder

      wellwell

      评价:真细腻啊 老师多多开发些课程啊

      Image placeholder

      polandeme

      评价:吹爆,我所见过的最透彻的一门课