ES5,ES6的简要说明及浏览器支持性总结

ES5,ES6的简要说明及浏览器支持性总结

前端开发离不开javascript语言,而与之密切联系的就是ECMAScript。

##1.什么是ECMAScript?

摘自百度百科:ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。下文中就以ES和JS来简称。简单说,ES是JS的一种语言标准。ES正在不断发展,目前我们接触比较多的就是ES5和ES6(ES6也叫ES2015)了。

##2.ES5的简单介绍

###2.1 首先说一下兼容性问题

从caniuse上面可以查询到,ES的兼容性概览。
这里写图片描述
下面就主要浏览器进行说明:
IE:可以看到IE6,IE7是完全不支持的。而IE8是只支持一些内容,参考引用4,IE9是大部分支持,支持度参考引用2。
Chrome:Chrome 23版本之后就是完全支持的了。1922版本有不兼容的地方,参考引用1。
Firefox:Firefox 21版本之后就是完全支持的了。4
20版本有不兼容的地方,参考引用1。
其他浏览器参考caniuse
【1】Does not support parseInt() ignoring leading zeros.
【2】Does not support Strict mode.
【3】Does not support zero-width chars in identifiers & Immutable undefined.
【4】IE8 has virtually no ES5 support, but does support Object.defineProperty, Object.getOwnPropertyDescriptor, JSON parsing & Property access on strings.

###2.2 ES5有哪些新特性呢?

####2.2.1 严格模式

严格模式是ECMAScript 5的新特性,它允许你把整个程序,或者某个函数,放置在“严格”的操作语境中。使用方法是在作用域开头加上这样一条语句。

1
"use strict";

####2.2.2 Object新增方法

(1)Object.create() 创建一个具有指定原型且可选择性地包含指定属性的对象

1
Object.create(__proto__, [ propertiesObject ])

(2)Object.getPrototypeOf() 返回该对象的原型

1
Object.getPrototypeOf(object)

(3)Object.getOwnPropertyNames() 返回一个由指定对象的所有自身属性的属性名(包括不可枚举属性)组成的数组

1
Object.getOwnPropertyNames(object)

(4)Object.keys() 返回一个由给定对象的自身可枚举属性组成的数组。而使用for-in 循环时,还会枚举其原型链上的属性。

1
Object.keys(object)

(5)Object.defineProperty() 在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象

1
Object.defineProperty(object, property, descriptor)

(6)Object.defineProperties() 在一个对象上添加或修改一个或者多个自有属性,并返回该对象

1
Object.defineProperties(object, properties)

(7)Object.getOwnPropertyDescriptor() 返回对象上一个自有属性对应的属性描述符(不需要从原型链上进行查找的属性)。如果指定的属性存在于对象上,则返回其属性描述符(property descriptor),否则返回 undefined

1
Object.getOwnPropertyDescriptor(object, property)

(8)Object.seal() 密封一个对象,并返回被密封后的对象。密封对象不能添加新的属性,不能删除已有属性,以及不能修改已有属性的enumerable、configurable、writable,但可以修改已有属性的value

1
Object.seal(object)

(9)Object.isSealed() 判断一个对象是否是密封的

1
Object.isSealed(object)

(10)Object.freeze() 冻结一个对象,比seal更严格,连value都不能修改

1
Object.freeze(object)

(11)Object.isFrozen() 判断一个对象是否冻结

1
Object.isFrozen(object)

(12)Object.preventExtensions() 让一个对象变成不可扩展的,也就是永远不能再添加新的属性

1
Object.preventExtensions(object)

(13)Object.isExtrensible() 判断一个对象是否是可扩展的

1
Object.isExtrensible(object)

(14)prototype.isPrototypeOf(object) 确定一个对象是否存在于另一个对象的原型链中

1
2
3
4
function Rectangle() {
}
var rec = new Rectangle();
document.write(Rectangle.prototype.isPrototypeOf(rec));

(15)object.propertyIsEnumerable(propertyName) 确定指定的属性是否可枚举

1
2
3
4
var a = {};
a.b = 3;
console.log(a.propertyIsEnumerable('b'));
// 输出是true

####2.2.3 Array新增方法

(1)Array.isArray() 用于确定传递的值是否是一个 Array

1
2
Array.isArray([1, 2, 3]);  
// true

(2)Array.prototype.every(callback[, thisArg]) 测试数组的所有元素是否都通过了指定函数的测试。
callback:用来测试数组的每个元素的函数。调用时使用参数 (element, index, array)。返回true表示保留该元素(通过测试),false则不保留
thisArg:可选。执行 callback 时的用于 this 的值。

