正儿八经学前端-CSDN博客

原创数组/字符串常用方法

【代码】数组/字符串常用方法。

2022-10-11 17:38:07 141 1

原创校验数据类型，防抖，节流，手机号脱敏，开关全屏，大小写转换，解析URL参数，判断手机是Andoird还是IOS，数组对象根据字段去重，滚动到页面顶部和元素位置，uuid，金额格式化，存储下载深拷搜索贝

常用开发技巧

2022-09-16 17:15:44 252

话不多说，直接上代码。function randomString(len) { len = len || 32; let timestamp = new Date().getTime(); /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/　　let $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; 　　let maxPos = $chars.length;　　let random

2021-11-18 09:46:05 1772

原创修改组件input框的placeholder字体颜色

直接在body里面放入一下样式： input::-webkit-input-placeholder,textarea::-webkit-input-placeholder { color:#ccc; } input:-moz-placeholder,textarea:-moz-placeholder { color:#ccc; } input::-moz-placeholder,textarea::-moz-placeholder { col

2021-09-15 14:15:22 189

原创 js 中英文名字长度脱敏

function formatName(name) { if (name.length === 2) { return name.substr(0, 1) + '*'; } else if (name.length > 2) { let char = ''; for (let i = 0, len = name.length - 2; i < len; i++) { char += '*'; } return nam..

2021-07-28 15:43:08 802

原创 vue的一些指令

2021-07-26 14:29:09 81

转载 JS 中的 ?. 与 ??

可选链操作符（?. 与 ??）1. 可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。当尝试访问可能不存在的对象属性时，可选链操作符将会使表达式更短、更简明。在探索一个对象的内容时，如果不能

2021-07-05 15:13:15 453

原创 JavaScript中常见的十五种设计模式

这篇文章觉得很好，简介明了能让人大致懂得这些模式，具体还是要自己去学习JavaScript中常见的十五种设计模式

2021-07-02 17:07:55 70

转载 JS中 reduce() 的用法

一、语法arr.reduce(function(prev,cur,index,arr){…}, init);其中，arr 表示原数组；prev 表示上一次调用回调时的返回值，或者初始值 init;cur 表示当前正在处理的数组元素；index 表示当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1；init 表示初始值。常用的参数只有两个：prev 和 cur。二、栗子先提供一个原始数组：var arr = [1,2,3,4,5,6,7,7];1. 求

2021-06-25 20:48:06 220

原创 Vue 里的 computed 和 watch 的区别

computedcomputed 是计算属性，它会根据你所依赖的数据动态显示新的计算结果计算属性将被加入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例通过计算出来的属性不需要调用直接可以在 DOM 里使用watch一个对象，键是 data 对应的数据，值是对应的回调函数。值也可以是方法名，或者包含选项的对象，当 data 的数据发生变化时，就会发生一个回调，他有两个参数，一个 val （修改后的 data 数据），一个 oldVal（原来的

2021-06-21 15:54:56 79

原创 js 中的闭包是什么

闭包简述：1.当一个函数访问另一个函数的局部变量，就会产生闭包2.当内层函数访问了外部的函数的局部变量，就会产生闭包<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<

2021-06-17 16:43:24 80

原创 js中的深拷贝与浅拷贝

浅拷贝：将对象中的各个属性依次进行复制，浅拷贝只复制一层对象属性，如果对象属性中还有对象，赋值仅仅是地址，会相互影响。深拷贝：将对象中的各个属性一次进行复制，深拷贝会递归赋值所有层的对象属性，如果对象属性还有对象，继续拷贝，会完全独立。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic

2021-06-11 11:54:18 127 2

原创 vue双向数据绑定原理

view(视图)到model(数据)的变化通过事件监听方法addEventListener()。model(数据)到view(视图)的变化是通过es5的数据劫持方法Object.defineProperty()。vue内部设置Object.defineProperty()方法中的get和set操作，属性拦截方式，把data对象中的数据转化get和set，数据变化视图更新。代码如下：<!DOCTYPE html><html lang="en"><head> .

2021-06-03 10:26:50 113

原创 js 对象数组遍历常用方法

遍历对象1、for … in 循环遍历对象自身的和继承的可枚举属性(循环遍历对象自身的和继承的可枚举属性(不含Symbol属性).).let obj = { name: '小明', age: '20' } for(let i in obj) { console.log(i, ':', obj[i]); } 结果如下图：2、使用Object.keys()遍历返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性)let obj = { n

2021-05-27 14:21:08 754

原创 Linux的常用命令

1.帮助命令1.1 help命令#语法格式：命令 --help#作用: 查看某个命令的帮助信息# 示例: # ls --help 查看ls命令的帮助信息 # netstat --help 查看netstat命令的帮助信息1.2 man命令#语法格式： man 命令#作用: 查看某个命令的帮助手册# 示例: # man ls #查看ls命令的帮助手册 # man netstat #查看netstat命令的帮助手册2

2021-04-06 09:13:41 511

转载 git 撤销&回滚命令合并指定文件到另一个分支

工作区：指自己写代码的工作目录，未进行 git add 操作之前。暂存区：执行过 git add 操作之后，但是为执行 git commit 操作。本地分支：执行过 git commit 操作，但是未执行 git push 操作。远程分支：执行过 git push 操作三种场景介绍：1.git add . 但是未进行 commit 操作。暂存区2.git commit 但是未进行 git push 操作。本地分支3.git push 操作了。

2020-11-17 17:38:06 2409

原创 js 短路运算

&& 和 || 也叫短路运算符短路&&：只要碰到了假值(false)，就会短路，并返回该假值，只要短路，不会继续执行后面的表达式。短路||：只要碰到了真值(true)，就会短路，并返回该真值，只要短路，不会继续执行后面的表达式。(一般用作默认值)注意：假值有以下6个：null undefined NaN false 0 ’ ’ console.log('abc' && null); // null conso..

2020-11-13 14:34:35 2418

原创在JavaScript 中如何检查对象为空

可以使用ES6中的“Object.keys()"方法。严谨写法如下：function isEmptyObject (value) { value && Object.keys(value).length === 0 && value.constructor === Object}

2020-10-21 12:57:32 71

原创 Vue之在methods中使用filter的方法

方法如下：this.$options.filters['过滤的方法名'](传入需要过滤的值)

2020-10-13 16:38:24 648 2

原创二维数组扁平化处理方法

方法如下：...new Set([].concat(...arr).map(i=>i.aaa))效果如下：

2020-10-10 17:16:54 1065

原创 ios滑动流畅

只需添加一行css样式：如下-webkit-overflow-scrolling: touch<div class="dy-body" v-if="showContent" style="-webkit-overflow-scrolling: touch;">

2020-09-29 14:44:47 90

原创随机点名 / 抽奖效果

上代码！<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } table { margin: 50px auto; } td {

2020-09-23 16:33:39 355

转载 flex布局- 属性说明

flex 包括容器container和内部元素item，容器中存在两条轴，水平主轴main axis和垂直交叉轴cross axis，可以通过容器的flex-direction属性修改主轴方向flex 容器指定元素为flex布局容器：.container { display: flex | inline-flex; //块级元素使用flex、行内元素使用后者}注意：设置为flex布局后，子元素的 float、clear（清除浮动）、vertical-align（垂直对齐）

2020-09-15 12:35:42 282

原创 ES6中常用使用方法

1、解构赋值数组解构以前，为变量赋值，只能直接指定值。let a = 1;let b = 2;let c = 3;ES6 允许写成下面这样。let [a, b, c] = [1, 2, 3];解构默认值let [a = 0, b, c] = [1, 2, 3];对象解构解构不仅可以用于数组，还可以用于对象。let { foo, bar } = { foo: 'aaa', bar: 'bbb' };foo // "aaa"bar // "bbb"如果变量名与属性名

2020-09-11 16:37:54 219

原创 ES5 中的 forEach，map， filter， some， every新方法

1、forEachforEach() 方法对数组的每个元素执行一次提供的函数。功能等同于for循环.应用场景：为一些相同的元素，绑定事件处理器！栗子：遍历数组[“张飞”,“关羽”,“赵云”,“马超”]var arr = ["张飞","关羽","赵云","马超"];//第一个参数：element，数组的每一项元素//第二个参数：index，数组的下标//第三个参数：array，正在遍历的数组arr.forEach(function(element, index, array){ cons

2020-09-11 16:06:56 152

原创 ES6中 let ，const的使用方法

1、 let的使用ES6 新增了let命令，用来声明变量。它的用法类似于var。let声明的变量只有在当前作用域有效{ let a = 10; var b = 1;}a // ReferenceError: a is not defined.b // 1不存在变量提升// let 的情况console.log(bar); // 报错ReferenceErrorlet bar = 2;不允许重复声明let a = 10;let a = 1;//报错

2020-09-11 15:48:24 105

转载时间戳转为年月日时分秒格式, 日期时间比较

1、自定义方法转换小于10前面补0 function add0 (m) { return m < 10 ? '0' + m : m }转为年-月-日时:分:秒格式 function dateTime (ts) { var time = new Date(ts) var year = time.getFullYear() var month = time.getMonth()+1 var day = time.get

2020-09-11 10:42:54 3241

原创移动端 h5唤起拨号界面(支持iOS，Android)

方法：tel: 接电话号码栗子：tel:95382上代码：<div class="mobilePhone"> <a :href="`tel:${personalInfo.mobilephone}`">拨打手机</a> <a v-if="personalInfo.mobilephone === '' ? true : false">拨打手机</a></div><div class="hotline">

2020-09-10 11:33:06 1594 1

转载 vue中$refs、$emit、$on、props、$parent的使用场景及方法

1、$emit的使用场景子组件调用父组件的方法并传递数据子组件：<template> <button @click="emitEvent">点击我</button></template><script> export default { data() { return { msg: "我是子组件中的数据" } }, methods: { emitEvent

2020-09-09 16:39:36 890 3

原创 == 的说明

== 不会比较类型只会比较值（把值都转成相同的类型，再比较）console.log('11' == 11);console.log('11'=== 11)打印结果如下：注意：NaN 不等于任何值包括NaN2. null 只会等于null 和 undefined3. undefined只会等于 null 和undefined4. 如果两边有数字或者布尔类型都转成数字比较 true 1 false 0 ‘’ 0 [] 0 {} NaN5. 如果是一个字符串另.

2020-07-22 11:31:50 107

原创 arguments的使用说明

arguments的说明：1. 任意的一个函数内部，都有一个对象， arguments。arguments的作用：获取传递过来的所有的实参。function fn(a, b) { console.log(arguments[0] + arguments[1]) console.log(arguments) } fn(1, 2)打印结果如下：注意：arguments 如果将来参数的个数不确定的时候，需要使用argumentMath.max() 求任意多个数的最大

2020-07-22 10:18:17 760