ECMAScript6(ES6)新特性

本文主要是介绍ECMAScript6(ES6)新特性，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、ES6简介

ECMAScript6是JavaScript语言的下一代标准，已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上，推出了JavaScript2.0。
ECMAScript是JavaScript语言的国际标准，JavaScript是ECMAScript的实现。

二、let命令

用来声明变量，用法类似于var，但是它所声明的变量，只在let命令所在的代码块内有效不受外部影响，let不像var有“变量提升”现象。
let不允许在相同作用域内，重复声明同一变量。

{var a = 100;let b = 200;
}
console.log("var a 的值" + a);        // var a 的值:100
console.log("let b 的值" + b);        // b is not defined

三、const

用来声明变量，但是声明的是常量，一旦声明，常量的值就不能改变，const也有块级作用域。

const obj = 123456;
const obj2 = 666;
obj = 123;
console.log( obj );     //Assignment to constant variable.
console.log( obj2 );    //666
var obj = 789;
console.log( obj );     //789

四、解构（Destructuring）

es6允许按照一定模式，自动解析数组或对象中的值，直接返回一个数组，数组中的值会自动被解析对变量进行赋值。

var {a,b,id,name:Alice} = {id:6,a:1,b:2,name:{a:"1",b:"2",c:"3"}};
console.log(Alice);         //{a:"1",b:"2",c:"3"}
console.log(Alice.b);       //2

解构赋值的用途：

A. 交换变量的值 （es6更简便，更节省内存空间）

// es5
var a = 5, b = 10,temp;
temp = a ;
a = b ;
b = temp ;
console.log(a);         // a = 10
console.log(b);         // b = 5
// es6
var c = 5, d = 10;
[c,d] = [d,c];
console.log(c);         // c = 10
console.log(d);         // d = 5

B. 从函数返回多个值，返回一个数组

// 返回数组
function funArr(){return [1 , 2 , 3]
}
var [a, b, c] = funArr() ;
console.log( "a = " + a ,"b = " + b ,"c = " + c); // a = 1 b = 2 c = 3// 返回对象
function funObj(){return {name : "apple" ,id : "001" ,time : "2017"}
}
var { id : d , name : n , time : t} = funObj() ;
console.log( "id值："+ d +" name值："+ n +" time值：" + t )// id值：001 name值：apple time值：2017

C. 函数参数

// 有序数组参数
function funArr([ a , b , c ]){console.log( a , b , c );   // 1 2 3
}
funArr([ 1 , 2 , 3 ]);// 无序对象参数
function funObj({ x , y , z }){console.log( x , y , z  );  // 11 22 33
}
funObj({ x : 11 , y : 22 , z : 33 });

D. 提取json数据

var jsonData = {name : "Iphone" ,id : "001" ,time : "2017",product : {a : "apple" , b : "华为" , c : "vivo"}
};
console.log( jsonData.product.b );  // es5 方法// es6处理后  获取结果相比es5更加方便快捷let { name : n , id : d , time : t , product : pro } = jsonData ;
console.log( pro.a );   // apple
console.log( n );       // Iphone
console.log( t );       // 2017

E. 函数参数的默认值
F. 遍历Map解构
G. 输入模块的指定方法

五、箭头函数（inputs => outputs）

//基本用法var fun = el => el;//等同于var fun = function(el){return el};// 如下例子var array = [1, 2, 3];//传统写法array.forEach(function(e) {console.log(e); // 1 2 3});//ES6array.forEach( e => console.log(e));  // 1 2 3//如果箭头函数无参数或者有多个参数时候，则需要使用括号括起来，
// 若箭头函数outputs代码块语句多于一条，则用大括号括起来并return，如下：var fun2 = ()=> v ;//等同于var fun2 = function(){return v ;}var fun3 = ( a , b )=> { a + b ; }  // ps：由于大括号解析为代码块，若返回为对象，必须在对象外加上括号。//等同于var fun3 = function( a , b){return a + b ;}

对于箭头函数this也需要简单说明一下：
箭头函数this永远指向当前对象，也就是箭头函数的this是固定的，永远指向定义时的对象，而不是使用时的对象；
箭头函数没有自己的this，即不可用call()、apply()、bind()强制改变this指向；
箭头函数不可以当做构造函数，不可以使用new；
三变量 arguments、super、new.target 在箭头函数中是不存在：

function fun(){var arr = [ 1 , 2 , 3 ] ;arr.forEach((e) => {console.log(e);console.log(arguments)})
}
fun( 11 , 22 , 33);

六、class关键字

//类的定义方法class father {//ES6中新型构造器constructor(elem) {this.elem = elem;}//实例方法sayName() {console.log("I'm "+this.elem);}}//类的继承class son extends father {constructor(elem) {//直接调用父类构造器进行初始化super(elem);//super关键字用于访问父对象上的函数//super()调用会生成一个空对象，作为context来调用父类的constructor，返回this对象，// 作为子类constructor的context继续调用构造函数。console.log(this);}program() {console.log("I'm "+ this.elem);}}
//测试我们的类
var testA = new father('apple'), testB = new son('banana');
testA.sayName();        //输出 ‘I'm apple’
testB.sayName();        //输出 ‘I'm banana’
testB.program();        //输出 ‘I'm banana ’

七、定义方法时候可不加function

var init = {fun(){console.log("es6")}
}
init.fun();

八、字符串模板

非常便捷的一个功能，反引号（`）代替了以前繁琐的引号+加号的字符串拼接，变量在 ${} 内书写即可。

var arr = ["apple","banana","peal","苹果2","香蕉2","梨子2"];
var elem = document.getElementById("box");elem.innerHTML = `<p> ${arr[4]} </p><p> ${arr[0]} </p><p> ${arr[3]} </p>`;

九、for of值遍历

//es5 ---- for invar arr = [ 1 , 5 , 3 , 32 , 5 , 6 , 7 , 11 , 19 ];for(let i in arr ){   //  i 是下标console.log( `第 ${i} 位是 ${ arr[i] }` );// 第 0 位是 1// 第 1 位是 5// 第 2 位是 3// ...}//es6 ----- for offor(let i of arr){  //  i 是值console.log(i)// 1// 5// 3// ...}

十、模块

// point.jsmodule "point" {export class Point {constructor (x, y) {public x = x;public y = y;}}}// myapp.js//声明引用的模块module point from "/point.js";//这里可以看出，尽管声明了引用的模块，还是可以通过指定需要的部分进行导入import Point from "point";var origin = new Point(0, 0);console.log(origin);

十一、Map 、set

Map是具有极快查找速度的键值对结构。
我们看看Map的使用示例：

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95
var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined

上面的has方法比indexOf速度快。
Set和Map类似，也是存在key的列表，只不过Set中的元素不能够重复。

var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3
var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}

可以看到，再次添加的重复数据会被过滤掉。
那么这两种对象的运用场景有哪些呢？
Map可以用来存储键值对，比如姓名和年龄，而Set可以用来存储不能重复的目标，比如学号列表。

这篇关于ECMAScript6(ES6)新特性的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---