ES6整理

ES6整理

1. ES6允许按照一定模式从数组和对象中提取值再对变量赋值,称之为解构。这种新模式会映射出正在解构的数据结构,只有那些与模式匹配的数据才会被提取出来。
注:解构数据与构造数据截然相反,不是构造一个新的对象或数组,而是逐个拆分现有的对象或是数组来提取所需要的数据。

2. Map是ES6提供的一种数据字典结构。字典就是用来存储不重复的Hash结构。不同于集合的事字典使用健值对的形式存储数据。
注:JavaScript中的Object本质上是键值对的集合,只能用字符串来做键,这给使用带来了极大的限制。为了解决这个问题,ES6提供了Map数据结构。
Map数据结构类似于Object,也是键值对的集合,但是,键的范围不仅限于字符串,而是各种类型的值都可以做键
即是说,**Object提供了“字符串-值”的对应结构,Map提供了“值-值”的对应结构。是一种更加完善的Hash结构实现。**如果需要使用“键值对”,Map比Object更合适。

3. JSON可以将JavaScript对象中的表示的一组数据转换为字符串,然后就可以在网络或是程序之间轻松的传递这个字符串,并在需要时将其再还原为各编程语言所支持的数据格式。
JSON(JavaScript Object Notation JavaScript对象表示方法)是一种轻量级的数据交换格式,是基于ECMAScript(欧洲计算机协会制定的JS规范)的一个子集,采用完全独立于编程语言的文本格式存储和表示数据。
简介和清晰的层次结构数据使JSON成为理想的数据交换语言,易于阅读和编写,同时也易于机器解析和生成,可以有效的提升网络传输效率。

4. Module语法
在ES6之前,JavaScript语言一直没有模块(Module)的体系,无法将一个大型程序分解成相互依赖的小文件再用简单的方法拼接起来。其他语言斗鱼这一功能,如python中的import,甚至css有的@import,但是JavaScript没有任何对这方面的支持,这对于开发大型、复杂的项目而言是巨大的障碍。
在ES6之前,社区指定了一些模块加载方案,最主要的有CommonJS和AMD两种。CommonJS用于服务器,AMD用于浏览器。ES6在语言规范的层面上实现了模块功能,而且实现得相当简单,完全可以取代现有的CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案。
ES6模块的设计思想是尽量静态化,**静态化就是在静态分析阶段(词法分析、语法分析、语义分析等)时就能确定模块的依赖关系,以及输入和输出的变量。**这种静态化的好处是可以在编译的时候就能优化,缺点是不能进行条件加载,所有的import、export语句都只能在代码顶层,不能在条件里,不能有变量,因为这时候还没有运行,变量和条件都无法计算出来,因此不能实现条件加载
ES6模块不是对象,而是通过export命令显示指定输出的代码,再通过import命令输入。 且模块功能主要两个命令:export、import。export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。
一个模块就是一个独立的文件,该文件内部的所有变量从外部无法获取。如果希望外部能够读取模块内部的某个变量就必须使用export命令输出该变量。
注:import后面的from指定模块文件的位置,可是是相对路径也可以是绝对路径,“.js”后缀可以省略,如果只是模块名不带有路径,那么必须有配置文件告诉JavaScript引擎该模块的位置。使用大括号指定要输入输出的一组变量。as关键字重命名别名。
export命令规定的是对外的接口,必须与模块内部的变量建立一一对应的关系。export命令可以出现在模块顶层的任何位置。如果出现在块级作用域就会报错,这是因为处于条件代码块中就没有做静态优化,违背了ES6模块的设计初衷。

5. 箭头函数
使用ES6箭头函数语法定义函数,将原函数的function关键字和函数名都删掉并使用箭头“=>”连接参数表和函数体。
箭头函数的两种简化方法:
当函数参数只有一个时,括号可以省略,但是没有参数时,括号不可以省略。
如果函数体只有一条return语句时,可以省略掉{ }和return关键字,但是当函数包含多条语句时,不能省略{ }和return关键字。
通过箭头函数和解构赋值相结合,可以简化箭头函数的调用方式一提高代码编写效率。

6. ES6新增let命令。用法类似var,但是所声明的变量只在let命令所在的代码块内有效

7. const命令
加粗样式用const命令声明的是一个只读的常量,其值一旦声明就不能改变。这也意味着const命令一旦声明常亮就必须立即将其初始化,只声明不赋值会报错
const命令的作用域与let命令相同,只在声明所在的块级作用域内有效,且不可以重复声明,另外,用const命令声明变量也必须先定义后使用。
const命令实际上保证的保证的并不是变量的值不动,而是变量指向的那个内存地址不能改动,对于简单类型的数据(数字、字符串、布尔值)而言,值就保存在变量指向的内存地址中,因此等同于常量。但是相对于复合数据类型(对象和数组)而言,变量指向的内存地址保存的只是一个指针,const命令只能保证这个指针是固定的,至于指向的数据结构是不是可变的完全不能控制,因此,将一个数组或对象声明为常量时必须非常小心。
一个常量数组,数组本身是可以写入数据的,但是如果将另外一个数组赋值给该常量数组是不允许的。

