- 博客(48)
- 资源 (2)
- 收藏
- 关注
原创 JavaScript:Promise
一个Promise对象如果被resolve或者reject,那么状态就不能再进行改变了.then 和 .catch。
2023-05-26 17:26:03 952
原创 JavaScript:数组
从前往后查询,返回匹配上的元素所在数组的索引值,匹配不上返回-1简单数据类型的元素查询的时候比较的是值,复杂数据类型的元素比较的是地址。
2023-05-23 11:31:54 560
原创 JavaScript:对象
用于创建对象,和 new Object() 的区别在于:该方法创建出来的对象的原型取决于传递的参数,而 new Object() 创建出来的对象永远指向 Object的 prototype。
2023-05-23 11:31:20 557
原创 JavaScript: 常用的深拷贝的三种方式
JSON.parse( JSON.stringify( ))JSON.parse( ) 用于将 JSON 格式的字符串 转为 对象或数组JSON.stringify( ) 用于将 对象或数组 转为 JSON 格式的字符串缺点: 如果拷贝的内容含有 symbol ,map 等类型的时候,会自动忽略掉这些内容let arr = [1,2,3,4,5];let arr2 = JSON.parse(JSON.stringify(arr));Object.assign( )参数
2022-01-05 15:08:26 480
原创 js-cookie
js-cookiejs-cookie 是一个简单的,轻量级的处理 cookies 的 js API下载npm install js-cookie引入import Cookies from "js-cookie"添加// 创建简单的 cookieCookies.set("name","value");// 创建有效期为7天的 cookieCookies.set("name","value", { express: 7 });// 为当前页面创建有效期为7天的 cookieCoo
2021-12-30 16:37:05 576
原创 TypeScript 基本数据类型
TypeScript: 基本数据类型在 typescript 中声明一个变量,同时指定它的类型,在以后的使用过程中,该变量的值只能是这种类型文章目录TypeScript: 基本数据类型字符串类型数字类型布尔类型数组对象函数any 类型unknown 类型元组枚举补充省略变量类型只声明变量不能省略声明变量的关键字联合类型交叉类型通过字面量进行类型声明类型断言类型别名字符串类型ts 中字符串也可以使用 反引号,用法和 js 一样let a: string = "aaa";数字类型数字类型支持 十
2021-12-20 20:35:22 593
原创 web-worker的学习
Web Worker作用Web Worker 的作用,就是为 JavaScript 创造多线程环境,允许主线程创建 Worker 线程,将一些任务分配给后者运行。在主线程运行的同时,Worker 线程在后台运行,两者互不干扰。等到 Worker 线程完成计算任务,再把结果返回给主线程。优点一些计算密集型或高延迟的任务,被 Worker 线程负担了,主线程(通常负责 UI 交互)就会很流畅,不会被阻塞或拖慢Worker 线程一旦新建成功,就会始终运行,不会被主线程上的活动(比如用户点击按钮,提交表
2021-12-07 17:12:04 758
原创 nodejs接受前端传来的参数并返回数据
nodejs接受前端传来的参数并返回数据一 、需求分析 前端传来一个参数,然后用nodejs作为后端接收,并将数据返回给前端二、实现步骤后端用nodejs来实现,通过设置一个接口来处理数据数据传递一定存在跨域问题,这里通过 cors 处理跨域问题前端通过Ajax将参数传递给该接口三、后端实现代码建立一个 test.js 文件//导入 express 模块, npm install express -S//导入 cors模块, npm install cors -Sconst ex
2021-11-08 13:00:06 5716
原创 项目中的node_modules、package.json和package-lock.json的作用和联系
项目中的node_modules、package.json和package-lock.json的作用和联系node_modules :存放项目需要的依赖包和下载的依赖包package.json: 存放项目的依赖包信息package-lock.json:存放项目的版本信息和下载地址这三个包之间的关系:当项目中只有package.json这个文件时,通过 npm install 可以下载依赖,自动生成 node_modules 文件夹和 package-lock.json 文件当项目中只有p
2021-11-04 10:42:19 1057
原创 Vue CLI : 项目流程分析
Vue CLI: 项目流程分析一、使用Vue-cli创建Vue项目命令行中输入 npm install -g @vue/cli 安装好vue-cli命令行中输入:vue create 项目名称 ,创建一个项目二、项目分析1、public目录下的index.htmlvue-cli创建的项目为单页面应用,index.html作为整个项目唯一的html文件。在index.html中,可以使用 lodash template 语法<%= VALUE %> 用来做不转义插值;<
2021-10-25 23:13:31 630
原创 Vue CLI: 初次使用vue-cli
Vue CLI: 初次使用Vue CLI一、vue-cli介绍 vue-cli :Vue.js 开发的标准工具,一个基于 Vue.js 进行快速开发的完整系统 vue-cli官网:https://cli.vuejs.org/zh/二、vue-cli的使用安装 npm install -g @vue/cli检测 vue --version卸载 npm uninstall -g @vue/cli三、创建vue项目 输入 npm install -g @vu
2021-10-25 20:29:28 141
原创 nodejs:express框架(一)router
nodejs:express框架(一)router一、介绍express是 基于 Node.js 平台,快速、开放、极简的 Web 开发框架 ,有着丰富的http工具。里面有着一个Router类,用来当作路由器,处理路由的转换。二、安装在整个项目所在的文件夹中安装npm install express -S三、创建创建一个router.js文件,用来设置主路由创建一个user.js文件,用来设置子路由四、user.js4.1、导入const express = requ
2021-10-14 23:38:49 793
原创 nodejs:mongoose模块
nodejs:mongoose模块一、介绍mongoose是一个让我们可以通过nodejs来操作MongoDB数据库的模块,mongoose模块里面封装了很多操作数据库的方法二、安装在整个项目所在的文件夹中安装npm install mongoose -S三、导入安装好mongoose依赖包之后,就可以书写js代码了,创建一个.js的文件,如:mongoose.js,按照下面步骤进行书写:const mongoose = require("mongoose");四、连接数据库mong
2021-10-14 21:04:12 877
原创 bootstrap:按钮和按钮组
bootstrap:按钮和按钮组按钮这张表的类名都是加在button标签上的。类名作用.btn作为基类,为其他按钮类提供样式(即:赋予button标签属于bootstrap风格的样式).btn-link让button标签像a标签一样(即:设置链接样式).btn-block将按钮变为块级元素,并且宽度设置为100%.active按钮变为激活状态(即:样式变为按钮按下去时的样式,背景颜色变深).disabled按钮变为禁用状态按钮尺寸大小
2021-10-09 10:34:22 811
原创 bootstrap:文本
bootstrap:文本类名作用.text-left文本向左对齐.text-center文本居中对齐.text-right文本向右对齐.text-justify文本两端对齐(支持度不好,不容易看到效果).text-nowrap文本不换行,强制一行显示.text-lowercase文本所有字母小写.text-uppercase文本所有字母大写.text-capitalize文本单词首字母大写.initialism文本所有字
2021-10-07 17:34:20 289
原创 bootstrap: 表格
bootstrap: 表格bootstrap中的table标签同样默认是没有边框的类名添加位置作用.table给table标签添加作为基类,为其他表格类提供样式(即:每一行上方多了一条水平线,并且表格宽度变为100%).table-striped给table标签添加隔行换色,单行为浅灰色背景颜色,双行白色背景颜色.table-bordered给table标签添加显示完整的内外边框(即:表格和单元格边框).table-hover给table标签添加当
2021-10-07 17:15:53 658
原创 HTML5: select标签
HTML5: select标签select标签作为一个HTML的双标签,存在两个常用的属性name属性: 表示select标签的名字id属性: 表示select标签的id,也可以作为label 标签链接的组件用法为: 其选择项option标签中的value值表示的是select标签选中后的value值,option标签中的内容表示显示 的内容 select标签初始值为默认选中第一项 <select name="color"> <option value
2021-10-05 16:20:10 5457
原创 bootstrap: 初次使用bootstrap框架
JavaScript: 初次使用bootstrap框架bootstrap官网:https://v3.bootcss.com/jQuery官网:https://jquery.com/使用流程:1、在浏览器中打开地址,点击下载Bootstrap2、进入到下载界面,点击下载Bootstrap3、下载完之后会得到一个 bootstrap-3.4.1-dist.zip 的压缩文件,将它解压,并将解压后的文件放到指定的文件夹中(之后方便通过相对路径进行引用)。4、由于bootstrap的js文件依赖
2021-09-29 18:03:08 18517 7
原创 JavaScript: 设计模式之组合模式
JavaScript: 设计模式之组合模式组合模式:几个构造函数有同名的的方法,将它们放到一个构造函数中一起启动class Person{ constructor(name){ this.name = name; } eat(){ console.log("饭"); }}class Student{ constructor(name){ this.name= name; } eat(){
2021-09-23 20:48:40 127
原创 JavaScript: 设计模式之单例模式
JavaScript: 设计模式之单例模式单例模式:原理:构造函数一生只创建一个对象当构造函数创建的每个实例对象的属性和方法都一模一样的时候,就可以使用单例设计模式(如: 工具类就可以使用单例设计模式)案例一:/* 案例一*/function fn(){ function Person(name){ this.name = name; } let per; return function ff(){ if(!per){
2021-09-23 20:46:41 137
原创 JavaScript: 设计模式之原型模式
JavaScript: 设计模式之原型模式JavaScript中存在着许许多多的设计模式,这些模式都可以帮助我们更快更好的规划代码下面就来介绍一下JavaScript中的原型模式原型模式:原型模式是一种 创建对象 的模式即: 通过一个对象作为原型来创建新的对象(创建一个对象作为另一个对象的__proto__属性)原理: 原型链用到的方法:Object.create(新创建对象的原型对象,[初始化额外的其他属性]) //第二个参数为可选该方法表示: 创建一个新对象,使用现有的
2021-09-23 20:42:21 479
原创 JavaScript: 装箱/包装类型/万能检测数据类型
JavaScript: 装箱/包装类型/万能检测数据类型在JavaScript中,值的类型分为基本数据类型和引用数据类型,也可以叫做:原始值类型 和 对象类型基本数据类型分为: string、boolean、number、null 和 undefined引用数据类型即:object其中,string、boolean、number有着对应的String、Boolean、Number对象,两者存在一定的区别 typeof 'hello'; // 'string' typeof new Stri
2021-09-23 20:24:15 145
原创 javascript nodejs中gulp的用法
javascript: nodejs中gulp的用法在node中提供了一个好用的工具npm,可以用来下载各个包在node中下载依赖包,然后新建一个gulpFile.js文件,将代码写入这个文件中就可以运行了/* gulp 下载依赖: npm i -g gulp npm i -D gulp*/const gulp = require("gulp");/* css 下载依赖: npm
2021-09-23 12:52:27 197
原创 js中的闭包
JavaScript:闭包1、产生闭包的条件:1、函数(外部函数)的返回值为一个函数(内部函数)2、内部函数引用了外部函数中的变量3、存在一个变量去接收外部函数的返回值(或者说:创造了一个不销毁的执行空间)2、最简单的闭包案例:function fn1(){ var a = 1; function fn2(){ console.log(a); } return fn2;}var f = fn1();这就是一个闭包;3、闭包的原理:
2021-09-14 00:47:45 169
原创 css中clip属性
css中的clip属性clip属性用于裁剪添加了绝对定位的标签用法: clip : rect(top,right, bottom, left) top: 表示裁剪区域的上边框距离标签左上角的垂直距离 right: 表示裁剪区域的右边框距离标签左上角的水平距离 bottom: 表示裁剪区域的下边框距离标签左上角的垂直距离 left: 表示裁剪区域的左边框距离标签左上角的水平距离未添加时:添加clip属性后:可以很明显的看出,左侧部分和上侧部分被裁剪掉了
2021-09-10 22:23:01 1080
原创 JavaScript: 打印一个等腰三角形
JavaScript: 打印一个等腰三角形<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style> span{ color: transparent; } </style></head><body>&
2021-08-21 16:44:27 744
原创 JavaScript: 关于字符串对象的八个方法
JavaScript: 关于字符串对象的八个方法方法作用charAt(索引)根据索引查找对应字符,找不到就返回空字符串charCodeAt(索引)根据索引查找对应字符的ASCII码,找不到就返回NaNindexOf(元素)查找元素在字符串中的索引下标,没有就返回 -1split(内容)字符串根据指定内容分割,形成一个数组substring(索引1,索引2)截取两个索引之间的所有元素substr(起始索引,截取的个数)从起始索引开始截取对应的个数
2021-08-17 20:24:35 864
原创 JavaScript: 多维数组的几个注意点
JavaScript: 多维数组的几个注意点一、多维数组的长度数组的长度获取的方法为: arr.length;而多维数组中,长度为最外层数组中元素的个数如:var arr = [[1,2,3],[7,2,8],[4,9,5],[3,6,8]];其中arr.length = 4;console.log(arr[1].length)则 arr[1].length = 3;二、多维数组的赋值在创建多维数组的时候,如果不附初值的话,那么在赋值的是不能直接赋值得逐层赋值如: var
2021-08-17 00:32:04 683
原创 JavaScript:关于循环、条件语句中声明的变量
JavaScript:关于循环、条件语句中声明的变量一、for循环 for(var i=0;i<=10;i++){ var a = 5; } console.log(a); //控制台输出a的值为5for循环中条件为假的时候输出undefined,条件为真的时候输出值二、while循环 var i = 0; while(i>0){ var a = 6; i++; } console.log(a); //控制台输出a的值为 un
2021-08-17 00:08:30 500
原创 JavaScript:用最少最简单的代码实现整数反转
JavaScript:用最少最简单的代码实现整数反转任意给定一个整数x,实现对整数进行反转,如x = 1456, 反转后为 6541.实现代码: var x = 1456; var n = 0; while(x != 0){ n = n*10 + x%10; // 循环一次,当前新的数乘以10,并加上原来整数的最后一位,实现反转 x = parseInt(x /10); // 循环一次,删除原来整数x的最后一位 } console.log(x);..
2021-08-14 16:34:54 272
原创 javascript:代码执行顺序(预解析)
javascript:代码执行顺序(预解析)在学习javascript的时候,总是会遇到由于代码顺序而出现的几个特殊情况,下面我就来介绍三个印象深刻的案例一、 var a a = b //出现问题 a = 0 b = 0 console.log(a) console.log(b) 上面这段代码,由于b没有声明和定义,所以 当 a = b 时,代码出现了问题,这时候,下面代码就不执行来,程序就会报错,什么也得不到二
2021-08-14 14:09:54 198
原创 快速理解CSS3中动画属性
快速理解CSS3中动画属性动画的原理是,将一套 CSS 样式逐渐变化为另一套样式,并且在动画过程中,可以多次改变这套 CSS 样式。文章目录快速理解CSS3中动画属性一、动画属性的声明二、动画属性的调用1、(简写) animation: 动画名称 运动时间 运动方式 运动次数;2、属性解析三、具体实现代码四、一个动画和旋转结合的具体代码案例一、动画属性的声明1、@keyframes 动画的名称 { from{ } //(起始位置,与0%相同) t
2021-08-14 10:58:28 195
原创 清晰易懂的了解CSS中的边框颜色渐变
清晰易懂的了解CSS中的边框颜色渐变使用边框颜色渐变之前,先简单了解一下两种渐变方式:线性渐变linear-gradient(方向, 颜色1, 颜色2, … ,颜色n);径向渐变radial-gradient(颜色1 覆盖区域大小,颜色2 覆盖区域大小, … );注:线性渐变的方向可以为: 1、一个方向值时: to bottom 表示从上边到下边 2、两个方向值时: to right bottom 表示从左上角到右下角 径向渐变的覆盖区域大
2021-08-13 00:16:36 12197 1
原创 JavaScript:判断回文数
JavaScript:判断回文数 var x = prompt("请输入一个整数:"); var y = 0; for (var i = 0; i <= x.length - 1; i++) { y = y + x[i] * Math.pow(10, i); } if (x == y) { confirm("这个数是回文数"); } else { confirm("这个数不是回文数"); }...
2021-08-11 20:45:06 846
原创 JavaScript:九九乘法表
JavaScript:九九乘法表 document.write('<table width="800" height="400">'); for(var i=1; i<=9;i++){ document.write("<tr>"); for(var j=1; j<=i; j++){ document.write("<td>"); document.write(j+"*
2021-08-11 20:06:34 176
原创 JavaScript:求阶乘1+2!+...+20!的和
JavaScript:求阶乘1+2!+…+20!的和var num=0;for(var i=1; i<=20; i++){ var a = 1; for(var j=1; j<=i; j++){ a = a * j; } num = num + a;}document.write(num);结果为: 2561327494111820300
2021-08-11 20:03:30 473
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人