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文件。
如果您觉得本文的内容对您的学习有所帮助：
关键字：
ES6常用