2.前端-项目运行+ES6
运行项目
vscode下载以及插件安装
安装nodejs安装链接
测试安装完毕
设置npm的镜像
下载依赖(在vscode里)--路径不能有中文
npm install后
会生成这样一个文件夹
编译运行
前端的技术
ES6
shift+!生成html的文档头
let和var的区别
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1> <script> //ES6的新特性有let 和 const两个关键字 相比于var,let更为严谨更像java的关键字,const为常量,定义后不可修改 const a=1; //a=2 客户端报错 console.info(a); //这里的大括号限定了作用域范围,而var关键字修饰的变量是不受此影响的 { var x=1; let y=2; } console.info(x);//正常输出 //console.info(y);//报错 //var可以声明多次,但是let不可声明多次 var c=1; var c=2; let d=2; //let d=3;报错 console.log(c); console.log(d); //var会变量提升 但是let不会 变量提升就是可以使用再声明 //从以上角度来说let比var更符合java语言 </script> </h1> </body> </html>
解构表达式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> let arr=[1,2,3]; let a=arr[0]; let b=arr[1]; let c=arr[2]; console.log(a,b,c); //ES6解构表达式,数组使用的是中括号 let [aa,bb,cc]=arr; console.info(aa,bb,cc) let person={ name: "xiaowu", age: 23, hobby: ["唱歌","跳舞"] } console.info(person.age); //ES6解构对象,使用大括号 ,可以不用完全解构但是字段得一一对应 let{name,age}=person; console.info(name,age) </script> </body> </html>
字符串
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> //以前声明多行字符串 let html="<div>"+ "<a>你好</a>"+ "</div>"; //es6方式 let es6=`<div> <a>你好</a> </div>`; console.info(es6) //可以对字符串的内容进行判断 皆是true let str="study.vue" console.info(str.startsWith("stu")); console.info(str.endsWith("ue")); console.info(str.includes("y.v")) //可以在字符串中插入表达式 let person={ name: "xiaowu", age: 23, hobby: ["唱歌","跳舞"] } console.info(`名字是${person.name}+年龄是${person.age}`); </script> </body> </html>
函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=, initial-scale=1.0"> <title>Document</title> </head> <body> <script> //ES6之前赋函数默认值的方法 function add(a){ if(!a){ a=1 } console.log(a) } add() //ES6 function addES6(a=1){ console.log(a) } addES6() //对于可变长度的参数 function addMult(...a){ console.log(a); } addMult(1,2,3) //可以传入解构表达式 let nums={ a:2, b:3 } function expression({a,b}){ console.log(a+b) } expression(nums) //lamda 表达式 如果只有一行不需要写return 多行的话需要书写return返回参数还要加{} let lam=(a,b)=>a+b; console.log(lam(2,6)) </script> </body> </html>
对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> let person={ name:"jack", age:18, hobby:["java","c++"] } //获取对象的所有key,value,entry console.log(Object.keys(person)); console.log(Object.values(person)); console.log(Object.entries(person)); //合并对象,有重复的属性会以后面的进行覆盖 const a={a:2}; const b={b:3}; const c={c:3}; //把b和c合并到a console.log(Object.assign(a,b,c)) //赋值 let name="小吴" let age=28 let person2={ name,//以前的写法name:name age } console.info(person2) //拷贝对象(这是一种深拷贝) console.info({...person}) //拷贝+合并对象 小吴 28 java c++ let obj={...person,...person2} console.info(obj) </script> </body> </html>
异步编排:
ES6之前必须嵌套
resolve调用后会自动调用then方法,reject会自动调用catch
模块化
导出
导入
需要安装live server插件