ES6新特性

ES6新特性 1.1 什么是ES6 编程语言JavaScript是ECMAScript的实现和扩展 。ECMAScript是由ECMA(一个类似W3C的标准组织)参与进行标准化的语法规范。ECMAScript定义了: 语言语法 – 语法解析规则、关键字、语句、声明、运算符等。 类型 – 布尔型、数字、字符串、对象等。 原型和继承 内建对象和函数的标准库 – JSON、Math、数组方法、对象自省方法等。 ECMAScript标准不定义HTML或CSS的相关功能,也不定义类似DOM(文档对象模型)的Web API,这些都在独立的标准中进行定义。ECMAScript涵盖了各种环境中JS的使用场景,无论是浏览器环境还是类似node.js的非浏览器环境。 ECMAScript标准的历史版本分别是1、2、3、5。 那么为什么没有第4版?其实,在过去确实曾计划发布提出巨量新特性的第4版,但最终却因想法太过激进而惨遭废除(这一版标准中曾经有一个极其复杂的支持泛型和类型推断的内建静态类型系统)。 ES4饱受争议,当标准委员会最终停止开发ES4时,其成员同意发布一个相对谦和的ES5版本,随后继续制定一些更具实质性的新特性。这一明确的协商协议最终命名为“Harmony”,因此,ES5规范中包含这样两句话 ECMAScript是一门充满活力的语言,并在不断进化中。 未来版本的规范中将持续进行重要的技术改进 2009年发布的改进版本ES5,引入了Object.create()、Object.defineProperty()、getters和setters、严格模式以及JSON对象。 ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,2015年6月正式发布。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。 1.2 Node.js中使用ES6 ES6+ 太棒了,但是很多高级功能node是不支持的,就需要使用babel转换成ES5 (1)babel转换配置,项目根目录添加.babelrc 文件 { "presets" : ['es2015'] } (2)安装es6转换模块 cnpm install babel-preset-es2015 --save-dev (3)全局安装命令行工具 cnpm install babel-cli -g (4)使用 babel-node js文件名 1.3 语法新特性 1.3.1 变量声明let 我们都是知道在ES6以前,var关键字声明变量。无论声明在何处,都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如 function aa() { if(bool) { var test = 'hello man' } else { console. »

Author image HuangRui on #qd, #es6,

Promise在异步调用时的使用场景

下面基于,前端要调用接口删除图片的环境背景下,说明为了实现删除成功图片消失,删除失败图片不会消失的实现过程` 用到ES6中的promise语法 promise异步调用** 在handleRemove方法调用删除图片的api方法,删除成功时return true,删除失败时return false; //删除图片 handleRemove(file, fileList) { console.log(file) // alert('删除') // return true; //删除图片 courseApi.deleteCoursePic('1').then((res) => { if(res.success){ this.$message.success('删除成功'); return true; }else{ this.$message.error(res.message); return false; } }); }, 在上边代码中将提交的课程id故意写错,按照我们预期应该是删除失败,而测试结果却是图片在页面上删除成功。 问题原因: 通过查询deleteCoursePic方法的底层代码,deleteCoursePic最终返回一个promise对象。 Promise是ES6提供的用于异步处理的对象,因为axios提交是异步提交,这里使用promise作为返回值。 Promise的使用方法如下: Promise对象在处理过程中有三种状态: pending:进行中 resolved:操作成功 rejected: 操作失败 Promise的构建方法如下: const promise = new Promise(function(resolve,reject){ //...TODO... if(操作成功){ resolve(value); }else{ reject(error); } }) 上边的构造方法function(resolve,reject)执行流程如下: 1)方法执行一些业务逻辑。 2)如果操作成功将Promise的状态由pending变为resolved,并将操作结果传出去 3)如果操作失败会将promise的状态由pending变为rejected,并将失败结果传出去。 上边说的操作成功将操作结果传给谁了呢?操作失败将失败结果传给谁了呢? 通过promise的then、catch来指定 promise.then(function (result) { console.log('操作成功:' + result); }); promise. »