work-notes（19）：JS 引用类型数据，明明输出可以看得到数据，为什么取值却为空，或者对值判断或操作时 undefined 找不到？

时间：2022-06-28

摘要

就是明明数组、对象等可以输出看得到数据，但取不到值；取值都是 undefined ；

因为这些都是引用类型数据，代码写的是在操作之后输出，但是实际上在操作之前进行输出，所以为空；

为什么能输出：
因为只是简单的 = （赋值），指向地址，数据可以输出，但是实际上输出的变量是没有存值的；

问题描述

今天写代码的时候发现了个大问题；

1、数组数据是通过封装的函数获取的；

2、log 输出数组 可以得到数据；

3、但在进行操作时却拿不到数据，
   比如说类型判断，或者 arr.includes(xxx)是否在数组内时，返回都是为 false；
   
整体使用vue2.0写的；

这个是我封装的函数，也有问题；

问题解析

1、首先说我封装的函数；

（1）封装的函数，里面 projectPageListzhx({}) 用到了 then() 是一个异步请求；

（2）我这里先声明了数组 proIds 接收，然后 return 出去；看似没毛病实际大得很；

（3）异步请求，实际上中间相当于一个 定时器（setTimeout类型），即后面代码 return 了，
	上面的请求还不一定执行完；（所以这个函数返回一个空置）
	
（4）所以 typeOf 输出为 undefined；

解决思路

1、通过深拷贝方式；
	（1）通过递归方式；
	（2）JSON.parse(JSON.stringify(obj))；
	（3）jQuery.extend() 函数；

2、多用 async await

这里重点讲 async await

1、使用 async await

这个函数执行，当声明了 proIds 空数组后，会等待 await 代码执行完毕；确保了 return 是有数据的；

使用后：

使用前：

2、取出数据

1、如果你直接 log 输出可以看见是一个 promise 对象；

2、如何取出很简单，在取出之前套一层 await 即可；虽然看似复杂但是能保证代码质量；
	也比处理异步操作简单多了；

直接输出为 promise 对象

解析获取直接数据，套一个 await在前面

后面的 includes 就能获取到数组内的数据，如果有就返回 ture了；
没加 async await 之前弄了很久都是 false 而且输出还显示有数据；

标注

1、用了 async await 就不用使用 then() 方法了；可返回去看我没用了；

总结

1、对于引用类型数据，当只是简单的浅拷贝 特别例如赋值（=）的方式时，可能导致取不到值；

2、异步请求时，相当于定时器执行，后面的代码可能都已经执行了，前面的还没有执行；
所以相当于在操作之前输出，导致输出找不到；