❤️❤️--Javascript
javascript的笔记
suoh's Blog
My life is a straight line,turning just for you.
展开
-
实现js程序在vscode控制台输出的方法(看完方便多了)
当我们想要写一段js代码时,我们可能会在vscode中新建一个html文件,然后再script标签下去编写js代码,完了之后我们想要看看js打印输出的效果,还会通过浏览器的 F12 去查看输出结果。可以看到,方式二明显方便多了。这样再也不用去浏览器运行js代码了,提升开发效率。然后重启vscode之后,假如我们想运行下面的test.js文件。然后在设置中找到 setting.json,在里面添加一段代码。方式一:通过命令运行,node +文件全路径地址 ,回车就好了。方式二:通过右上角运行按钮直接运行。原创 2023-04-07 10:54:28 · 4655 阅读 · 1 评论 -
js牛客网编程练习汇总(二)
2、请补全JavaScript代码,要求在Number对象的原型对象上添加"_isPrime"函数,该函数判断调用的对象是否为一个质数,是则返回true,否则返回false。2. 设置Getter,当获取该对象的"area"属性时,返回该对象"height"与"width"属性的乘积。3. 当滑动滑块值为1时,矩形动画周期为10秒、当...,为...、当滑动滑块值为10时,矩形动画周期为1秒。7、请补全代码,要求当滑动id为"range"的滑块控件时可以改变id为"rect"的矩形旋转速度。原创 2023-03-28 17:55:38 · 468 阅读 · 0 评论 -
一篇文章搞定js正则表达式
2[0-4]\d+ 第二种开头是2,第二位是0-4,那第三位可以取0-9之间任意的数用\d代替。解析:因为十六进制都是a-f之间的值,包含大小写,并且是6位,接着我们用\b来表示单词的结尾。[01]\d\d 第三种开头是0或者1,那第二位和第三位可以取0-9的任意数,都用\d代替。原因是因为句点符号会匹配尽可能多的字符,所以我们加上问号,问号代表出现0次或者1次,此时我们看到还匹配出一个错误的ip,因为ip都是0-255的数字。注意:我们上面讲的都是匹配的单个字符,想匹配多个字符怎么办?原创 2023-03-24 18:19:22 · 992 阅读 · 2 评论 -
ES6--class类(详解/看完必会)
ES6中class类的学习,看完必会原创 2023-02-22 15:05:40 · 7436 阅读 · 4 评论 -
js牛客网编程练习汇总(一)
js编程练习原创 2023-02-15 15:29:28 · 687 阅读 · 0 评论 -
js性能优化小技巧(已更新)
,可能是因为for(;避免在if和while语句的条件部分进行赋值,如if (a = b),应该写成if (a == b),但是在比较是否相等的情况下,最好使用全等运行符,也就是使用===和!由于每次循环过程都会计算终止条件,所以必须保证它尽可能快,也就是说避免属性查找或者其它的操作,最好是将循环控制量保存到局部变量中,也就是说对数组或列表对象的遍历时,提前将length保存到局部变量中,避免在循环的每一步重复取值。可以使用,将条件进行对象存储,然后在判断对象中是否存在”该条件“进行,函数执行处理;原创 2023-01-10 11:33:44 · 3980 阅读 · 0 评论 -
promise和async用法及区别(详解)
带你学会promise和async原创 2023-01-09 09:40:22 · 6728 阅读 · 0 评论 -
js将树形结构数据转为一维数组数据
// 树形数据转为一维数组 getOneArr(arr) { let data = JSON.parse(JSON.stringify(arr)) let newData = [] const callback = (item) => { (item.children || (item.children = [])).map(v => { ...原创 2022-04-20 11:30:28 · 2432 阅读 · 0 评论 -
接口在5秒之后未返回数据,自动加载百分比
//定义变量 data(){ return { timeOutObj: {}, indexTime: 1, //定义时间初始值 indexTimeInt: {},//定义时间计时器 process: "0%", //定义进度百分比 setAdd: {},//定义百分比累加计时器 } }法一:定时器setInterval实现...原创 2022-03-24 10:43:42 · 1640 阅读 · 0 评论 -
限制input框只能输入0~100的正整数
法一:(复杂)<input type="number" oninput="if(!/^[0-9]+$/.test(value)) value=value.replace(/\D/g,'');if(value>100)value=100;if(value<0)value=null" v-model='testNum'>核心判断:oninput="if(!/^[0-9]+$/.test(value)) value=value.replace(/\D/g,'');if(va原创 2022-01-26 14:58:59 · 23994 阅读 · 5 评论 -
原生js实现红绿灯展示
<!-- * @Author: suoheng * @LastEditors: suoheng * @Date: 2021-09-24 14:57:44 * @LastEditTime: 2021-09-24 15:14:56 * @Email: secret * @FilePath: \js练习\红绿灯.html * @Description: * @fileheader.Author: suoheng * @fileheader.LastModifiedBy: suohe...转载 2021-09-24 15:19:55 · 492 阅读 · 0 评论 -
vue中使用cookie实现登录记住密码功能
功能:设置cookie保存时间为7天,关闭浏览器cookie不会消失,否则cookie会默认关闭浏览器自动清除的,如果设置了cookie过期时间,关闭浏览器,cookie仍被清空了,那可能是浏览器设置的原因,记得把下面按钮关闭效果:设置cookie:将用户名,密码,以及保存的天数,以及记住密码的check按钮的布尔值存入cookie //设置cookie setCookie(c_name, c_pwd, exdays, flg) { var exdate.原创 2021-07-15 15:51:43 · 1957 阅读 · 0 评论 -
js中的扩展运算符(三个点)的多种用途
三个点(...)真名叫扩展运算符,是在ES6中新增加的内容,它可以在函数调用/数组构造时,将数组表达式或者string在语法层面展开;还可以在构造字面量对象时将对象表达式按照key-value的方式展开字面量一般指[1,2,3]或者{name:'chuichui'}这种简洁的构造方式,多层嵌套的数组和对象三个点就无能为力了说白了就是把衣服脱了,不管是大括号([])、花括号({}),统统不在话下,全部脱掉脱掉!// 数组var number = [1,2,3,4,5,6]console.转载 2021-07-07 11:07:06 · 1411 阅读 · 0 评论 -
js中获取唯一id
function guid() { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8); return v.toString(16); });}原创 2021-06-17 16:01:08 · 1822 阅读 · 0 评论 -
vue中使用js监听窗口切换
试用场景:可用于vue项目中监听两个窗口页面,比如在另一个窗口进行操作后,返回本窗口之后要进行的一些操作。 mounted() { var self = this document.addEventListener("visibilitychange", function() { if (document.visibilityState == "hidden") { //切离该页面时执行 } else if (document.visibi原创 2021-06-02 10:35:25 · 1695 阅读 · 0 评论 -
elementUI表格数据不实时更新(解决)--妙用方法
由于我对elementUI的表格进行了嵌套接口的调用,并且每个接口调用数据会有一定的时间,导致表格数据渲染不完全,但是打印表格的数据时候也都获取到了,只是页面数据只更新了一部分。一步搞定,表格数据刷新splice(1,0) 可以主动触发表格刷新哦~~~~~~~学废了吗>>>>>>>>>self.tableData = self.table;self.tableData.splice(1,0)...原创 2021-05-22 14:50:46 · 3007 阅读 · 1 评论 -
layui树形组件获取复选框选中的id
安排一波~目的:获取我所选中的所有id第一步:先在树形组件渲染函数里面添加两个属性 showCheckbox: self.isShowType, id: "demoId",第二步:在data里面定义一个存放id的数组第三步:在你需要获取到复选框选择的id函数里面去拿这些值注意:var treecheckdata = tree.getChecked("demoId");这个只能获取到父节点id,因此需要对返回值进行处理,才能得到选中的所...原创 2021-05-11 15:28:09 · 2161 阅读 · 3 评论 -
前端修改树形数据的字段名(一步到位)
data: [ { title: "江西", id: 1, children: [ { title: "南昌", id: 1000, children: [ { title: "青山湖区", id: 10001 ...原创 2021-04-12 11:39:05 · 1925 阅读 · 2 评论 -
js更换数组字段名
用map方法,贼简单~ getMap(){ var arr = [ {name:'suo',age:19}, {name:'heng',age:12}, ] var ar...原创 2021-03-25 17:37:43 · 3054 阅读 · 3 评论 -
vue中实现动态表格嵌套--行数列数均不确定
很简单! 很简单! 很简单! 别慌,上代码~原创 2021-03-24 11:39:19 · 1204 阅读 · 0 评论 -
vue中将一维数组数据转换为树形结构数据
getTreeData(id) { var self = this; data = [{ id: "3", name: "二级目录0", lv: "1", catalogs: [], fid: "0" },{ id: "8", name: "二级目录1", lv: "2", catal...原创 2021-02-23 17:19:49 · 2844 阅读 · 0 评论 -
js继承的六种方式详解--认真看完你就会了
今天 主要来研究一下继承这个东西继承共分为六中继承方式:原型链继承 构造函数继承 组合继承 实例继承(原型式继承) 继承组合继承 es6继承原型链继承原型链继承是ES主要继承方,其中基本思想就是 通过原型链继承多个引用类型的属性和方法那么构造函数、原型、实例之间的关系是什么呢?答:每个构造函数都有一个原型对象,原型有一个属性指回构造函数,而实例有一个内部指针指向原型,如果原型是另一个类型的实例呢?那就意味着这个原型本身有一个内部指针指向另一个原型,相应地另一个原型也有..原创 2020-12-25 18:04:16 · 3780 阅读 · 2 评论 -
含泪也要看--async和await的使用与原理
async关键字使得函数变为异步函数,异步函数也就意味着该函数的执行不会阻塞后面代码的执行。async关键字表明程序里面可能有异步过程,里面可以有await关键字;当然全部是同步代码也没关系,但是这样async关键字就显得多余了async的存在的意义:表明程序里面可能有异步过程 非阻塞 async函数返回类型为Promise对象 async function timeout(){ return 'hello world' } console.log原创 2020-12-17 16:45:36 · 1006 阅读 · 0 评论 -
js过滤多维数组数据
过滤可以用于前端在做列表搜索功能的时候,进行的一个筛选操作,我的需求是拿到一个三层级数组,但是只需针对第二层级进行搜索筛选,若存在则返回该内容所存在的所有层级的数据//这是我从后台拿到的数据,我只需对data里面的每个对象中的serviceList中的每一项中的name作为筛选条件,进行筛选过滤var dataNetService = { "name": "mulu", "data": [ { "clusterId": "feite原创 2020-11-26 17:56:28 · 5243 阅读 · 2 评论 -
js定时器原理的深度剖析
JavaScript是一门基于对象的弱类型语言,它作为浏览器脚本语言,主要用途是负责与页面的交互,以及操作DOM,它的执行环境是单线程的,默认情况JS是同步加载的,也就是 JS的加载是阻塞的,也就是说同一时间只能完成一件事,只能自上而下执行,万一上一行解析代码的时间很长,那么下面的代码就会被阻塞。对于用户而言,阻塞就意味着"卡死",这样就导致了很差的用户体验。为了解决这个问题,利用多核CPU的计算能力,于是出现了同步和异步同步操作,任务遵循队列顺序,异步操作,就相当于并线了,因此异步任务不具有...原创 2020-09-10 11:27:18 · 1328 阅读 · 1 评论 -
js中call()和apply()的使用与区别
call()方法--改变this指向function foo(){ setTimeout(()=>{ console.log('id:',this.id) },100)} var id=21 foo.call({id:42}) //打印结果id:42 window.color="red"; document.color='yellow'; var s1 = {color:'blue'}; function chan.原创 2020-09-09 17:49:07 · 724 阅读 · 0 评论 -
vue中使用js获取树形数据的所有父节点
1、定义想要处理的tree数组//在vue的data中定义一个数组,这个数组我写的是死数据,所以写的不规范,最终结果是正确的tableData: [{ id: 3, date: '2016-05-011', name: '王小虎1', type:1, address: '11', children: [{ id: 31, d.原创 2020-06-30 16:03:33 · 4606 阅读 · 2 评论 -
cookie增删改查-封装
//增加/修改(原来有则修改,没有则增加)function setCookie(name, value, date) { var oDate = new Date(); oDate.setDate(oDate.getDate() + date); document.cookie = name + "=" + escape(value)+ ";expires=" + oDate;}//...原创 2019-08-03 20:53:57 · 227 阅读 · 0 评论 -
闭包的含义以及优缺点
什么是闭包?闭包的优缺点?闭包(closure)是javascript的一大难点,也是它的特色。很多高级应用都要依靠闭包来实现。1、变量作用域要理解闭包,首先要理解javascript的特殊的变量作用域。变量的作用域无非就两种:全局变量和局部变量。javascript语言的特别之处就在于:函数内部可以直接读取全局变量,但是在函数外部无法读取函数内部的局部变量。注意点:在函数内部声明变量...转载 2019-08-05 19:43:46 · 311 阅读 · 0 评论 -
js的数据类型以及typeof返回的类型
js中有六种数据类型,包括五种基本数据类型:(Number,String,Boolean,Undefined,Null),和一种复杂数据类型(Object)。1.Number类型Number类型包含整数和浮点数(浮点数数值必须包含一个小数点,且小数点后面至少有一位数字)两种值。NaN:非数字类型。特点:① 涉及到的 任何关于NaN的操作,都会返回NaN ② NaN不等于自身。 isN...原创 2019-08-05 20:13:38 · 2358 阅读 · 0 评论 -
超级实用的js字符串和数组的常用方法
js字符串常用方法:1、动态方法:str.charAt(index); 返回子字符串,index为字符串下标,index取值范围[0,str.length-1]2、动态方法:str.charCodeAt(index); 返回子字符串的unicode编码,index取值范围同上3、静态方法:String.fromCharCode(num1,num2,…,numN); 根据unicode编...原创 2019-06-14 09:35:23 · 634 阅读 · 0 评论 -
js常见bug总结
JavaScript 调试是一场噩梦:首先给出的错误非常难以理解,其次给出的行号不总有帮助。有个查找错误含义,及修复措施的列表,是不是很有用?以下是奇怪的 JavaScript 错误列表。同样的错误,不同的浏览器会给出不同的消息,因此有一些不同的例子。如何读懂错误?首先,让我们快速看下错误信息的结构。理解结构有助于理解错误,如果遇到列表之外的错误会减少麻烦。Chrome 中典型的错误像这样...原创 2019-06-14 08:56:13 · 2352 阅读 · 0 评论 -
从此不再纠结js中apply和call的区别
函数原型链中的 apply,call 和 bind 方法是 JavaScript 中相当重要的概念,与 this 关键字密切相关,相当一部分人对它们的理解还是比较浅显,所谓js基础扎实,绕不开这些基础常用的API,这次让我们来彻底掌握它们吧!call,apply的效果完全一样,它们的区别也在于:参数数量/顺序确定就用call,参数数量/顺序不确定的话就用apply。 考虑可读性:参数数量...原创 2019-08-09 14:46:23 · 659 阅读 · 0 评论 -
js实现经典算法之冒泡、选择、插入排序
一、冒泡排序算法思想:比较相邻的元素。如果第一个比第二个大,就交换它们两个; 对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对,这样在最后的元素应该会是最大的数; 针对所有的元素重复以上的步骤,除了最后一个; 重复步骤1~3,直到排序完成。 arr1=[4,6,3,2,7,9,0] function bubbleSort(arr) ...原创 2019-08-15 15:33:07 · 162 阅读 · 0 评论 -
3道js经典面试题
第一道: var a = 10; // 全局作用域,全局变量。a=10 function foo() { // var a //的声明将被提升到到函数的顶部。 // 比如:var a console.log(a); // 打印 undefined // 实际初始化值20只发生在这里 var a = ...原创 2019-08-11 22:08:00 · 442 阅读 · 0 评论 -
react中ajax的封装与调用
ajax的封装:import $ from 'jquery'function ajax(url,params,callback){ $.ajax({ type:"get", url:url, data:params, async:true, dataType:'json', succe...原创 2019-08-11 22:53:45 · 571 阅读 · 0 评论 -
js实现数组去重
indexOf()方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。接收两个参数时,第二个参数可设置开始查询元素的位置 const beasts = ['ant', 'bison', 'camel', 'duck', 'bison']; console.log(beasts.indexOf('bison')); // expected out...原创 2019-08-22 21:46:04 · 202 阅读 · 0 评论 -
一个例子搞定e.target和e.currentTarget的区别
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...原创 2019-08-02 15:38:33 · 3965 阅读 · 0 评论