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

男娘i 2022-05-12 02:03 752阅读 0赞

转载: [https://blog.csdn.net/weixin\_41196185/article/details/78881172][https_blog.csdn.net_weixin_41196185_article_details_78881172]

前端开发离不开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的兼容性概览。   
![这里写图片描述][SouthEast]  
下面就主要浏览器进行说明：   
**IE**：可以看到IE6，IE7是完全不支持的。而IE8是只支持一些内容，参考引用4，IE9是大部分支持，支持度参考引用2。   
**Chrome**：Chrome 23版本之后就是完全支持的了。19~22版本有不兼容的地方，参考引用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的新特性，它允许你把整个程序，或者某个函数，放置在“严格”的操作语境中。使用方法是在作用域开头加上这样一条语句。

"use strict";

*  1

2.2.2 Object新增方法

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

Object.create(__proto__, [ propertiesObject ])

*  1

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

Object.getPrototypeOf(object)

*  1

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

Object.getOwnPropertyNames(object)

*  1

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

Object.keys(object)

*  1

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

Object.defineProperty(object, property, descriptor)

*  1

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

Object.defineProperties(object, properties)

*  1

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

Object.getOwnPropertyDescriptor(object, property)

*  1

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

Object.seal(object)

*  1

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

Object.isSealed(object)

*  1

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

Object.freeze(object)

*  1

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

Object.isFrozen(object)

*  1

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

Object.preventExtensions(object)

*  1

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

Object.isExtrensible(object)

*  1

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

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

*  1
 *  2
 *  3
 *  4

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

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

*  1
 *  2
 *  3
 *  4

2.2.3 Array新增方法

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

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

*  1
 *  2

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

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

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7

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

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

*  1
 *  2
 *  3
 *  4
 *  5
 *  6

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

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

*  1
 *  2
 *  3
 *  4

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

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

*  1
 *  2

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

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

*  1
 *  2
 *  3

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

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

*  1
 *  2
 *  3

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

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

*  1
 *  2
 *  3
 *  4

（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）。

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

*  1
 *  2

2.2.5 Date新增方法

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

2.2.6 JSON对象

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

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

*  1
 *  2
 *  3
 *  4

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

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

*  1
 *  2
 *  3
 *  4

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

## 3. ES6（ES2015）的简要说明 ##

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

### 3.1 ES6新特性 ###

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

{
      let a = 10;
      var b = 1;
    }
    a; // ReferenceError: a is not defined.
    b; // 1

*  1
 *  2
 *  3
 *  4
 *  5
 *  6

（2）**const**声明一个只读的常量。一旦声明，常量的值就不能改变。

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

*  1
 *  2
 *  3
 *  4
 *  5

（3）数组的解构赋值

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

*  1
 *  2

（4）对象的解构赋值

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

*  1
 *  2
 *  3

（5）箭头函数 **=>**

var f = v => v;

*  1

等效于

var f = function(v) {
      return v;
    };

*  1
 *  2
 *  3

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

const promise = new Promise(function(resolve, reject) {
      // ... some code
    
      if (/* 异步操作成功 */){
        resolve(value);
      } else {
        reject(error);
      }
    });

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9

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

promise.then(function(value) {
      // success
    }, function(error) {
      // failure
    });

*  1
 *  2
 *  3
 *  4
 *  5

（7）Class语法：   
包括constructor，get，set等经典函数方法。   
（8）Module语法：   
包括import，export等经典模块引入和导出写法。

[https_blog.csdn.net_weixin_41196185_article_details_78881172]: https://blog.csdn.net/weixin_41196185/article/details/78881172
[SouthEast]: /images/20220512/9484c83b6a27432f8dd114a33df405c6.png
[http_es6.ruanyifeng.com_docs_intro]: http://es6.ruanyifeng.com/#docs/intro