ES6常用语法整合

张迁发布于2019-08-20 15:31 / 2624人阅读

摘要：说到肯定是先介绍了，据阮一峰老师介绍到，是一个广泛使用的转码器，可以将代码转为代码，从而在现有环境执行。输出其他还有等可以查看阮一峰的入门

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~。

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();

箭头操作符

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

var arr = [1, 2, 3];

//ES5

arr.forEach(function(x) {

    console.log(x);
    
});

//ES6

arr.forEach(x = > console.log(x));

解构赋值

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

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

console.log("name:"+name+", age:"+age);
//输出： name:will, age:21

默认参数

定义函数的时候指定参数的默认值

//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}`);
    
}

多行字符串

使用反引号 ` 来创建字符串

//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.`;

字符串模板

由美元符号加花括号包裹的变量${name}

var name = "will";

console.log(`my name is ${name}`);

扩展运算符

在函数中使用命名参数同时接收不定数量的未命名参数，在以前的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

块级作用域

let与const 关键字！可以把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";   //报错

模块

在ES6标准中支持module了,将不同功能的代码分别写在不同文件中，各模块只需使用export导出公共接口部分，然后通过使用module模块的导入的方式可以在其他地方使用

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


// a.js

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

//然后在HTML引入a文件运行浏览器

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 入门

混合云私有云 python常用语法 ES6 es6-系列 ES6入门

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82314.html

webpack多页应用架构系列（八）：教练我要写ES6！webpack怎么整合Babel？

摘要：本文首发于的技术博客实用至上，非经作者同意，请勿转载。只是最近学习生态，用起来转换之余，也不免碰到诸多用上的教程案例，因此便稍作学习。在当前的浏览器市场下，想在生产环境用上，是必不可少的。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/1190000006992218如果您对本系列文章感兴...

gnehc 2019-08-20 11:14 评论0 收藏0
深入浅出 ES6：ES6 与 Babel / Broccoli 的联用

摘要：深入浅出指的是添加在标准第六版中的编程语言的新特性，简称为。登场在一个具体的项目中，使用有几种不同的方法。这是为了避免在安装时使用根管理权限。以用户角度展示系统响应速度，以地域和浏览器维度统计用户使用情况。深入浅出 ES6 指的是添加在 ECMASript 标准第六版中的 JavaScript 编程语言的新特性，简称为 ES6。虽然 ES6 刚刚到来，但是人们已经开始谈论 ES7 ...

NervosNetwork 2019-08-19 17:47 评论0 收藏0
前端基础进阶（十五）：详解 ES6 Modules

摘要：下载地址安装一个好用的命令行工具在环境下，系统默认的非常难用，所以我个人比较推荐大家使用或者。下载地址安装在命令行工具中使用查看版本的方式确保与都安装好之后，我们就可以安装了。前端基础进阶系列目录 showImg(https://segmentfault.com/img/remote/1460000009654403?w=1240&h=272); 对于新人朋友来说，想要自己去搞定一个E...

Lowky 2019-08-21 18:31 评论0 收藏0
2019 Java 全栈工程师进阶路线图，一定要收藏

摘要：结合我自己的经验，我整理了一份全栈工程师进阶路线图，给大家参考。乾坤大挪移第一层第一层心法，主要都是基本语法，程序设计入门，悟性高者十天半月可成，差一点的到个月也说不准。技术更新日新月异，对于初入职场的同学来说，经常会困惑该往那个方向发展，这一点松哥是深有体会的。我刚开始学习 Java 那会，最大的问题就是不知道该学什么，以及学习的顺序，我相信这也是很多初学者经常面临的问题。我...

wangdai 2019-08-16 18:34 评论0 收藏0
【译】JavaScript代码检查工具对比

摘要：看到很多团队和开源项目都在用代码检查工具，自己一直没用过，最近加入了新团队有项目在用，就想着研究一下。代码校验工具能够让你在写代码时避免一些低级的错误。同时，也有友好的文档针对每一条规则。在上文提高的所有工具当中它对有着最好的支持。看到很多团队和开源项目都在用代码检查工具，自己一直没用过，最近加入了新团队有项目在用，就想着研究一下。看到sitepoint上的一篇2015年的文章觉得不...

fengxiuping 2019-08-20 18:10 评论0 收藏0