【JavaScript基础到进阶】
JS基础-JS高级技巧
不停喝水
Web. Write Less,Do More
展开
-
【Regular Expressions】正则校验参数必须被/{params}/包裹
类型的请求参数必须以/{}/包裹原创 2022-07-05 18:48:22 · 163 阅读 · 0 评论 -
vue element input => 只允许数字-保留4位小数-正则校验
<el-input v-model="item.data_id" placeholder="序号" type="number" onkeypress="return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )"></el-input>这里的 οnkeypress="return( /[\d]/.test(String.fromCharCode(.原创 2021-01-18 22:16:17 · 6324 阅读 · 1 评论 -
【JavaScript 】在 JavaScript 中使用展开运算符
如果您有一个数字数组并且您想找到这些数字中的最小值,那么在没有展开运算符的情况下,您需要使用它们的索引一个一个地传递元素,或者使用apply()方法来传递数组作为参数。它可用于将集合和数组中的元素扩展为单个单独的元素。在本教程中,您将了解在 JavaScript 中使用扩展运算符的不同方式,以及扩展运算符和剩余运算符之间的主要区别。它还可以用于从字符串创建对象,其中,字符串中的索引成为属性,该索引处的字符成为属性的值。扩展运算符可用于从数组创建对象,其中数组中的索引成为属性,该索引处的值成为属性的值。原创 2022-10-08 13:47:39 · 575 阅读 · 0 评论 -
【JavaScript 】动态添加form,并两个数组组成一个一一对应的key:value对象
因为后端给的就是两组数据 并且要求传过去入参是key:value对应的对象包含多个对象形式。objKey) 处理成想要的对象形式数据。1.先找到对应key数据,通过map去循环并且把key的name,当做对应的key。3.但是后端需要的数据是一个对象,里面嵌套的都是对应key:value形式。5.但是我们正常对接操作应该是一个list的数组对象来循环的。2.然后通过动态添加来push添加新默认数据。1.这里我们直接通过两个数组来处理,定义数据。2.对应的value当做对应的新的value。...原创 2022-08-04 10:32:18 · 894 阅读 · 0 评论 -
【JavaScript 】根据数组相同Key合并对应values && 删除tree无用数据
题目 let arr = [{ name: 'a', values: [1, 2] }, { name: 'b', values: [3] }, { name: 'a', values: [4, 5] }] // 转换成如下 const arr111 = [ {name: 'a', values: [1, 2, 4, 5]}, {name: 'b', value原创 2022-03-30 15:09:32 · 992 阅读 · 0 评论 -
【JavaScript 】多层数组嵌套取其中某个值组成新的数组-动态渲染table头部内容
一:多层数组嵌套取其中某个值组成新的数组List: [ { id: 1, name: "haha", tag_list: { 0:{ id: 89 is_checked_arr: [259, 260] is_checked_str: "" }, 1:{ id: 90 is_checked_arr: [259, 260] is_checked_str: "" },原创 2021-12-23 15:16:29 · 2480 阅读 · 0 评论 -
【Regular Expressions】只需40分钟,刷满55题,就能正则表达式入门
介绍RegEx 是正则表达式(Regular Expression)的简称。它便于匹配、查找和管理文本。请在输入框中键入 OK,开始第一步以了解更多的细节。RegexLearn – 55 题,40分钟,入门正则( https://meta.appinn.net/t/topic/28243),对于正则表达式,真是又爱又恨。爱的是它真香,恨的是它总忘。题目1.第一题...原创 2021-12-20 15:40:09 · 281 阅读 · 0 评论 -
JavaScript => JavaScript编码规范指南
JavaScript 编码规范指南以下文档大多来自:Google JavaScript 编码规范指南Idiomatic 风格对于未提及的事项可以参考airbnb的JS编码规范airbnb/javascript基本原则: 无论有多少人在维护,所有在代码仓库中的代码理应看起来像同一个人写的。前言下面的章节描述的是一个 合理 的现代 JavaScript 开发风格指南,并非硬性规定。其想送出的核心理念是高度统一的代码风格(the law of code style consistency原创 2021-08-31 11:51:38 · 1182 阅读 · 0 评论 -
JavaScript => 解决 Unexpected lexical declaration in case block 的问题
使用新版的 es-lint 的时候扫描旧的项目,发现报了Unexpected lexical declaration in case block(no-case-declarations)这么一个错误提示当时很奇怪,就去查了一下文档,发现中文文档中解释比较简单该规则禁止词法声明 (let、const、function 和 class) 出现在 case或default 子句中。https://cn.eslint.org/docs/rules/no-case-declarations.原创 2021-08-24 16:03:03 · 597 阅读 · 0 评论 -
JavaScript => 秒转换天时分秒展示
在后端没有返回时间戳的情况下,只是返回给总得秒数,我们想展示 6天-10小时-50分钟-30秒,这样封装到工具函数,然后调用就行了/** * 把秒转换为天-小时-分钟-秒展示 */export function SecondToDate(msd) { var time = msd if (time != null && time != '') { if (time > 60 && time < 60 * 60) { time =原创 2021-08-16 16:15:22 · 499 阅读 · 0 评论 -
JavaScript =>省市区 将一个没有层级的扁平对象,转换为树形结构({value, children})结构的对象
前端开发肯定要用到级联省市区级联选择器的如果有这样一个具有层级结构的数据,实现这个功能非常容易,因为这个结构和组件的结构是一致的,递归遍历就可以了。但是,由于后端通常采用的是关系型数据库,所以返回的数据通常会是这个样子:entries: [ { 'province': '浙江', 'city': '杭州', 'name': '西湖' }, { 'province': '四川', 'city': '成都', 'name':.原创 2021-07-08 19:27:28 · 1662 阅读 · 0 评论 -
32-1 WebAPIs 触屏事件 click 延时解决方案 移动端常用开发插件 本地存储localStorage
没写原创 2020-08-17 21:56:24 · 194 阅读 · 0 评论 -
30-1 WebAPIs 元素偏移量 offset 元素可视区 client 模态款 放大镜 动画函数封装
**1.1. 元素偏移量 offset 系列1.1.1 offset1.1.2 offset 与 style 区别offsetoffset 可以得到任意样式表中的样式值offset 系列获得的数值是没有单位的offsetWidth 包含padding+border+widthoffsetWidth 等属性是只读属性,只能获取不能赋值所以,我们想要获取元素大小位置,用offset更合适...原创 2020-08-15 23:21:47 · 128 阅读 · 0 评论 -
26-1 webAPIs 获取元素 操作事件,元素,属性,样式
1.什么webAPI?API:就是一些方法或者属性的统称. 总结:用来操作网页的方法或者属性--->操作对象 特点:记各种操作网页的方法和属性2.DOM2.1.DOM就是来操作网页的,网页有事由标签组成的,DOM最后就是在操作网页中的标签console.log将对象,变量以字符串的形式输出到控制台console.dir().将信息以对象键值对的形式输出到控制台中...原创 2020-07-28 21:59:53 · 189 阅读 · 2 评论 -
27-1 WebAPIs 排他思想 自定义属性操作 节点操作
1. 排他思想原创 2020-08-01 18:55:17 · 181 阅读 · 0 评论 -
31-1 WebAPIs 动画函数封装 轮播图 节流阀 触屏事件
1.1. 动画函数封装1.1.1 缓动效果原理缓动动画就是让元素运动速度有所变化,最常见的是让速度慢慢停下来思路:让盒子每次移动的距离慢慢变小,速度就会慢慢落下来。核心算法: (目标值 - 现在的位置) / 10 做为每次移动的距离步长停止的条件是: 让当前盒子位置等于目标位置就停止定时器注意步长值需要取整1.1.2 动画函数多个目标值之间移动可以让动画函数从 800 移动到 500。当我们点击按钮时候,判断步长是正值还是负值 1.如果是正值,则步长往大了取整 2原创 2020-08-16 22:14:53 · 167 阅读 · 0 评论 -
29-1 WebAPIs 键盘事件 BOM location对象
1.1. 常用的键盘事件1.1.1 键盘事件 <script> // 常用的键盘事件 //1. keyup 按键弹起的时候触发 document.addEventListener('keyup', function() { console.log('我弹起了'); }) //3. keypress 按键按下的时候触发 不能识别功能键 比如 ctrl shift 左右箭头啊原创 2020-08-12 22:46:21 · 226 阅读 · 0 评论 -
28-1 WebAPIs 删除, 复制节点 二维数组 事件高级
1.节点操作1.1 删除节点node.removeChild() 方法从node节点zho-ng删除一个子节点,放回删除的节点. ul.removeChild(ul.children[0]);原创 2020-08-07 23:22:48 · 141 阅读 · 0 评论 -
38 JavaScript高级 this指向 函数的定义和调用 严格模式 闭包 递归 高阶函数
1.函数的定义和调用1.1函数的定义方式方式1 函数声明方式 function 关键字 (命名函数)function fn(){}方式2 函数表达式(匿名函数)var fn = function(){}方式3 new Function()var f = new Function('a', 'b', 'console.log(a + b)');f(1, 2);var fn = new Function('参数1','参数2'..., '函数体')注意/*Function原创 2020-09-09 21:29:53 · 134 阅读 · 0 评论 -
40 JavaScript高级 ES6 let 箭头函数 Array扩展 Set数据结构
ES6新增语法let(★★★)ES6中新增了用于声明变量的关键字let声明的变量只在所处于的块级有效 if (true) { let a = 10; }console.log(a) // a is not defined**注意:**使用let关键字声明的变量才具有块级作用域,使用var声明的变量不具备块级作用域特性。不存在变量提升console.log(a); // a is not defined let a = 20;暂时性死区 TDZ利用let声明的变量会绑定原创 2020-09-10 21:45:45 · 220 阅读 · 0 评论 -
JavaScript =>new Date() 日期格式处理
1.基本概念var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-????) myDate.getMonth(); //获取当前月份(0-11,0代表1月) // 所以获取当前月份是myDate.getMonth()+1; myDate.getDate(); //获取当前日(1-31) myDate.getDay(); //获取当前星期X(0原创 2021-06-30 16:31:06 · 931 阅读 · 0 评论 -
36 JavaScript高级 面向对象 类面向对象tab栏切换删除添加编辑
1.面向对象面向对象是把事务分解成为一个个对象,然后由对象之间分工与合作。原创 2020-08-30 16:34:39 · 174 阅读 · 0 评论 -
JavaScript =>数组 扁平化flat flatMap 填充fill 筛选includes
一.数组扁平化把多维数组转换为一层数组1.arr.flat(num)1.如果有固定的层数,那就给Num一个数字2.如果不知道有多少层,那就给一个Infinity结果3.取多维数组里面的某个值flatMapflatMap函数说明例子如下:1.我想取到多维数组里面的name,不想要age,可以这样来操作2.先通过flatMap()先转成一维数组3.然后通过filter进行过滤出index为0的一个参数,那就是Name二.数组填充fill例子:结果:原创 2021-03-23 23:32:27 · 329 阅读 · 0 评论 -
JavaScript高级 => reduce()的使用
reduce()// 高级用法1: 对象里的属性求和let array = [ {name:'张三', age:12}, {name:'李四', age:22}, {name:'王五', age:32}, {name:'赵六', age:42}];let temp = array.reduce((num,item)=> { return item.age + num // num初始值0 接收每次返回值},0);console.log(temp);// 108 年龄总和c原创 2021-02-25 13:44:41 · 135 阅读 · 0 评论 -
37 JavaScript高级 构造函数 原型链 继承 ES5新增方法 Object.defineProperty
1.构造函数和原型1.1对象的三种创建方式–复习字面量方式var obj = {};new关键字var obj = new Object();构造函数方式function Person(name,age){ this.name = name; this.age = age;}var obj = new Person('zs',12);1.2静态成员和实例成员1.2.1实例成员实例成员就是构造函数内部通过this添加的成员 如下列代码中uname age原创 2020-09-09 21:25:08 · 211 阅读 · 0 评论 -
39 JavaScript高级 正则表达式
1.正则表达式概述1.1什么是正则表达式正则表达式( Regular Expression )是用于匹配字符串中字符组合的模式。在JavaScript中,正则表达式也是对象。正则表通常被用来检索、替换那些符合某个模式(规则)的文本,例如验证表单:用户名表单只能输入英文字母、数字或者下划线, 昵称输入框中可以输入中文(匹配)。此外,正则表达式还常用于过滤掉页面内容中的一些敏感词(替换),或从字符串中获取我们想要的特定部分(提取)等 。其他语言也会使用正则表达式,本阶段我们主要是利用JavaScript原创 2020-09-09 21:33:34 · 213 阅读 · 0 评论 -
25-1 JavaScript基础 内置对象 Math Date 数组对象
1原创 2020-07-25 22:03:15 · 138 阅读 · 0 评论 -
24-1 JavaScript基础 对象
1 - 对象1.1 对象是由属性和方法组成的属性:事物的特征,在对象中用属性来到表示(常用名词)方法:事物的行为,在对象中用方法来表示(常用动词) 例如:手机属性:大小,颜色,重量,屏幕尺寸,厚度 方法:打电话,发短信,玩游戏,砸核桃1.2 创建对象的三种方式利用字面量创建对象.利用new Object创建对象利用构造函数创建对象1.3 利用字面量创建对象 花括号{} 里面包含了表达这个具体事物(对象)的属性和方法; {} 里面采取键值对的形式表示键原创 2020-07-23 16:59:45 · 91 阅读 · 0 评论 -
23-1 JavaScript基础 函数 return arguments 作用域
函数1.定义函数function fn();2.调用函数fn();原创 2020-07-19 13:19:28 · 292 阅读 · 0 评论 -
22-1 JavaScript基础 数组
1 - 数组1.1 数组的概念数组可以把一组相关的数据一起存放,并提供方便的访问(获取)方式。数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。数组时一种将一组数据存储在单个变量名下的优雅方式.1.2 创建数组JS 中创建数组有两种方式:利用 new 创建数组var ary = new Array();利用数组字面量创建数组var ary = [];数组元素的类型: 数组中可以存放任意类型的数据var arrStus = ['小白',原创 2020-07-18 22:03:13 · 101 阅读 · 1 评论 -
21-1 JavaScript基础 循环 for while do while continue break
1.如果一个变量没有赋值,他的默认值式undifined,不是数字类型2.undifined和任何的数字 进行数学运算最后的结果都是NaN3.以后在程序中遇到问题后,第一时间想到用断电调试21 - 循环1.1 for循环语法结构for(初始化变量; 条件表达式; 操作表达式 ){//循环体}| 名称 | 作用 || --------- | -------原创 2020-07-16 21:59:00 · 233 阅读 · 0 评论 -
20-1 JavaScript基础 运算符 流程控制 if else if switch
1 - 运算符(操作符)1.1 运算符的分类运算符(operator)也被称为操作符,是用于实现赋值、比较和执行算数运算等功能的符号。JavaScript中常用的运算符有:算数运算符递增和递减运算符比较运算符逻辑运算符赋值运算符1.2 算数运算符算术运算符概述概念:算术运算使用的符号,用于执行两个变量或值的算术运算。浮点数的精度问题浮点数值的最高精度是 17 位小数,但在进行算术计算时其精确度远远不如整数。var result = 0.1 + 0.2; //原创 2020-07-08 23:58:57 · 806 阅读 · 0 评论 -
19-1 JavaScript基础 变量 数据类型及转换
1.1 编程语言编程语言: 可以通过类似于人类语言的“语言”来控制计算机,让计算机为我们做事情,这样的语言就叫做编程语言(Programming Language)。编程语言是用来控制计算机的一系列指令,它有固定的格式和词汇(不同编程语言的格式和词汇不一样),必须遵守。如今通用的编程语言有两种形式:汇编语言和高级语言。语言类型说明汇编语言汇编语言和机器语言实质是相同的,都是直接对硬件操作,只不过指令采用了英文缩写的标识符,容易识别和记忆。高级语言高级语言主要是相对于低级原创 2020-07-05 23:45:11 · 200 阅读 · 0 评论