javascript高级知识三

标签： Javascript 分类： Javascript 创建时间：2021-09-01 02:55:43 更新时间：2023-10-20 11:23:27

1.文件下载

savePipeline(filejson).then(async res=>{
    if(res&&res.status==200){
        let filename=res.content.filename
        let response = await exportToFile(filename);
        response=JSON.stringify(response);
        const blob = new Blob([response], { type: 'application/json;charset=utf-8' });
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = [filename];
        a.click();
        window.URL.revokeObjectURL(url);
    }
});

参考文章:
1.前端文件下载的权限验证问题解决前端文件下载时的权限认证问题，一种是基于jwt实现权限验证，一种利用 HTML5 File API 实现权限验证。
2.vue实现文件下载
3.【JS】前端文件下载(无刷新)方法总结 1.利用form.submit直接向后端提交,后端返回文件流;2.利于iframe直接向后端提交,后端返回文件流;3.使用windows.open下载文件;4.解决“无法根据回调函数做交互”的问题：ajax提交，后端返回在线文件地址;5.解决“无法根据回调函数做交互”的问题：jquery-download 插件;6.利用Html5的download属性进行下载;7.利用Html5的Blob对象实现对文件流进行下载;7.新兴方案中的综合方案：file-saver;
4.h5实现下载（二）FileSaver.js 一个生成文件并下载的插件
5.Java文件下载的几种方式

2.对象深度合并

使用Object.assign() 进行的对象合并，是一个浅合并，后面的值会覆盖前面的值，比如对象下面还有子对象，那么就会一整个的都覆盖掉，忽略掉子对象。如何做到不忽略子对象进行合并呢？

// 将对象进行深度复制，合并
function mergeDeep(target, source)  {
    if (typeof target == "object" && typeof source == "object") {
        for (const key in source) {
            if (source[key] === null && (target[key] === undefined || target[key] === null)) {
                target[key] = null;
            } else if (source[key] instanceof Array) {
                if (!target[key]) target[key] = [];
                //concatenate arrays
                target[key] = target[key].concat(source[key]);
            } else if (typeof source[key] == "object") {
                if (!target[key]) target[key] = {};
                this.mergeDeep(target[key], source[key]);
            } else {
                target[key] = source[key];
            }
        }
    }
    return target;
}

参考文章:
1.javascript - 如何深度合并而不是浅合并？这里有很多的答案
2.如何动态合并两个JavaScript对象的属性？

3.文件上传

参考文章2写的比较好，内容比较多,也非常的丰富。主要的问题有下面的几个：

参考文章:
1.js实现文件切片上传，断点续传读取文件，文件唯一性，文件切割，h5上传一个（一片）文件
2.前端大文件上传这篇文章的内容比较多，从传统的文件上传，到大文件分割上传，再到断点续传都有设及到，还有上传进度和暂停，也有部分的代码展示。
3.Web Uploader WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。采用大文件分片并发上传，极大的提高了文件上传效率。
4.自定义input[type=”file”]的样式自定义文件选择按钮的样式，关键是:1.自定义与其中一个浏览器表现类似的样式，将其放在下层；2. 将浏览器本身的表现出来的样式“隐藏掉”， opacity: 0; 置于上层，这样我们点击的才是 input[type=”file”] 响应的事件；
5.纯 js 来实现大文件的分片上传这个其实挺简单的，就是把文件进行分块，然后进行了上传操作
6.如何在javascript中将formData对象转换为二进制？
7.前端本地文件操作与上传

1.文件内容被读出来了

我在使用的时候，发现了使用FormData进行数据传输的时候，浏览器会把其中的文件内容读出来。也就是显示其中的文件内容。比如我上传一个 .txt 文件，或者是将 .txt 文件的后缀改成 .d 也还是能读出其中的内容。本来我以为会是二进制的数据。

参考文章：
1.FormData和FileReader
2.利用FormData向后端传递二进制流文件 new FormData()就是将文件转成二进制流，它就是binary。向表单中追加属性值用append()方法
3.如何在javascript中将formData对象转换为二进制？
4.前端H5中JS用FileReader对象读取blob对象二进制数据，文件传输 1.通过input[type=”file”]标签获取本地文件File对象。2.通过FileReader的readAsArrayBuffer方法将File对象转换为ArrayBuffer。3.创建xhr对象，配置请求信息。除此之外，还写一个传输二进制字符串的ajax示例。

2.java文件接收

我大致的研究了java文件接收的情况
(1) 使用@RequestBody
也就是说，通过SpringBoot提供的@RequestBody进行转换，直接获取其中的参数。

(2) 使用request读取

(3) 使用MultipartHttpServletRequest
通过Spring框架提供的MultipartHttpServletRequest 将 request 请求转化为 MultipartHttpServletRequest，然后通过，getParameter获取除文件以为的其他参数。

MultipartHttpServletRequest params=((MultipartHttpServletRequest) request);  
// 获取文件列表
List<MultipartFile> files = ((MultipartHttpServletRequest) request)    
        .getFiles("file");   
String name=params.getParameter("name");  
System.out.println("name:"+name);  
String id=params.getParameter("id");  
System.out.println("id:"+id); 

//使用getFile方法获取文件，参数就是前端定义的name
MultipartFile multipartFile = multipartRequest.getFile("file_1");

//getOriginalFilename方法可以获取到文件名
String fileName = multipartFile.getOriginalFilename();
//构建缓冲流
BufferedInputStream bis = new BufferedInputStream(multipartFile.getInputStream());
BufferedOutputStream bos = new BufferedOutputStream(new FileOutputStream("D:/"+fileName));

