ES6标准入门 第一章:简介
ECMAScript 6 是JavaScript 语言的下一代标准;发布于2015年,又称为ECMAScript 2015。
ECMAScript 方言还有 JScript 和 ActionScript。
ECMAScript 与 JavaScript 的关系:前者是后者的规范,后者是前者的一种实现。
一个完整的JavaScript实现 包含 ECMAScript 、DOM、 BOM 三部分。
- babel 转码器:
- Babel 是一个广为使用的ES6转码器,可以将ES6代码转为ES5代码,从而在浏览器或其他环境执行;
//转码前
input.map(item => item +1); //转码后
input.map(function (item) {
return item + 1;
})
- 命令行环境
Babel 的命令行版本通过下面的命令安装:$ npm install --global babel-cli
$ npm install --save babel-preset-es2015
// 然后在当前目录下新建配置文件 .babelrc 并写入以下代码
{
"presets": ['es2015']
}Babel 自带一个babel-node 命令, 提供支持ES6 的 REPL 环境。它支持Node.js 的REPL环境的所有功能,而且可以直接运行ES6代码:
$ babel-node
console.log([1,2,3].map(x => x * x)) //[1 , 4, 9]babel-node 命令也可以直接运行 ES6脚本:(假设将上述代码写入es6.js中)
$ babel-node es6.js // [1, 4, 9]
babel 命令可以将 ES6代码 转换为 ES5 代码:
$ babel es6.js "use strict";
console.log( [1,2,3].map( function (x) {
return x * x;
}) )-o参数(或--out-file)可将转换后的代码从标准输出 重定向至文件
$ babel es6.js -o es5.js
#或者
$ babel es6.js --out-file es5.js-d参数 用于转换整个目录 (-d后面跟的是输出目录)
$ babel -d build-dir source-dir
-s参数 用于生成source map 文件
$ babel -d build-dir source-dir -s
- 浏览器环境
babel 也可以用于浏览器。 但是Babel6.0开始不再直接提供浏览器版本,而是要用构建工具构建出来;或者通过安装5.x 版本的babel-core模块获取。$ npm install babel-core@5
运行以上命令可在当前目录的 node_modules/babel-core/ 子目录下找到babel的浏览器版本browser.js(未精简) 和 browser.min.js(已精简)
然后插入以下代码到网页中:<script src="node-modules/babel-core/browser.js"></script>
<script type="text/babel">
// 书写es6 代码
</script>注意: 这种写法实时的将es6 转换为 es5,对网页性能有影响。 生产环境下需要加载已转码的脚本。
- Node.js 环境
(1)先安装babel-core 和 babel-preset-2015$ npm install --save-dev babel-core babel-preset-2015
(2)然后在项目根目录下新建 .babelrc 文件
{
"presets":["es2015"]
}(3)最后在脚本中调用babel-core的 transform 方法
var es5Code = 'let x = n => n + 1';
var es6Code = require('babel-core')
.transform(es5Code, {presets: ['es2015']})
.code;
//' "use strict"; \n\n var x = function x(n) {\n return n+1; \n}; '方法二:
Node 脚本还有一种特殊的babel用法,即把babel加载为require 命令的一个钩子
执行完(1)(2)之后,在应用的入口脚本( entry script )头部加入下面语句:require("babel-core/register");有了上面这个语句,后面所有通过require命令加载的后缀名为 .es6 .es .jsx .js 的脚本都会先通过babel转码再加载;
- 在线转换
Babel提供了一个REPL在线编译器, 将ES6代码转换为es5代码后 插入到网页中运行。
- Babel 是一个广为使用的ES6转码器,可以将ES6代码转为ES5代码,从而在浏览器或其他环境执行;
ES6标准入门 第一章:简介的更多相关文章
- 关于阮大神的es6标准入门第一章
题记:之前在10月份的时候写过阮大神的es6的第一章,但是由于那段时间项目组的动荡,所以也没有什么后续,导致我现在对es6基本都忘的差不多了,不过,现在换了新公司,最近也没什么任务,所以现在开始重新写 ...
- ES6标准入门 第二章:块级作用域 以及 let和const命令
一.块级作用域 1.为什么需要块级作用域? ES5中只有全局作用域和函数作用域,带来很多不合理的场景. (1)内层变量可能会覆盖外层变量: var tem = new Date(); function ...
- 读书笔记 - javascript 高级程序设计 - 第一章 简介
第一章 简介 诞生时间 1995 最初用途 客服端验证 第一版标准 注意是标准 1997年 Ecma-262 一个完整的js实现由三部分组成 ECMAScript DOM 文档对象模型 BO ...
- ES6 常用总结——第一章(简介、let、const)
ES6整理 1. ECMAScript 6简介 ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准.它的目标,是使得 JavaScript 语言可以用来编写复杂 ...
- ES6标准入门 2/26
第一章 ECMAScript6 简介 1.首先经典开头,ECMAScript跟JavaScript的关系,前者是后者的规格,后者是前者的一种实现.在日常场合中,这两个词是可以互换的. 2.ES6可以泛 ...
- MySQL----MySQL数据库入门----第一章 数据库入门
第一章 数据库入门 1.1 数据库基础知识 1.1.1 数据库概述 数据不仅包括普通意义上的数字,还包括文字.图像.声音等.也就是说,凡是在计算机中用来描述事物的记录都可称作数据. 数据库的基本特点: ...
- ES6标准入门读书笔记
第一章 基础 1.let和const命令 (1).let用于声明变量,所声明的变量只在当前代码块有效 特点:不存在变量提升 所以在变量声明之前就使用会报错 暂时性死区 只 ...
- JAVA 入门第一章(语法基础)
本人初学java 博客分享记录一下自己的学习历程 java我的初步学习分为六章,有c和c++的基础学起来也简便了很多. 第一章 语法基础 第二章 面向对象 第三章 常用工具类 第四章 文件操纵 第五章 ...
- ES6标准入门之变量的解构赋值简单解说
首先我们来看一看解构的概念,在ES6标准下,允许按照一定模式从数组和对象中提取值,然后对变量进行赋值,这被称作解构,简而言之粗糙的理解就是变相赋值. 解构赋值的规则是,只要等号右边的值不是对象或者数组 ...
随机推荐
- CSS3技巧巧妙使用:not(:last-of-type)简化你的css代码
终于找到了一个好方法,使用:not(:last-of-type)简单方便,再也不要麻烦的单独使用:last-of-type了,不错! 应用场景:平时我们的列表一般都会有分割线,但是最后一个列表没有分割 ...
- 关于iconfont字体图标的使用
今天用iconfont遇到了字体图标的使用问题.关于使用字体图标的方式在这里有介绍三种方式(css和js的引入和平时一样) 首先你要分清是用单个字体图标icon,还是多个字体图标icon 关于使用代码 ...
- 邓_ Jqery·笔记本【照片】
-------------------------------------------------------------------------------------------- [PHP] - ...
- Python 3 利用 Dlib 19.7 和 sklearn机器学习模型 实现人脸微笑检测
0.引言 利用机器学习的方法训练微笑检测模型,给一张人脸照片,判断是否微笑: 使用的数据集中69张没笑脸,65张有笑脸,训练结果识别精度在95%附近: 效果: 图1 示例效果 工程利用pytho ...
- (Release Candidate)Candidate
RC:(Release Candidate)Candidate是候选人的意思,用在软件或者操作系统上就是候选版本
- 关于mybatis 注解sql sum(参数)传参写法
新手出道 验证了很久sum()里面带参数方式 #{参数}一直不行日志显示参数已经传进 但就是加不上去 返回的始终是0 后面换成$(参数)之后就行了 @Select("select sum($ ...
- 多IP服务器应用可以有效的降低成本
多IP的常规应用很多,SEO,EDM,VPN代理等.可以有效的解决成本,很多时候的租用一台高配置服务器通过XEN,hyper-V等虚拟化技术分割成VPS ,共用一台服务器就会大大的降低成本,这样就需要 ...
- 有关linux下redis overcommit_memory的问题
公司的几台Redis服务器出现不明故障,查看Redis日志,发现如下提示: 1 [34145] 01 Jan 17:42:02 # WARNING overcommit_memory is set t ...
- 1_mysql_认识
什么是数据库? -- 数据 -- 处理+存储 信息 -- 数据库 -- 存取数据 软件 本质是对文件系统的上层封装,通过软件去管理文件,管理数 ...
- Linux实践篇--自动删除n天前日志
原文出处:http://www.cnblogs.com/peida/archive/2013/03/25/2980121.html linux是一个很能自动产生文件的系统,日志.邮件.备份等.虽然现在 ...