前端面试-ES3,ES5,ES6的区别

JS历史

1996 年,网景将 JavaScript 提交给 ECMA International(欧洲计算机制造商协会) 进行标准化,并最终确定出新的语言标准,它就是 ECMAScript。自此,ECMAScript 成为所有 JavaScript 实现的基础,不过,由于 JavaScript 名字的历史原因和市场原因,现实中我们只用 ECMAScript 称呼标准,平时都还是使用 JavaScript 来称呼这个语言。

自从 1999 年 ECMAScript 3 发布后,十年内都没有任何改动被成功添加到官方规范里。取而代之的,是各大浏览器厂商们争先进行自己的语言拓展,web 开发者们别无选择只能去尝试并且支持这些 API。即使是在 2009 年 ECMAScript 5 发布之后,仍然用了数年这些新规范才得到了浏览器的广泛支持,可是大部分开发者还是写着 ECMAScript 3 风格的代码,并不觉得有必要去了解这些规范。

ECMAScript 第四版草案由于太过激进而被抛弃,Adobe 的 ActionScript 3.0 是 ECMAScript edition 4 的唯一实现( Flash 差点就统一 Web 了)

到了 2012 年,事情突然开始有了转变。大家开始推动停止对旧版本 IE 浏览器的支持,用 ECMAScript 5 (ES5) 风格来编写代码也变得更加可行。与此同时,一个新的 ECMAScript 规范也开始启动。到了这时,大家开始逐渐习惯以对 ECMAScript 规范的版本支持程度来形容各种 JavaScript 实现。在正式被指名为 ECMAScript 第 6 版 (ES6) 之前,这个新的标准原本被称为 ES.Harmony(和谐)。2015 年,负责制定 ECMAScript 规范草案的委员会 TC39 决定将定义新标准的制度改为一年一次,这意味着每个新特性一旦被批准就可以添加,而不像以往一样,规范只有在整个草案完成,所有特性都没问题后才能被定稿。因此,ECMAScript 第 6 版在六月份公布之前,又被重命名为了 ECMAScript 2015(ES2015)


ES5相比ES3,新增的特性

1、strict模式

严格模式,限制一些用法,'use strict';

2、Array增加方法

增加了every、some、forEach、filter、indexOf、lastIndexOf、isArray、map、reduce、reduceRight 方法

PS: 还有其他方法 Function.prototype.bind、String.prototype.trim、Date.now

3、Object方法

Object.getPrototypeOf
Object.create
Object.getOwnPropertyNames
Object.defineProperty
Object.getOwnPropertyDescriptor
Object.defineProperties
Object.keys
Object.preventExtensions / Object.isExtensible
Object.seal / Object.isSealed
Object.freeze / Object.isFrozen


ES6新特性

箭头函数

“=>”不只是关键字`function`的简写,它还带来了其它好处。箭头函数与包围它的代码共享同一个`this`,能帮你很好的解决this的指向问题。

// 箭头函数的例子
()=>1
v=>v+1
(a,b)=>a+b
()=>{
    alert("foo");
}
e=>{
    if (e == 0){
        return 0;
    }
    return 1000/e;
}

参数默认值,不定参数,拓展参数

默认参数值:

//传统的指定默认参数的方式
function sayHello(name){
var name=name||'dude';
console.log('Hello '+name);
}
//运用ES6的默认参数
function sayHello2(name='dude'){
console.log(`Hello ${name}`);
}
sayHello();//输出:Hello dude
sayHello('Wayou');//输出:Hello Wayou
sayHello2();//输出:Hello dude
sayHello2('Wayou');//输出:Hello Wayou

不定参数(是在函数中使用命名参数同时接收不定数量的未命名参数。这只是一种语法糖,在以前的JavaScript代码中我们可以通过arguments变量来达到这一目的。不定参数的格式是三个句点后跟代表所有不定参数的变量名。):

//将所有参数相加的函数
function add(...x){
return x.reduce((m,n)=>m+n);
}
//传递任意个数的参数
console.log(add(1,2,3));//输出:6
console.log(add(1,2,3,4,5));//输出:15
//reduce函数,是ECMAScript5规范中出现的数组方法。reduce方法有两个参数,第一个参数是一个callback,用于针对数组项的操作;第二个参数则是传入的初始值,这个初始值用于单个数组项的操作。需要注意的是,reduce方法返回值并不是数组,而是形如初始值的经过叠加处理后的操作。reduce方法最常见的场景就是叠加。

拓展参数:

拓展参数则是另一种形式的语法糖,它允许传递数组或者类数组直接做为函数的参数而不用通过apply。

var people=['Wayou','John','Sherlock'];
//sayHello函数本来接收三个单独的参数人妖,人二和人三
function sayHello(people1,people2,people3){
console.log(`Hello ${people1},${people2},${people3}`);
}
//但是我们将一个数组以拓展参数的形式传递,它能很好地映射到每个单独的参数
sayHello(...people);//输出:Hello Wayou,John,Sherlock 
//而在以前,如果需要传递数组当参数,我们需要使用函数的apply方法
sayHello.apply(null,people);//输出:Hello Wayou,John,Sherlock


类(class)

ES6 引入了class(类),让JavaScript的面向对象编程变得更加简单和易于理解。

