谈谈JavaScript版本演进史及ES3、ES5区别和特性

根据RedMonk发布的2018年初编程语言排行榜显示,JavaScript高居榜首,说明JavaScript的火热程度,其从90年代初诞生到现在经历了几个大的版本迭代:

  • ES3,JavaScript 的第三版,从 1999 年开始
  • ES5,2009 年发布
  • ES6,2015年6月17日,ECMAScript 6发布正式版本,即ECMAScript 2015

作为开发人员,我们需要拥抱变化,掌握并使用新版本,同时也要了解版本之间的差异,评估历史遗留代码是不是需要改进、甚至重构。本文讨论ES5的新特性及ES3和ES5的区别。

1、保留关键字

Javascript 的保留关键字不可以用作变量、标签或者函数名。有些保留关键字是作为 Javascript 以后扩展使用。ES5较ES3新添加了几个保留关键字:
1)class:类,ES6引入
2)const:常量,ES6引入
3)enum:
4)extends:类继承,ES6引入
5)import:模块导入,ES6引入
6)export:模块导出,ES6引入
7)super:调用父类的构造函数,ES6引入

2、浏览器兼容性

参考:https://caniuse.com/#search=ES5说明
在这里插入图片描述
1)ES3,可以认为所有浏览器都支持;
2)ES5,现代浏览器都支持(>=IE9), IE9不支持严格模式。

3、ES5丰富了对象方法、属性处理

1)ES5属性增加getter、setter存储器,看个demo就明白了:

// ES3
var o = (function(){
    var age = 0;
    return {
        get_age:function(){ return age; },
        set_age:function(v){ age = v; }
    }
    })();
console.log(o.get_age());		// 0
o.set_age(12);
console.log(o.get_age());		// 12 

// ES5
var o = (function(){
        var age = 0;
        return {
            get age (){return age;},
            set age (v){ age = v; }
        }
    })();
console.log(o.age);		// 0
o.age =12;
console.log(o.age);		// 12

2)ES5属性增加可读写、可遍历、是否可删除设置,看个案例:

  • Configurable:表示能否通过delete删除属性或者删除后从新定义值,或者能把属性修改为访问器属性,默认true。
  • Enumerable:表示能否通过for-in遍历属性的值,默认为true。
  • Writable:表示能否直接定义属性的值,默认为true。
  • Value:表示属性对应的值,默认值为undefined。
var o5={}
Object.defineProperty(o5,"name",{
	writable:false, 		//可赋值?
	configurable:false, 	//可删除?
	enumerable:true,		//可遍历?
	value:"oes5" 			//当前name属性的具体值
})
console.log(o5.name)		//oes5	

o5.name="321"				
console.log(o5.name)		//writable为false, 赋值失效, name依然为"oes5"

delete o5.name
console.log(o5.name)		//因为configurable为false所以不能删除, name依然为“oes5”

3)Object增加了很多方法

  • Object.defineProperties(obj, propName, descriptorSet) 定义对象属性,上文DEMO已经提及
  • Object.create(protoObj, descriptorSet),对象创建函数,一个很关键的函数,可以解决对象继承问题;
  • Object.getOwnPropertyNames(obj),获取对象自有属性名称
  • Object.getPrototypeOf(obj),获取对象原型对象,=== obj.proto
  • Object.getOwnPropertyDescriptor(obj, propName),获取属性定义描述对象{configurable,enumerable,value,writable}
  • Object.preventExtensions(obj),阻止对象扩展,对象不能增加新属性
  • Object.isExtensible(obj),判断对象是否可扩展
  • Object.seal(obj),密封对象,保护对象属性除值外,其余定义属性都不能修改,也不能新增、删除属性;
  • Object.isSealed(obj):判断对象是否被密封;
  • Object.freeze(obj):对象冻结,对象属性不能修改,包括值;
  • Object.isFrozen(obj):判断对象是否被冻结;
  • Object.keys(obj):获取对象可枚举的自有属性名称,是getOwnPropertyNames(obj)的子集。

4、ES5的函数特性,新增bind方法

参考MDN web docs,The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.
The bind() 创建了一个新function,this执行bind对象,看个DEMO。

var module = {
     x: 42,
     getX: function() {
       return this.x;
     }
   }
var unboundGetX = module.getX;
console.log(unboundGetX()); 	//全局作用域, ->undefiend

var boundGetX = unboundGetX.bind(module);	//bind, this->module
console.log(boundGetX());						//this.x = module.x = 42