int len = 0;
byte[] bytes = new byte[8*1024];

//写入磁盘
while ((len=bis.read(bytes)) != -1){
    bos.write(bytes,0,len);
}
bos.close();
bis.close();

参考文章:
1.大文件分片上传Java版简单实现这里使用了@RequestBody 进行了文件的接收，然后进行了转换
2.与文件上传到的三个类：FileItem类、ServletFileUpload 类、DiskFileItemFactory类 ServletFileUpload和DiskFileItemFactory是成对出现的，ServletFileUpload负责解析请求，而解析后的对象存放位置（内存还是临时文件形式）是通过，setFileItemFactory属性或者是构造函数来设定
3.multipart/form-data 文件上传表单中传递参数无法获取的原因!
4.request获取表单数据
5.使用RequestParam或HttpServletRequest获取上传的文件 MultipartHttpServletRequest mRequest = (MultipartHttpServletRequest) request; 将request转换为MultipartHttpServletRequest，可以获取其中的file参数以及其他的参数。
6.使用 Multipart 进行文件上传这个对于接收文件，保存文件以及获取除文件以为的参数也都有说明
7.SpringMVC的MultipartHttpServletRequest
8.如何用SpringBoot框架来接收multipart/form-data文件这个对于接收文件，保存文件以及获取除文件以为的参数也都有说明
9.JavaWeb文件上传这是比较传统的使用DiskFileItemFactory,ServletFileUpload 进行文件的解析和接收

3.解析multipart/form-data

像上面的接收文件的方法，基本上框架都已经做好了数据的解析和封装，但是如果要进行手动分割呢，如何做呢？

参考文章:
1.java - 解析Java中包含multipart/form-data请求主体的String
2.ava文件上传报文解析与实现

4.抓包

参考文章:
1.wireshark抓包新手使用教程这个讲的挺全的，按照操作就可以了。

5.循环删除对象数组中的值

关于对象数组，主要就是在一个数组中，各个元素都是一个独立的对象，例如：

1	var objArray=[Object,Object,Object];

使用for循环去删除上面的对象数组中的值，首先想到的是：

var c=objArray.length;
for(var i=0;i<c;i++){
  objArray.splice(i, 1);
}

这样运行之后，会发现并不能删除整个数组，为什么呢？实际上，再调用splice的时候，没删除一个元素，数组的长度就会减少一个，那么你固定的数组长度c，到最后数组里面已经没有编号为c的元素了。所以正确的做法:

//清空标注
let overlayArray=this.mainmap.getOverlays().getArray();
let overlayCount=overlayArray.length;
for(let i=0;i<overlayArray.length;i++) {
  let temp=overlayArray[i];
  this.mainmap.removeOverlay(temp);
  i--;
}

每循环一次，让for重新计算数组长度，每删除一个元素a，a后面的数组元素序号会减一，为了删除a元素后面的第一个元素，将循环遍量先减去一，然后再i++，指针就指向了a元素的后一位元素了。

6.密码强度认证

/**
 * 强密码：密码由数字、大小写字母、特殊符号中三种或以上混排
 * @type {RegExp}
 */
const PASSOWRD_REG_POWER =/^(?![A-Za-z]+$)(?![A-Z\d]+$)(?![A-Z\W]+$)(?![a-z\d]+$)(?![a-z\W]+$)(?![\d\W]+$)\S{8,20}$/

参考文章:
1.密码至少8位，包括数字、大小写字母和特殊字符三种及以上
2.elementui表单密码强度自定义验证

7.观察元素变动

 // 选择需要观察变动的节点
const targetNode = document.querySelector("#panoContainer");
console.log(targetNode);

// 观察器的配置（需要观察什么变动）
const config = { attributes: true, childList: true, subtree: true };

// 当观察到变动时执行的回调函数
const callback = function(mutationsList, observer) {
    let parent=document.querySelector(".bottom_left--eE530");
    console.log(parent);
    if(parent){
        // 停止观察
        observer.disconnect();
    }
};

// 创建一个观察器实例并传入回调函数
const observer = new MutationObserver(callback);
// 以上述配置开始观察目标节点
observer.observe(targetNode, config);

参考文章:
1.js监听页面元素是否变化这个代码示例写的挺好的。
2.MutationObserver
3.如何监听页面元素增加
4.js判断页面加载完毕方法主要是onload方法，document.onreadystatechange
5.如何监听页面 DOM 变动并高效响应从 DOM 变动事件监听说起,再聊聊 JavaScript 中的截流／节流函数,这篇文章对于优化这块做的还是不错的

往期推荐

文章目录

微信公众号

广告位

诚心邀请广大金主爸爸洽谈合作

每日一省

isNaN 和 Number.isNaN 函数的区别？

1.函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，不会进行数据类型的转换，这种方法对于 NaN 的判断更为准确。

每日二省

为什么0.1+0.2 ! == 0.3，如何让其相等?

一个直接的解决方法就是设置一个误差范围，通常称为“机器精度”。对JavaScript来说，这个值通常为2-52，在ES6中，提供了Number.EPSILON属性，而它的值就是2-52，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，就可以判断为0.1+0.2 ===0.3。

每日三省

== 操作符的强制类型转换规则？

1.首先会判断两者类型是否**相同，**相同的话就比较两者的大小。

2.类型不相同的话，就会进行类型转换。

3.会先判断是否在对比 null 和 undefined，是的话就会返回 true。

4.判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断。

每日英语

Happiness is time precipitation, smile is the lonely sad.

幸福是年华的沉淀，微笑是寂寞的悲伤。