11.js知识学习②

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第11天，点击查看活动详情

6.模块化开发：（基础的：使用闭包的，放入一个js，然后其他页面引用，然后使用）

● js里： 如：

var A=(function(){

    const obj={}

    let name='向';

    obj.name=name;

    return obj

   })()

   console.log(A.name)

● es6:

const name='1',
    const cpn={
    name:'1';
} 
export default {cpn,name} (导出）//export default cpn
//export  {name,cpn}
<script type='module'>(js添加type，使得进行模块开发)
import  cpn_1  from  '文件地址'（导入）
//import  {name,cpn} from  '文件地址'  => （import  * as  cpn_1  from  '文件地址'）可以直接导入所有方法，不用写多个
</script>
//export default 导出时，import导入可以自己命名

---

7.Promise:

Promise是异步编程的一种解决方案

resolve和reject本身也是函数

1.

new Promise((resolve,reject)=>{
  setTimeout(()=>{
    resolve('第一')
    // reject('第二')
  },1000)
}).then(
  (res) => {
    console.log('成功',res)
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
         resolve('第三')
      },2000)
    })
  },  // 成功
  (err) => {
    console.log('失败',err)
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
         reject('第四')
      },2000)
    })
  }
).then(
  (res)=>{console.log('成功',res)},
  (err)=>{console.log('失败',err)}
)

2.

最后调用catch监听 整个 Promise 是否调用 reject(报错)

new Promise((resolve,reject)=>{
  setTimeout(()=>{
    resolve('第一')
    // reject('第二')
  },1000)
}).then(
  (res) => {
    console.log('成功',res)
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        //  resolve('第三')
          reject('第四')
      },2000)
    })
  },  
).then(
  (res)=>{console.log('成功',res)},
 
).catch((err)=>{
    console.log('失败',err)
})

异步操作时使用

• Promise状态：
• panding:等待状态；
• fulfill:满足状态，我们会主动调用 resolve，并且回调到 .then()
• reject:拒绝状态，我们会主动调用 reject ,并且回调到 .catch()

Promise链式调用：

new Promise((resolve,reject)=>{
  setTimeout(()=>{
    resolve('h')
  })
}).then(data=>{
  console.log(data)//h
  return Promise.resolve(data+'1')
}).then(data=>{
  console.log(data)//h1
  return Promise.resolve(data+'2')
}).then(data=>{
  console.log(data)//h12
  return Promise.reject(data+'0')
}).catch(data=>{
  console.log(data)//h120
})

Promise的all使用：

Promise.all([
    new Promise((resolve,reject)=>{
      setTimeout(()=>{
        resolve({success:true});
      },1000)
    }),
    new Promise((resolve,reject)=>{
      setTimeout(()=>{
        resolve({success:false});
      },2000)
    })
]).then(res=>{
  // res[0]//第一个Promise的返回
  // res[1]//第二个Promise的返回
  console.log(res)
})

---

8.async和await

async function ce(){
  return 'a'
}
ce() 返回的是一个Promise对象，可以ce().then()
await必须在 async 定义的方法里面，它可以等待async（Promise）的完成
function zhiB(z){
  return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        resolve(z)
      },3000)
  })
}
async function zhi_bian(n){
    var zhi1=await zhiB(n)
    console.log(zhi1)//三秒后才会打印出来
}
zhi_bian（）

---

9.对象和数组的解剖：

• 对象：

const xsw_obj={
  xsw_name:'aaa',
  xsw_age:'12'
}
const {xsw_age,xsw_name}= xsw_obj
//这样可以直接在外面使用对象的值，解剖时，{}=xsw_obj,里面的名称要与对象的一一致
console.log(xsw_name,xsw_age)//aaa,12

• 数组：

const xsw_array=['aaa','bbb'];
  const [xsw_name1,xsw_name2]=xsw_array
  //这样可以直接在外面使用对数组的值，不需要xsw_array[0],[]=xsw_array是和index对应的
  console.log(xsw_name1,xsw_name2)//aaa,bbb