2020全新ES6精讲
 收藏

    

 1286人加入学习

价格

限期免费

教学计划

默认计划

学习有效期

2020-04-09至2022-08-31

课程介绍

file

 第1关：ES6精讲(一) 开始学习

 任务:学习猿地_ES6_介绍ES6以及和JavaScript的关系 

 任务:学习猿地_ES6_使用babel在线转换解决兼容性问题 

 任务:学习猿地_ES6_使用babel提前编译解决兼容性问题 

 任务:学习猿地_ES6_ES6中的let命令的声明与使用 

 任务:学习猿地_ES6_ES6中的const命令的声明与使用 

 任务:学习猿地_ES6_ES6中箭头函数的声明与使用 

 任务:学习猿地_ES6_ES6箭头函数中this的指向 

 任务:学习猿地_ES6_ES6中的模版字符串和字符串中新增加的方法应用 

 第2关：ES6精讲(二) 开始学习

 任务:16_学习猿地_ES6中的Promise的应用 

 任务:17_学习猿地_ES6中的Promise的all#race#catch三个方法的应用 

 任务:18_学习猿地_ES6中的async#await的组合应用 

 任务:19_学习猿地_ES6中的generator的应用 

 任务:21_学习猿地_ES6中的模块化export#import 

 任务:22_学习猿地_总结和ES7-ES9的新特性介绍 

ES6精讲(二)笔记

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

2.ES6兼容

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

var 可以重复声明
var 无法限制修改
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() 方法