ES6语法基本学习

Js声明变量:

var name = "未来学习";  //给自定义变量
document.write(name);   //打印在页面
console.log(name);      //使用 console.log() 写入到浏览器的控制台

以上是最基本语法
以下变量ES6语法 , Let 和 var 本质一样的,但Let只能在块级有效。

let name = "未来学习";
console.log(name);    //打印浏览器控制台

function word(){
   let webname = "未来学习是个好网站";
   console.log(webname);   //Let在块级有效
}

word();  //输出方法下的consle.log
console.log(webname); //无法输出。

上面代码不明白还就可以简化理解:

if(true){
   let webname = "未来学习是个好网站";
}
console.log(webname); //无法输出,所在只能在块级有效

声明变量还有const方法,只能保值不能修改。

const name = '未来学习';
name = '我想把'未来学习改未来世界';
console.log(name); //报错 第二个name修改后无法读取

模板字符串:

var name = "未来学习";
console.log(name + '是个好网站'); //var写法

let name = "未来学习";
let content = "而且初级免费学习的。";
console.log(`${name}是个好网站` + `${content}`);  //es6写法,注意单引号

方法简写:

var name = '未来学习是一个方法';
var app ={
   name:name
}    
console.log(app.name); //普通写法

let name = '未来学习是一个方法';
let app ={
   name
}    
console.log(app.name); //ES6简写


let name = '未来学习是一个方法';
let app ={
   name,
   go:function(){
       console.log(`${name},所以尽快学习!`);
   }
}    
app.go();

//更简写

let name = '未来学习是一个方法';
let app ={
   name,
   go(){
       console.log(`${name},所以尽快学习!`);
   }
}    
app.go(); //把function去掉

箭头函数:

function go(){
  let name ="加快学习速度!";
  console.log(name);
}
go(); //普通function写法

go=()=>{
  let name ="加快学习速度!";
  console.log(name);
}
go(); //function替换()=>

回调函数(获取异步数据)

先思考这个打印出顺序:

console.log('模拟A');
setTimeout(function(){
  console.log('模拟B');
},1000);
console.log('模拟C');

//最后得出ACB 异步处理就是 没有工作的优先执行,有工作的往后拖延排队

那么在回调函数里获取异步:

function go(back){
   setTimeout(function(){
       let name = '我得10秒后才能执行';
       back(name);  
   },1000)
}
go(function(date){
    console.log(date);  
})

ES6简写:

go=(back)=>{
   setTimeout(function(){
       let name = '我得10秒后才能执行';
       back(name);  
   },1000)
}

go((date)=>{
    console.log(date);  
})

Promise方法处理异步:

let ok = new Promise((res,req)=>{   //res成功回调  req失败回调
  setTimeout(function(){
     let name = '我得10秒后才能执行';
     res(name);
   },1000)
});

ok.then((date) => {
   console.log(date);
});

async 和 await:

async是让方法变成异步; await是让等待异步方法完成; 普通函数:

go=()=>{
  return '普通数据';
}
console.log(go());

不适用setTimeout情况下,让方法变成异步:

async function go(){
  return '普通数据';
}
console.log(go()); //返回 Promise对象 {"普通数据"}

如何返回不是Promise对象,直接拿到普通数据:

async function go(){
  return '普通数据';
}

go().then((date)=>{
  console.log(date);  //输出普通数据
})

await使用:

async function go(){
  return '普通数据';
}

async function text(){
   console.log(await go());  //普通数据
}
text();

观察排序(堵塞):

async function go(){
  console.log(2);  
  return '普通数据';
}

async function text(){
   console.log(1);  
   console.log(await go());  
   console.log(3);  
}
text();
// 1 2 普通数据 3

async 定义方法返回Promise对象:

//pormise方法:

function go(){
  return new Promise((res,req)=>{
     setTimeout(()=>{
        let name = '未来学习';
        res(name);
     })
  })
}
go().then((date)=>{
  console.log(date);
})

//async await方法
function go(){
  return new Promise((res,req)=>{
     setTimeout(()=>{
        let name = '全端观察';
        res(name);
     })
  })
}

async function test(){
  let date = await go();
  console.log(date);
}

test();

 


© 2020 www.f-learn.cn All Rights Reserved