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~
。
- 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 入门
ES6常用语法整合的更多相关文章
- ES6常用语法
ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES2015. ...
- ES6常用语法简介import export
ES6常用语法简介import export let与var用法区别 //var var a = []; for (var i = 0; i < 10; i++) { a[i] = functi ...
- ES5与ES6常用语法教程之 ②解构语法糖、声明变量异同
js常用语法系列教程如下 es5与es6常用语法教程(1) es5与es6常用语法教程(2) es5与es6常用语法教程(3) es5与es6常用语法教程(4) es5与es6常用语法教程(5) es ...
- vue学习(一)ES6常用语法
1 ES6常用语法 1.1 变量提升 例① # 变量提升 <div id="app"> </div> <script> console.log( ...
- ES6 常用语法知识汇总
ES6模块化如何使用,开发环境如何打包? 1.模块化的基本语法 /* export 语法 */ // 默认导出 export default { a: '我是默认导出的', } // 单独导出 exp ...
- ES6常用语法总结
ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015.也就是说,ES6就是ES2015.虽 ...
- ES5与ES6常用语法教程之 ③模板字符串、判断字符串是否包含其它字符串
这部分教程我们主要讲解以下几个常用语法 模板字符串 带标签的模板字符串 判断字符串中是否包含其他字符串 给函数设置默认值 模板字符串 老式的拼接字符串方法 let dessert = '
- ES6常用语法,面试应急专用!
常用的ES6语法 注:该文章为转载,原地址为https://www.jianshu.com/p/fb019d7e8b15 什么是ES6? ECMAScript 6(以下简称ES6)是JavaScr ...
- ES6常用语法(下)
Symbol类型 ES5 的对象属性名都是字符串,这容易造成属性名的冲突.比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法,新方法的名字就有可能与现有方法产生冲突.如果有一种机 ...
随机推荐
- https post
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.N ...
- css中书写小三角
我们在开发过程中,有很多的方向标签不是图片,而是用css方法书写上去的. 首先我们要了解原理,border的边框的脚步是45度角. 向左方向: width:0px: height:0px: borde ...
- js设计模式--策略模式
策略模式: 定义了一系列的算法,把他们封装起来,是它们之间可以互相替换,此模式不会影响到使用算法的客户. 回忆下jquery里的animate方法: $( div ).animate( {" ...
- 关于 <textarea ></textarea >标签在苹果微信浏览器出现 内阴影
解决方法:(去除浏览器默认的样式元素) textarea { box-shadow:0px 0px 0px rgba(0,0,0,0); -webkit-appearance:none; }
- php调用API支付接口(使用第三方接口,调用的天工接口。)
首先访问 https://charging.teegon.com/ 注册账号, 找到开发配置 记下client_id和client_secret. 点击 天工开放平台 点击天工收银 点击 S ...
- PHP链接Redis
命令行下运行 redis-server.exe redis.windows.conf 此时,redis服务已经开启,然后我们可以再新开一个命令行,作为控制台 redis-cli.exe -h 127. ...
- Zookeeper与Kafka集群搭建
一 :环境准备: 物理机window7 64位 vmware 3个虚拟机 centos6.8 IP为:192.168.17.[129 -131] JDK1.7安装配置 各虚拟机之间配置免密登录 安装 ...
- python 接口自动化测试(一)
一.测试需求描述 对服务后台一系列SOAP接口功能测试 参数传入:根据接口描述构造不同的参数输入值(Json格式) 二.程序设计 通过Excel配置具体的测试用例数据 保存参数为Json格式,预写入预 ...
- velocity中使用枚举
版权声明:本文为博主原创文章,转载请注明出处,欢迎使劲喷 一.为什么要在velocity中使用枚举 1.目前接触到的系统,枚举通常用来在程序中定义数据字典. 举个支付的例子,比如一个字段用来标识一条记 ...
- Linux centos7环境下安装Nginx
Linux centos7环境下安装Nginx的步骤详解 1. 首先到Nginx官网下载Nginx安装包 http://nginx.org/download/nginx-1.5.9.tar.gz ...