1、变量定义关键字
/*
var: 全局生效,且可以重复定义变量
let: 只生效在块级作用域
const: 常量定义,赋值后不可再修改
*/
//1、let无法重复声明,但是var可以
var man = '1'
var man = '2'
let woman = '3'
const wowoman = '4'
//2、 let 生效在块级作用域:代码块{}、if、while语句等
{
let m ='1'
//出了{}就无法打印,但是在函数中的链级作用域可以
}
2、箭头函数
// 用箭头代替函数 //二者的区别在于this回调上有区别
let fu = function(a,b){
return a+b;
}
//等价于
let fn = (a,b) =>{
return a+b;
}
//调用函数名fn的函数
let fes = fn(1,2)
3、特殊符号
//...扩展运算符,可以把一个数组转化为一个分割的参数序列
const tfboys =['王源','王俊凯','易烊千玺']
console.log(...tfboys)
//Symbol数据类型
let s1 = Symbol("wy") //symbol表示独一无二的值
let s2 = Symbol("wy")
console.log(s1===s2);//返回false,名字一样但是代表不同的两个人
let s3 = Symbol(1)
let res = s3+10 //报错,不能和其他数据进行运算,自己和自己也不行
4、遍历
// for of
const xiyou = ['er','tr','yr']
for(let v of xiyou){
console.log(v);
}
// for in 区别在于,for in打印的是键值
for(let v in xiyou){
console.log(v);
}
5、模块引用
//模块导出
//方式一,分别暴露
export function f1(){
}
export let m = 3;
//方式二,统一暴露
function f2(){
}
let n = 3;
export{f2,n}
//方式三,默认暴露
export default {
}
//模块引入
//方式一:通用导入
import * as m1 from 'xxx.js';
//方式二:解构导入
import {f2 as function2,n} from 'xxx.js';
//默认暴露的引入
import {default as m3 } from 'xxx.js';
//or 简便写法
import m3 from'xxx.js';
6、 promise、async、 await(主要用于前后台异步操作)
promise是ES6为了解决异步编程(如文件I/O操作,网络请求等要等待一段时间才能接收到数据)的一个解决方案,使用promise可以封装异步操作,以返回成功或者失败的结果
//1、先实例化一个promise对象,对象里面有一个异步操作函数,
//且有两个形参resolve代表成功,reject代表失败
const p = new Promise(function(resolve,reject)=>{
setTimeout(() => {
//在异步操作函数中写一个异步操作假设从后台数据库获得数据
let data = '从后端获得的数据'
//假设成功获取,调用成功函数改变promise对象状态:成功
resolve(data);
//假设读取失败,调用失败函数改变promise对象状态:失败
//reject(data)
}, 1000);
});
//2、调用promise对象的then方法,根据promise对象的状态,
//若成功则调用第一个函数,失败就调用第二个函数
p.then(function(value){
console.log('成功:',value)
}, function(reason){
console.error('失败:',reason)
})
//当然还可以用catch方法来捕捉错误代替上面的失败调用
p.catch(function(reason){
console.error('失败:',reason)
});
*使用async和await可以实现让异步操作和同步操作一样的效果
使用原则如下:
1、async可单独使用,表示函数是异步函数,但使用await时,必须放在async的异步函数中
2、async函数的返回值为promise对象,且promise对象的结果由async函数的返回值决定(只要返回的不是promise对象,默认是成功的状态)
//async函数,
async function fn(){
//无论返回字符串或空,只要你返回的结果不是一个Promise对象,那么默认就是返回一个成功的
//即resolved状态的promise
//return '1231'
//return;
//若是返回的结果是一个Promise对象,那么返回成功与否取决于这个Promise对象成功与否
return new Promise((resolve,reject)=>{
resolve(1000);
});
}
const result= fn();
console.log(result);
3、await右侧表达式也是promise对象,await返回的是promise成功的值,若promise失败了,就会
抛出异常,需要try…catch捕获处理*
//成功示例:
const p = new Promise(function(resolve,reject)=>{
resolve("成功状态");
});
//await要放在async函数中
async function main(){
let result = await p;
console.log(result);
}
main();
//失败示例:
const p = new Promise(function(resolve,reject)=>{
reject("失败状态");
});
//await要放在async函数中
async function main(){
try{
let result = await p;
console.log(result);
}catch(e){
console.log(e);
}
}
main();
现在撰写两个代码示例,可作为以后的开发模板
示例一:不使用await,只利用promise
const getVmMachine = () => {
const listtt = userDashboardStore.listVms();
listtt
.then((result) => {
vmLists.value = result;
}) //这里使用catch捕获错误,不用两个函数参数的形式
.catch((error) => {
console.error(error);
});
console.log('------')
//这里没使用await,所以console.log('------')这行代码可能会先于.then执行,这就是异步的坏处
};
示例二:使用await
const handleSubmit = async () => {
const validateRet = await formRef.value.validate();
//这里使用了await,只有const validateRet = await formRef.value.validate();这行代码执行完毕
//才会继续执行下面的代码,有效的解决了异步时可能出现的问题
if (validateRet !== undefined) {
return false;
}
try {
const res = await updatePasswordApi();
if (res.data === "1") {
//....
} else {
//....
}
} catch (error) {
console.error(error);
}
};
异步函数的调用
在JavaScript中,当你调用一个标记为 async 的函数时,这个函数将返回一个Promise。因此对于已经定义的异步函数,如果你想调用,有两种方法:
async function getUser() {
try {
const response = await axios.get('/user?ID=12345');
console.log(response);
} catch (error) {
console.error(error);
}
调用方式一:
//如果在另一个 async 函数内部调用 getUser(),
//你可以使用 await 来等待 getUser() 的执行完成,
//这样可以直接得到函数内部处理的结果,而不是一个 Promise 对象。
async function callUser() {
const res = await getUser();
}
调用方式二:
//如果在非异步函数中调用 getUser(),
//你不能直接使用 await,因为 await 只能在 async 函数内部使用。
//但你可以使用 .then() 和 .catch() 来处理 Promise
getUser().then(() => {
console.log('Completed');
}).catch((error) => {
console.error('Error:', error);
});