ES3中,我们可以通过apply或者call实现bind操作。

5、ES5 数组增加很多方法

2个索引方法:indexOf() 和 lastIndexOf();
5个迭代方法:forEach()、map()、filter()、some()、every();
2个归并方法:reduce()、reduceRight(),具体如下:

  • Array.prototype.indexOf()
    Returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found.
  • Array.prototype.lastIndexOf
    Returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found.
  • Array.prototype.every
    Returns true if every element in this array satisfies the provided testing function.
  • Array.prototype.some
    Returns true if at least one element in this array satisfies the provided testing function.
  • Array.prototype.forEach
    Calls a function for each element in the array.
  • Array.prototype.map
    Creates a new array with the results of calling a provided function on every element in this array.
  • Array.prototype.filter
    Creates a new array with all of the elements of this array for which the provided filtering function returns true.
  • Array.prototype.reduce
    Apply a function against an accumulator and each value of the array (from left-to-right) as to reduce it to a single value.
  • Array.prototype.reduceRight
    Apply a function against an accumulator and each value of the array (from right-to-left) as to reduce it to a single value.
    看个DEMO。
var dataArray = [1, 7, 5, 6, 1, 7, 3];
console.log(dataArray.indexOf(7));          // 1 缺省从0即第一项开始查找
console.log(dataArray.indexOf('7'));        // -1, ===比较,7!=='7'
console.log(dataArray.indexOf(7, 's'));     // 1 格式不正确, 从第一项开始查找
console.log(dataArray.indexOf(7, 2));       // 5 从第三个项开始查找

console.log(dataArray.lastIndexOf (7));     // 5 缺省从末尾第一项开始查找
console.log(dataArray.lastIndexOf (7, 's'));// -1 格式不正确, 从第一项开始查找
console.log(dataArray.lastIndexOf (7, 2));  // 1 从末尾第三项往前查找

// 数组每个元素是否>1
var every_rst = dataArray.every(function(ele) {
	return ele > 1;
})
console.log("every_rst: ", every_rst);

//数组是否有元素>5
var some_rst = dataArray.some(function(ele) {
	return ele > 5;
})
console.log("some_rst: ", some_rst);

var filter_rst = dataArray.filter(function(ele) {
	return ele > 5;
})
console.log("filter_rst: ", filter_rst);

var map_rst = dataArray.map(function(ele) {
	return ele + 5;
})
console.log("filter_rst: ", map_rst);

var forEach_rst = "";
dataArray.forEach(function(ele, index) {
	forEach_rst += (index == 0) ? ele : ',' + ele;
});
console.log("forEach_rst: ", forEach_rst);

var reduce_rst = dataArray.reduce(function(prev, cur) {
	return prev + cur
});
console.log("reduce_rst: ", reduce_rst);
// reduceRight,从右向左

6、JSON

ES5提供一个内置的(全局)JSON对象,可用来序列化( JSON.stringfy )和反序列化( parse )对象为JSON格式。

  • JSON.stringify(),js对象转换成json字符串
  • JSON.parse(),解析json字符串,构建js对象,看个DEMO。
var jsonObj = { x: 5, y: 6 };
var jsonStr = JSON.stringify(jsonObj);
var jsonObj2 = JSON.parse(jsonStr);
console.log(jsonStr);	//{"x":5,"y":6}
console.log(jsonObj2, jsonObj == jsonObj2);//Object { x: 5, y: 6 } false

7、Strict Mode

In ES3 or ES5-nonstrict, Failure is silent. Execution will proceed assuming success. And we can’t check after every assignment to see if it succeeded. In ES5, Failed assignments throw. A subset intended to provide more thorough error checking and avoid error-prone constructs.
ES5引入了严格模式,默认不启用,可以通过2种生效方式:

启用严格模式后,js代码语法和行为将会发生一定改变,具体可以参考上述两篇博文,其中this为undefined时,不再指向global,本文之前的一个DEMO在严格模式下,js会报错。

	"use strict";
	var module = {
		  x: 42,
		  getX: function() {
		    return this.x;
		  }
		}

	var unboundGetX = module.getX;
	console.log(unboundGetX()); 	//全局作用域, ->undefiend

	var boundGetX = unboundGetX.bind(module);	//bind, this->module
	console.log(boundGetX());					//this.x = module.x = 42

运行该段代码,会报 TypeError: this is undefined,原因:
非严格模式下,this为undefined时,会指向global;而严格模式下不会,所以取this.x值就报错了。

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页