ECMAScript 6

最新推荐文章于 2024-05-28 16:35:04 发布
最新推荐文章于 2024-05-28 16:35:04 发布
阅读量161 收藏
点赞数
分类专栏： 前端 ECMAScript 6 文章标签： ECMAScript 6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/RONG51920/article/details/102703461
版权

ECMAScript 6

  • Promise对象
    所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

    • 基本用法
      Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。
      resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
    	const promise = new Promise(function (resolve, reject) {
    	setTimeout(function (){
        	console.log("数据");
     		//这里相当后台返回的数据
     		resolve("数据");
     	},1000);
     	if (true) {
     		resolve("数据");
     	}
     	else {
     		reject("失败");
     	}
     });
     //在外边获取异步数据
     promise.then(function (res) {
     	//成功
     	console.log(res);
     }, function (error) {
     	console.log(error);
     });
    • 一个promise只能写一个请求
    	let promise=new Promise(function (resolve,reject){
     	try{
     		if(false)
     		{
     			setTimeout(resolve,100,1);
     		}
     		else{
     			throw new Error("数据请求异常！");
     		}
     	}
     	catch(err){
     		reject(err);
     	}
    });
    promise.then(function (res){
    	console.log(res);
    }).catch(function (err){
    	console.log(err);
    });
    • promise对象的执行顺序
    	 let data=null;
     let promise=new Promise(function (resolve,reject){
     	console.log("start");
     	setTimeout(resolve,1000,"数据")
     });
     console.log("外部");
     promise.then(function (res){
     	console.log(res);
     	data=res;
     });
     console.log("end");
     console.log(data);
    • 异步加载图片
    	 let promise = new Promise(function (resolve, reject) {
     	let img = new Image();
     	img.onload = function () {
     		setTimeout(resolve,1000,img);
     	};
     	img.onerror = function () {
     		reject(new Error("图片加载失败！"));
     	}
     	img.src = "./img/baidu.png";
     });
     promise.then(function (res) {
     	console.log(res);
     }).catch(function (err) {
     	console.log(err);
     });
    • Promise对象实现 Ajax 操作
    	 const post = function (url, data) {
     	const promise = new Promise(function (resolve, reject) {
     		let http = new XMLHttpRequest();
     		let handle = function () {
     			if (http.readyState != 4) {
     				return;
     			}
     			if (http.status == 200) {
     				resolve(http.response);
     			}
     			else {
     				reject(new Error("请求数据失败！"));
     			}
     		}
     		http.open("post", url);
     		http.onreadystatechange = handle;
     		http.responseType = "json";
     		if (data) {
     			http.send(data);
     		}
     		else {
     			http.send();
     		}
     	});
     	return promise;
     }
     post("./data/stu.json").then(function (res){
     	console.log(res);
     }).catch(function(err){
     	console.log(err);
     });
    • 多个promise进行连用
    	 const promise1=new Promise(function (resolve,reject){
     	setTimeout(resolve,10000,"加载数据10秒")
     })
     const promise2=new Promise(function (resolve,reject){
     	setTimeout(resolve,1000,promise1);
     })
     promise2.then(function (res){
     	console.log(res);
     });
     console.log(Promise.prototype);
    • Promise.all()—多个promise合并
    	 const p1 = new Promise(function (resolve, reject) {
     	setTimeout(resolve, 1000, "学生");
     });
     // p3  p4  是一个新的promise   没有promiseValue
     let p3=p1.then(function (res){
     	return res;
     });
     const p2 = new Promise(function (resolve, reject) {
     	setTimeout(resolve, 1000, "老师");
     });
     let p4=p2.then(function (res){
     	return res;
     });
     console.log(p3,p4);
     //合并
     const p5 = Promise.all([p1, p2]).then(function (res) {
     	console.log(res);
     }).catch(function (err) {
     	console.log(err);
     });

  • async 函数
    1）内置执行器。
    Generator 函数的执行必须靠执行器，所以才有了co模块，而async函数自带执行器。也就是说，async函数的执行，与普通函数一模一样，只要一行。
    （2）更好的语义。
    async和await，比起星号和yield，语义更清楚了。async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果。
    （3）更广的适用性。
    co模块约定，yield命令后面只能是 Thunk 函数或 Promise 对象，而async函数的await命令后面，可以是 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时会自动转成立即 resolved 的 Promise 对象）。
    （4）返回值是 Promise。
    async函数的返回值是 Promise 对象，这比 Generator 函数的返回值是 Iterator 对象方便多了。你可以用then方法指定下一步的操作。
    进一步说，async函数完全可以看作多个异步操作，包装成的一个 Promise 对象，而await命令就是内部then命令的语法糖。

    • 基本用法
    	 function getName(){
     	const promise=new Promise(function (resolve,reject){
     		try{
     			setTimeout(resolve,500,"张三");
     		}
     		catch(err){
     			reject(err)
     		}
     	});
     	return promise;
     }
     function getSex(){
     	const promise=new Promise(function (resolve,reject){
     		try{
     			setTimeout(resolve,1000,"男");
     		}
     		catch(err){
     			reject(err)
     		}
     	});
     	return promise;
     }
     //async  异步函数返回值为promise对象  then   catch  finally
     async function getinfo(){
     	const name= await getName();
     	const sex=await getSex();
     	return {
     		name:name,
     		sex:sex
     	};
     }
     console.log(getinfo());
     getinfo().then(function (res){
     	console.log(res);
     });
    • await 等待promise执行完在继续执行
    	 function gettime(ms){
     	return new Promise(function (resolve){
     		setTimeout(resolve,ms);
     	});
     }
     async function times(val,ms){
     	await gettime(ms);
     	console.log(val);
     }
     times("输出",1000);
     //异步函数的编写形式
     async function getTage(){}
     const getData=async ()=>{}
     let obj={async getsex(){}};
    • await 命令后边必须是promise
    	 async function getlocal(){
     	const number=await new Promise(function (resolve,reject){
     		try{
     			setTimeout(resolve,1000,1);
     		}
     		catch(err){
     			reject(err);
     		}
     	})
     	console.log(number);
     	return number;
     }
     getlocal();
    • await 错误处理
    	 async function getlocal(){
     	let number=null;
     	try{
     	number=await new Promise(function (resolve,reject){
     		try{
     			setTimeout(resolve,1000,1);
     		}
     		catch(err){
     			reject(err);
     		}
     	})
     	}
     	catch(err){
     		throw err.message;
     	}
     	return number;
     }
     getlocal().then(function (res){
     	console.log(res);
     });
    • 所有的等待抓异常
    	 async function getlocal(){
     	try{
     		let number=await new Promise(function (resolve,reject){
     			try{
     				setTimeout(resolve,1000,1);
     			}
     			catch(err){
     				reject(err);
     			}
     		})
     		let data=await new Promise(function (resolve,reject){
     			try{
     				setTimeout(resolve,2000,"学生信息");
     			}
     			catch(err){
     				reject(err);
     			}
     		})
     		return {
     			number:number,
     			data:data
     		};
     	}
     	catch(err){
     		console.log(err);
     	}
     }
     getlocal().then(function (res){
     	console.log(res);
     });

    注释：如果await后边的promise返回rejected，直接抓异常抓整个await

    • 按顺序完成异步操作
    	 //如果他们之间没有关系可以同时触发
     function getname(){
     	return new Promise(function (resolve){
     		setTimeout(resolve,1000,"张三");
     	})
     }
     function getsex(){
     	return new Promise(function (resolve){
     		setTimeout(resolve,1000,"男");
     	})
     }
     function getage(){
     	return new Promise(function (resolve){
     		setTimeout(resolve,1000,"18");
     	})
     }
     async function getinfo(){
     	let data=await Promise.all([getname(),getsex(),getage()]);
     	return data;
     }
     getinfo().then(function (res){
     	console.log(res);
     });
     //如果多个await之间有继发关系，就让他们一个一个走
     function getname(){
     	return new Promise(function (resolve){
     		setTimeout(resolve,1000,"张三");
     	})
     }
     function getsex(name){
     	return new Promise(function (resolve){
     		setTimeout(resolve,1000,"男");
     	})
     }
     function getage(age){
     	return new Promise(function (resolve){
     		setTimeout(resolve,1000,"18");
     	})
     }
     async function getinfo(){
     	let name=await getname();
     	let age=await getage(name);
     	let sex=await getage(age);
     	return sex;
     }
     getinfo().then(function (res){
     	console.log(res);
     });

  • class 基本语法

    • 基本用法
    	  class Student{
          //声明构造函数  一般在类被实例化的时候直接调用构造函数
          //构造函数分为有参构造和无参构造
          constructor(){
              this.name=null;
              this.sex=null;
          }
          toString(){
              console.log("....");
          }
          /*下面方法类似java里面get  set 访问器*/
          getName(){
              return this.name;
          }
          setName(val){
              this.name=val;
          }
      }
      let stu=new Student();
      stu.setName("张三");
      console.log(stu.getName());
      console.log(typeof Student);

    注释：类上的成员方法在类的prototype 上面，属性直接在对象上

    • 类的实例
    	  //如果类已经写好  在去加方法  所有的方法在类的原型上  所以添加时使用
      Object.assign(Student.prototype,{
          toValue(){
          },
          toGetLocal(){
          }
      })
      console.log(stu);
      //Object.getOwnPropertyNames   获取类对象上原型的所有方法名称   集合型
      console.log(Object.getOwnPropertyNames(Student.prototype));
      //类里面的构造函数可写或不写  不写默认添加一个构造函数
      class Animal{
      }
      let cat=new Animal();
      console.log(cat);
      //声明类  写一个有参构造
      class Position{
          constructor(x=0,y=0){
              this.x=x;
              this.y=y;
          }
          alert(){
              console.log(`坐标：${this.x},${this.y}`);
          }
      }
      let pot=new Position(144,97);
      console.log(pot);
      pot.alert();
      //Position.hasOwnProperty()  检测原型上有没有什么名称  true
      //检测原型方法在原型链上找
      //属性可以直接检测
      console.log(pot.__proto__.hasOwnProperty("alert"));
      console.log(pot.hasOwnProperty("x"));
    • 静态方法
    	  //es6里面的  取值函数（getter）和存值函数（setter）
      //拦截该属性的存取行为。
	  // get  set  名称和属性名一致会死循环
      //名称不一致
      let  getinfo="GetName";
      class Person{

          constructor(){

          }
          get _name(){
              console.log(2);
              return this.name;
          }
          set _name(value){
              console.log(1);
              this.name=value;
          }
          //类表达式   以表达式方式解析名称
          [getinfo](){
              console.log(3);
          }
          static getlist(){
              console.log("静态方法");
          }
      }
      let sren=new Person();
      sren._name="张三";
      console.log(sren);
      console.log(sren._name);

    注释：公开方法可以通过类对象来点；静态方法通过类名称来点；静态字段用类名称来点；静态对象不是市里对象上的属性；

  • class 继承
    Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。

		class Person {
            constructor(n, s) {
                this.name = n;
                this.sex = s;
            }

            eat() {
                console.log("吃饭");
            }

            static work() {
                console.log("....");
            }
        }
        class Children extends Person {
            constructor(m, n, s) {
                super(n, s)
                this.money = m;
            }
        }
        class Student extends Children {
            constructor(n, s) {
                super("钱", n, s);//调用父类的构造函数
            }

            job() {
                console.log("上学");
            }
        }
        let s = new Student();
        console.log(s);

