ES6mark

学习猿地 高洛峰 2020‎年‎4‎月‎6‎日，‏‎7:41:58

2020‎年‎4‎月‎6‎日，‏‎10:41:58 暂停

2020‎年‎4‎月‎6‎日，‏‎19：27 暂停

ES6入门

ECMA是 European Computer Manufacturers Association 的缩写

中文称为 欧洲计算机制造联合会

组织的目标是评估，开发和认可电信和计算机标准

ECMA是标准， JavaScript是实现

​ 类似HTML5是标准，IE10、Chrome、FF都是实现

​ 目标是：让前端脚本都实现ECMA

​ 目前是：只有JavaScript实现ECMA标准，ECMAScript≈JS

---

ES6兼容性解决

kangx.GITHUB.IO/conpat-table/es6/

IE10+、Chrome、FireFox、移动端、NodeJS都支持

兼容低版本

​ 在线转换（这种编译会加大页面渲染的时间）

​ 提前编译（不影响浏览器渲染时间）

​ 比较通用的工具方案（Babel）

使用Bable在线转换解决兼容性问题

直接页面引入browse.js即可

---

使用Bable提前编译解决兼容性问题

自查资料，略

---

ES6中的let命令的声明与使用

var特点：

可以重复声明

无法限制修改

不具有块作用域

let特点

不能重复声明

具有块级作用域，只在let命令所在的代码块内有效

let 声明

let a = 10;

---

ES6中的const命令的声明与使用

const PI = 3.1415926;

const声明的是常量

不能够修改内存地址

不能稍后赋值

不能重复声明

必须立即初始化

具有块级作用域

---

ES6中的箭头函数的声明与使用

let f = v => v*v;

v就是形参

v*v就是返回值

let f= function(v){

​ return v*v;

}

单参数与多参数写法示例：

let f =v => v*v;

let f =(v,a) => v*a;

多条语句写法（后面加花括号）:

let f = v => {xxx ; return v*v}

总结:

ES6允许使用箭头=>定义

不需要参数或需要多个参数，就用圆括号代

代码块部分多与一条语句，就用大括号括起来，并且用return返回

如果返回的是对象，则后面必须加括号()把对象括起来

箭头函数使得表达更加简洁

箭头函数能够简化回调函数

---

箭头函数中this的指向

箭头函数没有自己的this，导致内部的this就是外层代码块的this

---

ES6数组的新方法

map() 进去多个出来多个，映射

reduce() 进去多个出来一个，汇总

filter() 过滤器

forEach() 循环（迭代）,遍历

some() 一个为true 就会返回true

every() 必须所有都返回true才会返回true

---

ES6中的模板字符串和字符串中新增的方法

变量名.startsWith(“xx”) 判断变量值是否以特定xx开头

变量名.endsWith(“xx”) 判断变量值是否以特定xx结尾

模板字符串：不同于普通字符串需要链接的方式

