ES6

最新推荐文章于 2024-01-24 16:58:52 发布

王十一是个喵

最新推荐文章于 2024-01-24 16:58:52 发布

阅读量164

点赞数

文章标签： ES6

本文链接：https://blog.youkuaiyun.com/qq_43398720/article/details/103027191

版权

ES6

Promise对象

概念：代表未来某个将要发生的事件，通常是一个异步操作，一般结合ajax来使用

有了Primise对象,可以将异步操作以同步的流程表达出来，避免了层层嵌套的回调函数

Promise是一个构造函数，用来生成promise实例1因为是构造函数，需要new实例化

promise有三种状态

pending 初始化状态
fullfilled 成功状态
rejected 失败状态

使用步骤：

1，实例化得到promise对象，改变他的状态

resolve：更改成功状态
reject：更改失败状态

let promise=new Promise((resolve,reject)=>{})

2，promise.then()

案例：

let promise=new Promise((resolve,reject)=>{
	console.log('123');
	setTimeout(()=>{
		console.log('456');
		console.log('成功');
	},1000)
	//计时器是异步操作
})
console.log('789');
//上面的结果
//123
//789
//456
//成功
//------------------------------------------
let promise=new Promise((resolve,reject)=>{
	console.log('123');
	setTimeout(()=>{
		console.log('456');
		resolve('成功了');
	},1000)
	//计时器是异步操作
})
console.log('789');
promise.then((data)=>{
	console.log(data);//成功了
	console.log("成功");
})
//resolve是成功的,reject是失败的
//then中其实是有两个函数，第一个是成功的，他接受resolve后面的东西，第二个是失败的，他接受的是reject后面的东西

promise处理异步操作

1，聚合平台，注册实名认证（个人认证、企业认证）

2，首页，查找你要的API接口，点击申请添加

3，后台，数据中心，我的借口，查找刚刚添加的接口

4，操作步骤：

(1)声明一个方法，url代表接口地址

(2)实例化得到一个promise对象

(3)用ajax来获取接口

(4)更新状态，resovle

(5)用then接收数据

<script src='./js/jquery.min.js'></script>
function newPage(url){
	let promise=new Promise((resolve,reject)=>{
		$.ajax({
			url:url,//交互地址
			type:get，//提交方式
			dataType:jsonp//跨域//交互格式（json，jsonp，xml）
			data:{
				'sort':"desc",
				'time':"1218816872",
				'key':"ADPKey"
			}
			success：function(res){
				console.log(res);
				//请求接口中的数据
				resolve(res.result.data)
			}
		})
	})
	return promise;
}

扩展：单个属性注释:-属性名，eg：<script -src=''></script>,这样src就不起作用了；xml是自定义标签，区分大小写，且必须有开始标签和结束标签

Symbol

原始数据类型，需要实例化，但是他不是构造函数，所以不加new

是ES6新增的数据类型：symbol

为了防止命名的冲突，

ES5里面基本的数据类型：

string：字符串数据类型（‘’或者“”）
number：数值类型
null：空类型
Boolean：布尔值（true，false）
undefined：未定义

let symbol=Symbol();//不加new
console.log(symbol)//Symbol()
console.log(typeof symbol)//symbol

特点：

1，Symbol数据类型代表唯一，类似于id

let a=Symbol();
let b=Symbol();
console.log(a === b)//false

2，相同的参数，返回值也不是不同的

let a=Symbol('qqq');
let b=Symbol('qqq');
console.log(a === b)//false

3，不能与其他数据进行计算，包括同字符串拼串

let a=Symbol('qqq');
console.log(a+2);//报错
console.log(a+‘啊啊啊啊’);//报错

4，for-in，for-of遍历时，不会遍历symbol属性

作为属性名的symbol

有三种方式

//第一种
let mySymbol=Symbol();
let a={};
a[mySymbol]='hello';
console.log(a);//{Symbol(): "hello"}
//第二种
let b={
    [mySymbol]:'world',
    // [mySymbol]:'yiaaa'//会覆盖上面的
};
//第三种
let mySymbol=Symbol();
let a={};
Object.defineProperty(a,mySymbol,{
    value:'qqq'
})
console.log(a);
console.log(a[mySymbol]);
console.log(mySymbol);

iterator

**概念：**iterator是一种接口机制，为各种不同的数据结构提供了统一的访问机制
作用：
- 为各种数据结构提供，提供一个统一的，简便的访问接口，使得数据结构的成员能够按某种次序排列
- ES6创造了一种新的遍历命令for…of循环，Iterator接口主要供for…of使用
**支持iterator接口的数据：**Array,arguments,set容器,map容器,String…

Iterator的遍历过程是这样的：

1，创建一个指针对象，指向当前数据结构的起始位置，遍历器对象本质上，就是一个指针对象
2，第一次调用指针对象的next方法，指针指向数据结构中的第一个成员
3，第二次调用指针对象的next方法，指针指向数据结构中的第二个成员
4，不断调用指针对象的next方法，直到他指向数据的结束位置
没调用一次next方法，都会返回数据结构的当前成员信息，具体来说，就是返回一个包含value和done的两个属性的对象，value属性表示当前成员的值，done属性是一个布尔值，表示是否遍历结束，false表示没有结束，true表示结束，当value为undefined时，说明结束了

模拟next方法返回值

