ES6快速入门

1、ECMAScript 6.0 简介
ECMAScript 6.0 (以下简称ES6, ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是
European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言)一种脚本语
言的标准,已经在2015年6月正式发布了,并且从ECMAScript6开始,开始采用年号来做版本。即ECMAScript2015,就是ECMAScript6它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语
言。每年一个新版本。
关键点:
ECMAScript是每年更新的
初始的ECMAScript版本是从1按照数字递增的:ES1,ES2,ES3,ES4,ES5
新的版本(从2015年开始)根据发布的年份命名:ES2015,ES2016,ES2017
ECMAScript是个标准。Javascript是这个标准最流行普遍的实现。其他实现包括:SpiderMonkey,V8和ActionScrip。
我们以后会经常使用let来声明一个变量,还有一个const常量(声明之后不允许改变,一旦声明必须初始化,否则报错)
ES6快速入门_第1张图片
ES6快速入门_第2张图片
ES6快速入门_第3张图片
ES6快速入门_第4张图片
在这里插入图片描述
3、 ES6新特性-解构&字符串

ES6快速入门_第5张图片
ES6快速入门_第6张图片
ES6快速入门_第7张图片
ES6快速入门_第8张图片
ES6快速入门_第9张图片
在这里插入图片描述
4、 ES6新特性-函数优化

ES6快速入门_第10张图片
ES6快速入门_第11张图片
5、 ES6新特性-对象优化
ES6快速入门_第12张图片
ES6快速入门_第13张图片
ES6快速入门_第14张图片
ES6快速入门_第15张图片
6、 map,reduce

map()方法:map,映射,即原数组映射成一个新的数组;
map方法接受一个新参数,这个参数就是将原数组变成新数组的映射关系。
ES6快速入门_第16张图片
reduce
语法:
在这里插入图片描述
reduce为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:
初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用reduce 的数组。
callback ( 执行数组中每个值的函数,包含四个参数)
1、previousValue ( 上一次调用回调返回的值,或者是提供的初始值(initialalue) )
2、currentValue (数组中当前被处理的元素)
3、index (当前元素在数组中的索引)
4、array (调用reduce 的数组)
initialValue (作为第 一次调用callback 的第一个参数。)

ES6快速入门_第17张图片
ES6快速入门_第18张图片
7、 promise异步编排
在JavaScript的世界中,所有代码都是单线程执行的。由于这个“缺陷”,导致JavaScript的所有网络操作,浏览器事件,都必须是异步执行。异步执行可以用回调函数实现。一旦有一连串的ajax请求。a,b,d…,后面的请求依赖前面的请求结果,就需要层层嵌套。这种缩进和层层嵌套的方式,非常容易造成上下文代码混乱,我们不得不非常小心翼翼处理内层函数与外层函数的数据,一旦内层函数使用了上层函数的变量,这种混乱程度就会加剧…总之,这种层叠上下文的层层嵌套方式,着实增加了神经的紧张程度。
案例:用户登录,并展示该用户的各科成绩。在页面发送两次请求:
1.查询用户,查询成功说明可以登录
2.查询用户成功,查询科目
3.根据科目的查询结果,获取去成绩
分析:此时后台应该提供三个接口,一个提供用户查询接口,一个提供科目的接口,一个提供各科成绩的接口,为了渲染方便,最好响应json数据。在这里就不编写后台接口了,而是提供三个json文件,直接提供json
数据,模拟后台接口:
我们以前使用的是ajax请求来完成,如下图

ES6快速入门_第19张图片
在这里插入图片描述
我们作如上的操作发现是非常复杂的嵌套程序,无限嵌套的方式总是让人感觉到非常凌乱,不工整,我们希望有一种操作来给他们从新编排一下,让我们感觉到操作的顺序性,逻辑性,es6就给我提供了promise功能,
如下演示
ES6快速入门_第20张图片
ES6快速入门_第21张图片
ES6快速入门_第22张图片
ES6快速入门_第23张图片
在这里插入图片描述
我们对上面的方法进行改造,把ajax的请求封装成一个方法,并返回
ES6快速入门_第24张图片
ES6快速入门_第25张图片
8、 模块化
1)、什么是模块化
模块化就是把代码进行拆分,方便重复利用。类似java中的导包:要使用一一个包,必须先导包。而JS中没有包的概念,换来的是模块。
在ES6中每一个模块即是一个文件,在文件中定义的变量,函数,对象在外部是无法获取的模块功能主要由两个命令构成: ‘export’ 和import’。
'export’命令用于规定模块的对外接口,如果你希望外部可以读取模块当中的内容,就必须使用export来对其进行暴露(输出)。
export`不仅可以导出对象,一切JS变量都可以导出。比如:基本类型
变量、函数、数组、对象。
import 命令永固导入模块。

hello.js
ES6快速入门_第26张图片
user.js
ES6快速入门_第27张图片

main.js
ES6快速入门_第28张图片
注意:
1.模块化一定要以web服务器方式运行
2.如果要在html中运行要在

你可能感兴趣的:(es6,javascript,前端)