​ 而是加上 ` 反引号 可以不用+号拼接了

​ 变量用 ${变量名}

​ 是增强版的字符串，可以用作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量

---

函数的参数三点运算符号

如形参的省略，不需要写上具体的形参数量 …arr

但需注意只能接收剩余参数，不能在他后面再放变量，只在前面放

let arr=[1,2,3,4];

let arr2=[5,6,7,8];

let narr=[…arr,…arr2];

console.log(narr);

console.log(…arr,…arr2,…narr);打印输出看结果，此处略

声明默认参数：也和三点运算符号一样放在后面，不放前面

---

解构赋值，如–1，–2, --4 ,–5是典型应用

特点：

左右两边结构必须一样

右边必须有值

声明和赋值不能分开

作用：

简化赋值，不用一个一个给变量赋值

let arr=[1,2,3];

let a=arr[0];

let b=arr[1];

let c=arr[2];

let [a,b,c] = [1,2,3]; —1

let {a,b,c} = {“a”:1,b:2,c:3}; —3

let [a,b,c] = arr; —2

console.log(a,b,c);

let [a,b,{c,d},[e,f],g,h]=[1,2,{c:3,d:4},[5,6],7,8];–4

console.log(a,b,c,d,e,f,g,h);

let [a,b,c,e,g,h]=[1,2,{c:3,d:4},[5,6],7,8];–5

console.log(a,b,c,e,g,h);打印输出看结果，此处略

---

ES6中的class类的声明

class Person{

​ constructor(name,age){

​ this.name=name;

​ this.age=age;

​ }

​ say(){

​ console.log(“xx”);

​ }

}

let p =new Person(a,b);

p.say();

---

ES6中的class的继承

Tearcher直接继承Person的属性和方法

class Tearcher extends Person{

​ constructor(xx,xx,xx){

​ xxx

​ };

​ study(){xxx};

}

let t = new Teacher(xx,xx,xx);

---

ES6中JSON的应用

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式

JSON的标准格式：

属性双引号，外面单引号

let obj = ‘{“a”:1,“b”:“abc”,“c”:true}’;

JSON对象

JSON.stringify() 串行化

JSON.parse() 反串行化

简写

属性和值，名字一样可以简写

方法一样可以简写

---

ES6中的Promise的应用

Promise简单说就是一个容器，里面保持着某个未来才会结束的事件

通常是一个异步操作–接口–Ajax-setTimeout-img的结果

ES6规定，Promise对象是一个构造函数，用来生成Promise示例

Promise构造函数接收一个函数作为参数

该函数的两个参数分别是resolve和reject 他们是两个函数，由JavaScript引擎提供，不用自己部署

resolve函数的作用是，将Promise对象的状态从未完成变为成功

在异步操作成功时调用，将异步操作的结果作为参数传递出去

reject函数的作用是xxx

---

ES6中的generator的应用

function * demo(){

​ console.log(“1”);

​ yield

​ console.log(“2”);

​ yield

​ console.log(“3”);

}

let genobj = demo();

genobj.next();

genobj.next();

genobj.next();

话不多说，运行代码自己看，这种形式就是generator函数

传参使用：

function * demo(){

​ console.log(“1”);

​ let a = yield

​ console.log(“a”);

​ let b = yield

​ console.log(“b”);

}

let genobj = demo();

genobj.next();这时启动调用，传参无效

genobj.next(20); 这对应第一个yield

genobj.next(30);这对应第二个yield

返回值使用：

function * demo(){

​ console.log(“1”);

​ let a = yield ‘aa’

​ console.log(“a”);

​ let b = yield ‘bb’

​ console.log(“b”);

}

let genobj = demo();

let a = genobj.next();这时启动调用，传参无效

let b = genobj.next(20); 这对应第一个yield

let c = genobj.next(30);这对应第二个yield

console.log(a,b,c); 可以依据返回的对象的done判断是否执行完

---

ES6中的Map数据结构

Map数据结构类似于对象，是键值对的集合

传统的键只能用字符串，Map的键不限于字符串

各种类型的值（包括对象）都可以当作键属性和操作方法

size属性：

存储的是Map结构的成员总数

set(key,value)方法：

设置键名key对应的键值为valu然后返回整个Map结构

如果key已经有值，则键值会被更新，否则就新生成该键

示例：

const a = new Map();

a.set(‘foo’,true);

a.set(222,‘standard’);

a.set(undefined,234);

或者连写 let map = new Map([‘a’,‘11’],[xx,xx],[xx,xx])

或者a.set(‘foo’,true)

​ .set(‘foo’,true);

​ .set(‘foxo’,true);

a.size // 3

a.clear() 全部清空

a.delete(xx) 删除

a.has(zz) 是否存在

---

ES6中的模块化export , import

导出nihao.js：

export xxx1;

export xxx2;

export{xxx1;xxx2};

export{xxx1 as myxxx1};

或者默认导出：export default function(){return “this is a test”}

一个JS模块只能有一个默认导出，就是导入未指定就是这个默认导出

导入buhao.js：

import{xxx1,xxx2,myxxx1} from “./nihao.js”

console.log(xxx1,xxx2,myxxx1)

或

import * as nihaoaa from “./nihao.js”

console.log(nihaoaa.xxx1,nihaoaa.xxx2,nihaoaa.myxxx1)

或

import myff from “./nihao.js”

或

import myff ,{url as aurl,name as aname}from “./nihao.js”

解决多个模块重名冲突问题

引入index.html：

Module模块化有点

减少命名冲突，避免引入时的层层依赖，提升执行效率

---

完结事件 2020-4-7-12-50