首页 > 代码库 > 前后端差异更小了——浅谈ES(ECMAScript)6
前后端差异更小了——浅谈ES(ECMAScript)6
2015年6月，ES6正式发布。至今一年多的时间内，各个浏览器也对支持ES6做出了很大的改善，所以同学们无需顾忌你写代码的浏览器不认识~
这么久的东西一定早有大神剖析过，今天我们以一个后端菜鸟的视角重新解读下ES6加入的新语法。
首先很开心，ES6对class（类）的支持上升到了一个新高度，允许构造和继承，新语法看上来是这样的：
//继承
class parent {
constructor(par) {
this.Name = par;
console.log(‘[父类的构造方法 ‘ + this.Name + ‘]‘);
}
sayHello() {
console.log(‘父类的sayHello方法 Hello ‘ + this.Name);
}
}
class child extends parent {
constructor(name) {
super(‘[子类调用父类的构造 ‘ + name + ‘]‘);
}
sayGoodBye() {
console.log(‘子类的sayGoobBue方法 GoodBye ‘ + this.Name);
}
}
//调用
var a = new parent(‘Es6‘);
a.sayHello();
var b = new child(‘Max‘);
b.sayHello();
b.sayGoodByr();
有没有被惊艳到？（可这的确是个Js文件），运行后的效果是这样的：
和后端一样，子类继承父类需要使用关键字extends，继承后，可以使用关键字super调用父类属性。
并且我发现此处的this在被继承后也被子类一并带入，也就是说：this的作用域将会被向下传递。（请参照运行结果最后一行。）
上面是class（类）的继承，有了继承，我们在构建Js代码时，就会获得更强大的能力（可扩展、易维护、易阅读等）。
可能有些同学会说了：我根本不习惯这样写，感觉都不像Js了啊喂！
没关系，ES6怎么会忘记我们的对象字面量呢？继承当然也会出现在对象字面量的应用中：
var Es6Parent = {
cons(mess) {
console.log(‘原型Es6Parent的cons方法‘ + mess);
}
}
var Es6Child = {
//设置原型为 Es6Parent ,相当于继承
__proto__: Es6Parent,
work() {
console.log(‘下层Es6Child的work方法 I\‘m very busy!‘);
}
}
//调用
Es6Parent.cons(‘原型cons方法‘);
Es6Child.cons(‘下级调用上层原型的方法‘);
Es6Child.work();
运行结果如下：
设置的方式也超简单：使用关键字‘__proto__‘设置原型即可（只不过是给原型链换了种叫法而已嘛）
下面介绍一些简单实用的语法糖，首先是方便的参数设置：
var Name = ‘Max‘;
console.log(`我是很方便带参数的的波浪符${Name}`);
重点是${}，它可以直接在字符串中带入参数（拼接方便很多有木有），但是需要和波浪符（`）搭配使用才有效哦~
接下来是...语法，当它出现在形参列表内，代表不定量参数：
function show(...all) {
all.forEach(function (i, v) {
console.log(`不定量参数的值:${v}`);
}, all);
}
//调用
show(1,2,3,4,5,6);
运行结果如下：
定义的时候是不是省力很多呢？还有更好用的，当...出现在实参列表内，它将允许直接传入数组（而不是使用apply）：
function sayHi(name, age, sex) {
console.log(`大家好，我是${name}，今年${age}岁，我是${sex}生。`);
}
//调用
var arr = [‘小明‘, 18, ‘男‘];
sayHi(...arr);
运行结果如下：
定义sayHi函数时，写了3个参数，调用时使用...传入数组时，它将从0下标开始依次顺序匹配参数。
我们在工作中，经常使用回调函数来完成某些操作，但是每次回调都要写个完整的funciton（好麻烦的说），ES6引入了lambda表达式，大大优化了这一操作：
function callBack(back) {
back();
}
//两种调用方式对比
callBack(function () {
console.log(‘我是旧的调用方式‘);
});
callBack(()=>console.log(‘我是lambda调用方式‘));
运行结果如下：
使用了lambda以后的函数传入方式是不是更优雅呢？如果比较萌比，那就再来一个对象字面量版本的：
var show_msg = (name, job) => {
console.log(`大家好，我叫${name}，是一名${job}`)
};
//调用
show_msg(‘暮城‘,‘软件攻城狮‘);
运行结果如下：
现在大家应该已经很清楚了：()=>语法呢，=>前面是参数列表，后面是方法体。以后看到类似的语法可别晕~
语法糖还有很多，我先说这么多，因为下面要说更重要的：新数据类型和监听的实现。
Es6新增了map，set，以及weakMap、weakSet四种类型。
它们都有什么差异呢？先说说map：map以key-value的方式存储，并且在map内所有的键都是唯一的，来看被for in 遍历后的结果：
var par1 = ‘key_1‘;
var par2 = ‘key_2‘;
var testMap = new Map();
testMap.set(par1, ‘第一个值‘);
testMap.set(par2, ‘第二个值‘);
testMap.set(par1, ‘第三个值‘);
for(i of testMap) {
console.log(i);
}
可以看到第三个值将第一个值顶替掉而不是共存，原因就是第一个值和第三个值键相同。
set和map的差别就在于，它是以value的方式存储，而且同样不允许重复值出现：
var par11 = ‘value_1‘;
var par22 = ‘value_2‘;
var testSet = new Set();
testSet.add(par11);
testSet.add(par22);
testSet.add(par11);
for(i of testSet) {
console.log(i);
}
至于WeakMap和WeakSet，使用方式都一样，只是这两种类型的键都采用了弱引用，即：作为属性键的对象如果没有其他地方引用时自动回收（自动释放）。
此处就不多做解释，不过我推荐大家使用WeakMap和WeakSet。
现在，我们终于说到了监听器（监听器可是重头戏）
监听器是很有意思的东西，它给予了我们极大的便利，这一点在实现MVVM模型的操作时尤为重要，ES6中的监听看上去大概是这样的：
//被监听的对象
var ob = { name: ‘Max‘, like: ‘women‘ };
//触发监听时的程序
var pro = {
set: function (cagObj, cagKey, cagValue) {
console.log(`${cagObj[cagKey]}变为了${cagValue}`);
cagObj[cagKey] = cagValue;
}
}
ob = new Proxy(ob, pro);
ob.like = ‘man‘;
set内定义的function将会在监听对象发生改变时自动触发，参数列表内的3个值也是默认定义的，它们依次是：被修改的对象、该对象的键、该对象的值。
需要注意的是如果你为某元素设定的监听器触发后，它原本的修改进程会被阻止（如果你不进行这一步的话），所以需要我们显式的去修改才可。
运行效果如下：
拥有了这些特性，我们自己想写一个类似于VUE的数据框架也变得简单了许多。
另外，ES6还更新了很多命名空间下的函数（如：math），这里就不一一罗列（写不完并且网上大把）。
最后，ES6的推出让我直观感觉到前后端差距进一步缩小，希望有一天Js可以不借助后端完成数据交互~（不要吐槽我学的晚）
前后端差异更小了——浅谈ES(ECMAScript)6