1
2
3
4
5
6
7
function isBigEnough(element, index, array) {
return (element >= 10);
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
// passed is false
passed = [12, 54, 18, 130, 44].every(isBigEnough);
// passed is true

(3)Array.prototype.filter(callback[, thisArg]) 创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。即是过滤函数。

1
2
3
4
5
6
var a = [1, 2, 3];
var b = a.filter(function(element) {
return element > 2;
});
console.log(b);
//输出 [3]

(4)Array.prototype.forEach(callback[, thisArg]) 对数组的每个元素执行一次提供的函数。

1
2
3
4
const arr = ['a', 'b', 'c'];
arr.forEach(function(element) {
console.log(element);
});

(5)Array.prototype.indexOf(searchElement, fromIndex) 返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1

1
2
let a = [2, 9, 7, 8, 9]; 
a.indexOf(2); // 0

(6)Array.prototype.lastIndexOf() 返回指定元素(也即有效的 JavaScript 值或变量)在数组中的最后一个的索引,如果不存在则返回 -1。从数组的后面向前查找,从 fromIndex 处开始。

1
2
3
var array = [2, 5, 9, 2];
var index = array.lastIndexOf(2);
// index is 3

(7)Array.prototype.map() 创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

1
2
3
var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9]

(8)Array.prototype.reduce() 从左到右为数组中的每一个元素依次执行callback函数,返回累计处理的结果。

1
2
3
4
var total = [0, 1, 2, 3].reduce(function(sum, value) {
return sum + value;
}, 0);
// total is 6

(9)Array.prototype.reduceRight() 与Array.prototype.reduce() 的执行方向相反。
(10)Array.prototype.some() 测试数组中的某些元素是否通过由提供的函数实现的测试。every()是全部元素满足条件,some()只要任意一个元素满足条件。

####2.2.4 String新增方法

(1)String.prototype.trim() 会从一个字符串的两端删除空白字符。在这个上下文中的空白字符是所有的空白字符 (space, tab, no-break space 等) 以及所有行终止符字符(如 LF,CR)。

1
2
var orig = '   foo  ';
console.log(orig.trim()); // 'foo'

####2.2.5 Date新增方法

(1)Date.now() 返回自1970年1月1日 00:00:00 UTC到当前时间的毫秒数。

####2.2.6 JSON对象

(1)JSON.parse() 用来解析JSON字符串,构造由字符串描述的JavaScript值或对象。

1
2
3
4
let a = '{"b": 3}';
let c = JSON.parse(a);
console.log(c);
// {b: 3}

(2)JSON.stringify() 将一个JavaScript值(对象或者数组)转换为一个 JSON字符串。

1
2
3
4
let dd = {bb: 3};
let cc = JSON.stringify(dd);
console.log(cc);
// '{"bb":3}'

上述就是ES5的主要新特性概括,下面我们再看看ES6有哪些新特性。

##3. ES6(ES2015)的简要说明

ES6各个特性的支持情况比较细,可根据具体特性查询caniuse

###3.1 ES6新特性

参考文档:http://es6.ruanyifeng.com/#docs/intro(ECMAScript 6 入门)
下面简单说一些比较常见的ES6用法
(1)let 用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。实际上为 JavaScript 新增了块级作用域。

1
2
3
4
5
6
{
let a = 10;
var b = 1;
}
a; // ReferenceError: a is not defined.
b; // 1

(2)const声明一个只读的常量。一旦声明,常量的值就不能改变。

1
2
3
4
5
const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

(3)数组的解构赋值

1
2
let [a, b, c] = [1, 2, 3];
// let a=1,b=2,c=3;

(4)对象的解构赋值

1
2
3
let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

(5)箭头函数 =>

1
var f = v => v;

等效于

1
2
3
var f = function(v) {
return v;
};

(6)Promise对象是异步编程的一种解决方案。Promise对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。
基本用法是,创建一个Promise实例,

1
2
3
4
5
6
7
8
9
const promise = new Promise(function(resolve, reject) {
// ... some code

if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});

Promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数。

1
2
3
4
5
promise.then(function(value) {
// success
}, function(error) {
// failure
});

(7)Class语法:
包括constructor,get,set等经典函数方法。
(8)Module语法:
包括import,export等经典模块引入和导出写法。


扫一扫下方小程序码或搜索Tusi博客,即刻阅读最新文章!

Tusi博客

# ES6

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×