ECMAScript 6
丹哥不是哥
热爱生活,努力发光
展开
-
ECMAScript 6(ES6) 特性概览和与ES5的比较2-let
二.作用域-let1.块变量2.块函数1.块变量let 块范围的变量(和常量)没有提升。(ES6中 let和const关键字定义的变量和常量不会被提升)。ECMAScript 6for (let i=0;i<a.length;i++) { let x = a[i]; ...}for (let i=0;i<b.length;i++) { let y = b[...翻译 2018-11-07 17:44:16 · 124 阅读 · 0 评论 -
ECMAScript 6(ES6) 特性概览和与ES5的比较8-增强对象的属性
八.增强对象的属性1.属性的简略表达2.计算属性名3.方法属性1.属性的简略表达常用对象属性的更短的定义方式ECMAScript 6var x = 0,y = 0obj = { x,y }ECMAScript 5var x = 0,y = 0;obj = { x: x, y: y};2.计算属性名支持在对象属性中直接定义计算属性名ECMAScript 6let obj ...翻译 2018-11-08 19:52:08 · 149 阅读 · 0 评论 -
ECMAScript 6(ES6) 特性概览和与ES5的比较9-解构分配
九.解构分配1.数组匹配2.对象匹配的简写表达3.对象匹配,深匹配4.对象和数组匹配,默认值5.参数上下文匹配6.软解构1.数组匹配在解构中,将数组直观且灵活地解构为单个变量。ECMAScript 6var list= [ 1, 2, 3]var [ a, , b ] = list//解构赋值[ b, a ] = [ a, b ] //a b互换值ECMAScript 5var ...翻译 2018-11-08 20:00:40 · 196 阅读 · 0 评论 -
ECMAScript 6(ES6) 特性概览和与ES5的比较10-模块化
十.模块化1.输入/输出值2.默认值和通配符(wildcard 野卡片=通配符O(∩_∩)O)1.输入/输出值支持从模块导出或者导入值,而不会导致全局命名空间污染。ECMAScript 6// lib/math.jsexport function sum (x, y) { return x + y }export var pi = 3.141593// someApp.jsimp...翻译 2018-11-08 20:42:47 · 170 阅读 · 0 评论 -
ECMAScript 6(ES6) 特性概览和与ES5的比较15-新增数据结构Map,Set,WeakMap和WeakSet
十五.新增数据结构Map,Set,WeakMap和WeakSet1.Set数据结构2.Map数据结构3.弱连接数据结构1.Set数据结构基于集合的更清晰的通用算法的数据结构set是不重复的集合ECMAScript 6let s = new Set()s.add("hello").add("goodbye").add("hello")s.size === 2s.has("hello"...翻译 2018-11-14 16:26:11 · 334 阅读 · 0 评论 -
ECMAScript 6(ES6) 特性概览和与ES5的比较16-Typed Array
十六.Typed ArrayTyped ArrayTyped Array支持基于任意字节的数据结构,以实现网络协议,加密算法,文件格式操作等。ECMAScript 6//ES6类相当于一下C结构//例如:struct Example { unsigned long id; char username[16]; float amountDue }class Example { c...翻译 2018-11-14 16:28:42 · 167 阅读 · 0 评论 -
ECMAScript 6(ES6) 特性概览和与ES5的比较17-数组和字符串的新内置方法
十七.数组和字符串的新内置方法1.对象属性赋值2.数组元素查找3.字符串重复4.字符串搜索1.对象属性赋值用于将一个或多个源对象的可枚举属性分配到目标对象的新函数。Object.assign() 对象合并函数,重复的会被右边的替换ECMAScript 6var dest = { quxx: 0 }var src1 = { foo: 1, bar: 2 }var src2 = { fo...翻译 2018-11-14 16:29:41 · 138 阅读 · 0 评论 -
ECMAScript 6(ES6) 特性概览和与ES5的比较18-数字的新内置方法
十八.数字的新内置方法1.数字类型检查2.数字安全检查3.数字比较4.数字截断5.数字符号确定1.数字类型检查用于检查非数字和有限数字的新函数。Number.isNaN()Number.isFinite()ECMAScript 6Number.isNaN(42) === falseNumber.isNaN(NaN) === trueNumber.isFinite(Infinity...翻译 2018-11-14 16:30:51 · 167 阅读 · 0 评论 -
ES6环境搭建---nvm管理下的nodejs安装和使用
安装nvm下的node环境1. windows 下 nvm的安装(若之前安装过NodeJS,请先卸载)nvm下载地址:https://github.com/coreybutler/nvm-windows/releases下载nvm-setup.zip到本地,打开并运行nvm-stup.exe文件,安装即可。可以指定到具体的安装文件夹下。命令行工具中运行set | findstr "nvm...原创 2018-12-05 23:14:32 · 153 阅读 · 0 评论 -
ES6环境搭建---ES5与ES6的编译转换
ES6的使用环境有:node 、IE、Chrome等。ES6不能在IE中使用。ES6目前在任何版本任何环境都没有做到百分之百的兼容。查看浏览器对ES6的支持情况:http://kangax.github.io/compat-table/es6/ES6编码环境搭建一、使用Babel工具将ECMAScript6转换为ECMAScript5例如:创建项目文件夹目录结构为test ...原创 2018-12-05 23:15:39 · 456 阅读 · 0 评论 -
ECMAScript 6(ES6) 特性概览和与ES5的比较7-增强正则表达式
七.增强正则表达式1. 正则表达式粘性匹配1. 正则表达式粘性匹配在匹配之间保持匹配位置粘滞,这种方式支持对任意长输入字符串的有效解析,即使使用任意数量的不同正则表达式也是如此。(看不懂)ECMAScript 6let parser = (input, match) => { for (let pos = 0, lastPos = input.length; pos < ...翻译 2018-11-08 19:47:13 · 168 阅读 · 0 评论 -
ECMAScript 6(ES6) 特性概览和与ES5的比较6-字符扩展
六.字符扩展1.二进制和八进制Unicode字符串和R正则表达式1.二进制和八进制直接支持安全二进制(binary)和八进制(octal)字符ECMAScript 60b111110111 === 5030o767 === 503ECMAScript 5parseInt("111110111", 2) === 503;parseInt("767", 8) === 503;076...翻译 2018-11-08 19:44:51 · 256 阅读 · 0 评论 -
ECMAScript 6(ES6) 特性概览和与ES5的比较5-文字模板
五.文字模板1.字符串插值2.自定义插值3.原始字符串访问1.字符串插值单行和多行字符串的直观表达式插值。 (注意:不要混淆,模板文字最初在ECMAScript 6语言规范草案中命名为“模板字符串”)ECMAScript 6var customer = { name: "Foo"}var card = { amount: 7, product: "Bar", unitprice: 42}...翻译 2018-11-08 19:34:51 · 154 阅读 · 0 评论 -
ECMAScript 6(ES6) 特性概览和与ES5的比较1-const
一.const常量常量只会使变量本身不可变,而不是其分配的内容,例如:如果内容是对象,这意味着对象本身仍然可以更改。ECMAScript 6const PI = 3.1415926PI&gt;3.0ECMAScript 5//只有在ES5通过对象属性的帮助,并且仅在全局范围内而不是在块范围内Object.definProperty(typeof global === "objec...翻译 2018-11-07 17:48:50 · 202 阅读 · 0 评论 -
ECMAScript 6(ES6) 特性概览和与ES5的比较3-箭头函数
三.箭头函数1.表达体2.声明式函数体3. this1.表达体更具表现力的闭包语法ECMAScript 6odds = evens.map(v => v+1) //返回一个表达式pairs = evens.map(v => ({even: v, odd: v + 1})) //返回一个对象,需要加()nums = evens.map((v, 1) => v + i)/...翻译 2018-11-07 17:54:07 · 342 阅读 · 0 评论 -
ECMAScript 6(ES6) 特性概览和与ES5的比较4-扩展参数处理
四.扩展参数处理1.参数的默认值闲置参数3.参数传递1.参数的默认值简单直观的功能参数默认值ECMAScript 6function f (x, y=7, z=42) { return x + y + z}f(1) === 50ECMAScript 5function f (x, y, z) { if(y === undefined) y = 7; ...翻译 2018-11-07 18:06:17 · 96 阅读 · 0 评论 -
ECMAScript 6(ES6) 特性概览和与ES5的比较11(上)-类
十一.类1.类的定义2.类的继承3.类的表达式继承1.类的定义面向对象风格和无反复套用,更加直观。ECMAScript 6class Shape { constructor (id, x, y) { this.id = id this.move(x, y) } move (x, y) { this.x = x ...翻译 2018-11-13 15:55:36 · 157 阅读 · 0 评论 -
ECMAScript 6(ES6) 特性概览和与ES5的比较11(下)-类
十一.类4.基类访问5.静态成员6.Getter/Setter4.基类访问直观访问基类构造函数和方法。ECMAScript 6class Shape { ... toString () { return `Shape(${this.id})` }}class Rectangle extends Shape { constructor (i...翻译 2018-11-13 15:57:00 · 137 阅读 · 0 评论 -
ECMAScript 6(ES6) 特性概览和与ES5的比较12-符号类型
十二.符号类型1.符号类型2.全局符号1.符号类型唯一且不可变的数据类型,用作对象属性的标识符。符号可以有可选的描述,但仅用于调试目的。ECMAScript 6Symbol("foo") !== Symbol("foo")const foo = Symbol()const bar = Symbol()typeof foo === "symbol"typeof bar === "sy...翻译 2018-11-13 15:58:15 · 138 阅读 · 0 评论 -
ECMAScript 6(ES6) 特性概览和与ES5的比较13-迭代器
迭代器和For-Of 操作支持“可迭代”协议,允许对象自定义其迭代行为。 另外,支持“迭代器”协议来产生值序列(有限或无限)。 并且提供操作符方便迭代可迭代对象的所有值。当使用for…of循环遍历某种数据结构时,该循环会自动去找Iterator接口。(想了解更多,可以去看阮一峰的ES6教程)ECMAScript 6let fibonacci = { [Symbol.iterator]...翻译 2018-11-13 16:00:21 · 117 阅读 · 1 评论 -
ECMAScript 6(ES6) 特性概览和与ES5的比较14(上)-生成器Generators
十四.Generator生成器1.生成器函数,迭代协议2.直接使用生成器函数3.生成器匹配1.生成器函数,迭代协议支持生成器,包含生成器函数的迭代器的特殊情况,其中控制流可以暂停和恢复,以便生成值序列(有限或无限)。ECMAScript 6let fibonacci = { *[Symbol.iterrator]() { let pre = 0, cur = 1 ...翻译 2018-11-13 20:43:55 · 151 阅读 · 0 评论 -
ECMAScript 6(ES6) 特性概览和与ES5的比较14(下)-生成器Generators
十四.Generator生成器4.生成器控制流5.生成器方法4.生成器控制流支持生成器,迭代器的特殊情况,其中控制流可以暂停和恢复,以便支持与“协同例程”结合Promise的异步编程(见下文)。 [注意:通用异步函数通常由可重用的库提供,这里只是为了更好地理解。 在实践中见co或Bluebird的协程。]传统的编程语言,早有异步编程的解决方案(其实是多任务的解决方案)。其中有一种叫做"协程...翻译 2018-11-13 20:45:25 · 131 阅读 · 0 评论 -
ECMAScript 6(ES6) 特性概览和与ES5的比较19-Promises
十九、Promises1.Promise 用法2.Promise 组合1.Promise 用法可以异步的,并在未来提供一个值的一流表现。ECMAScript 6function msgAfterTimeout (msg, who, timeout) { return new Promise((resolve, reject) => { setTimeout((...翻译 2018-12-06 10:38:49 · 144 阅读 · 0 评论