每天进步一点点

2022.3

1.promise

• promise不确定接口返回时间的情况下，控制接口输出的顺序。
• 在Promise中，使用then()控制执行顺序，当Promise中执行了resolve()，才会继续执行then里面的。

new Promise((resolve, reject) => {
  let url = `https://api.apiopen.top/singlePoetry`;
  this.$axios.get(url).then((res) => {
    setTimeout(() => { //模拟耗时操作
      console.log(res, "耗时返回的res");
      resolve("success");
    }, 1000);
  })
}).then(()=>{   //上一个接口成功resolve之后执行then()
  let url2 = `https://api.apiopen.top/getJoke?page=1&count=2&type=video`;
  this.$axios.get(url2).then((res2) => {
    console.log(res2, "res2------");
  })
})

2.async / await

• awiat可以说是promise的改进方案，可以让异步执行的代码看起来同步化，解决了promise的回调炼狱问题。

前面添加了async的函数在执行后都会自动返回一个Promise对象。

function fn() {
    return 'leo';
}
console.log(fn());   // 'leo'

添加async后

async function fn() {
    return 'leo';   // Promise.resolve('leo')
}
console.log(fn());   // Promise对象

async函数中使用await，那么await处的代码就会变成同步的，即只有等await后面的Promise执行完成得到结果才会继续往下执行，await意为等待

function timeout() {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log(1);
            resolve();
        }, 1000);
    })
}
 
async function fn() {
    await timeout();   // 执行完成才继续往下执行
    console.log(2);
}
 
fn();   // 不加async和await是 2、1，加了是 1、2

若是vue项目，在methods中分别封装异步请求接口为单独方法，里面返回Promise对象，注意异步请求成功后记得resolve()

step1() {
  return new Promise((resolve, reject) => {
    let url = `https://api.apiopen.top/singlePoetry`;
    this.$axios.get(url).then((res) => {
      setTimeout(() => {
        //模拟耗时操作
        console.log(res, "耗时返回的res，使用async await");
        resolve("success");
      }, 1000);
    });
  });
}
 
step2() {
  return new Promise((resolve, reject) => {
    let url2 = `https://api.apiopen.top/getJoke?page=1&count=2&type=video`;
    this.$axios.get(url2).then((res2) => {
      console.log(res2, "res2------");
      resolve("success")
    });
  });
}

使用async await，在methods中添加asyncFun方法，await接收到resolve()之后，继续往下执行，否则会一直阻塞下面代码的执行（如reject或者请求error的情况）。

async asyncFun(){
  await this.step1();
  await this.step2();//如有多个，继续执行await fun()
}

满足异步请求按顺序执行的需求，若有更多个，继续将下个请求封装成一个单独方法，里面返回Promise对象，请求成功需执行resolve() ，然后在async方法里面再加一个await，调用方法。在实际的工作中，视情况使用promise、async await，当然，也可以直接在异步请求成功then()里面继续发送下一个请求，这也不失为一个好方法。

3.var、let、const三者的区别

块作用域由 { } 包括，if语句和 for语句里面的{ }也属于块作用域。

• var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。
• let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。
• const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。

<script type="text/javascript">
    // 块作用域
    {
        var a = 1;
        let b = 2;
        const c = 3;
        // c = 4; // 报错
        // const cc; // 报错
        console.log(a); // 1
        console.log(b); // 2
        console.log(c); // 3
    }
    console.log(a); // 1
    // console.log(b); // 报错
    // console.log(c); // 报错
 
    // 函数作用域
    (function A() {
        var d = 5;
        let e = 6;
        const f = 7;
        console.log(d); // 5
        console.log(e); // 6  
        console.log(f); // 7 
    })();
    // console.log(d); // 报错
    // console.log(e); // 报错
    // console.log(f); // 报错
</script>

4.闭包

闭包就是能够读取其他函数内部变量的函数，说白了闭包就是个函数，只不过是处于其他函数内部而已。

function funA(){
  var a = 10;  // funA的活动对象之中;
  return function(){   //匿名函数的活动对象;
        alert(a);
  }
}
var b = funA();
b();  //10

5.节流防抖

节流防抖

6.get和post区别

1.HTTP 的请求报文结构:

6.三目表达式

👆🏻：根据item项有没有info值来渲染徽标—>即当item.info存在的话渲染item.info的值，如果不存在的话渲染空字符串，info就不会出现数字徽标。
（item.info=0的时候也不会渲染徽标）

7.基于vue的国际化i18n

(1)安装包

npm install vue-i18n

(2)引入插件

/* main.js */
import vue from 'vue'
import vueI18n from 'vue-i18n'
Vue.use(VueI18n) 

(3)注册实例

VueI18n已被导入并注册使用，现给它new一个VueI18n,传入一个对象，这个对象包含两个属性：locale和message。

/* main.js */
const i18n = new VueI18n({
	locale:'zh',  //当前语言
	messages:{    //定义的是每个语言具体的内容
		en:{
			loginTxt:'login',
			change:'change'
		},
		zh:{
			loginTxt:'登陆',
			change:'切换'
		}
	}
})

//将i18n挂载到vue上
new Vue({
	router,
	store,
	i18n,
	render:h => h(App)
}).$mount('#app')

(4)使用

//模版中
{{$t('loginTxt')}}

//js中
$t('loginTxt')

(5)切换语言

export default {
	methods:{
		handleChange(){
			this.$i18n.locale = 'en'
		}
	}
}

(6)项目实战

• 形成各个语言的js文件，集合在lang文件夹里。
  
  每个语言js文件都用export default{ }暴露出去。

• 在lang文件夹里面新增一个index.js
  

• 在main.js导入并挂载i18n
  

8.理解 var a = b || c

在js中，这相当于一个赋值语句，如果b的值大于0或为true，那么就把b的值赋给a，否在就把c的值赋给a

布尔值，javascript中以下值👇🏻会被转换为false

false 　　undefined 　　null 　　0 　　-0 　　NaN 　　“” 　　‘’

202205

1.绝对路径和相对路径

绝对路径：指目录下的绝对位置，可直接到达目标位置，通常 从盘符开始 的路径
例如：
• 盘符开头：D:\day01\images\1.jpg

---

相对路径：由于是相对的，所以必须有一个基准作为参照物来说明
/ 基准所在的最顶级目录即根目录，根目录是相对于其他子目录来说的
./ 基准所在的当前目录
…/ 基准所在的当前目录的上一级目录（当前目录的父级目录）

2.闭包

闭包的实质是因为函数嵌套而形成的作用域链
比如说：函数 A 内部有一个函数 B，函数 B 可以访问到函数 A 中的变量，那么函数 B 就是闭包

用途：使用闭包主要是为了设计私有的方法和变量
优点：可以避免变量被全局变量污染
缺点：函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包
解决方法：在退出函数之前，将不使用的局部变量全部删除

3.HTTP、HTTPS区别

HTTP 的URL 以http:// 开头，而HTTPS 的URL 以https:// 开头
HTTP 是明文传输，HTTPS 通过 SSL\TLS 进行了加密
HTTP 的端口号是 80，HTTPS 是 443
HTTPS 需要到 CA 申请证书，一般免费证书很少，需要交费
HTTP 的连接很简单，是无状态的；
HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 HTTP 协议安全

4.5种for循环的差异

链接:
5种for循环的差异