var arr=[1,2,3,4,45,'a']
function arrr(arr){
    var index=0;
    return{
        next:function(){
            if(index<arr.length){
                return{value:arr[index++],done:false}
            }else{
                return{value:undefined,done:true}
            }
        }
    }
}
var ss=arrr(arr);
console.log(ss.next());//{value: 1, done: false}
console.log(ss.next());//{value: 2, done: false}
console.log(ss.next());//{value: 3, done: false}
console.log(ss.next());//{value: 4, done: false}
console.log(ss.next());//{value: 45, done: false}
console.log(ss.next());//{value: "a", done: false}
console.log(ss.next());//{value: undefined, done: true}

赋值解析，...运算符都会自动调用interator机制

那些会自动调用iterator机制（使用for…of）：

array
对象{}
yield语法for
string

Generator函数

ES6提供的解决异步编程的方案之一

generator函数是一个状态机，内部封装了不同状态的数据，用来生成遍历器对象，可暂停函数，yield可暂停，next方法可启动，每次返回的是yield后的表达式

**格式：*function 函数名（）{

yield “值”；//用yield表达式来定义不同的状态

yield “值”；

}

next（）；

function* helloGenerator(){
    yield 'aaa';
    yield 'bbbb';
    return 'end';
}
var hw=helloGenerator();
console.log(hw.next());//{value: "aaa", done: false}
console.log(hw.next());//{value: "bbbb", done: false}
console.log(hw.next());//{value: "end", done: true}
console.log(hw.next());//{value: undefined, done: true}

特点：

内部用yield表达式来定义不同的状态
generator函数返回的是指针对象，不会执行函数内部逻辑
遇到yield表达式停止，返回{value：yeild表达式的值/undefined，done：false/true}
再一次调用next方法时，会从上一次停止的位置开始

yield语法

yield语句返回的结果通常是undefined，当调用next方法时传参内容会作为启动是yield语句的返回值

async函数

**概念：*真正意义上解决了异步回调的问题，同步流程表达异步操作，本质是generator的语法糖（保留了generator的语法格式，含义，在他的基础上加了糖），用async替代，await替换yield

**：**返回的是一个promise对象，

格式：

async function foo（）{

awaiy 异步操作；

}

**：**async不再有next，

class（面向对象）

**声明一个类，**class是关键字

**格式：**class 类名{}（类名首字母最好大写，不能用中文和数字和关键字）

**constructor：**构造函数，构造方法，实例化的时候会自动调用，实例化才会自动触发

**extend：**继承，子类可以继承父类的构造方法，属性和方法

**super：**子类里的构造函数中如果想要增加新的值，需要先调用父类的方法，然后再添加

**类里面有：**成员属性和成员方法

**子类通过构造方法新增新的内容时，**必须先要用super调用父类的方法

**子类想要定义自身的方法：**可以重写、覆盖父类的方法

类里面不可以加function，类自动会把方法加载到原型里面

//---------------构造
class Aaa{
//类名可以用中文，但是不要用！
	constructor(name，age){
		//console.log('111');
		this.a=name;//当前对象属性name赋值了name
		this.b=age;
	}
	qqq(){//它是类里面的成员方法
		console.log(this.a,this.b);
	}
}
//let aaa=new Aaa();//实例化得到这个类
//实例化时，类名严格区分大小写
//有定义构造方法时，类实例化时会马上去触发这个构造方法
let bbb=new Aaa('zhang',12);//不有有任何值
bbb.qqq();
//-------------继承
class Father{//父类
	//构造方法
	constructor(name，age){
		this.name=name;//当前对象属性name
		this.age=age;
	}
	//定义一个成员方法
	aaa(){
		console.log(this.name);
	}
}
let a=new Father('aaa',23);
a.aaa();//aaa
class Son extend Father{}
let b=new Son('ccc',20);
b.aaa();//ccc

module模块

**模块：**一个模块就是一个js文件。

**：**定义了一个模块，模块里面的参数或者变量，外部是不能够访问的，要进行访问，就要暴露这个变量。

**export：**关键字暴露模块 export {变量名}，把他暴露出去

**import：**关键字引入模块 import {变量名} from “js文件”

**😗*引入模块时，在script标签里的type设置为type=‘module’

//-------------暴露一个变量
//module.js中
var a=10;
export {a};//把a暴露出去
//module.html中
<script type="module">
    import {a} from "./module.js";
    console.log(a);
</script>
//-----------------暴露多个变量
//module.js中
var a=10;
var name='张三'；
var b=15;
export {a,name,b};//把a暴露出去
//module.html中
<script type="module">
    import {a,name,b} from "./module.js";
    console.log(a,name,b);
</script>
//---------------------另一种暴露变量的方式
//module.js中
export var a=10;
export var name='张三'；
export var b=15;
//module.html中
<script type="module">
    import {a,name,b} from "./module.js";
    console.log(a,name,b);
</script>
//---------------------暴露一个函数
//module.js中
export function show(aa,bb){
	return aa+bb;
}
//module.html中
<script type="module">
    import {show} from "./module.js";
    console.log(show(1,2));
</script>
//----------------暴露一个函数的另一种写法
//module.js中
function show(aa,bb){
	return aa+bb;
}
export {show}
//module.html中
<script type="module">
    import {show} from "./module.js";
    console.log(show(1,2));
</script>
//------------------------暴露取别名
//as：（关键字） 取别名（要有意义，多个单词用_隔开，不能以数字开头，不能以关键字命名）
//module.js中
function ueyudujshajfh(aa,bb){
	return aa+bb;
}
export {
	ueyudujshajfh as 取别名 b
}
//module.html中
<script type="module">
    import {show} from "./module.js";
    console.log(show(1,2));
</script>