- 博客(15)
- 收藏
- 关注
RSS订阅原创 vue3封装放大镜组件
组件基础结构**目的：**封装图片预览组件，实现鼠标悬停切换效果落地代码：<template> <div class="goods-image"> <div class="middle"> <img :src="images[currIndex]" alt=""> </div> <ul class="small"> <li v-for="(img,i) in im
2021-09-19 19:40:07
363
2
原创 数组的map方法
语法 : var newArr = arr.map( function callback(currentValue, index, array) {...}, thisArg)返回值：返回原数组每一项执行回调函数的结果组成的新数组。（不修改调用它的原数组本身）map方法会忽略空项，但会保留其位置， 如下：示例：var arr = [{key: 1, value: 10}, {key: 2, value: 20}, {key: 3, value: 30
2021-08-15 21:05:57
212
原创 readonly与disabled的区别
input元素的readonly与disabled的区别disabled和readonly这两个属性有一些共同之处，比如都设为true，则form属性将不能被编辑，但两者有一定区别：如果一个输入项的disabled设为true，则该表单输入项不能获取焦点，用户的所有操作（鼠标点击和键盘输入等）对该输入项都无效，最重要的一点是当提交表单时，这个表单输入项将不会被提交。而readonly只是针对文本输入框这类可以输入文本的输入项，如果设为true，用户只是不能编辑对应的文本，但是仍然可以聚焦焦点，并且在
2021-08-15 19:54:20
238
原创 什么是回流（reflow）和重绘（repaint）
1、想要了解回流和重绘先要知道html 加载时发生了什么在页面加载时，浏览器把获取到的HTML代码解析成1个DOM树，DOM树里包含了所有HTML标签，包括display:none隐藏，还有用JS动态添加的元素等；之后解析CSS，生成CSSOM树。然后将DOM树和CSSOM树结合，生成渲染树(Render Tree)。 render tree类似于DOM tree，但区别很大，因为render tree能识别样式，render tree中每个NODE都有自己的style，而且render tree不包含隐
2021-08-15 19:42:08
376
转载 Array对象常用的方法
Array对象常用的方法不改变原数组的方法1、concat()语法：arrayObject.concat(arrayX,arrayX,…,arrayX)输入值： 输入值可以是单个元素（多个元素），也可以是单个数组（多个数组）功能：连接两个或多个数组返回值：返回被连接数组的一个副本栗子：// arrayObject.concat(arrayX,arrayX,......,arrayX)var arr = [1,2,3];var arr2 = arr.concat(4,5,6);conso
2021-08-08 18:10:22
952
原创 数组查询方法
Array.prototype.find()描述：参数：arr.find(function(item, index, arr) {...}, [thisArg])find方法对数组中的每一项元素执行一次 callback 函数，callback函数的返回值是布尔值，第一个返回true的对应数组元素作为find的返回值并停止遍历， 否则返回undefinedfind方法不会改变数组，如果数组项有引用值，则find返回的元素和数组对应下标的元素是同一个引用非严格模式下， 不写第二个参数
2021-08-08 17:49:32
2191
原创 数组扁平化
数组扁平化使用 Array.prototype.flat 可以直接将多层数组拍平成一层：[1, [2, [3]]].flat(2) // [1, 2, 3]递归实现function flatten(arr) { var result = []; for (var i = 0; i < arr.lrngth; i++) { if (Array.isArray(arr[i])) { result = [...result, ...flat
2021-08-07 20:55:16
55
原创 原型与原型链
原型与原型链prototype每个函数都有一个 prototype 属性，指向了一个对象，这个对象正是调用该构造函数而创建的实例的原型每一个JavaScript对象(null除外)在创建的时候就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型"继承"属性。所有被该构造函数构造出来的对象都可以继承原型 prototype 上的属性和方法自己 this 上有的属性和方法是不会往原型上去查找当需要参数进行传值的时候一般写在 this中，写死的属性和方法写在原型
2021-08-07 20:09:11
165
原创 如何用css画一个三角形
如何画一个三角形原理：边框的均分原理div { width:0px; height:0px; border-top:10px solid red; border-right:10px solid transparent; border-bottom:10px solid transparent; border-left:10px solid transparent; }结果：...
2021-08-07 18:02:45
65
原创 400 、401、403、404状态码
400 、401、403、404状态码1.400状态码：请求无效产生原因前端提交的数据与后台需要的数据没有保持一致前端提交到后台的数据应该是json字符串类型，但是前端没有将对象转化成字符串解决方法对照字段的名称， 保持一致性将obj对象通过JSON.stringify实现序列化2.401状态码：当前请求需要用户验证产生原因token过期或没有token解决方法重新登录3.403状态码：服务器已经得到请求，但是拒绝执行4.404状态码：页面不存在，服务器找不到请求
2021-08-07 17:50:03
1154
原创 防抖函数封装
函数防抖高频事件触发 N 秒内只会执行一次，如果 N 秒内事件再次触发，则会重新计时目标支持立即执行；支持函数返回值；支持取消防抖功能；优化this指向和event对象封装function debounce(callback, wait, immediate) { var timeout, result; // timeout保存定时器 result保存函数返回值 var debounced = function () { // debounced为事件绑定的函数
2021-08-05 19:29:20
192
原创 对象转化为数组
对象转化为数组期望const obj = { 0: '男', 1: '女' } // ------------------ 转换为 -------------[{label: '男', value: 0},{label: '女', value: 1}]支持Object.keys() 和 Object.values()Array.map()实现const obj = { 0: '男', 1: '女' } function f(obj) { const v
2021-08-04 22:26:56
80
原创 数组转换为对象
数组转换为对象期望const arr = [{ label: '男', value: 0 }, { label: '女', value: 1 }]// --------------------------- 转换为 -----------------------{0: '男', 1:'女'}支持数组的reduce方法实现function f(arr) { // 把数组最终归并成一个对象 return arr.reduce((obj, item) => {
2021-08-04 22:16:12
65
原创 数组转换为树形结构
数组转换为树形结构期望[ { id: "01", name: "张大大", pid: "", job: "项目经理" }, { id: "02", name: "小亮", pid: "01", job: "产品leader" }, { id: "03", name: "小丽", pid: "02", job: "产品经理" }, { id: "04", name: "大光", pid: "02", job: "产品经理" },]// ----------------- 转换为 -
2021-08-04 21:17:43
2650
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人