ES6常用的新特性
2019-08-26 05:43:52来源:博客园 阅读 ()
ES6常用的新特性
1、Let&const
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>es-let&const</title> </head> <body> <script type="text/javascript"> /* var定义的变量在代码块外面还可以使用 */ for(var i=0;i<10;i++){ console.debug(i); } console.debug("块外i:"+i); /* let定义的变量作用域为代码块之内 */ for(let j=0;j<10;j++){ console.debug(j); } //console.debug("块外j:"+j); /* const定义的是常量,不能被改变且作用域为代码块之内 */ { const k=23; //k=34; console.debug(k); } //console.debug("块外j:"+k); </script> </body> </html>
2、解构表达式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>解构表达式</title> </head> <body> <script type="text/javascript"> /* 数组的解构:位置要对应 */ const arr=["我",4,"不吹牛的",true]; const [a,b,c,d]=arr; console.debug("a:",a); console.debug("b:",b); console.debug("c:",c); console.debug("d:",d); /* 对象的解构:属性名必须对应 */ let user={ name:"小明", age:10, hobby:"吃糖" } const {name,hobby}=user; const {sex}=user; console.debug(name+hobby); console.debug("sex:"+sex); </script> </body> </html>
3、箭头函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>箭头函数</title> </head> <body> <script type="text/javascript"> /* 传统写法*/ let le=function (food) { console.debug("不能浪费"+food); } le("食物") /* 箭头函数:只有一个参数可以不写括号*/ let me= food =>{ console.debug("浪迹在"+food); } me("天上") setInterval(()=>{ console.debug("流浪"); },1000) </script> </body> </html>
4、解构表达式+箭头函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>解构+箭头函数</title> </head> <body> <script type="text/javascript"> let haha=({name,sex})=>{ console.debug(name+"是"+sex+"人"); } let user={ name:"小明", sex:"男" } haha(user) </script> </body> </html>
5、Promise对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Promise对象</title> </head> <body> <script type="text/javascript"> /*随机一个数,如果这个数大于0.5就为真,小于等于就为假*/ const promise=new Promise((resolve ,reject)=>{ setTimeout(()=>{ let value= Math.random(); if(value>0.5){ resolve(value); }else { reject(value); } },1000) }) promise.then(res=>{ console.debug(res+",真") }).catch(res=>{ console.debug(res+",假") }) </script> </body> </html>
6、模块化
html文件(module.html):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模块化</title> <!-- bundle.js文件是将模块module1.js打包得到的 --> <script type="text/javascript" src="dist/bundle.js"></script> </head> <body> </body> </html>
模块1(module1.js):
import {name,study} from "./module2"
study();
document.write(name)
模块2(module2.js):
export var name="小明"; export var study=function () { console.debug("出去玩啦") }
最后将模块1打包成bundle.js文件即可运行html文件。
原文链接:https://www.cnblogs.com/wanghj-15/p/11371031.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 封装好通用的reset.css base.css 样式重置css文件 2020-02-25
- 10个超好用的配色网站 2020-01-07
- css3新增属性有哪些?css3中常用的新增属性总结 2019-12-31
- 一些实用的Django+HTML设置 2019-12-04
- 记录一些实用的小技巧-CSS篇 2019-11-18
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash