ES6新特性浅析

时间:2022-01-09 19:12:15
首先先了解ES6的新特性有哪些
  • let 块级作用域,可以解决es5中需要闭包或闭包引起的问题
const 常量变量 就是当我们引用第三方库的时声明的变量,用const来声明可以避免未来不小心重命名而导致出现bug
  • class ,extends,super
和es5中原型,原型链,继承,来对比学习
  • 首先,在ES5中,继承使用原型链,或构造函数来实现,最常见的是,使用构造函数来实现对象属性的继承,用法是在子类函数中写上 父类.call/apply(this,anguments/array);
使用原型链实现对象方法的继承,在最外面写上 , 子类.prototype = new 父类 所有实例对象需要共享的属性和方法存在prototype对象中 不需要共享 的属性和方法,放在构造函数中
  • 在es6中使用class来实现继承,浅显易懂。
class Animal { constructor(){ this.type = 'animal' } says(say){ console.log(this.type + ' says ' + say) } }
let animal = new Animal() animal.says('hello') //animal says hello
class Cat extends Animal { constructor(){ super() this.type = 'cat' } }
let cat = new Cat() cat.says('hello') //cat says hello 类比es5,es5叫构造函数,es6叫类,首先,属性还是写在构造函数里,方法写在构造函数外,(不是prototype对象了), 继承时,extends继承父类的属性,方法,里面还是要写constructor,至于super(),是子类没有自己的this对象,而是需要继承父类的this对象 ES6的继承机制,实质是先创造父类的实例对象this(所以必须先调用super方法),然后再用子类的构造函数修改this。
  • function 简写
es5中 function(i){ return i+1; } es6中 (i) => i+1; 当我们使用箭头函数时,函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。 并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,它的this是继承外面的,因此内部的this就是外层代码块的this。
  • 模块字符串
用于输出大量的html内容 $("#result").append(` There are <b>${basket.count}</b> items in your basket, <em>${basket.onSale}</em> are on sale!`); 用反引号(`)来标识起始,用${}来引用变量,而且所有的空格和缩进都会被保留在输出之中,
  • 解构赋值
简单来说就是模式匹配,只要等号两边的模式相同,左边的变量就会被赋予对应的值。 简化了很多操作,在数组,对象,字符串,数值,布尔值,函数参数上都可以适用。 (1)交换变量的值 (2)从函数返回多个值 函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。有了解构赋值,取出这些值就非常方便。 (3)函数参数的定义 解构赋值可以方便地将一组参数与变量名对应起来。 (4)提取JSON数据 (5)函数参数的默认值 (6)遍历Map结构 (7)输入模块的指定方法 其实阮一峰大神已经讲得很详细了,大家可以参考。http://es6.ruanyifeng.com/#docs/destructuring
  • Set与Map
Set与Map都是一种数据结构,其中Set是类似于数组,特性是成员唯一,无重复值 Map类似于对象,提供了“值—值”的对应,是一种更完善的 Hash 结构实现 在数组去重中,set有独特的方法 function quchong(arr){ return Array.from(new Set(arr)); } 基本常用的就是这些吧,对于promise这个也很重要的异步处理来说,就等我研究清楚再说吧。

以上参考 阮一峰的 《ECMAScript 6 入门http://es6.ruanyifeng.com