es6实例汇编.ppt

* ES6 ECMAScript 6 * 箭头操作符 如果你会C#或者Java，你肯定知道lambda表达式，ES6中新增的箭头操作符=便有异曲同工之妙。它简化了函数的书写。操作符左边为输入的参数，而右边则是进行的操作以及返回的值Inputs=outputs。 我们知道在JS中回调是经常的事，而一般回调又以匿名函数的形式出现，每次都需要写一个function，甚是繁琐。当引入箭头操作符后可以方便地写回调了。请看下面的例子 var array = [1, 2, 3];//申明一个数组 //传统写法 回调方法 array.forEach(function(v, i, a) { console.log(v); }); //ES6 回调方法 =相当于function(v,i,a){} array.forEach(v = console.log(v)); * 类的支持 ES6中添加了对类的支持，引入了class关键字（其实class在JavaScript中一直是保留字，目的就是考虑到可能在以后的新版本中会用到，现在终于派上用场了）。JS本身就是面向对象的，ES6中提供的类实际上只是JS原型模式的包装。现在提供原生的class支持后，对象的创建，继承更加直观了，并且父类方法的调用，实例化，静态方法和构造函数等概念都更加形象化 //类的定义 class Animal { //ES6中新型构造器 constructor(name) { this.name = name; } //实例方法 sayName() { console.log(My name is +this.name); } } //类的继承 class Programmer extends Animal { constructor(name) { //直接调用父类构造器进行初始化 super(name); } program() { console.log(Im coding...); } } //测试我们的类 var animal=new Animal(dummy), wayou=new Programmer(wayou); animal.sayName();//输出 ‘My name is dummy’ wayou.sayName();//输出 ‘My name is wayou’ wayou.program();//输出 ‘Im coding...’ * 增强的对象字面量 对象字面量被增强了，写法更加简洁与灵活，同时在定义对象的时候能够做的事情更多了。具体表现在： 可以在对象字面量里面定义原型 定义方法可以不用function关键字 直接调用父类方法 这样一来，对象字面量与前面提到的类概念更加吻合，在编写面向对象的JavaScript时更加轻松方便了 //通过对象字面量创建对象 相当于类 var human = { breathe() { console.log(breathing...); } }; var worker = { __proto__: human, //设置此对象的原型为human,相当于继承human company: freelancer, work() { console.log(working...); } }; human.breathe();//输出 ‘breathing...’ //调用继承来的breathe方法 worker.breathe();//输出 ‘breathing...’ * 字符串模板 字符串模板相对简单易懂些。ES6中允许使用反引号 ` 来创建字符串，此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${vraible}。如果你使用过像C#等后端强类型语言的话，对此功能应该不会陌生 //产生一个随机数 var num=Math.random(); //将这个数字输出到console console.log(`your num is ${num}`); javascript字符串用tostring * 解构 自动解析数组或对象中的值。比如若一个函数要返回多个值，常规的做法是返回一个对象，将每个值做为这个对象的属性返回。但在ES6中，利用解构这一特性，可以直接返回一个数组，然后数组中的值会自动被解析到对应接收该值的变量中 var [x,y]=getVal(),//函数返回值的解构 [name,,age]=[wayou,male,secrect];//数组解构 长度