昨天向大家介绍了 vue 的一部分新语法,今天我将把剩下我所知道的新语法都写到这里
多行字符串
let str=”
<div>
<h1> 我是 jim</h1>
</div>
” // 写多行字符串会语法报错
//es6
let str=`
<div>
<h1> 我是 jim</h1>
</div>
` // 正确,并能按格式输出
这个书写方式很像 python 的三引号,不知道小伙伴们想起来了没。
this
// 普通函数
document.onclick=function fn(){
console.log(this)
} // 点击页面出现:#document this 指向调用者
// 对象
var obj={
x:1,
y:2,
sum(){
console.log(this) //{x: 1, y: 2, sum: ƒ}
return this.x+this.y // 不加 this 会找不到 x,y,可见 this 和上面作用相同
}
}
console.log(obj.sum())
// 箭头函数
document.onclick=()=>console.log(this) //Window
为普通函数固定 this, 如第一个例子
let obj={
name:’jim’
}
fn=fn.bind(obj)
fn() //{name: “jim”} this 指向了 obj
this 的指向对于普通函数指向了调用它的对象,对于箭头函数指向了所处大环境,对于对象指向其本身
Promise: 同步操作解决异步之痛
#对于以前我们一个页面要处理好几个 ajax 请求可能需要按照步骤一步步来操作,而现在,我们有了 Promise, 看看具体怎么操作吧
let p=new Promise({
(resolve,reject)=>{
$.ajax({
url:request url,
success(data){
resolve(data)
},
error(err){
reject(err)
}
})
}
})
p.then((data)=>{},(err)=>{}) //then 用来最后处理数据
Promise.all([
$.ajax(),
$.ajax(),
$.ajax(),
]).then(data=>{},err=>{}) // 批次处理,其 data 是一个数据数组,有需求可以通过解构然后处理
async/await
async function fn(){
console.log(‘1’)
let v=await 2 // 后面跟同步操作是不等待的
console.log(v)
}
fn() //1\n2
async function fn(){
console.log(‘1’)
let v=await $.ajax(‘a.txt’) //$.ajax 就是一个 Promise
console.log(v) // 输出 ajax 获取数据
}
fn()
我们可以通过 async/await+Promise 做异步处理, 减少传统的开发难度。