JavaScript
小太阳...
这个作者很懒,什么都没留下…
展开
-
URL.createObjectURL()的使用方法
URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。兼容性方面两个属性都兼容ie10以上的浏览器。转载 2022-11-22 17:48:42 · 3792 阅读 · 1 评论 -
JS去掉小数末尾多余的0,并且最多保留两位小数
格式化字符串/数字 最多保留两位小数并且去掉多余的0原创 2022-08-25 10:27:20 · 2762 阅读 · 0 评论 -
数组对象去重
数组对象去重原创 2022-08-18 16:53:01 · 608 阅读 · 0 评论 -
img图片加载错误时显示默认图片
JavaScript用的onerror事件,vue用的@error。JavaScript写法。原创 2022-08-08 11:34:53 · 1782 阅读 · 0 评论 -
js在字符串指定位置插入字符串
slice(start, end) 方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。) 参数来指定字符串提取的部分。原创 2022-08-08 10:58:45 · 30386 阅读 · 0 评论 -
js中try...catch和finally的用法
用途:一般用于可控的错误,而不是未知的错误,意思就是你很清楚这里可能出错,而且你很清楚什么前提下会出错,你就是要故意利用报错信息来区分错误,就可以把这段代码放进try内,然后出错误的时候就会自动去执行catch里面的代码。每个浏览器都有自身的兼容问题,所以try catch能很好的将异常捕获,每个浏览器的异常报错提示也是不一样的,我们就可以在catch里面将报错抛出并作出对应的措施。先执行try里面的代码,如果try里面的代码有错误,就执行catch里面的代码,否则不执行catch里面的代码。.......原创 2022-08-04 11:37:09 · 13820 阅读 · 0 评论 -
$.ajax()方法详解
1.url:要求为String类型的参数,(默认为当前页地址)发送请求的地址。2.type:要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持。3.timeout要求为Number类型的参数,设置请求超时时间(毫秒)。此设置将覆盖$.ajaxSetup()方法的全局设置。4.async要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为fa转载 2022-06-21 16:26:06 · 293 阅读 · 0 评论 -
Js中的数组排序
本文介绍了数组自带的sort方法以及冒泡排序、选择排序、快排以及插入排序1.数组的sort()默认情况下,sort() 方法将按字母和升序将值作为字符串进行排序。注意: sort() 方法会改变原始数组。如果想按照别的顺序进行排序,就必须提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数a和b,如果数组中的元素是数值类型,如果需要升序排序,那么就返回a - b;如果需要降序排序,那么就返回b-a; var oldArr = [19, 55原创 2022-04-01 16:34:49 · 13977 阅读 · 2 评论 -
js 类数组
基本原则类数组为对象,但有一些数组的方法,用起来像数组,因为其本质为对象,也有对象的用法属性要为索引(数字)属性,必须有length属性,最好加上push方法举例子var obj = { 0: 'a', 1: 'a', 2: 'a', 3: 'b', length: 4, push: Array.prototype.push}obj.push('b');obj.length; //5obj[4]; // b这就是一个类数组,你发现可以使用数组的方法,像数组一样访问值,实际转载 2022-03-31 10:55:01 · 198 阅读 · 0 评论 -
ES6的Set方法
理解SetSet本身是一个构造函数,用来生成Set数据结构。它类似于数组,但里面的成员是唯一的,不重复的。向Set加入值时,不会发生类型转换,它类似于精确相等运算符(===),主要的区别是向 Set 加入值时认为NaN等于自身,而精确相等运算符认为NaN不等于自身。Set 可以接收一个数组做为参数,用来初始化1.用法数组去重 function noRepeat(arr) { return Array.from(new Set(arr)) // return [原创 2022-03-30 17:40:33 · 5779 阅读 · 0 评论 -
数组去重的方法
方法一: 利用数组的indexOf()思路:创建一个新数组,循环遍历原数组,判断新数组中是否有每一项值,如果没有,就把值加入到到新数组,如果没有,则不进行操作代码如下: var oldArr = [1, 4, 2, 2, 4, 'sun', 'moon', 'sun', 'sun', '2']; function noRepeat(arr) { var newArr = [] for(var i = 0; i < arr.length; i++) {原创 2022-03-30 16:50:54 · 393 阅读 · 0 评论 -
数组扁平化的方法
定义:数组扁平化就是将一个多维数组转换成一维数组方法一:递归思路:对数组进行遍历,然后判断每一项是否是数组,如果该项不是数组直接放入新数组,如果是数组就再次调用该函数,当数组遍历完成,返回新数组代码如下: let arrFlat = [1, 2, ['sun', [ 18, 'happy' ], 'haha'], 21 ] let flatArr = [] function flatArrFnc(arr) { for(let i = 0; i&l原创 2022-03-30 12:42:46 · 1979 阅读 · 0 评论 -
setTimeout()和clearTimeout用法详解
setTimeout()是window的方法,该方法用于在指定毫秒数后调用函数或者计算表达式。我们一般常用的参数是两个,今天发现还有第三个参数语法如下:setTimeout(code, delay, arg1, arg2, ...) // 不推荐setTimeout(function() {}, delay, arg1, arg2, ...)对于code这种方式,你可以使用字符串而不是安全function 的,在delay使用之后编译和执行字符串(使用该语法是不推荐的, 原因和 eval(.原创 2022-03-22 23:56:46 · 10997 阅读 · 0 评论 -
JS之事件捕获和事件冒泡
DOM事件流(event flow )存在三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。事件捕获(event capturing): 当鼠标点击或者触发dom事件时(被触发dom事件的这个元素被叫作事件源),浏览器会从根节点 =>事件源(由外到内)进行事件传播。事件冒泡(dubbed bubbling): 事件源 =>根节点(由内到外)进行事件传播。无论是事件捕获还是事件冒泡,它们都有一个共同的行为,就是事件传播。dom标准事件流的触发的先后顺序为:先捕获再冒泡。即当触发do.转载 2022-01-14 17:42:18 · 5114 阅读 · 1 评论 -
js和vue的图片加载完成事件
我的场景:需要图片在加载完成之后,获取图片的高度,给别的组件传值语法:onload 事件在图片加载完成后立即执行可以使用img的onload事件,等图片加载完成之后再执行其他操作js<body> <img src="xxx" onload="getImg()" > <script> function getImg() { console.log('需要执行的操作'); } </script></bo原创 2022-01-14 15:57:52 · 6431 阅读 · 0 评论 -
async/await详解
async语法:async function name(param) { statements}其中name是函数名称,param是要传递给函数的参数,statements 是函数体返回值async 函数返回一个成功状态下的Promise 对象,可以使用 then 方法添加回调函数。 async function testFun() { return { name: 'sun' } } var obj = testFun() console..原创 2022-01-12 17:57:29 · 477 阅读 · 0 评论 -
JS异步编程
1.1 什么叫异步异步(async)是相对于同步(sync)而言的,很好理解。同步就是一件事一件事的执行。只有前一个任务执行完毕,才能执行后一个任务。而异步比如:setTimeout(function cbFn(){ console.log('learnInPro');}, 1000); console.log('sync things');setTimeout就是一个异步任务,当JS引擎顺序执行到setTimeout的时候发现他是个异步任务,则会把这个任务挂起,继续执行后面的代.转载 2022-01-12 16:22:25 · 559 阅读 · 0 评论 -
hasOwnProperty() 方法详解
hasOwnProperty(propertyName)方法 是用来检测属性是否为对象的自有属性,如果是,返回true,否者false; 参数propertyName指要检测的属性名;用法:object.hasOwnProperty(propertyName) // true/falsehasOwnProperty() 方法是 Object 的原型方法(也称实例方法),它定义在 Object.prototype 对象之上,所有 Object 的实例对象都会继承 hasOwnProperty() 方法。转载 2022-01-11 11:12:12 · 803 阅读 · 0 评论 -
js复制一个数组(浅复制、深复制)
在js中,我们经常会用到数组复制,Array是引用类型,如果用arrA=arrB简单的把一个数组赋值,并没有创造出一个新数组,arrA和arrB其实指向的还是同一个地址,改变一个另一个也会随之改变,很明显这并不是我们想要的 var arr = [1, 2, 3]; var newArr = arr; arr.push(4); console.log(newArr1); // [1, 2, 3, 4]下面介绍数组的浅复制(适用于数组并不复杂,即数组中没有嵌套对象或者嵌套数组)方法一:c原创 2022-01-11 10:27:02 · 38485 阅读 · 3 评论 -
js如何复制一个对象
方法一:把原来对象的属性遍历一遍,赋给一个新对象 //深复制对象方法 var cloneObj = function (obj) { var newObj = {}; if (obj instanceof Array) { newObj = []; } for (var key in obj) { var val = obj[key]; newObj[key] = typeof val === 'object' ? clon原创 2022-01-10 17:09:24 · 17550 阅读 · 1 评论 -
JavaScript--往对象里面添加数据
方法一: 直接添加 let obj = { name: 'sun' }; // [] let key = 'age'; let value = 18; obj[key] = value; // . obj.age = 18; console.log(obj, 'obj'); // {name: 'sun', age: 18} 'obj'方法二: 利用扩展运算符… let objName = { na原创 2021-12-31 16:49:51 · 16384 阅读 · 0 评论 -
js判断设备是移动端还是PC端
根据用户代理来判断是pc端还是移动端 IsPC() { let userAgentInfo = navigator.userAgent; let Agents = [ 'Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod' ]; let flagPc = true; for (let i = 0; i < Age原创 2021-09-30 10:03:23 · 1236 阅读 · 0 评论 -
把vue组件添加到body下
写了个xxx组件为了减少父级html的影响,需要把组件的$el放在body下在mounted放法中写:this.$nextTick(() => { const body = document.querySelector("body"); if (body.append) { body.append(this.$el); } else { body.appendChild(this.$el); } });转载 2021-09-17 17:25:34 · 3026 阅读 · 2 评论 -
js字符串修改最后一个字符的值(不确定字符串字符数)
1.用数组和字符串的方法split()、join() handeleStr(str) { let length = str.length; let newArr = str.split(''); newArr[length - 1] = '0'; return newArr.join(''); },使用: mounted() { console.log(this.handeleStr('212109171626')); // 212109171620 },原创 2021-09-17 17:12:51 · 2577 阅读 · 0 评论 -
js中‘??‘(空值合并操作符)和‘?.‘(可选链操作符)的使用
?? 空值合并操作符用法:逻辑操作符,左侧为null和undefined时,才返回右侧的值var name = nullconsole.log(name ?? '-') // -var obj = { name: 'sun'}console.log(obj.name ?? '-') // sunconsole.log(obj.age ?? '-') // -?. 可选链操作符可选链在JavaScript中是一种简写形式功能类似于‘.’ 链式操作符,不同之处在于,在引用为空nu原创 2021-08-11 11:32:35 · 955 阅读 · 2 评论 -
js判断对象是否为空对象的几种方法
1.将json对象转化为json字符串,再判断该字符串是否为"{}"var data = {};var b = (JSON.stringify(data) == "{}");console.log(b);//true2.for in 循环判断var obj = {};var b = function() {for(var key in obj) { return false;} return true;}console.log(b());//true3.Object.get转载 2021-08-10 11:11:51 · 198 阅读 · 0 评论 -
js判断字符串中是否包含某个字符串
String对象的方法方法一: indexOf() (推荐)indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现,则该方法返回 -1。var str = "123";console.log(str.indexOf("3") !== -1 ); // true方法二: search()var str = "123";console.log(str.search("3") !== -1 );search() 方法用于检索字符串中指定的子字转载 2021-08-10 10:52:06 · 377 阅读 · 0 评论 -
Day.js :一个轻量的处理时间和日期的 JavaScript 库
安装:npm install dayjs --savemain.js引入import dayjs from 'dayjs';Vue.prototype.$dayjs = dayjs;API参考:Dayjs 并没有改变或覆盖 Javascript 原生的 Date.prototype, 而是创造了一个全新的包含 JavascriptDate 对象的 Dayjs 的对象。Dayjs 对象是不可变的, 所有的 API 操作都将返回一个新的 Dayjs 对象。当前时间直接运行 dayj原创 2021-08-02 18:01:14 · 1091 阅读 · 0 评论 -
前端实现文字滚动(支持横向、纵向)
1.首先安装dayjs插件(后面唯一id使用)day.js–一个轻量的处理时间和日期的JavaScript库npm install dayjs --save2.在main.js中引入dayjs插件插件import dayjs from 'dayjs';Vue.prototype.$dayjs = dayjs;3.滚动组件<template> <div :id="id" class="marquee-wrapper"> <span原创 2021-08-02 11:45:31 · 1919 阅读 · 0 评论 -
使用 Object.assign() 合并对象
用法:Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。var nameObj = {name:"sun"}var ageObj = {age: 18}Object.assign(nameObj, ageObj)console.log(nameObj) // {name: "sun", age: 18}Object.assign()方法的第一个参数是目标对象,后面的参数都是源对象。注意:如果目标对象与源对象有同名属性,或者原创 2021-03-18 10:53:29 · 600 阅读 · 1 评论 -
JavaScript将数组拼接成一个字符串
将数组拼接成字符串,在JavaScript中,有两种方式。一种是Array对象提供的join()方法,另一种是Array对象提供的toString()方法。下面分别来介绍:join()定义和用法:join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。用法:把数组中的所有元素放入一个字符串,默认以逗号分隔var arr = ['sun', 'moon', 'start']console.log(arr.join()) // 'sun, moon, start'原创 2021-03-17 16:17:36 · 26291 阅读 · 5 评论 -
JavaScript对象动态加载键值
先说一下我的应用场景:后来返回值如下图:需要实现的效果如下图:如果某种类型的数量为0,就什么也不显示,我的处理方式是,重新处理数据,造一个新对象,没有就为0如下图:处理过程如下: getProjectCount() { queryProjectCount().then(res => { if (res.code === 200) { this.statisticsData = res.data; let pub原创 2021-03-12 11:18:10 · 445 阅读 · 0 评论 -
js原生方法document.execCommand()
document.execCommand()语法参数:document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)如果该指令不被支持或停用将回传一个 false 的 Boolean 值。其中:aCommandName:要执行的指令,如 Copy、Cut 、Paste等aShowDefaultUI:是否显示预设的使用者界面,默认是falseaValueArgument:需要引入额外的参数,insertImage 需要提供图.原创 2021-01-22 10:52:25 · 3200 阅读 · 0 评论 -
vue实现点击复制功能
项目中需要复制链接,如下图:第一步:安装依赖npm install --save v-clipboard第二步: 在mian.js(全局)引入并注册组件import Clipboard from 'v-clipboard'Vue.use(Clipboard)第三步:具体使用<a @click="copyUrl(record.fileUrl)">复制链接</a> // 点击复制的方法 copyUrl(url) { // 创建一个 Inp原创 2021-01-21 17:27:57 · 1609 阅读 · 0 评论 -
js实现根据数组中对象的某一个属性值进行排序
var personArr = [ {name: '小黑球', age: '19'}, {name: '小太阳', age: '18'}, {name: '乐乐', age: '20'} ] function sortArr(attr) { return function(a,b) { var val1 = a[attr] var val2 = b[attr] return val1 - val2...原创 2020-12-21 16:19:30 · 3069 阅读 · 2 评论 -
什么是伪数组以及伪数组如何转换成数组
什么是伪数组?1.伪数组是一个对象2.这个对象必须要有length属性,且必须是number类型3.如果这个对象的length不为0,那么必须要有按照下标存储的数据4.它终究是个假数组,它没有数组splice,concat,pop等方法非伪数组案例:var obj1 = {};// 没有lengthvar obj2 = { length: 3 }; // 没有按照下标存储的数据伪数组案例:var obj3 = { length: 0 };var obj4 = { 0: '888', l原创 2020-06-23 11:32:12 · 520 阅读 · 0 评论 -
forEach中return无效和for循环终止问题
在项目中使用forEach进行遍历,是无法实现:达到某一条件,希望跳出循环,代码不继续执行。let arrData = [1,2,,3,4,5]arr.forEach((item,index) => { if(index === 3) { return }})原因:forEach()无法在所有元素都传递给调用的函数之前终止遍历解决方法:使用for替换forEach例如:let arrData = [1,2,,3,4,5]for(let i = 0; i原创 2020-05-28 15:19:55 · 2137 阅读 · 0 评论 -
Object.keys用法
Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组。传入对象返回属性名: var data = { a: 1, b: 2, c: 9, d: 4, e: 5 }; console.log(data); // {a: 1, b: 2, c: 9, d: 4, e: 5} console.log(Object.keys(data)); // ["a", "b", "c", "d", "e"] Object.keys(data).map((key, item转载 2020-08-03 17:22:00 · 385 阅读 · 0 评论 -
javascript中offsetWidth、clientWidth、width、scrollWidth、clientX、screenX、offsetX、pageX
offsetWidth //返回元素的宽度(包括元素宽度、内边距和边框,不包括外边距)offsetHeight //返回元素的高度(包括元素高度、内边距和边框,不包括外边距)clientWidth //返回元素的宽度(包括元素宽度、内边距,不包括边框和外边距)clientHeight //返回元素的高度(包括元素高度、内边距,不包括边框和外边距)style.width //返回元素的宽度(包括元素宽度,不包括内边距、边框和外边距)s转载 2020-08-03 16:19:37 · 142 阅读 · 0 评论 -
一文读懂JS中call()、apply()、bind()的区别及用法
call、apply和bind三个方法都是用来改变this指向的。 // 全局变量 var name = '小包子', age = 18 var moonObj = { name: '小月亮', moonAge: this.age, myMsg: function () { console.log(this.name + '年龄' + this.age); console.log(this); }原创 2020-07-09 17:22:39 · 385 阅读 · 0 评论