JS笔记
没有天赋全靠手打
一边学习,一边分享
展开
-
Promise初识和async,await的关系
async用于定义一个异步函数,它会返回一个Promise对象,而await用于等待Promise对象的状态变化。Promise有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败),它们分别表示异步操作的不同阶段。因此,可以说promise是异步编程的基础,而async和await则是Promise的进一步封装,使得异步编程更加方便和易用。promise和async,await是JavaScript中的两个重要概念,它们之间有着紧密的关系。原创 2023-06-10 22:34:06 · 278 阅读 · 0 评论 -
什么是作用域和作用域链
作用域对象可以被调用的区域,定义一个变量,变量有效的作用域a(){上诉str的作用域是a()内部,str2是fun1()内部作用域链调用某个函数或属性时,先在当前作用域寻找,如果找不到则向上父级寻找,直到找到全局作用域为止,这个链式查找的过程,就是作用域链。https。...原创 2022-07-25 16:21:00 · 110 阅读 · 0 评论 -
js中写一个函数,第一秒打印1,第二秒打印2
js中写一个函数,第一秒打印1,第二秒打印21、用let块级作用域for(let i = 0;i<5;i++){ setTimeout(()=>{ console.log(i); },1000*i)}2、闭包for(var i = 0; i < 5; i++){ (function(i){ setTimeout(()=>{ console.log(i); },1000*i)原创 2022-04-14 17:58:22 · 1222 阅读 · 0 评论 -
JS中&& 和 || 的优先级与运算
JS中&& 和 || 的优先级与运算在javascript中,会被当成 false 处理的值有 :"",false,0,null,undefined,NaN,其余都为true,(字符串 "false"会被当做true处理)&& 和 || 的计算原则a || b:如果a是true,返回a。如果a是false,直接返回b。a && b:如果a是true,那么返回b。如果a是false,返回a。来个例子 var a = new Object(), b=0原创 2022-04-08 15:26:35 · 2751 阅读 · 0 评论 -
JS获取两个数组的交集
JS获取两个数组的交集const nums1 = [1, 2, 2, 1]const nums2 = [2, 3, 4, 5]const set = new Set()const res = []for (const num of nums1) { if (nums2.includes(num)) { set.add(num) }}res = [...set]原创 2022-04-06 23:02:33 · 549 阅读 · 0 评论 -
JS ES6中export 和 import详解
JS ES6中export 和 import详解文章目录JS ES6中export 和 import详解前言一、export default使用 export default使用 export前言在学习Vue的时候,import/export是必不可少的。假如我们写了一个单页面组件A,而在另一个文件B里面需要用到它,这时候就要用ES6的 import/export语法,在文件A 中定义输出接口 export,在文件B中引入 import 把引用的组件用起来,一、export default在原创 2022-03-29 15:56:31 · 1445 阅读 · 0 评论 -
js中的一些简洁语句
js中的一些简洁语句1.通过条件判断给变量赋值布尔值的正确姿势if(a === 'a'){ b = true} else { b = false}// 改成b = a === 'a'2.在if中判断数组长度不为零的正确姿势if(arr.length !== 0){}//改成if(arr.length){}3.使用includes简化if判断if(a === 1 || a === 2 || a === 3 || a === 4){}//改成 => 巧用数组方法i原创 2022-02-18 10:11:24 · 157 阅读 · 0 评论 -
获取URL参数并转换成对象
获取URL参数并转换成对象在日常项目中 我们可能会需要获取网址URL的参数,在此写了一个方法记录一下操作// 获取URL参数并转换成对象function getQueryParams(){ const result = {} // 存参数得对象 const urlString = window.location.search; // 拿到url 参数 "格式 ?name=home&age=20" // 利用正则表达式 let reg = /[?&][^?原创 2022-01-11 16:15:50 · 2316 阅读 · 0 评论 -
前端处理二进制流文件
前端处理二进制流上次写过一个详细处理方法,可以点击上方链接查看最近开发得时候也遇到了一个新得处理方法,在此记录一下上次得简化版 (可结合上方链接学习) const downURL = window.URL.createObjectURL(new Blob([data])); // data 为获取到的二进制数据 const listNode = document.createElement("a"); // 这里注意 : 非同源a标签的download去命名没有用 listNode.d.原创 2021-12-30 10:26:56 · 1664 阅读 · 0 评论 -
一些代码块的简洁方式
一些代码块的简洁方式每天敲敲敲,谁不想知道代码高效、简洁、易懂。在平时项目中也记录了一些简洁的代码块,在此总结一下。通过条件判断给变量赋值布尔值// 一般if(a === 'a'){ b = true }else{ b = false}// 简洁b = a === 'a'在if中判断数组长度不为零// 一般if(arr.length !== 0){}// 简洁if(arr.length){}字符串拼接使用${}let person = { name:'xiaomin原创 2021-09-29 17:01:50 · 76 阅读 · 0 评论 -
textarea 如何动态增加高度
textarea 如何动态增加高度HTML代码<textarea name="title" id="title" rows="10" class="feedbk-textarea" placeholder="测试动态高度" autofocus="autofocus"></textarea>CSS代码 .feedbk-textarea{ margin: 0 10px 0 0!important; background-color: tr原创 2021-09-07 15:59:10 · 360 阅读 · 0 评论 -
JSON.parse() 与 JSON.stringify() 的区别
JSON.parse() 与 JSON.stringify() 的区别两个方法的用途是有差别的,针对的参照物也不一样。JSON.parse() 是从一个字符串中解析出 json (键值对)JSON.stringify() 是从一个对象中解析出字符串 // 定义一个对象 var object = {name:"hahhahaha"}; // 定义一个字符串 var string = '{"name":"hahahhahaha"}'; // JSON.stringify console.log原创 2021-09-02 11:30:06 · 106 阅读 · 0 评论 -
判断JS数据类型的方法
判断JS数据类型的方法在 ECMAScript 规范中,一共定义了7种数据类型,分别分为 原始(基本)类型 和 引用类型 两大类,原始(基本)类型 :String Number Boolean Undefined Null Symbol引用类型 : ObjectSymbol : 是 ES6引入的一种新的原始数据类型Symbol,表示独一无二的值。首先我们定义几个变量备用:...原创 2021-07-27 16:21:59 · 140 阅读 · 0 评论 -
前端处理二进制文件流
前端处理二进制文件流这个需求其实做了很久了,但是今天突然被人问起,自己却不知所措,表达不完整,所以想重新梳理一下。问题叙述 : 有时候需要点击一个 按钮 ,实现文件下载 ,而后端返回的数据为二进制流数据。产生原因前端页面的编码格式和服务端编码格式不同,正如此时,服务端返回的是 blob格式的数据,而我们使用的是 非 blob格式去解析,所以产生了乱码。首先接收二进制流要想处理这段乱码的数据,首先得先接收,正常情况下axios 不会处理二进制数据,即会去接收但是不会去处理,需要在请求得适合设置原创 2021-07-26 16:16:42 · 9327 阅读 · 4 评论 -
JS处理 数组扁平化
问问原创 2021-07-21 11:24:50 · 116 阅读 · 0 评论 -
DOMContentLoaded
DOMContentLoadedMDN : 当初始的HTML 文档被完全加载和解析完成之后, DOMContentLoaded 事件被触发,而无需等待样式表、图像和子框架的完全加载DOM 文档加载流程 :解析HTML 结构。加载外部脚本和样式表文件。解析并执行脚本代码。构造html DOM模型。 // DOMContentLoaded 相当于 jQuery 中的ready加载图片等外部文件。页面加载完成。// 示例代码// 打印按钮索引<!DOCTYPE html&g原创 2021-07-14 10:37:59 · 614 阅读 · 0 评论 -
手写封装图片上传
编码背景为了方便由一张默认图和 上传的图片组成默认图片不能删除(不需要可以从代码里删除这个版块)技术 : vue js直接上代码吧<template> <div id="app"> <div class="upload"> <input type="file" id="file" multiple @change="upload" /> </div> <ul class="vi原创 2021-07-13 11:13:24 · 210 阅读 · 0 评论 -
JS中 new FormData() - FormData对象的作用及用法
JS中 new FormData() - FormData对象的作用及用法js FormData 方法介绍formData是ajax2.0(XMLHttpRequest Level2)新提出的接口,利用FormData对象可以将form表单元素的name与value进行组合,实现表单数据的序列化,从而介绍表单元素的拼接,提高工作效率首先我们需要先创建一下 这个 FormData 对象var formData = new FormData(); // 空的实例对象// FormData() 实例的原创 2021-06-08 18:25:11 · 9015 阅读 · 0 评论 -
JSON.parse() 和 JSON.stringify()
JSON.parse() 和 JSON.stringify()parse 用于从 一个字符串中解析出 json 对象PS : 单引号写在 {} 外,每个属性必须用双引号,否则会抛出异常。var str = '{"name":"xiangxiaoling","age":"12"}';JSON.parse(str) 结果 stringify() 用于从一个对象解析出字符串var newstr = {a:1,b:2};JSON.stringify(newstr) // {"a":1,"b"原创 2021-04-30 10:47:08 · 94 阅读 · 1 评论 -
JS中常见的去重方式
JS中常见的数组去重方式一、for 循环嵌套,利用 splice 去重(此方法去不了 NaN 和 {})此方法是以前在 es5 中,常用、比较实用的方法之一function newArr(arr){ for(var i = 0;i<arr.length;i++){ for(var j = i+1;j<arr.length;j++){ if(arr[i] === arr[j]){ arr.splice(j,1);原创 2021-04-29 10:05:22 · 580 阅读 · 1 评论 -
如何在JS文件中引用另一个JS文件
如何在JS文中引用另一个JS文件通常如果一个页面JS代码太多,首先肯定会想到像 CSS 一样 单独写一个文件,然后引用到HTML页面中。如果我们又需要再JS代码中引用另一个JS文件,那我们应该怎么做呢?今早做项目遇到了这个问题,所以总结了一点答案(以JQuery 为例)第一种方法:1.html 文件代码:<body> <input type="button" name="" id="bt" value="click"></body>1.js 文件代码原创 2021-04-28 17:22:51 · 16874 阅读 · 0 评论 -
JS中 Date日期多种格式转换
JS中 Date日期多种格式转换时间(Date)转时间戳(Timestamp) var time = new Date() // Date格式 var Timestamp1 = time.valueOf() // Date格式转时间戳 var Timestamp2 = time.getTime() // Date格式转时间戳 var Timestamp3= Number(time) // Date格式转时间戳 var Timestamp4= Date.parse(time) // Date原创 2021-04-25 15:00:58 · 2340 阅读 · 0 评论 -
JS - 初级算法(删除排序数组中的重复项)
JS - 初级算法(删除排序数组中的重复项)题目:给你一个有序数组 nums ,请你 原地 删除重复出现的元素,使每个元素 只出现一次 ,返回删除后数组的新长度。不要使用额外的数组空间,你必须在 原地 修改输入数组 并在使用 O(1) 额外空间的条件下完成。示例:输入: nums = [1,1,2,3,4]输出: 4,nums = [1,2,3,4]解释: 函数应该返回新的长度 4 ,并且原数组 nums 考虑数组中超出新长度后面的元素。一点思路:首先需要保证数组不为空遍历数组且去原创 2021-04-09 16:57:48 · 222 阅读 · 0 评论 -
JS原型遵循的五大规则
JS原型遵循的五大规则所有的引用类型(数组、对象、函数)都具有对象特性,即可自由扩展属性(除 null 以外)所有的引用类型(数组、对象、函数),都有一个 proto (隐式原型)属性;属性值是一个普通对象所有的函数都有一个 prototype (显示原型)属性,属性值是一个普通对象所有的引用类型(数组、对象、函数),proto 属性指向它的构造函数 “prototype” 属性值function foo(name,age) { this.name = name this.ag原创 2021-04-01 14:49:02 · 118 阅读 · 0 评论 -
改变函数内部this指向,call、apply、bind方法的异同
改变函数内部this指向,call、apply、bind方法的异同目录改变函数内部this指向,call、apply、bind方法的异同1、谁绑定事件this就指向谁2、方法名调用使用 . ,点前面是谁就指向谁3、没有点.,非严格情况下,指向Window,严格情况下,指向undefined4、在构造函数中,this指向当前创建的实例;回调函数的this一般为Window;箭头函数的this是上下文,不能被修改。call、apply、bind方法的异同弄清这个问题之前,我们首先原创 2021-03-15 11:11:09 · 132 阅读 · 0 评论 -
常见数组array(API)汇总
常见数组array(API)汇总在这里我们分两类进行讲解。改变原数组 和 不改变原数组1、不改变原数组的数组API1.1、将数组转化为字符串( String)var a = [1,2,3];var str = String(a)console.log(str,'atr'); // 1,2,3console.log(a,'a'); // [1,2,3]1.2、把数组的所有元素放入一个字符串(join)var a = [1,2,3];var str = a.join() // 默认分原创 2021-03-12 16:58:27 · 392 阅读 · 0 评论 -
JavaScript交换数组元素位置的几种方式
JavaScript交换数组元素位置的几种方式交换元素在开发或者做算法时,会经常使用,总结了一下几种方式1、运用第三方变量这是最基础的一种方式,创建一个变量作为中转//需要交换的两个变量let [a,b] = [1,3]//创建的中转变量let temp = []temp = aa = b b = tempconsole.log(a,b) // 3,12、splice()方法splice()方法用于插入、删除、替换数组元素,会返回被删除的元素array.splice(ind原创 2021-03-11 17:31:41 · 21675 阅读 · 6 评论 -
ES6中 变量的解构赋值
ES6中 变量的解构赋值1、数组的解构赋值1.1、同时赋值多个变量以前let a = 1;let b = 2;let c = 3;let d = 4;运用es6let [a,b,c,d] = [1,2,3,4]console.log(a,b,c,d) //1 2 3 41.2、解构嵌套数组只要等号两边的层级结构相同,就可以拿到对应位置的值const ary = [1,2,[3,4,5,[6,7]]];const [a,b,[c,d,e,[f,g]]] = aryco原创 2021-03-11 17:04:11 · 418 阅读 · 1 评论 -
JS数组中的map()、filter()以及reduce()的基本使用
JS数组中的map()、filter()以及reduce()的基本使用结论: 如果你需要一个数据,请使用—> map()方法如果你需要一个结果,请使用—> reduce()方法如果你需要过滤一个结果,请使用—> filter()方法map()对数组的每个元素都遍历一次,同时返回一个新的值,注:返回的数据长度和原始数据长度是一致的// map() 方法的使用let nums =[10,20,30,40,50]let newnums = nums.map(function(n)原创 2021-03-10 10:04:17 · 5634 阅读 · 7 评论 -
ES6中promise和async的区别
ES6中Promise和Promise的对比什么叫Async/Await?1、Async/Await 是写异步代码的新方式,使用的方式看起来像同步,以前的方法有回调函数和Promise2、Async/Await 是基于Promise实现的,不同于普通的回调函数3、Async/Await 和Promise一样,是非阻塞的。什么叫Promise?1、Promise 是异步编程的一种解决方案,是一个构造函数,自身有all、reject、resolve方法,原型上有then、catch等方法。特点:1原创 2021-03-03 14:45:31 · 1574 阅读 · 1 评论 -
setTimeout 和 setInterVal 的区别
setTimeout 和 setInterVal 的区别setTimeout 定时:仅执行一次,和window.clearTimeout一起使用setTimeout(function(){//语句},1000)setInterVal 间隔: 从载入页面后每隔指定时间执行一次,和window.clearInterval一起使用setInterVal(function(){//语句},1000)注意:setTimeout 只执行语句一次setInterval 在执行完一次代码之后,经过设原创 2021-03-02 10:01:45 · 99 阅读 · 0 评论 -
es6 生成器
生成器函数what generator(生成器)?生成器 就是通过构造函数generator创建出来的对象,既是一个迭代器,又是一个可迭代的对象。generator函数与普通函数的区别:1、function 和函数名之间有一个 * 号2、函数体内部使用了 yield 表达式创建生成器对象//调用 生成器函数 和 调用普通函数不同,调用生成器函数是返回一个 生成器对象(可迭代对象)function * generator(){ yield 'hello' yield '原创 2021-02-26 16:26:44 · 166 阅读 · 0 评论 -
for in 和 for of 的区别
for in 和 for of 的区别for-in 遍历的是数组的索引(键名),而for of 遍历的是数组元素值(for-in 一般用来遍历对象,for-of一般用来遍历数组)for-in 得到的是对象的key 或者 数组,字符串的下标。for-of 得到的是对象的value或数组、字符串的值,另外还可以用于遍历Map和Setfor-in 循环可以遍历对象的可枚举属性列表(包括[Prototype]链,使用for-in遍历对象无法直接获取到值,但是for of 能取到值(前提对象本身定义原创 2021-02-25 17:49:06 · 1076 阅读 · 0 评论 -
Js中常见的error错误类型
Js中常见的error错误类型1.SyntaxError:语法错误// 1).变量名不符合规范*var 4 //Uncaught SyntaxError: Unexpected number// 2).给关键字赋值*function = 5 //Uncaught SyntaxError: Unexpected token = // 3).for if 等语句缺少() {}*if(1){for(var i=0;i<10;i++){} //Uncaught SyntaxErr原创 2021-02-25 15:27:20 · 1612 阅读 · 0 评论