8. 数组方法-map()方法
map()方法用于遍历数组中的每个元素,让其作为参数执行一个指定的函数,然后将每一个返回值形成一个新的数组,map()方法不改变原数组的值
使用方法:
在这里插入图片描述
9. 数组方法-forEach()方法
forEach()方法是从头到尾遍历数组,为每个元素调用指定函数。该方法改变原数组本身,并且指定调用函数的参数依次是:数组元素、元素的索引、数组本身
使用方法:
在这里插入图片描述
10. 数组方法-filter()方法
filter()方法对数组元素执行特定函数后返回一个子集,也称之为过滤方法。
filter()方法的入口参数是执行逻辑判断的函数,该函数返回值是true或false
filter()方法的结果是所执行逻辑判断函数返回true的元素
即是说,用filter()方法过滤掉数组中不满足条件的值,返回一个新数组,不改变原数组的值
使用方法:
在这里插入图片描述
11. 数组方法-every()方法和some()方法
every()方法和some()方法都是对数组元素进行指定函数的逻辑判断,入口参数都是一个指定函数,方法的返回值是true和false
every()方法是将数组中的每个元素作为入口指定函数的参数,如果该函数对每个元素运行的结果都返回true,则every()方法最后返回true,也就是一假即假。
some()方法是将数组中的每个元素作为入口指定函数的参数,如果该函数只要有一个元素运行的结果返回true,则some()方法最后返回true,也就是说一真即真。
every()方法和some()方法一般可以用来判断是否数组中所有数都满足某一条件或是否存在某些数满足条件
使用方法:在这里插入图片描述
12. 数组方法-reduce()方法
reduce()方法接收一个函数作为累加器,使用数组中的每一元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,回调函数接受4个参数。
使用方法:
在这里插入图片描述
13. Promise对象
Promise是异步编程的一种解决方案,从语法上讲,Promise是一个对象,可以获取异步操作的消息。
Promise对象用于一个异步操作的最终完成(或失败)及其结果值的表示。简单说就是用于处理异步操作的。如果异步处理成功了,就执行成功的操作,如果异步处理失败了,就捕捉错误或是停止后续操作。
Primise.prototype.then()
Promise对象含有then()方法,调用then()方法后返回一个Promise对象,意味着实例化后的Promise对象可以进行链式调用,而且这个then()方法可以接收两个函数:一个是处理成功后的函数,一个是处理错误结果的函数。
Promise.prototype.catch()
catch()方法和then()方法一样,都会返回一个新的Promise对象,主要用于捕捉异步操作是出现的异常。
因此通常省略then()方法的第二个参数,把错误处理控制权转交给其后面的catch()方法。

14. 字符串扩展
模板字符串——ES6引入了模板字符串解决了传统需要使用大量的双引号和加号进行拼接才能得到的木板。模板字符串是增强版的字符串,用反引号(`)标识,既可以当作普通字符使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。
当引入变量时可以使用“${变量}”将变量括起来。

ES6字符串新增的方法:
查找方法
传统JavaScript——indexof()/lastindexof()——可以返回一个字符串是否包含在另一个字符串中。
ES6——includes(String,index)返回布尔值。参数String表示需要查找的字符串,index表示从源字符串的什么位置开始查找。该方法
表示从index位置往后查找是否包含String字符串,如果找到,则返回true,否则返回false如果没有index参数,则表示查找整个源字符串。
ES6——startWith(String,index)返回布尔值。表示参数字符串String是否在源字符串头部,index表示从源字符串的什么位置开始查找。
ES6——endWith(String,index)返回布尔值。表示参数字符串String是否在源字符串尾部,index表示从源字符串后面的什么位置开始查找。
重复方法
repeat(//数值/NaN):将源字符串重复几次,并返回一个新的字符串。
注:如果输入的是小数则会被向下取整,如果输入的是NaN,则会被当作0,如果输入其他的值,则会报错。
补全方法
padStart()和padEnd():是字符串补全长度的方法,如果某个字符串不够不指定长度,会在头部或尾部补全。
这两个方法都有两个参数:第一个参数是补全后的字符串的最大长度;第二个参数是要补全的字符串,返回的是补全后的字符串。
如果补全字符串与源字符串超出了补全之后的字符串长度,那么补全字符串超出的部分将会被截取。
如果源字符串长度大于第一个参数,则返回源字符串。
如果不写第二个参数,则用空格补全到指定长度。

15. 见下文

  • 3
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Jennifer33K

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值