JavaScript
记录我自己在研习JavaScript知识期间的一些笔记和总结
你的玄烨
好好学习,天天向上
展开
-
React项目如何实现登录密码MD5加密
第一步: 我们全局安装MD5依赖npm install --save js-md5 第二步: 在相应的组件部分引入使用,本案例世界在登录组件页面引入使用// 密码MD5加密import md5 from 'js-md5';React.Component.prototype.$md5 = md5;本案例在登录验证部分输出的密码数据,这里并没有结合后台,只是单纯的演示MD5加密后的密码数据效果 const onFinish = (values: any) => { const原创 2022-04-04 18:09:20 · 6347 阅读 · 0 评论 -
Can‘t import the named export ‘ArrowDown‘ from non EcmaScript module(vue3项目按官网引导使用Element-plus报错问题)
首先我们看一下页面效果:1.按照Element-plus官网的引导,我们首先需要在项目里下载Element-plus依赖# NPM$ npm install element-plus --save# Yarn$ yarn add element-plus# pnpm$ pnpm install element-plus2.然后在项目中的main.js中添加:import { createApp } from 'vue'import ElementPlus from 'elemen原创 2021-11-03 13:13:21 · 3772 阅读 · 5 评论 -
JS如何向div中插入元素
前言: 这里我们根据一个多个列表组件渲染的示例对key的作用,以及相关的功能属性做出分析解读。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>循环渲染列表</ti原创 2020-08-21 09:49:09 · 10271 阅读 · 1 评论 -
一个简单的前端埋点示例(以react项目为示例)
首先我们先大致了解下MyBatis:Mybatis就是类似于hibernate的orm持久层框架,面向sql的持久层框架。他封装了jdbc访问数据库的过程,我们开发,只需专注于sql语句本身的拼装,其它复杂的过程全部可以交给mybatis去完成。MyBatis相比hibernate的优点:1】目前最主流的持久层框架为hibernate与mybatis,但是国内目前情况使用Mybatis的公司比hibernate要多。2】Hibernate学习门槛不低, 要精通门槛更高。门槛高在怎么设计O/R映射,在原创 2020-08-08 14:35:16 · 2333 阅读 · 0 评论 -
js从路由中提取所需参数
这里主要提供给亲解决思路:逻辑不复杂。可能我们的数据项是一个嵌套数组:如:[[name:‘Kobe’,value:24],[name:‘McGrady’,value:1]…]解题思路:①将所有的value单独提出放入一个数组,然后sort(a,b)进行降序排序放入一个新数组,求出新数组数据项和②新数组降序排列的数据项,sum = 0 ; sum = sum + arr[i] 从大到小累加和数组数据项和比较。③不超过80%,将arr[i]再放入新数组,④⑤Echarts核心代码:原创 2021-02-06 19:49:31 · 4494 阅读 · 0 评论 -
析构运算符 ... 的使用理解
代码示例:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body&g原创 2020-10-23 15:40:03 · 216 阅读 · 0 评论 -
JS中的 this 指向的七种场景
this指向问题this是一个关键字,指向一个对象,在不同的调用环境this指向的对象也不一样。1、全局this指windowconsole.log(this)2、全局函数里的this指window function fn () { console.log(this) } fn()3、事件处理函数里的this指绑定事件的DOM对象(不一定是事件源,哪个对象绑定就是那个对象) document.querySelector('#box').onclick =原创 2020-08-13 21:15:39 · 776 阅读 · 0 评论 -
var、let、const它们声明变量的区别
① var声明的变量属于函数作用域;let 和 const 声明的变量属于块级作用域,不能跨函数访问;② var存在变量提升现象,而 let 和 const 没有;③ var变量可以重复声明,值可改变;在同一个块级作用域下:let变量不能重新声明;const定义的变量是常量,声明时必须赋值,但不允许重复赋值,如果定义的是引用类型,可以修改数据内部结构。...原创 2020-08-06 14:18:16 · 6761 阅读 · 2 评论 -
前端面试经常问到的浅拷贝和深拷贝
浅拷贝的时候如果数据是基本数据类型,那么就如同直接赋值那种,会拷贝其本身,如果除了基本数据类型之外还有一层对象,那么对于浅拷贝而言就只能拷贝其引用,对象的改变会反应到拷贝对象上;但是深拷贝就会拷贝多层,即使是嵌套了对象,也会都拷贝出来。深拷贝在计算机中开辟了一块内存地址用于存放复制的对象,原对象的改变不会对拷贝出的对象产生影响。区别:深拷贝和浅拷贝最根本的区别在于是否是真正获取了一个对象的复制实体,而不是引用。...原创 2020-07-15 15:16:24 · 255 阅读 · 0 评论 -
ES6解构赋值:简单示例
解构赋值: 是对赋值运算符的扩展。是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。在代码书写上简洁且易读,语义更加清晰明了;也方便了复杂对象中数据字段获取。1.数组的解构赋值 (按顺序解构)把数组里的元素按顺序赋值给四个变量:如果解构的变量少于数组元素,那么就只解构前几个元素。如果解构的变量多于数组元素,那么多余的变量就是undefined。var arr = [4, 3, 9, 7] var [a, b, c, d, e] = arr console.log(a)原创 2020-07-11 11:53:59 · 180 阅读 · 0 评论 -
js数组去重 - indexof( )方法实现
arr.indexOf( ): 本身是一个数组数据项查找方法,返回要查找的数据项在数组中第一次出现的位置,没找到的情况下返回 1。示例: var arr = [1,2,3,4,5,6,3,7,8,3]; var res = arr.indexOf(3); //indexOf 的查找规则 : 找到第一个数据之后立即终止查找!; console.log(res); //打印2利用它的功能特性,实现数组去重:var arr = [1,2,3,4,5,6,7,8,3];原创 2020-07-04 16:52:38 · 327 阅读 · 0 评论 -
jquery实现商品按价格排序、按销量排序、随机排序(基于sort()方法实现)
前言: 三部分代码Ctrl C + V,一定可以实现效果。部分一: 页面设计 ( 注: 底部导航栏用到了阿里的字体图标)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><原创 2020-07-03 21:15:39 · 4531 阅读 · 0 评论 -
js函数的return关键字
return关键字: 函数体内使用。return特性: 在函数中,只要遇到了return关键字,表示函数执行结束,会立即跳出函数执行。所以一个函数中,无论有多少个return,只会执行第一个return,因为后面的就不再执行了。也因此,函数有一个特点:只有一个返回值,全局返回、接收这个值。 function sum (a, b) { var res = a + b return res } var num = sum(3, 6) console.log(原创 2020-07-03 14:53:00 · 677 阅读 · 0 评论 -
js实现点击div随机更换背景色
原理先知: 使用background:rgb(r,g,b),三原色色值指定方式设置div的背景颜色,其中 r , g , b , 三个颜色值随机取到。样式设置: html,body { height: 100%;} div { height: 100%;background-color: black;}PS:这里初始,设置样式,让div铺满整个屏幕。便于观察。页面内容:<div id="test"><button id="btn">点我</button>&原创 2020-07-03 14:35:30 · 3609 阅读 · 0 评论 -
如何在 CSDN上显示代码编译器中原样式的彩色代码块
刚开始我写博客的时候,只知道将代码部分选中,然后设定为代码块,然后页面显示的效果就是下图:如何让我们页面编辑器里粘贴上的代码以原编译器中那样彩色的样式显示呢?百度了下,发现很简单。当我们往页面编辑器里粘贴代码时会发现它只不过是在选中的代码块区域前后加上了~ ~ ~ ,三个符号。这时候我们根据代码的种类,加上种类名字即可:如果你用的编程语言是 C# ,要写成小写c ,中间空格,然后加个 # 。如果是c,java,python语言的话直接加到~ ~~后面就行了。这里我的是JavaScript代码,我在~原创 2020-06-18 16:13:45 · 349 阅读 · 0 评论 -
break关键字和continue关键字对循环的控制及区别—JavaScript
break关键字:直接跳出循环,当前次循环break关键字后面的代码不会执行;用以提前或在特定的情况结束循环,可以用在3种循环之中。 for(var i = 0 ; i < 10 ; i ++){ // 第一次执行的时候 i 值为 0 ; 第六次执行 , i值等于5。 console.log(i);//控制台打印到 5 ,循环不再执行 if( i === 5 ){ break; console.lo原创 2020-06-18 15:57:40 · 278 阅读 · 0 评论 -
for循环语句的逻辑剖析—JavaScript
for 语句 : 整体性特别强,语法特别简练 (所以相对于其他循环语句开发中更推荐使用)书写格式 : for ( 1.计数器的声明; 2.循环执行条件判定;3.计算器的计算 ){// 循环执行代码块;}简单示例for(var count = 0; count < 10 ; count++ ){ // {} => 专心写需要重复执行的代码; console.log(count) }循环执行次 数:10 ;自增执行次原创 2020-06-18 15:32:09 · 836 阅读 · 0 评论 -
Math.round( )和toFixed( )—JavaScript中的四舍五入方法
Math.round(变量) (用于数字取整:四舍五入)注:Math.round()以后类型是number var str = "1.534"; var num = Math.round(str); console.log(num); // number console.log(typeof num); //控制台打印输出2变量 . toFixed(保留位数) :可以指定四舍五入保留位数注:toFixed以后类型是string v原创 2020-06-18 10:10:04 · 433 阅读 · 0 评论 -
JavaScript解构赋值(ES6)
1. 数组的解构 (按顺序解构)把数组里的元素按顺序赋值给四个变量:●如果解构的变量少于数组元素,那么就只解构前几个元素。●如果解构的变量多于数组元素,那么多余的变量就是undefined。var arr = [4, 3, 9, 7] var [a, b, c, d, e] = arr console.log(a) //打印4 console.log(b) //打印3 console.log(c) //打印9 console.log(d)原创 2020-06-17 09:23:55 · 276 阅读 · 0 评论 -
JavaScript:五种基本数据类型
JavaScript基本类型;五种 如果六种(symbol( ))1. string : 数据外面有 ‘’ 或者 “” 把类型归类为字符串!; 可以表达任意数据,或者说任何类型数据都可以用字符串的形式表示; var a = "hello"; var b = 'hello'; console.log(a); console.log(b);2. number : 数字 (没有整型和浮点型的区别:整数和小数都是number类型,) var a = 123;原创 2020-06-16 16:01:20 · 3692 阅读 · 0 评论 -
JavaScript的三大组成部分
JS三大组成部分① ECMAScript:代表了语言的标准,规范。描述了语言的基本语法和数据类型。② BOM:代表了浏览器。(相当于浏览器的遥控器)描述了浏览器窗口的操作和使用,被称为浏览器对象模型,抽象出的对象为Window。通过 BOM 可以操作浏览器。比如: 弹出框、浏览器跳转、获取分辨率等③ DOM:代表了页面。描述了在浏览器中呈现给用户视觉显示的页面的操作和使用,被称为文档对象模型,抽象出来的对象为Document。可以操作页面中的元素。比如: 增加个 div,减少个 div原创 2020-06-16 14:22:44 · 457 阅读 · 0 评论 -
oninput事件
oninput 事件在用户输入时触发。一般用在在 或 中的数据值发生改变时触发。注:该事件和onchange 事件有些类似。不同之处在于 oninput 事件在元素值发生变化是立即触发, onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 和 元素。**一个简单的示例:**实时的获取输入框中用户输入的内容<p>在文本框中尝试输入触发函数。</p><input type="text" id="myInput" oninp原创 2020-06-06 11:09:56 · 2304 阅读 · 0 评论 -
split()字符串拆分为数组&&join()数组转字符串
**split():**根据分隔符、将字符串拆分成数组。注1:方法括号里面可以是双引号也可以是单引号,这是必须项。如果括号里什么都没有,字符串是按原样存放在一个数组里。var str = "abcdefg";var arr = str.split('');console.log(arr);//打印:a,b,c,d,e,... 注2:如遇到日期2020/02/02 || 2020-02-02这种,我们可以在引号里写入这种字符,即可达到拆分效果。var str = "2020-03原创 2020-06-06 15:00:37 · 808 阅读 · 0 评论 -
slice( )、substr( )、substring( )三个字符串截取方法的使用和区别
**substring(start,end):**用来截取字符串的内容,以两个参数中较小一个作为起始位置,较大的参数作为结束位置(截取内容不包括结束位置)。end不支持负数,会忽略负数。var str = “hello world”;var res = str.substring( 1 , 5 );console.log(res); //打印ello , 如果end是6的话就打印空格了var res = str.substring( 1 , -5 ); //打印h相当于var res =原创 2020-06-06 16:19:05 · 1324 阅读 · 0 评论 -
indexOf( )和lastIndexOf( )方法(JS字符串检索)
indexOf():返回某个指定的字符串值在字符串中首次出现的位置。 var str ="Hello world!"; var res = str.indexOf("o"); console.log(res);//打印7lastIndexOf():从后向前搜索指定字符串出现的最后位置。 var res = str.lastIndexOf("o"); console.log(res);//打印7 两个o,我们找的是o最后一次出现的位置...原创 2020-06-06 17:40:01 · 295 阅读 · 0 评论 -
使用cookie记忆拖拽的div的位置:js实现
前言:实现鼠标拖拽移动div位置,当一次移动完成,鼠标键抬时,此时的位置属性值存入cookie。刷新页面,从新从cookie中取出div的位置属性值,从而实现对div位置的记忆。1.页面代码:<head> <meta charset="UTF-8"> <title></title> <style> .box { position: absolute; w原创 2020-06-08 16:15:58 · 459 阅读 · 0 评论 -
JS中继承方案:罗列常见的四种
1原型继承:子类的原型指向父类的一个实例//父类function Person() { this.name = "周乃康"; } Person.prototype.getName = function getName() { console.log(this.name); }; //子类 function Boy() { this.bname = '周原创 2020-06-09 10:36:38 · 249 阅读 · 0 评论 -
JavaScript和Java的关系
JavaScript和Java的关系:周杰和周杰伦的关系。不过JavaScript借鉴了很多Java的语法。刚开始一上来,刚接触JavaScript的时候,我很懵,因为我大学本专业学的比较偏后端,上来从C语言、Java开始学。所以觉得他像Java但是又有点不像Java。我觉得像的地方是:一些语句写法、逻辑什么、还有一些概念都几乎一样;不像的地方是,JavaScript的主要作用是实现前端页面的一些交互效果和前后端逻辑的对接上,而Java主要是负责后端逻辑操作的真正实现。下面我们可以看一张前后端分离的系统原创 2020-06-13 14:39:36 · 609 阅读 · 0 评论 -
JavaScript的三种书写方式:行内式、内嵌式、外链式
1) 行内式:在html标签的属性内,通过行为触发执行.(几乎不用)2) 内嵌式:在html文件内使用script标签包裹起来,页面打开自动执行。(使用方便,但是大篇幅的JS代码千万不要用。)3) 外链式:写在独立的js文件内,在html文件中使用script标签的src属性引入,页面打开自动执行。(推荐使用,因为有各种优化方法)注:行内真的很少用,几乎不用。内嵌和外链不能共用一个script标签。外链的script标签,原则上来说可以放在任何位置。外链的script属性为src,不是href原创 2020-06-13 14:55:46 · 16024 阅读 · 3 评论 -
call( ) 、 apply( ) 、 bind( )的使用以及区别:
先看两个简单的示例**示例-1:**这里的this指向调用的对象var obj = { name:'甄妮', oAge:28, oFun:function(){ console.log(this.name + "年龄" + this.age); } } console.log(obj.name);//打印甄妮原创 2020-06-08 20:32:46 · 137 阅读 · 0 评论 -
JavaScript实现输入月份,显示当月的天数
这个案例的实现的一个关键点是:二月的天数是不确定的,当我们输入2的时候,需要判断这一年是平年还是闰年。 var month = prompt("请输入月份"); var year = prompt("请输入年份"); //month是字符串类型需要进行类型转换; switch( Number(month) ){ case 1 : case 3 : case 5 :原创 2020-06-15 14:14:13 · 3913 阅读 · 4 评论 -
JS实现成绩等级判断
评判标准: 优秀:90分及以上 良好:60分—89分 一般:60分以下逻辑思想:我们知道成绩十位上的数字即可。 var score = prompt("请输入成绩我们将为您打分"); //注:这里一定要加一个取整 score_level = parseInt(score / 10); switch( score_level ){ case 10 : case 9 :原创 2020-06-15 10:18:36 · 5032 阅读 · 2 评论 -
JS中怎么表示 π (pai)
首先我们都知道圆的周长等于 π 乘以圆的直径,但是 π 这种值怎么在JavaScript程序中表示呢?我也在网上搜了好几篇JS关于 π 的表示博客查看,他们给的答案一般都是:Math.PI,然后解释PI就是圆周率π,PI是弧度制的π,也就是180°,所以,Math.PI = 3.14 = 180°。我总觉得这解释的一知半解,首先当我们碰到计算圆的周长这样一行代码实现逻辑的问题,绝大部分的可能也是刚接触JavaScript,对JavaScript也没有那么的了解,这一知半解的解释,也是让人有些懵原创 2020-06-15 09:52:32 · 10618 阅读 · 0 评论