ES6经常使用语法整合

ES6也出来有一会时刻了,他新增的语法糖也确实大大提高了开辟者的效力,本日就总结一些本身用到最多的。

说到ES6肯定是先引见Babel了,据阮一峰先生引见到,Babel是一个普遍运用的转码器,能够将ES6代码转为ES5代码,从而在现有环境实行。这意味着,你能够如今就用ES6编写程序,而不必忧郁现有环境是不是支撑。

一、 Babel

Babel的设置文件是.babelrc,存放在项目标根目录下。运用Babel的第一步,就是设置这个文件。
该文件用来设置转码划定规矩和插件,基础花样以下。


{
  "presets": [],
  "plugins": []
}

presets 字段设定转码划定规矩,官方供应以下的划定规矩集,你能够根据需要装置。



# ES2015转码划定规矩
$ npm install --save-dev babel-preset-es2015

# react转码划定规矩
$ npm install --save-dev babel-preset-react

# ES7差别阶段语法提案的转码划定规矩(共有4个阶段),选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

然后,将这些划定规矩到场.babelrc


  {
    "presets": [
      "es2015",
      "react",
      "stage-2"
    ],
    "plugins": []
  }

想更深入相识Babel的话能够去阮一峰先生的Babel 入门教程看更细致的。

接下来就是我们开辟中用到最多的ES6语法。

二、 ECMAScript6

为了让大家能疾速明白ES6语法,部份我会拿ES5的来对照,你会发明大有差别O(∩_∩)O~

  1. Class

ES6中添加了对类的支撑,引入了class关键字,想相识ES5对象语法的能够敲这里javascript中的面向对象


//定义类
 
class Cons{

  constructor(name,age){

    this.name = name;
    
    this.age = age;

  }

  getMes(){

    console.log(`hello ${this.name} !`);

  }

}

let mesge = new Cons('啦啦啦~',21);
mesge.getMes();

//继续

class Ctrn extends Cons{

  constructor(name,anu){

    super(name);  //等同于super.constructor(x)
    this.anu = anu;

  }

  ingo(){
    console.log(`my name is ${this.name},this year ${this.anu}`);
  }

}

let ster = new Ctrn('will',21);
ster.ingo();
ster.getMes();
  1. 箭头操作符

新增的箭头操作符=>便有异曲同工之妙。它简化了函数的誊写


var arr = [1, 2, 3];

//ES5

arr.forEach(function(x) {

    console.log(x);
    
});

//ES6

arr.forEach(x = > console.log(x));
  1. 解构赋值

数组中的值会自动被剖析到对应吸收该值的变量中


var [name,,age] = ['will','lala','21'];

console.log('name:'+name+', age:'+age);
//输出: name:will, age:21 
  1. 默许参数

定义函数的时刻指定参数的默许值


//ES5

function fn(name){
    
    var name=name||'will';
    console.log('my name is '+name);
}

//ES6

function fn(name='will'){

    console.log(`my name is ${name}`);
    
}
  1. 多行字符串

运用反引号 ` 来建立字符串


//ES5

var str = 'The 3.1 work extends XPath and'
  +'XQuery with map and array data structures'
  +'along with additional functions and operators'
  +'for manipulating them; a primary motivation'
  +'was to enhance JSON support.';

//ES6

var roadPoem = `The 3.1 work extends XPath and
  XQuery with map and array data structures
  along with additional functions and operators
  for manipulating them; a primary motivation
  was to enhance JSON support.`;
  1. 字符串模板

由美圆标记加花括号包裹的变量${name}


var name = 'will';

console.log(`my name is ${name}`);
  1. 扩大运算符

在函数中运用定名参数同时吸收不定数目标未定名参数,在之前的JavaScript代码中我们能够经由过程arguments变量来到达这一目标。而ES6中是以下完成的


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
  1. 块级作用域

letconst 关键字!能够把let算作var,它定义的变量被限定在了特定范围内。const则用来定义常量,即没法被变动值的变量。共同点都是块级作用域。


//let

for (let i=0;i<2;i++){

  console.log(i);//输出: 0,1
  
}
console.log(i);//输出:undefined

//const

const name='a';
name='b';   //报错
  1. 模块

在ES6规范中支撑module了,将差别功用的代码离别写在差别文件中,各模块只需运用export导出大众接口部份,然后经由过程运用module模块的导入的体式格局能够在其他处所运用


// b.js
function fn(){
    console.log('hello world');
}
export fn;  


// a.js

module { fn } from "./b";
 
fn();

//然后在HTML引入a文件运转浏览器
  1. for or

我们都晓得for in 轮回用于遍历数组,类数组或对象,ES6中新引入的for of轮回功用类似,差别的是每次轮回它供应的不是序号而是值。


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

其他另有Map、Set等能够检察阮一峰的ECMAScript 6 入门

    原文作者:阁主
    原文地址: https://segmentfault.com/a/1190000008922468
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