《编程基础教程改变你代码习惯的ecmascript》由会员分享,可在线阅读,更多相关《编程基础教程改变你代码习惯的ecmascript(6页珍藏版)》请在金锄头文库上搜索。
1、 http:/ 编程基础教程 改变你代码习惯的ECMAScriptECMAScript和Javascript的关系1996年11月,Javascript的创造者-Netscape公司,决定将Javascript提交给国际标准化组织ECMA,希望这种语言能够成为国际标准。次年ECMA发布262号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言叫做ECMAScript。 ECMAScript并不是Javascript的唯一,也不是唯一被标准化的部分。 ECMAScript是Javascript的规格,它描述了语法,类型,语句,关键词,保留字,运算符,对象等,而Java
2、script是ECMA的一种实现,同时一个完整的Javascript实现由三部分组成:ECMAScript,DOM,BOM。ECMAScript简史1997年,ECMAScript 1.0发布 1998年6月,ECMAScript 2.0发布 1999年13月,ECMAScript 3.0发布,并取得了巨大的成功,奠定了JS的基本语法,直到现在,初学者一开始学习的都是ES3。 2000年,ECMAScript 4.0开始酝酿。 2007年10月,ES4草案发布。 2008年7月,因为其过于激进,对ES3做了彻底的升级,ECMA开会决定终止4.0的开发。 2009年12月,ES5.0发布 201
3、1年6月,ES5.1发布 2013年3月,ES6草案冻结,不再增添新功能,新的功能被加入ES7。 2013年12月,ES6草案发布,进行为期12个月的讨论期 2015年6月,ES6正式通过,成为国际标准,因为其继承了ES4的大部分内容,所以从2000年算起经历了15年。 1,转码器:babel和Traceur 2,let,const命令和block作用域ES6新增了,let命令,用法类似var,但是所声明的变量只在let命令所在的代码块中有效,if(true) var a = 10; let b = 9; 1,let不存在变量提升:不会像var一样存在变量赋值先执行,所以let声明变量一定要在
4、使用前就进行声明。2,暂时性死区:只要块级作用域内存在let命令,它所声明的变量就“绑定”在了这个区域不再受外部影响。ES6明确规定,如果块级作用域中存在let和const命令,则这个区块对这些命令声明的变量从一开始就形成封闭作用域。只要声明之前使用这些变量,就会报错。 3,不允许重复声明,let不允许在相同作用域内重复声明同一个变量。 ES5只有全局作用域和函数作用域,没有块级作用域,所以就带来了很多不合理的场景。1,内层变量可能会覆盖外层变量2,用来计数的循环变量泄露为全局变量。 let为Javascript新增了块级作用域。ES6允许块级作用域任意嵌套: function test()
5、let a =1; 上面的代码用了一个五层的块级作用域,每个外层的作用域无法读取内层作用域的内容。 用let定义的作用域是定义他们的区块内,以及包含在这个块中的子块,这点有点像var,但是var定义的变量的作用域是定义他们的函数内。 const用来声明常量。一旦声明,其值就无法进行改变,这就意味着const一旦声明常量,就必须立即初始化,不可留到以后赋值。 const和let相同,只在声明所在的块级作用域内有效,并且声明的常量不提升,存在暂时性死区,只能在声明后使用,不能重复声明变量。3,解构赋值ES6允许按照一定的模式,从数组和对象中提取值,再对变量进行赋值,这被称为解构。数组结构:demo
6、 对于set结构,也可以使用数组的解构赋值。事实上,只要某种数据结构具有Iterator接口,都可以采用数组形式的结构赋值。 let x, y, z = new set(“a”,”b”,”c”) 对象的解构需要注意,数组结构是按照次序排列的,变量的取值由他的位置决定,而对象的取值没有次序,变量必须与属性同名,才能取到相应的值。var Oa = Oa: 1, Ob: 2 如果变量名与属性名不一致。必须写成 var Oa: a = Oa: 1, Ob: 2 ,这时的Oa是模式,不是变量。对象解构的内部机制,是先找到同名的属性,然后再赋值给相对应的变量。 对象解构也可以指定默认值,但是条件是,对象属
7、性严格等于undefined。 4,字符串ES6为字符串添加了遍历接口。使字符串可以用for.of循环遍历。at():返回字符串给定位置的字符。 一般情况下我们可以使用indexOf来确定一个字符串是否包含在另一个字符串内。es6又为我们提供了三种新方法。includes():返回布尔值,是否找到参数字符串。 startsWith():返回布尔值,参数字符串是否在源字符串头部。 endsWith():返回布尔值,参数字符串是否在源字符串尾部。repeat(n):返回一个新字符串,并将源字符串重复n次。 padStart(minlength,String):从头补齐字符串 padEnd(minl
8、ength,String):从尾补齐字符串 模板字符串:模板字符串是增强型的字符串,用反引号()来进行标识,他可以当作普通字符串来使用,也可以定义多行字符串,或者在字符串中嵌入变量, 在模板字符串中使用多行字符串,所有的空格和缩进都会保留在输出中。 在模板字符串中嵌入变量,需要将变量名写在$ 中。 同时大括号内可以放任意的javascript表达式,可以进行运算以及引用对象的属性。 5,数组扩展 Array.from():将两类对象转为真正的数组,将类似数组的对象和可遍历(iterable)的对象,包括(ES6新增的数组结构set和map)Array.of():将一组值转化为数组,为了弥补Ar
9、ray()数组构造函数的不足而存在,Array()会因参数的不同而导致其行为有差异。例如Array()得到而Array(3)得到 , , ,Array(3,4,5)得到3,4,5 copyWithin:将当前数组的指定位置的成员复制到其他位置(覆盖),然后返回数组。三个参数target(从该位置开始替换),start(从该位置开始读取,默认为0),end(到该位置前停止,默认为数组长度)find(),findIndex(),fill(),includes(),entries(),keys(),values() 6,函数扩展 在ES6之前,不能为函数参数设定默认值,只能采用变通的方法。ES6允许
10、我们使用箭头“=”定义函数。var f = v = v; 如果函数不需要参数或者需要多个参数,就可以使用圆括号代表参数部分。var f = () = 5; var f = (x,y) = x+y; 利用箭头函数可以简化回掉函数1,2,3.map( x = x*x )箭头注意: 1,函数体的this对象的指向就是定义时所在的对象,而不是使用时候所在的对象。 2,不可当作构造函数,不可以使用new命令; 3,不可以使用arguments对象,该对象在函数体内不存在。如果要用,用rest参数代替。 4,不可以使用yield命令。不能作为Generator函数。 7,对象扩展 ES6允许直接写入变量和
11、函数作为对象的属性和方法。Object.is()用来比较两个值是否严格相等。和=的行为基本一致。Object.assign()用来将源对象的所有的可枚举属性复制到目标对象。它至少需要两个对象作为参数,第一个参数是目标对象,后面的的参数都是源对象。 8,Symbol ES5的对象的属性都是字符串。其实这容易导致属性名的冲突,如果你使用了一个别人提供给你的对象。但是又想为这个对象添加新的方法,新的方法的名字就有可能与现有的方法产生冲突。于是,ES6引入两人一种新的数据类型Symbol,表示独一无二的值。 它是Javascript语言的第七种数据类型,之前的六种是Undefined,Null,Boo
12、lean,String,Number,Object。Symbol值通过Symbol函数来生成,现在,对象的属性名可以有两种类型:一种是原来就有的字符串,另一种就是新增的Symbol。只要属性名是Symbol类型,就是独一无二的。 let s = Symbol(); Symbol函数不能使用new命令,因为Symbol是和对象一样的原始类型的值,他不是对象,所以他也不能添加属性。基本上来说,他就是一种类似于字符串的数据类型。Symbol()可以接受一个字符串作为参数,表示对Symbol实例的描述。主要是为了在控制台显示或者转化为字符串时候比较容易区分。 9,Set和weakSet ES6提供了一
13、种新的数据结构Set。它类似数组,但是成员的值都是唯一的,没有重复的值。Set本身是一个构造函数,用来生成数据结构。 var s = new Set();属性和方法Set.prototype.constructor:构造函数,默认为Set本身 Set.prototype.size:返回Set实例的成员总数add(value):添加某个值,返回Set本身 has(value):返回一个布尔值,表示参数是否为Set的成员delete(value):删除某个值,返回一个布尔值,表示是否删除成功 clear():清除所有成员,无返回值keys()返回一个键名的遍历器,values()返回一个键值的遍历
14、器,entries()返回一个键值对的遍历器,forEach()使用回掉函数遍历每个成员。 WeakSet结构与Set类似,它与Set有两个区别。 1,成员只能是对象,不能是其他类型的值。 2,WeakSet中的对象都是弱引用。 10,Map和weakMapJS的Object本质上是键值对的集合,但是它只能以字符串为键,这给它的实验带来了很大的限制。”字符串:值“为了解决这个问题ES6提供了Map数据结构,它类似对象,也是键值对的集合,但是“键“的范围不限于字符串,各种类型的值包括对象都可以当作它的键。 ”值:值“属性和方法size属性:返回Map结构的成员总数set(key,value):设
15、置key对应的键值,然后返回整个Map。如果key已经有值,会被更新。get(key):获取key对应的键值,如果找不到key,返回undefinedhas(key):返回布尔值,表示某个键是否在Map数据结构中。delete(key):删除某个键,返回布尔值表示成功与否keys()返回一个键名的遍历器,values()返回一个键值的遍历器,entries()返回一个键值对的遍历器,forEach()使用回掉函数遍历每个成员。Map和数组可以互相转换,Map和对象可以互相转换,Map和JSON可以互相转换。 WeakMap结构与Map结构类似,唯一的区别就是它只接受对象作为键名。 当然ES6的新特性还不只这些,还包括了:正则扩展,数值扩展,pr