JavaScript
Milk595
努力做自己喜欢做的事
展开
-
【JS实战】base64转换为file文件类型(上传头像为例子)
base64转换为file类型点击头像,选择文件点击选取时,获取base64文件这里使用了Vue-ImgCut插件(后续博客介绍)代码讲解function base64toFile(dataurl, filename = "file") { let arr = dataurl.split(",") }console.log(arr) ????let mime = arr[0].match(/:(.*?);/)[1];console.log(mime) ????原创 2020-10-27 22:24:36 · 836 阅读 · 0 评论 -
【JS基础】var formdata=new FormData() 【FormData用法详解 】
FormData用法详解简介FormData 对象的使用:1.用一些键值对来模拟一系列表单控件:即将form 中表单元素的 name 与 value 组装成一个 queryString2.异步上传二进制文件使用一、创建formData对象1、创建一个空对象://通过FormData构造函数创建一个空对象var formdata=new FormData();//可以通过append()方法来追加数据formdata.append("name","laotie");//通过get转载 2020-10-27 10:01:10 · 6529 阅读 · 0 评论 -
【JS基础】startsWith()方法
startsWith()方法startsWith()方法用来判断当前字符串是否是以另外一个给定的子字符串“开头”的,根据判断结果返回 true 或 false参数:str.startsWith(searchString [, position])searchString要搜索的子字符串position在 str 中搜索 searchString 的开始位置,默认值为 0,也就是真正的字符串开头处示例:var str = "To be, or not to be, that is t转载 2020-10-17 21:05:07 · 3789 阅读 · 0 评论 -
【JS基础】前端如何优雅的处理类数组对象?
前端如何优雅的处理类数组对象?一、背景介绍Leo 部门最近来了位前端实习生 Robin,作为师傅,Leo 认真的为 Robin 介绍了公司业务、部门工作等情况,还有前端的新人学习地图。接下来 Robin 开始一周愉快的学习啦~一周后,Leo 为 Robin 同学布置了学习作业,开发一个【人员搜索选择】的页面,效果大致如下:Robin 看完这个效果图后,一脸得意的样子,这确实不难呀~过几天后,Robin 带着自己写的代码,给 Leo 展示了她的代码,并疑惑的问到:她将这个“数组”输出到控制台转载 2020-10-16 15:11:31 · 382 阅读 · 0 评论 -
【JS基础】关于null的一切
关于null的一切JavaScript有2种类型:基本类型(string, boolean, number, symbol)和对象。对象是复杂的数据结构,JS 中最简单的对象是普通对象:一组键和关联值:let myObject = { name: 'Milk'}但是在某些情况下无法创建对象。 在这种情况下,JS 提供一个特殊值null `—表示缺少对象。let myObject = null在本文中,我们将了解到有关JavaScript中null的所有知识:它的含义,如何检测它,nul转载 2020-10-14 13:58:02 · 891 阅读 · 0 评论 -
【JS基础】立即执行函数表达式(自执行函数)
立即执行函数表达式立即执行函数表达式,大部分人也称为自执行函数。自执行函数的写法匿名函数(function() { console.log(2)})()具名函数(function log() { console.log(2)})自执行函数的传参(function add(a, b) { console.log(a + b)})(1, 2)返回值let fn = (function add(a, b) { return a + b;}) (2, 4)co转载 2020-10-12 12:45:38 · 1119 阅读 · 0 评论 -
【JS基础】i++和++i的区别?null和undefined的区别?==和===有什么不同?setTimeout和setInterval的区别是什么?
1、 i++和++i的区别?i++ :先用i值后加1++i :先加1后用i值//计算:var n=5; 求 var num=n++ + ++n + n++ + ++n +n; //272、 null和undefined的区别?undefined是访问一个未初始化的变量时返回的值null是访问一个尚不存在的对象时所返回的值因此,可以把undefined看作是空的变量,而null看作是空的对象3、== 和 === 有什么不同?== 抽象相等,比较时,会先进行类型转换,然后再.原创 2020-09-23 12:51:06 · 210 阅读 · 0 评论 -
【JS基础】16 个优雅的 JavaScript 简写技巧
19 个优雅的 JavaScript 简写技巧三元操作符当想写if…else语句时,使用三元操作符来代替const x = 20;let answer;if(x > 10) { answer = 'is greater';} else { answer = 'is lesser';}简写:const answer = x > 10 ? 'is greater' : 'is lesser'...转载 2020-09-21 22:02:23 · 863 阅读 · 0 评论 -
【JS基础】try catch 用法
try catch 用法try…catch 语句是什么?try…catch 可以测试代码中的错误。try 部分包含需要运行的代码,而 catch 部分包含错误发生时运行的代码try…catch语法try { // 在此运行代码} catch(err) { // 在此处理错误}运行流程:try{...}包含块中的代码有错误,则运行catch(err){...}内的代码,否则不运行catch(err){...}内的代码try…catch案例var array = nu转载 2020-09-11 10:26:36 · 2302 阅读 · 1 评论 -
【JS基础】e.stopPropagation() 阻止事件冒泡
e.stopPropagation()阻止事件冒泡初始例子 <table border="1"> <tr> <td><span>冒泡事件测试</span></td> <td><span>冒泡事件测试2</span></td> </tr> </table> $('table').on('click', fun转载 2020-09-04 11:49:42 · 1499 阅读 · 0 评论 -
【JS基础】trim()方法
JavaScript trim() 方法属于 JavaScript String 对象定义和用法trim() 方法用于删除字符串的头尾空格trim() 方法不会改变原始字符串语法string.trim() // 参数无返回值代码示例var str = ' Milk595 'str.trim()如果你的浏览器不支持 trim() 方法,你可以使用正则表达式来实现:function myTrim(x) { return x.replace(/^\s+|原创 2020-09-04 09:26:29 · 488 阅读 · 0 评论 -
【JS基础】你真的了解 window对象 吗?
window对象概述浏览器里面,window对象(注意,w为小写)指当前的浏览器窗口。它也是当前页面的顶层对象,即最高一层的对象,所有其他对象都是它的下属。一个变量如果未声明,那么默认就是顶层对象的属性。a = 1;window.a // 1上面代码中,a是一个没有声明就直接赋值的变量,它自动成为顶层对象的属性。属性 (举例一些常用 的/红色为重点)window.namewindow.name 属性是一个字符串,表示当前浏览器窗口的名字。窗口不一定需要名字(默认""),这个属性主要配合超链原创 2020-08-31 19:26:24 · 390 阅读 · 0 评论 -
【JS基础】document 常用属性与方法有哪些 ?
document 常用属性与方法有哪些 ?document 常见的属性body 提供对 元素的直接访问。对于定义了框架集的文档,该属性引用最外层的cookie 设置或返回与当前文档有关的所有 cookiedomain 返回当前文档的域名lastModified 返回文档被最后修改的日期和时间referrer 返回载入当前文档的文档的 URLtitle 返回当前文档的标题URL 返回当前文档的 URLdocument常见的方法write():动态向页面写入内容createElem原创 2020-08-30 13:56:13 · 277 阅读 · 0 评论 -
【JS基础】常用的数组方法和字符串方法
常用的数组方法和字符串方法转载 2020-08-25 22:36:51 · 121 阅读 · 0 评论 -
【JS基础】GET路径参数转为对象格式
GET路径参数转为对象格式先看效果:代码演示:var newUrl = 'http://www.baidu.com/s?name=Milk&age=22&hobby=篮球'// 路径参数转为对象function urlObject(url) { const params = url.slice(url.indexOf('?')+1, url.length-1); // 切割?后以后的数据 // console.log(params); const new原创 2020-08-25 14:23:26 · 1109 阅读 · 1 评论 -
【JS基础】(.和[])--对象获取属性的方法区别与使用【补充知识点Object.keys()】
对象获取属性的方法(.和[]方式)js对象获取属性有两种方法1.通过.的方式// 通过.方式获取属性值,key是静态的var a = {name: 'Milk', age: 21};console.log(a.name);console.log(a.age);2.通过[]方式// 通过[]获取属性值,key是动态的,可以是字符串,或者数字的形式var b = {"mimi": 6, "lulu": 8};var c = {7: "qiqi", 9: "kiki"};console.原创 2020-08-25 14:16:00 · 238 阅读 · 0 评论 -
【JS基础】substr() 方法的理解和使用
JavaScript substr() 方法JavaScript substr() 方法 属于JavaScript String 对象定义和用法substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符语法stringObject.substr(start,length)返回值一个新的字符串,包含从 stringObject 的 start(包括 start 所指的字符) 处开始的 length 个字符。如果没有指定 length,那么返回的字符串包含从 start 到原创 2020-08-25 13:48:41 · 3114 阅读 · 0 评论 -
【JS基础】何为全局对象?
JavaScript 全局对象全局属性和函数可用于所有内建的 JavaScript 对象。顶层函数(全局函数)顶层属性(全局属性)全局对象描述全局对象是预定义的对象,作为 JavaScript 的全局函数和全局属性的占位符。通过使用全局对象,可以访问所有其他所有预定义的对象、函数和属性。全局对象不是任何对象的属性,所以它没有名称。在顶层 JavaScript 代码中,可以用关键字 this 引用全局对象。但通常不必用这种方式引用全局对象,因为全局对象是作用域链的头,这意味着所有非限定性的变量原创 2020-08-25 13:46:34 · 535 阅读 · 0 评论 -
【小程序】解析二维码decodeURIComponent()
解析二维码decodeURIComponent()二维码内容获取一个小城序,类似于街边自动贩卖机扫码出货的模式,因为我们需要用户扫码进入小程序,每一个货柜都有一个对应的二维码,当然每个二维码里的信息也不一样。用户扫码进入小程序之后,二维码的信息会以参数q带进去,而我们只能在onLoad事件中拿到这个参数,见下图获取到的信息是经过**encodeURIComponent()编码的,所以需要用decodeURIComponent()**解码补充知识点:JavaScript decodeURICom原创 2020-08-25 13:43:47 · 4533 阅读 · 0 评论 -
【前端面试】new操作符的原理解析
文章目录new关键字进行的操作自己实现new操作符JavaScript中new操作符用于创建一个给定构造函数的对象实例。如下例子:function Person(name, age){ this.name = name; this.age = age;}const person1 = new Person('Tom', 20)console.log(person1) // Person {name: "Tom", age: 20}我们定义了一个构造函数Person,然后通过new操作符生转载 2020-08-18 23:04:43 · 536 阅读 · 0 评论 -
【JS基础】setTimeout、setInterval、clearTimeout、clearInterval
定时器JS设置定时器和清除定时器 在做项目中难免会碰到需要实时刷新,动画依次出现等等需求,这时候就需要定时器登上我们的代码舞台了,所以今天我们就先来了解一下JS定时器的设置和清除吧。一、启用定时器 window对象提供了两个方法来实现定时器的效果,分别是window.setTimeout()和window.setInterval。其中前者可以使一段代码在指定时间后运行;而后者则可以使一段代码每过指定时间就运行一次。它们的原型如下:window.原创 2020-08-17 12:45:14 · 513 阅读 · 0 评论 -
【JS基础】reduce()方法
reduce()方法reduce()方法用于对数组中的所有元素调用指定的回调函数,该回调函数的返回值为累积结果,并且此返回值在下一次调用该回调函数时作为参数提供语法array.reduce(callback[, value])参数array: 必传,一个数组对象callback: 必传,对于数组中的每个元素,reduce方法都会调用一次callback函数value: 可选,如果指定value,它将作为初始值来启动积累。第一次调用callback函数会将此值作为参数返回值通过最后一次调用原创 2020-08-16 22:50:53 · 131 阅读 · 0 评论 -
【JS基础】innerHTML、innerText的使用和区别
innerHTML、innerText的使用和区别document对象中有innerHTML、innerText这两个属性,都是获取document对象文本内容但使用起来是有区别的:innerHTML设置或获取标签所包含的HTML+文本信息(从标签起始位置到终止位置全部内容,包括HTML标签,但不包括自身)outerHTML设置或获取标签自身及其所包含的HTML+文本信息(包括自身)innerText设置或获取标签所包含的文本信息(从标签起始位置到终止位置的内容,去除HTML标签,但不包括自身)原创 2020-08-16 14:56:15 · 306 阅读 · 0 评论 -
【Callback Hell】一文让你轻松了解何为回调地狱?
回调地狱【Callback Hell】前提知识点:单线程和异步:JS是单线程语言,只能同时做一件事儿 (例子:做一个ajax请求去加载资源,或者说弄一个定时器,先等待1秒钟后干嘛,如果按照单线程这个只能同时做一件事儿,那么它在这个事情中,它就卡住了,卡住的话鼠标点不了,js不执行。这就是同时做一件事,这就是js单线程的本质。)浏览器和node.js已支持JS启动进程,如Web WorkerJs和DOM渲染共用同一个线程,因为JS可修改DOM结构一、 遇到等待(网络请求,定时任务)不能卡住二原创 2020-08-12 09:55:40 · 858 阅读 · 0 评论 -
【JS基础】何为纯函数呢?
何为纯函数呢?定义简单来说,一个函数的返回结果只依赖于它的参数,并且在执行过程里面没有副作用,我们就把这个函数叫做纯函数。这么说肯定比较抽象,我们把它掰开来看:函数的返回结果只依赖于它的参数。函数执行过程里面没有副作用。const a = 1const foo = (b) => a + bfoo(2) // => 3foo 函数不是一个纯函数,因为它返回的结果依赖于外部变量 a,我们在不知道 a 的值的情况下,并不能保证 foo(2) 的返回值是 3。虽然 foo 函数的代转载 2020-08-10 09:31:34 · 106 阅读 · 0 评论 -
【JS面试题】16道高频面试数组题【看重点!看重点!看重点!】
数组是我面试最大感慨,几乎每个面试官一上来都会问上一道给你来个热身,数组是JS最常见的概念之一,我将向您展示一些非常有用和出现多的实战题,话不多说让我们走进今天的学习。转载 2020-08-06 11:11:48 · 1746 阅读 · 0 评论 -
【JS基础】e.preventDefault() 阻止默认操作
阻止默认操作默认操作 具体指的是什么呢?看如下实例:把单击事件处理程序注册到一个锚元素,而不是一个外层的上,那么就要面对另外一个问题:当用户单击链接时,浏览器会加载一个新页面。当用户在编辑完表单后按下回车键时,会触发表单的submit事件,在此事件发生后,表单提交才会真正发生。这种行为与我们讨论的事件处理程序不是同一个概念,它是单击标签元素的默认操作。在这种情况下,处理方法有:1.w3c的方法是e.preventDefault(),IE则是使用e.returnValue = falsepre原创 2020-08-05 11:51:31 · 31834 阅读 · 0 评论 -
【JS基础】对象的简单介绍
对象JavaScript 中的对象,Object,可以简单理解成“名称-值”对,“名称”部分是一个 JavaScript 字符串,“值”部分可以是任何 JavaScript 的数据类型——包括对象。创建方法new Object()var obj = new Object();对象字面量 {} (优先选择)var obj = {};对象实例中定义一个对象,利用到对象字面量var obj = { name: "Carrot", details: { colo原创 2020-08-04 22:27:55 · 165 阅读 · 0 评论 -
【JS基础】变量、运算符
变量声明一个新变量的方法是使用关键字 let 、const 和 var :letlet 语句声明一个块级作用域的本地变量,例子:// myLetVariable is *not* visible out herefor (let myLetVariable = 0; myLetVariable < 5; myLetVariable++) { // myLetVariable is only visible in here}// myLetVariable is *not* vis原创 2020-08-04 22:26:27 · 122 阅读 · 0 评论 -
【JS基础】数据类型-简单介绍
Javascript类型NumberStringBooleanSymbol(符号) (ES2015新增)Object: Function/Array/Date/RegExp(正则表达式)nullundefined(未定义)内置类型:Error(错误)数字类型在JavaScript(除了BigInt)当中,并不存在整数/整型(Integer)注意以下场景:console.log(3/2); // 1.5console.log(Math.floor(3/2)); // 1con原创 2020-08-04 18:31:39 · 167 阅读 · 0 评论 -
【JS基础】querySelector()、querySelectorAll()--DOM方法
DOM querySelector() 方法例子获取文档中id="demo"的元素:document.querySelector("#demo");定义和用法querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。注意: querySelector() 方法仅仅返回匹配指定选择器的第一个元素**参数:**CSS选择器DOM querySelectorAll() 方法例子获取文档中class="example"的所有元素:var x = document.qu原创 2020-08-04 18:29:55 · 468 阅读 · 0 评论 -
【JS基础】控制结构
if elsevar name = "kittens";if (name == "puppies") { name += "!";} else if (name == "kittens") { name += "!!";} else { name = "!" + name;}name == "kittens!!"; // truewhilewhile语句先判断条件,满足时执行循环体while (true) { // 一个无限循环!}do whiledo while原创 2020-08-04 18:25:18 · 152 阅读 · 0 评论 -
【JS面试题】手写Promise加载图片
手写Promise加载一张图片初始化:1.html<body> <script src="./promise.js"></script></body>promise-demo.js//手写promise加载图片function loadImg(src) { const p = new Promise( (resolve, reject) => { const img = docume原创 2020-07-28 11:52:38 · 769 阅读 · 1 评论 -
【JS面试题】提取URL中?以后的GET参数
提取URL中?以后的GET参数,以对象的形式输出法一:url是当前窗口的网址时,利用BOM里的location来封装法二:给定的是自定义好的字符串,不是当前窗口的url提取GET参数,以对象的形式打包输出例子:https://editor.csdn.net/md?name=milk&age=22&sex=boy&g输出为:{name:“milk”,age:“22”,sex:“boy”,g=undefined};法一:url是当前窗口的网址时,利用BOM里的locati原创 2020-07-25 23:12:48 · 227 阅读 · 0 评论 -
【JS面试题】数组排序,随机打乱数组
一、 顺序排序按字符编码(参照ASCII表)排序:sort()var test1 = ["abc", "acb", "baa", "cgf"];var test2 = ["-8","-2","1", "2", "10", "5"];var test3 = [-6,-3,0,2,10,100];console.log(test1.sort());console.log(test2.sort());console.log(test3.sort());将数组元素倒序排:reverse()原创 2020-07-25 16:23:53 · 683 阅读 · 0 评论 -
【JSON基础】JSON.parse()与JSON.stringify()的作用
JSON.parse()与JSON.stringify()的作用JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。因为采用独立于语言的文本格式,也使用了类似于C语言家族的习惯,拥有了这些特性使JSON成为理想的数据交换语言,作用是易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络传输速率)。JSON.parse()作用:将JavaScript对象表示法(JSON)字符串转换为对象语法:JSON.parse原创 2020-07-25 10:41:12 · 506 阅读 · 0 评论 -
【JS基础】Array对象
JS Array对象Array 对象:Array 对象用于在单个的变量中存储多个值创建Array对象的语法:new Array(); //返回新创建并被初始化了的数组,没有参数时,返回的数组为空,length=0new Array(size); //size 为数组元素个数,返回的数组,length字段将被设为size的值new Array(element0,element1,…,element);let a = new Array(1,2,3,4,5);console.log(a);原创 2020-07-24 22:47:13 · 261 阅读 · 0 评论 -
【JS基础】Promise的基本使用
回调地狱:越陷越深的形式回调地狱触及promise产出的核心问题Promise有什么好处?那promise怎么去用的?形式1.首先定义三个url的地址;获取第一个url,通过getData(),它return new Promise也就是return一个promise的class的实例。2.getData(url1).then 这个then就是new Promise里面的方法,.then(data1 => {console.log(data1) return getData(ur原创 2020-07-24 11:14:41 · 210 阅读 · 0 评论 -
异步的应用场景
异步的应用场景网络请求,如ajax图片加载定时任务,如setTimeout网络请求:打印start、打印end、网络请求的时候,传了一个回调函数。这时候按照异步的逻辑来分析:打印start,执行网络请求,执行完网络请求就不管了,因为异步,继续往下执行,打印end,什么时候网络请求回来,什么时候回来就什么时候打印data1,执行回调函数。图片加载:先执行start,然后定义一个img,img.onload里的onload就是一个callback的一个形式,这是另外一个形式,img.onl原创 2020-07-24 10:10:04 · 1437 阅读 · 0 评论 -
同步和异步的区别是什么?
同步和异步的区别是什么?场景题:12345以什么顺序打印出来?定时器的应用知识点:单线程和异步应用场景Callback hell(回调地狱) 和 Promise(解决回调地狱的问题)单线程和异步:JS是单线程语言,只能同时做一件事儿 (例子:做一个ajax请求去加载资源,或者说弄一个定时器,先等待1秒钟后干嘛,如果按照单线程这个只能同时做一件事儿,那么它在这个事情中,它就卡住了,卡住的话鼠标点不了,js不执行。这就是同时做一件事,这就是js单线程的本质。)浏览器和node.js已支原创 2020-07-24 09:35:11 · 3351 阅读 · 1 评论