美文网首页
ES5/ES3对比,重新思考ES5带来的提升

ES5/ES3对比,重新思考ES5带来的提升

作者: 898310778 | 来源:发表于2018-05-29 17:57 被阅读0次
5932872-a1a30697bc4ce325.png

getter/setter 存取器

es5:

var o = {a:1, b:2, get c() {return this.a + this.b}, set c(val) {this.a = val - this.b}};
console.log(o.c);  //3
o.c = 6;
console.log(o.a);  //4

es3:

var o = {a: 1, b: 2, getc: function() {return this.a +  this.b}, setc: function(val) {this.a = val - this.b}};
console.log(o.getc());  //3
o.setc(6);
console.log(o.a);  //4

可以看到使用了getter/setter后虚拟属性c用起来更加自然,与普通属性达到了相同的使用形式。同时,如果要对现有属性在存/取时每次都添加逻辑,可以把数据属性改写成存取器属性,这样既不用改写现有业务代码,同时也达到了代码复用以及保证添加了的逻辑没有遗漏。

对象/数组末尾的逗号

es5:

var a = {
  x:2,
  y:3,
}, b = [1,2,3,]

es3:

var a = {
  x:2,
  y:3
}, b = [1,2,3]

对象/数组末尾可选的逗号使复制剪切粘贴时更加的方便

数组迭代方法

es5:

var arr = [2,6,34,9,65,4,7];
var arr2 = arr.filter(function(val) {return val > 10});
console.log(arr2);  //[34, 65]

es3:

var arr = [2,6,34,9,65,4,7];
var arr2 = [];
for (var i in arr) {
  if (arr[i] > 10)
    arr2.push(arr[i]);
}
console.log(arr2);  //[34, 65]

数组的迭代方法让我们做一些数组操作的代码变得极为简洁,极大的提高了可读性和可维护性。其它的迭代方法还有indexOf, lastIndexOf, forEach, every, some, map, reduce和reduceRight。

String.prototype.trim()

es5:

console.log('  123  456  '.trim());  //'123  456'

es3:

console.log('  123  456  '.replace(/(^\s+)|(\s+$)/g, ''));  //'123  456'

再也不用用正则表达式去空格了,在表单验证中很有用。

Date.now()

es5:

console.log(Date.now());  //1494091196365

es3:

console.log(new Date().getTime());  //1494091196365

获取当前时间毫秒数不再需要先创建对象了,由此带来开发效率与运行效率的双重提升。

相关文章

  • ES5/ES3对比,重新思考ES5带来的提升

    getter/setter 存取器 es5: es3: 可以看到使用了getter/setter后虚拟属性c用起来...

  • 引用丨Array类型

    2、Array类型   数组基本概念   ES3   ES5    

  • 一些优质博客

    this到底是什么 let声明会提升吗 好用的图床 js原型链是什么 ES3,ES5,ES6是什么

  • ECMAScript 6.0 默认参数

    如果默认参数特别多时ES6可以大大提升我们的编写效率 ES3 / ES5 默认参数 ES6 默认参数

  • JavaScript--ES5和ES6(上)

    一、概述 es表示ECMASCript ,他是从es3,es5,es6,es5是2009.12月发布的,es6是2...

  • 深入理解数组内置方法

    数组的方法大概分es3、es5、es6版本了,各个版本都有一些新的定义。鉴于es5 已经成为当前主流标准,所以不区...

  • ios 转h5 的需要掌握的知识

    ios 学 h5 入门 工具(web storm,sublime text3) 学习 js es5语法,es3,慕...

  • 8、变量提升的处理机制(3)

    1、当前阶段浏览器对JS变量提升的处理: 向前兼容ES3/ES5规范:(1)判断体和函数体等不存在块级上下文,上下...

  • 几道小题

    1、es3/es5、es6中 this 的指向 >> 2、块儿级作用域 >> 3、对数组的map、filter、r...

  • JS

    1.JS的作用 2.ECMAScript(标准、核心部分) ES3 ES5 ES6 ES7 3.JavaScrip...

网友评论

      本文标题:ES5/ES3对比,重新思考ES5带来的提升

      本文链接:https://www.haomeiwen.com/subject/olvajftx.html