ES2015(es6)
浏览器端已支持 ES6 规范（包括 export & import）
发布时间：2019-08-19 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了浏览器端已支持 ES6 规范（包括 export & import），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
当然，是几个比较优秀的浏览器，既然是优秀的浏览器，大家肯定知道是那几款啦，我就不列举了，我用的是 chrome。
对 script 声明 tyPE 为 module 后就可以享受 es6 规范所带来的模块快感了。
import 和 export 也可以快乐的使用了，不需要 Babel 成 ES5 哟
以下代码皆为浏览器端直接运行
<!DOCTYPE htML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ES6</title>
</head>
<div>
<em>需浏览器支持 script 标签的 type = module 属性</em>
<em>当 script 设为 type = module 会失去跨域特性，必须同源</em>
</div>
<body>
<script type="module">
// 模块导入
import getModuleName, { HttpTool, MathTool } from './modules/Tools.js';
console.log("module name: " + getModuleName());
// 解构小实例 注意传入的是数组，模块解构获取参数
HttpTool.get(["//segmentfault.com", (url) => {
console.log(url);
}]);
// 扩展（反向）小实例 当然 js 本身就是不定参数的 玩玩而已
HttpTool.post("//segmentfault.com", "hello", "segmentfault");
console.log(MathTool.add(1, 2), MathTool.sub(1, 2));
</script>
</body>
</html>/**
* [Tools ES6 module]
*/
const moduleName = "Helper Tools";
VAR HttpTool = {
get: function (handler) {
// 解构操作
var [url, callback] = handler;
callback(url);
},
post: function (url, ...data) {
console.log(url);
// ES6 扩展操作符的另类用法
// 其实其他语言中 php/python 有可变参数的概念
// php function foo(name, age, ...PRops)
// python def foo(name, age, ...props)
// ES6 的扩展操作符其实也可以这样使用
// HttpTool.post(url, foo, bar, hello, world)
// 除给定参数位外的参数都会被压入 data 数组中
// a, b, c, d 会被 ...data 接受并管理
// data 则为 [a, b, c, d]
// ...data 就能得到字面量的 a, b, c, d，但不能显示获取
// 需要使用解构语法
// var [a, b, c, d] = data 来操作
for (var i in data) {
console.log(data[i]);
}
}
}
var MathTool = {
add: (a, b) => a + b,
sub: (a, b) => a - b
}
function getModuleName() {
return moduleName;
}
export default getModuleName;
export { HttpTool, MathTool };运行结果
脚本宝典总结
以上是脚本宝典为你收集整理的浏览器端已支持 ES6 规范（包括 export & import）全部内容，希望文章能够帮你解决浏览器端已支持 ES6 规范（包括 export & import）所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
猜你在找的ES2015(es6)相关文章
- vuex 基本入门和使用（二） 2019-08-19
- 默认参数如何在JavaScript ES6中工作 2018-11-14
- JavaScript ES6功能：好的部件 2018-11-14
- 如何使用ES6箭头函数使您的JavaScript更易于阅读 2018-11-14
- 如何使用ES6在JavaScript中有条件地构建对象 2018-11-14
- 关于如何使用Fetch API执行HTTP请求的实用ES6指南示例代码 2018-11-14
- 5个在ES6中修复的JavaScript“坏”的部分 2018-11-13
- 分享干货ECMAScript 2015（ES6）提示和技巧非常有用 2018-11-13
- JavaScript ES6 - 写得少，做得更多 write less, do more 2018-11-13
- 什么时候（和为什么）你应该使用ES6箭头功能 - 何时不应该使用ES6箭头功能 2018-11-12
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新ES2015(es6)教程