注释：es6可以实现多继承，也就是继承叠加

RONG51920
关注
专栏目录
ECMAScript 6 第三版
02-18
**ECMAScript 6（简称ES6）是JavaScript语言的一个重大升级版本，它引入了许多新的特性和改进，为开发者提供了更强大的工具和更简洁的语法。阮一峰老师的《ES6标准入门》第三版是一本深入讲解这些新特性的权威著作，...
ES6(ECMAScript 6)新特性之模板字符串用法分析
08-30
ES6（ECMAScript 6）是JavaScript语言的一次重大更新，其中引入了许多新特性，其中之一就是模板字符串。模板字符串的出现，极大地提升了JavaScript中处理字符串的便捷性和可读性，尤其是在字符串插值方面。 首先，...
ECMAScript6详解
互联网底层民工的博客
11-03 1095
ECMAScript 也是一门脚本语言，缩写为ES，通常看做JavaScript的标准化规范ECMAScript6.0是JavaScript语言的下一代标准，它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
Ecmascript 6
不一样的花朵的博客
05-09 542
知识点 Ecmascript 6 Ecmascript 6 ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。 Ecmascript 是 JavaScript 语言的标注规范 JavaScript 是 Ecmascript 规范的具体实现 具体实现取决于各大浏览器厂商的支持进度 Ecmascript 6 也被称作 Ecmascript 2015 各大浏览器厂商对于最新的 Ecmascript 6 标准支持可以参照： http:
ECMAScript6
2401_85112041的博客
05-28 279
ECMAScript标准不定义HTML或CSS的相关功能，也不定义类似DOM（文档对象模型）的Web API，这些都在独立的标准中进行定义。因此，ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现（另外的ECMAScript方言还有Jscript和ActionScript）。内建对象和函数的标准库 – JSON、Math、数组方法、对象自省方法等。语言语法 – 语法解析规则、关键字、语句、声明、运算符等。类型 – 布尔型、数字、字符串、对象等。const 声明常量。
ECMAScript 6 入门教程
油墨香^-^的博客
06-23 590
作者 | 阮一峰 一、前言 《ECMAScript 6 入门》是一本开源的 JavaScript 语言教程，全面介绍 ECMAScript 6 新引入的语法特性。 本书覆盖 ES6 与上一个版本 ES5 的所有不同之处，对涉及的语法知识给予详细介绍，并给出大量简洁易懂的示例代码。 本书为中级难度，适合已经掌握 ES5 的读者，用来了解这门语言的最新发展；也可当作参考手册，查寻新增的语法点。如果你是 JavaScript 语言的初学者，建议先学完《JavaScript 语言入门教程》。这本书里的相关文
ECMAScript 6教程
ZJC'博客
03-31 1329
文章目录ECMAScript 6简介ECMAScript和JavaScript的关系ES6与ECMAScript 2015的关系语法提案的批准流程ECMAScript的历史部署进度Babel转码器ES2015转码规则react转码规则ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个转码结果输出到标准输出转码结果写入一个文件--out-file 或 -o 参数指定输出文件或者整个目录转码--out-dir 或 -d 参数指定输出目录或者-s 参数生成source map文件安装babel-regis
idea中设置EcmaScript6
Tang_cancan的博客
12-12 1380
idea工具默认选择的是EcmaScript5.1 ES6的新增特性在这时编译工具会提示红色波浪线 所以修改一下设置即可，如图：
ECMAScript 6 新增内容
wanda000的博客
01-28 138
变量的扩展 let const 变量的结构 字符串的扩展及新增方法 模板字符串 (`${}`) matchAll 方法返回一个正则表达式在当前字符串的所有匹配 includes 返回布尔值，表示是否找到了参数字符串。 repeat 方法返回一个新字符串，表示将原字符串重复n次。 trimStart 消除字符串头部的空格 trimEnd 消除尾部的空格 数...
ECMAScript6入门
stevennest的专栏
06-04 649
http://es6.ruanyifeng.com
ECMAScript 6入门教程
qq_33460264的博客
02-14 442
https://es6.ruanyifeng.com/#docs/intro
ecmascript 6 入门.pdf
08-16
ECMAScript 6（ES6），是JavaScript语言的下一代标准，于2015年6月正式发布。它由ECMA国际标准化组织制定，旨在让JavaScript能够编写大型的复杂应用程序，成为企业级开发语言。ES6的制定者计划每年发布一次标准，...
ECMAScript 6 入门（第三版）
08-29
**ECMAScript 6 入门（第三版）** ECMAScript 6，通常被称为ES6，是JavaScript语言的一个重大更新，它引入了一系列新的特性和语法改进，旨在提高开发效率和代码可读性。这本书“ECMAScript 6 入门（第三版）”为...
ES6Presentation:ECMAScript 6 演示
06-01
ECMAScript 6 - 让 JavaScript 变得更好 此存储库包含使用 ES6 的演示文稿和示例。 ##Description ES6 规范对 Javascript 引入了大量语言改进，使其更易于编写和理解。 本演示文稿通过提供简要历史、回顾当前支持和...
逆变器PQ控制模型、逆变器并网模型（Simulink） 直流侧电压650V～2000V均可 交流测电压为380V 有功功率和无功
10-10
逆变器PQ控制模型、逆变器并网模型（Simulink） 直流侧电压650V～2000V均可 交流测电压为380V 有功功率和无功功率可达10kW或10kVar，甚至更高
SpringBoot+Vue工厂生产设备维护管理系统答辩PPT.ppt
10-10
计算机毕业设计答辩PPT
CPA 税法 马兆瑞 基础班 第10章-本章概述-PPT-8页.pdf
最新发布
10-10
CPA 税法 马兆瑞 基础班 第10章-本章概述-PPT-8页.pdf
CCS软件之工程模板的创建
10-10
工程模板创建的基础文件
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值