Mouse@Rice-CSDN博客

原创 [Vue warn]: Duplicate keys detected: ‘2‘. This may cause an update error.

报错截图：[Vue warn]: Duplicate keys detected: ‘2’. This may cause an update error.解决办法：生产唯一的id，

2023-04-12 17:36:29 1047

原创 javascript 获取本周、本月、本季度、本年第一天，最后一天的日期

【代码】javascript 获取本周、本月、本季度、本年第一天，最后一天的日期。

2022-11-03 16:50:04 2720

export default { props: { visible: { type: Boolean, default: false }, defaultValue: { type: Object, default: () => ({}) } }, watch: { defaultValue: { handler(newVal, oldVal) { if(newVal) { console.log('newVal========

2022-05-26 15:20:30 4038

原创 element-ui el-table 批量多选，过滤不满足条件的选中项数据

this.tableData.forEach((item, index) => { if (item.jqzt !== '2' ) { this.$refs.multipleTable.toggleRowSelection(this.tableData[index], false) } }) 代码：this.$refs.multipleTable.toggleRowSelection(表格中的某一条要取消多选的数据, false) ...

2022-05-04 20:13:22 745

原创 css word-wrap: break-word；

css： white-space: normal; word-break: break-all; word-wrap: break-word;

2022-04-15 14:50:47 156

转载 Vue中使用Watch监听路由参数变化，获取最新的值

今天遇到一个这样的业务场景：在同一个路由下，只改变路由后面的参数值，比如在这个页面 /aaa?id=1 ，在这个页面中点击一个按钮后跳转到 /aaa?id=2 ，但从“/aaa?id=1”到“ /aaa?id=2”是不会触发vue的生命周期的，id变了，但页面数据不会更新，想要更新只能重新加载页面（手动刷新），但是这多么low、孬呀，作为一名追求极致用户体验的开发，怎么能容忍这种情况发生；然后就想办法监听路由参数的变化呀，在watch里监听$route和路由参数，代码如下：Vue watch监听路由q

2022-04-06 15:11:28 2540

原创手写 Promise-3

版本3 实现Promise的then链的功能我们先看一下es6给我们提供的Promise关于then链的特点Promise的链式调用问题1.如果then方法中(成功或者失败函数)返回的不是一个promise，会将这个值传递给外层下一次then的成功结果，如果没有返回值，默认返回undefined。2.如果执行then方法中的方法(成功或者失败函数)出错了，抛出异常，会走到下一次then的失败中。3.如果返回的是一个promise，如果返回的是一个成功的promise会走到下一次then成功的回调函

2022-02-13 17:01:05 283

原创手写 Promise-2

手写异步的Promise，版本一是一个同步的Promise、用setTimeout模拟异步请求、promise.js文件// 手写异步的promise，版本一是一个同步的promise、const Promise = require('./2-promise.js')const p = new Promise((resolve, reject) => { console.log('默认执行'); setTimeout(() => { reject('失败了') },

2022-02-13 16:45:29 309

原创手写 Promise-1

1.promise是一个类，类中的构造函数(constructor)需要传入一个executor,默认就会执行2.executor中的两个参数分别是resolve，reject3.默认创建一个promise状态就是pending，promise有三个状态：pending,fulfilled,rejected4.调用成功和失败时，需要传递一个成功的原因和失败的原因5.promise的状态不可以修改(如果已经成功了就不能失败，失败了也不能成功)6.每一个promise实例都有一个then方法7.如果

2022-02-13 12:48:04 152

原创前端跨域（草稿版）

4.添加响应头解决跨域浏览器先询问b,b允许a访问access-control-allow-originaccess-control-max-agePHP端修改header：header('Access-Control-Allow-Origin:*'); //允许所有来源访问header('Access-Control-Allow-Method:POST,GET'); //允许访问的方式上线后跨域：https://juejin.cn/post/6844903608090099726...

2022-02-08 17:03:55 479 1

原创 JavaScript笔记（二）堆栈内存

几个专有名词:ECStack（Execution Context Stack）: 执行环境栈（栈内存）EC: Execution Context(执行上下文)EC(G): Execution Context Global（全局执行上下文）,供全局代码执行,VO(G): 全局变量对象，用来存储当前上下文中声明的变量的（存储全局变量的）,var a = 12;代码执行时候拆分为以下三部分第一步：创建一个值12，12是原始值，创建一个值要存储起来，原始值是直接存储到栈内存中的，第二步：声明一个

2022-01-28 00:50:22 460

原创 JavaScript 同步异步（微任务、宏任务）代码执行顺序 - 2

# 此题坑在与：await后面创建一个异步微任务，只有等到await后面的promise实例的状态是fulfilled成功之后，await后面创建的异步微任务代码才可以执行，不然就阻塞无法执行，本题await后new Promise实例的状态一直是pending状态的，所以 console.log('async1 end'); return 'async1 success'无法执行到这里。const async1 = async () => { console.log('async1');

2022-01-26 15:22:05 814

原创 JavaScript笔记（一）数据类型与检测数据类型的方法

JS数据类型及typeof的底层机制1】: “原始值类型”（基本数据类型/值类型） number: NaN、Infinity、正常数字 string: 普通字符串、模板字符串 boolean: true、false null: 表示空 undefined: 表示未定义 Symbol: 表示唯一值 1) Symbol('hello') === Symbol('hello') // false 2) 对象中添加唯一的属性 let obj = { [Symbol('on

2022-01-25 23:10:20 590

转载 es6新增基本数据类型Symbol()

ES6中引入了一种新的基础数据类型：Symbol，Symbol 本质上是一种唯一标识符，可用作对象的唯一属性名，这样其他人就不会改写或覆盖你设置的属性值。声明方法：let s1 = Symbol()或者，你也可以在调用Symbol()函数时传入一个可选的字符串参数，相当于给你创建的Symbol实例一个描述信息：let s2 = Symbol('another symbol')如果用当下比较流行的TypeScript的方式来描述这个Symbol()函数的话，可以表示成：/** * @para

2022-01-16 22:32:02 211

原创 JS的 for of 是否可以迭代普通的对象？答: 不可以，因为不具备Symbol.iterator迭代器接口规范

遍历器（Iterator）是一种机制(接口)：为各种不同的数据结构提供统一的访问机制，任何数据结构只要部署Iterator接口，就可以完成遍历操作for of循环，依次处理该数据结构的所有成员拥有next方法用于依次遍历数据结构的成员每一次遍历返回的结果是一个对象 {done:false,value:xxx}done:记录是否遍历完成value:当前遍历的结果拥有Symbol.iterator属性的数据结构(值)，被称为可被遍历的，可以基于for of循环处理对象默认不具备Symbol.it

2022-01-16 19:06:21 279

原创 es6新增数据结构Map()与WeakMap()

const obj1 = { name: 'qxl'}const obj2 = { name: 'hello'}const str = 'hello world'const mapObj = new Map()mapObj.set(obj1, 123)mapObj.set(obj2, 'lxa')mapObj.set(str, 'hello world')console.log(mapObj)Map的基本使用另外一个新增的数据结构是Map，用于存储映射关系。但是我们可能会想，

2022-01-16 17:57:38 355

原创 es6新增数据结构Set()与WeakSet()

// 在ES6之前，我们存储数据的结构主要有两种：数组、对象。// 在ES6中新增了另外两种数据结构：Set、Map，以及它们的另外形式WeakSet、WeakMap。// Set是一个新增的数据结构，可以用来保存数据，类似于数组，但是和数组的区别是元素不能重复。// 创建Set我们需要通过Set构造函数（暂时没有字面量创建的方式）：// 我们可以发现Set中存放的元素是不会重复的，那么Set有一个非常常用的功能就是给数组去重。// Set常见的属性：// size：返回Set中元素的个数；

2022-01-16 17:27:42 85

原创 Reflect与Proxy一起使用

const obj = { name: 'qxl', age: 18}const objProxy = new Proxy(obj, { get(target, key, receiver) { console.log('get--'); return Reflect.get(target, key) }, set(target, key, newValue, receiver) { // target[ket] = newValue console.

2022-01-15 14:50:56 138

原创 JS监听对象的操作方式(二) Proxy()

// Proxy是es6新增的const obj = { name: '张三丰', age: 18, hobby: '打太极'}# new Proxy()参数，# obj：被代理的对象(原对象)，{}：捕获器，可以监听到代理对象对属性的操作过程，获取属性值或者设置属性值、const objProxy = new Proxy(obj, { // 获取值时的捕获器 get: function(target, key) { console.log(`监听到${target}对

2022-01-15 11:59:22 1513

原创 JS 监听对象的操作方式(一) 监听对象的属性被设置或获取的过程Object.defineProperty()

const obj = { name: '张三丰', age: 18, hobby: '打太极'}Object.keys(obj).forEach(key => { let value = obj[key] Object.defineProperty(obj, key, { get: function() { console.log(`监听到获取${key}的值`); # 注意：如果不return值出去，默认是return undefined.

2022-01-15 11:05:38 1008

转载 intanceof 操作符的实现原理及实现

仅用于本人记笔记用，有不当或者不完整的地方欢迎大家多多指教！谢谢！instanceof 运算符用于判断构造函数的 prototype 属性是否出现在对象的原型链中的任何位置。function myInstanceof(left, right) { // 获取对象的原型 let proto = Object.getPrototypeOf(left) // 获取构造函数的 prototype 对象 let prototype = right.prototype; // 判断构造函数

2022-01-10 23:07:56 212

原创 Object.entries()、keys()、values()、assign()、getOwnPropertySymbols()、getPrototypeOf()、setPrototype()

仅用于本人记笔记用，有不当或者不完整的地方欢迎大家多多指教！谢谢！1. Object.entries(): 会把一个对象可枚举的属性及其属性值以数组其中一项 [属性，属性值]的形式返回来，但是不会遍历原型prototype上的属性，与for in不同，for in 遍历的时候会遍历原型prototype上的属性。1.传入的是一个对象的时候const obj = {name: '张三丰', age: 18, sex: '男', hobby: '打太极'}const result = Object.en

2022-01-09 18:35:40 387

原创 CSS 之 BFC

CSS BFC：块级格式上下文，BFC是一个独立的区域，不会影响其他的区域的布局，每一个被bfc元素的子元素不会对外面的元素产生影响 BFC触发的条件： 1. body: body是bfc元素2. float: left，right,（不是none默认值）3. position：absolute、fixed、(非relative)4. 块级元素overflow：scroll、auto、hidden、（非visible）5. display: flex、inline-block、table-

2022-01-09 11:47:49 552 1

原创代码输出结果专项突破（1）

结论：1. 函数不论在哪执行，它的上级上下文，一定是它的作用域，而作用域是和在哪创建的有关系。2. 所以无论函数在哪执行，遇到变量不是自己私有的，都会按照作用域链查找其上级上下文中是否有，作用域链只和在哪创建的有关系，和在哪执行是没有关系的。求输出的答案var i = 10;function A() { var i = 10; function x() { console.log(i); } return x;}var y = A();y();function B(

2022-01-04 22:59:46 59

原创 async await

在这里插入代码片求解答log输出的顺序async function async1() { console.log('async start') // 遇到await之后，创建一个异步的微任务，await之后的代码放到异步微任务中去。只有等到await返回来的promise实例的状态是成功（fulfilled）之后，才能执行异步微任务中的代码， await async2() // 创建一个异步微任务1，返回一个成功状态的promise实例。创建的异步微任务代码可以执行了。 console

2022-01-02 11:09:39 474 1

转载【转载】HTTP1.0、HTTP1.1和HTTP2.0的区别

原文地址：https://www.jianshu.com/p/be29d679cbff

2021-11-22 14:44:23 101 1

转载 Git missing Change-Id in commit message footer

推荐文章链接：https://www.cnblogs.com/zndxall/p/9603834.html亲测有效。

2021-11-08 15:37:54 48 1

转载 Vue Router 的params和query传参的使用和区别（转载）

原文地址：https://blog.csdn.net/mf_717714/article/details/81945218

2021-10-24 17:36:40 52

原创 webpack4打包在css中引入img，加载不出来，webpack5已解决。

![在这里插入图片描述](https://img-blog.csdnimg.cn/6c49d0d729b847b7a17401bb25a5d4b0.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcXFfNDUyODQ4NzU=,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)css中直接引入img，下方直接贴图![在这里插入图片描述]

2021-08-31 22:00:22 799

空空如也

空空如也