class Animal {
    // 构造方法,实例化的时候将会被调用,如果不指定,那么会有一个不带参数的默认构造函数.
    constructor(name,color) {
      this.name = name;
      this.color = color;
    }
    // toString 是原型对象上的属性
    toString() {
      console.log('name:' + this.name + ',color:' + this.color);
    }
  }
 var animal = new Animal('dog','white');//实例化Animal
 animal.toString();
 console.log(animal.hasOwnProperty('name')); //true
 console.log(animal.hasOwnProperty('toString')); // false
 console.log(animal.__proto__.hasOwnProperty('toString')); // true
 class Cat extends Animal {
  constructor(action) {
    // 子类必须要在constructor中指定super 方法,否则在新建实例的时候会报错.
    // 如果没有置顶consructor,默认带super方法的constructor将会被添加、
    super('cat','white');
    this.action = action;
  }
  toString() {
    console.log(super.toString());
  }
 }
 var cat = new Cat('catch')
 cat.toString();
 // 实例cat 是 Cat 和 Animal 的实例,和Es5完全一致。
 console.log(cat instanceof Cat); // true
 console.log(cat instanceof Animal); // true


模块(Module)

ES6允许在一个模块中使用 export 来导出多个变量或方法。

ES6将一个文件视为一个模块,上面的模块通过 `export` 向外输出了一个变量。一个模块也可以同时往外面输出多个变量。

//导出一个变量
export var name = 'Rainbow'
//导出多个变量
var name = 'Rainbow';
var age = '24';
export {name, age};
//导出函数
export function myModule(someArg) {
  return someArg;
}
//导入
import {myModule} from 'myModule';
//一条import 语句可以同时导入默认方法和其它变量。
import defaultMethod, { otherMethod } from 'xxx.js';


字符串模板

ES6中允许使用反引号` 来创建字符串,此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${vraible}。

//产生一个随机数
var num=Math.random();
//将这个数字输出到console
console.log(`your num is ${num}`);


解构赋值

自动解析数组或对象中的值。比如若一个函数要返回多个值,常规的做法是返回一个对象,将每个值做为这个对象的属性返回。但在ES6中,利用解构这一特性,可以直接返回一个数组,然后数组中的值会自动被解析到对应接收该值的变量中。

var [x,y]=getVal(),//函数返回值的解构
    [name,,age]=['wayou','male','secrect'];//数组解构
function getVal() {
    return [ 1, 2 ];
}
console.log('x:'+x+', y:'+y);//输出:x:1, y:2 
console.log('name:'+name+', age:'+age); //输出: name:wayou, age:secrect


let与const 关键字

可以把`let`看成`var`,只是它定义的变量被限定在了特定范围内才能使用,而离开这个范围则无效。`const`则很直观,用来定义常量,即无法被更改值的变量。

for (let i=0;i<2;i++)console.log(i); //输出: 0,1
console.log(i); //输出:undefined,严格模式下会报错


for of 值遍历

我们都知道for in 循环用于遍历数组,类数组或对象,ES6中新引入的for of循环功能相似,不同的是每次循环它提供的不是序号而是值。

var someArray = [ "a", "b", "c" ];
 
for (v of someArray) {
    console.log(v);//输出 a,b,c
}


Promises

Promises 是处理异步操作的一种模式,之前在很多三方库中有实现,比如jQuery的 deferred 对象。当你发起一个异步请求,并绑定了“.when()”, “.done()”等事件处理程序时,其实就是在应用promise模式。

//创建promise
var promise = new Promise(function(resolve, reject) {
    // 进行一些异步或耗时操作
    if ( /*如果成功 */ ) {
        resolve("Stuff worked!");
    } else {
        reject(Error("It broke"));
    }
});
//绑定处理程序
promise.then(function(result) {
//promise成功的话会执行这里
    console.log(result); // "Stuff worked!"
}, function(err) {
//promise失败会执行这里
    console.log(err); // Error: "It broke"
});

Math,Number,String,Object 的新API

对Math,Number,String还有Object等添加了许多新的API。


Symbols

我们知道对象其实是键值对的集合,而键通常来说是字符串。而现在除了字符串外,我们还可以用symbol这种值来做为对象的键。Symbol是一种基本类型,像数字,字符串还有布尔一样,它不是一个对象。Symbol 通过调用symbol函数产生,它接收一个可选的名字参数,该函数返回的symbol是唯一的。之后就可以用这个返回值做为对象的键了。Symbol还可以用来创建私有属性,外部无法直接访问由symbol做为键的属性值。


Proxies

Proxy可以监听对象身上发生了什么事情,并在这些事情发生后执行一些相应的操作。一下子让我们对一个对象有了很强的追踪能力,同时在数据绑定方面也很有用处。


Iterators(迭代器)


Generators(生成器)


Map + Set + WeakMap + WeakSet

四种集合类型,`WeakMap`、`WeakSet`作为属性键的对象如果没有别的变量在引用它们,则会被回收释放掉。


本文由 w3cmark_前端笔记 版权所有,转载时请注明出处。
注明出处格式:w3cmark (http://www.w3cmark.com/2017/571.html)

分享到:

关注w3cmark
微信公众号 w3cmark_com