es6模块化 css html,ES6常用的新特性

1、let&const

es-let&const

/* 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);

2、解构表达式

解构表达式

/* 数组的解构：位置要对应 */

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);

3、箭头函数

箭头函数

/* 传统写法*/

let le=function (food) {

console.debug("不能浪费"+food);

}

le("食物")

/* 箭头函数：只有一个参数可以不写括号*/

let me= food =>{

console.debug("浪迹在"+food);

}

me("天上")

setinterval(()=>{

console.debug("流浪");

},1000)

4、解构表达式+箭头函数

解构+箭头函数

let haha=({name,sex})=>{

console.debug(name+"是"+sex+"人");

}

let user={

name:"小明",

sex:"男"

}

haha(user)

5、promise对象

promise对象

/*随机一个数，如果这个数大于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+"，假")

})

6、模块化

html文件(module.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文件。