平凡前端之路_14.ES与ES6

系列文章平凡前端之路_01.HTML与 HTML5平凡前端之路_05.CSS与CSS3平凡前端之路_14.ES与ES6平凡前端之路_15.let 和 const声明平凡前端之路_16.变量的解构赋值平凡前端之路_17.展开操作符(Spread)/剩余参数(Rest)平凡前端之路_18.字符串的扩展平凡前端之路_19.数组的扩展平凡前端之路_20.函数的扩展平凡前端之路_21.对象的扩展目录系列文章什么是JavaScript什么是ESES的发展什么是ES6?ES6特性JS 知识题什么是JavaScriptJavaScript一种动态类型、弱类型、基于原型的客户端脚本语言用来给HTML网页增加动态功能。动态在运行时确定数据类型。变量使用之前不需要类型声明通常变量的类型是被赋值的那个值的类型。弱类计算时可以不同类型之间对使用者透明地隐式转换即使类型不正确也能通过隐式转换来得到正确的类型。原型新对象继承对象作为模版将自身的属性共享给新对象模版对象称为原型。这样新对象实例化后不但可以享有自己创建时和运行时定义的属性而且可以享有原型对象的属性。JavaScript由三部分组成ECMAScript核心规定了语言的组成部分语法、类型、语句、关键字、保留字、操作符、对象。DOM文档对象模型整个页面映射为一个多层节点结果可借助DOM提供的API轻松地删除、添加、替换或修改任何节点。BOM浏览器对象模型支持可以访问和操作浏览器窗口的浏览器对象模型可以控制浏览器显示的页面以外的部分。什么是ESES 全称ECMAScript以JavaScript为基础制定的一种脚本语言标准规范。ES已经超越浏览器脚本这一角色成为了一种真正的通用语言标准。ECMAScript的发展速度在不断加快影响范围越来越大除了前端开发以外借助着Node.js的力量在服务器、桌面端甚至硬件设备等领域中也发光发热。ES的发展ECMAScript 1.0是1997年发布ECMAScript 2.0是1998年6月发布ECMAScript 3.0是1999年12月发布在业界得到广泛支持成为通行标准普遍的学习JavaScript其实就是在学3.0版的语法。ECMAScript 4.x因为过于复杂废弃了。ECMAscript 5.1是2011年6月发布并且成为通行国际标准。ECMAScript 6是2015年6月发布即ES2015成为国际标准。ECMAScript 7是2016年6月发布即ES2016。ECMAScript 8是2017年6月发布即ES2017。ECMAScript 9是2018年6月发布即ES2018。ECMAScript 10是2019年6月发布即ES2019。ECMAScript 11是2020年6月发布即ES2020。什么是ES6?ECMAScript第六个版本在保证向下兼容的前提下在ES5之后的下一代标准泛指ES5.1版后的下一代标准涵盖了ES2015、ES2016、ES2017等。随着时间的推移支持度已经越来越高了所有的现代浏览器都完整的支持ES5ES6的大部分特性以及ES6部分都得到了支持旨在使es能编写复杂大型应用程序成为企业级开发语言。通过使用Babel、Traceur等转码器能将ES6代码转为ES5代码让浏览器支持部分ES6及ES6特性。ES6特性let和const声明ES6 新增了两种声明变量的方式let 和 constlet和const声明的变量只在其所在代码块内有效实现了“块级作用域”的效果const声明一个只读的常量一旦声明就不能改变值因此一旦声明必须立即初始化。变量的解构赋值ES6 新增了解构赋值解构赋值是对赋值运算符的扩展。是一种以数组或对象模式进行匹配从数组和对象成员中提取数据然后赋值给变量的特殊语法这是将一个数据结构快速方便分解为更小的部分的过程。展开操作符(Spread)/剩余参数(Rest)ES6 新增扩展运算符Spread Operator和剩余参数Rest Parameter。主要作用是方便处理函数参数和数据结构。虽然它们在语法上有些相似都是在变量或字面量之前加三个点…但它们的功能却有着一些不同之处。展开操作符(Spread)则可以将可迭代对象如数组、Set、Map 等中的所有元素“展开”成多个独立的值。这些值可以用于创建新的数组、Set、Map 等数据结构也可以作为函数参数传递给其他函数。剩余参数(Rest)可以在用于函数定义中可以在函数参数中捕获所有多余的参数收集到一个新的数组中并且可以像普通数组一样使用数组语法进行处理。或者用于模型解构中可以将没有对应模式变量的实参/索引项收集到一个数组/对象中。字符串的扩展ES6版本引入了许多新的字符串相关功能:模板字面量:使用反单引号()来创建带有变量占位符的字符串可以更方便地进行字符串拼接。多行字符串:允许在代码中使用多行字符串而不需要使用转义字符或字符串连接符。字符串插值:在模板字面量中使用${}语法将变量的值嵌入到字符串中。字符串拓展方法:字符串添加了许多新的方法例如startsWith、endsWith、includes等使得字符串操作更加方便和易读。Unicode支持:允许在字符串中使用Unicode字符包括表情符号和其他特殊字符。数组的扩展ES6及更高版本对数组进行了许多扩展新增多个数组方法主要包括创建转化Array.of、Array.from迭代遍历entries、keys、values查询与判断find、findIndex、includes结构操作toSpliced、toSorted、toReversed 等。函数的扩展ES6新增箭头函数允许使用定义函数。箭头函数快速地创建匿名函数可以用来以更精简地语法创建较小地回调函数。箭头函数没有自己的this内部的this就是外层代码块的this因此其指向会固定化就是定义时所在对象而不是使用时所在的对象。ES6允许为函数参数设置默认值。ES6引入剩余参数…用于获取函数的剩余参数并放入一个数组中ES6函数的name属性返回函数的函数名对象的扩展ES6 及后续版本中 JavaScript 对象的增强特性主要涵盖以下三个核心方面对象字面量增强属性简写当属性名与变量名相同时可省略键名和冒号方法简写定义方法时可省略function关键字动态属性名使用方括号[]包裹变量、表达式或 Symbol 来定义动态属性名支持运行时计算属性名。对象静态方法扩展ES6 新增了一系列实用的 Object 静态方法简化了对象操作键值对获取与转换Object.values()返回对象自身可枚举属性值的数组Object.entries()返回对象自身可枚举属性的键值对的二维数组Object.fromEntries()将键值对列表数组、Map 等转换为对象Object.entries()的逆操作对象操作与合并Object.assign()将一个或多个源对象的所有可枚举属性复制到目标对象Object.groupBy()根据回调函数返回值对可迭代对象的元素分组值比较Object.is()比较两个值是否严格相等处理了 NaN 和 0 、 -0 的两个特殊情况Promise的扩展Promise 是对一次异步调用的引用将可能在某处解决resolve或者失败 reject 。Promise是一个容器通常保存着一个异步操作的结果。Promise 支持链式调用允许你通过一组函数传递数据。Promise是异步编程的一种解决方案有了它就可以避免层层嵌套的回调函数。多个 Promise 能够更好地被组合在一起执行。promise 有三种状态进行中pending、解决resolve 或者 失败 reject 。在 promise 没有返回 resolved 或者 rejected 时是 pending 状态。ES6新增多个Promise方法Promise.all、Promise.race、Promise.any类的扩展ES6引入了Class类的概念使用Class关键字可定义类。实质上是 使用自定义原型创建对象的语法糖对语言的功能并没有影响但是更方便程序员使用有着比之前的构造函数更好的语法让程序更加简洁有更高的可读性。类的所有方法都是定义在类的prototype属性上面。类在语法上更加贴合面向对象的写法定义类的方法时前面不需要加function方法之间也不需要逗号。类可以继承自其他类实现继承更加易读、易理解对初学者更加友好。模块的扩展ES6 在语言标准的层面上实现了模块功能而且实现得相当简单旨在成为浏览器和服务器通用的模块解决方案每一个模块都有自己单独的作用域模块之间的相互调用是由导出命令export用于规定模块的对外接口导入命令import用于输入其他模块提供的功能同时还提供默认导出命令export default为模块指定默认输出对外接口。SymbolES6引入了一种新的原始数据类型Symbol表示独一无二的值用来定义独一无二的对象属性名是es语言的第七种数据类型。Symbol通过Symbol函数生成可接受一个字符串作为参数该字符串只是作为对当前Symbol值的描述因此相同参数的Symbol函数的返回值并不相等。Symbol主要作为对象属性名以保证不会出现同名的属性定义时需要放在方括号之中。Symbol作为属性名不会出现在for…in循环中也不会被keys、getOwnpropertyNames()等方法返回。通过Object.getOwnPropertySymbols()可获取对象的所有Symbol值。Set和Map数据结构ES6中新增Set与Map数据结构。ES6 中数据结构 Set类似于数组但是成员的值都是唯一的没有重复的值。Set本身是一个构造函数用来生成Set数据结构。Map提供了“值—值”的对应是一种更完善的Hash结构实现。ES6 提供了多个Set实例方法成员操作add、delete、clear成员遍历 keys、values、entries、forEach查找成员hasJS 知识题问题答案几种遍历方式比较for of 循环不仅支持数组、大多数伪数组对象也支持字符串遍历此外还支持 Map 和 Set 对象遍历。for in循环可以遍历字符串、对象、数组不能遍历Set/Map。forEach 循环不能遍历字符串、对象,可以遍历Set/MapMap实例对象的成员数sizeconst定义一个Object对象不能再对Object对象属性进行修改const变量指向的内存地址保存的只是一个指向实际数据的指针const只能保证这个指针固定对象或数组属性是可变的。 可以修改Object对象属性类的继承使用的关键字是extend不是继承的关键字是extends如果类的constructor构造方法有多个后者会覆盖前者同一个类的constructor构造方法只能有一个否则程序会报错。Map结构的键名可以是数组、Symbol、null、undefined正确undefined也可以做为Map结构的键名。数组的find 方法可以用与数组的遍历find方法用于找出数组中符合条件的第一个元素并不是用于遍历数组。严格模式(use strict)是在ES6中新增的use strict 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。这样可以新建一个 Symbol let s new Symbol(‘s’)错误Symbol不能使用new定义ES6一共有6中声明变量的方法var, function, let, const, import, class解构赋值可以解构原型链上的成员例如字符串/数组的长度函数方法的名字等