css flexbox布局-flex属性
flex属性介绍用于控制flex布局下，子元素的伸缩行为。实际上是三个子属性的简写。 1flex:<flex-grow> <flex-shrink> <flex-basis>; flex-grow: 定义项目的扩展比例。默认值为0。 flex-shrink: 定义项目的收缩比例。默认值为1。 如果容器空间不足，子项目会根据flex-shrink的值收缩，值越大，收缩越多。比如flex-shrink:3收缩比flex-shrink:1收缩得多。 flex-basis: 定义项目的初始大小。默认值为auto。 内容类似于width，但是比width的优先级高。可以设置为固定值（200p x 、30%、content）。 常见的简写形式 flex：initial（默认值） 1flex: 0 1 auto; /*不扩展，不收缩、初始大小为内容宽度*/ 项目内保持内容宽度，空间不够了就会收缩。 flex：auto 1flex: 1 1...
JavaScript手写深拷贝
注意事项 属性值是数组 循环应用 是否是自身的属性而不是原型链继承而来的 注意null这个特殊的值（类型是对象） 注意Date、RegExp、Function这些特殊的值 递归法不考虑Date等特殊情况123456789101112131415161718192021222324252627282930313233343536373839404142function deepClone(obj) { function fn(obj,map = new Map()) { //不是对象直接返回 if (typeof obj !== 'object' || obj === null) { return obj } //判断循环引用 if (map.has(obj)) { return map.get(obj) } //处理数组 if...
JavaScript数组扁平化
递归法12345678910111213141516171819function flatten(arr) { function fn(arr, ans = []) { if (Array.isArray(arr)) { for (const item of arr) { if (Array.isArray(item)) { fn(item,ans) } else { ans.push(item) } } } return ans } return fn(arr)}const array =...
JavaScript中的伪数组
基本概念伪数组顾名思义就是长得很像数组，其具有数组的部分特征但是又和真实的数组相差很大。一般来说，伪数组和真正的数组有两点相同： 都具有.length属性。 都可以使用index下标的方式获取元素。 不同之处在于： 伪数组不具备数组的一些原型方法，例如forEach。 伪数组的数据类型是Object,而数组是Array。 3.伪数组的长度不可变，而数组的长度可变。 遍历除了都可以使用index之外，数组和伪数组都可以使用for…of…的方法进行遍历。 伪数组转为数组如果要把一个伪数组转换为真正的数组，我们可以使用以下两种方法 Array.from()此方法可以一键把我们的伪数组转为数组 2.使用Array.prototype.slice()借用数组的原型方法，只需要改变this也可以一键转换 拓展除了arguments，还有哪些对象是伪数组呢？
cesium的场景渲染事件
导读犹如前端系统中浏览器或者框架中的各类事件的应用，例如各种鼠标事件、渲染调度，在cesium中同样拥有相应的事件机制，特别是Cesium中的几个场景事件。 场景事件 scene.preUpdate 场景更新之前 scene.postUpdate 场景更新之后立即执行 scene.preRender 场景渲染之前 scene.postRender 场景渲染之后 渲染循环cesium会默认开启渲染循环RenderLoop viewer.useDefaultRenderLoop = false // 关闭Cesium场景自动渲染viewer.render() //...
element组件库系列（一）--如何捕获组件的props定义
theme: vue-pro前言这是element组件库系列文章，主要是平时使用element组件库的一些过程和心得，文章篇幅不定，有长有短，但主打一个实用（可能实用不一定是对你实用，不实用请轻喷）。废话少说，本篇将讲述我是如何使用typescript捕获到组件的props类型定义并进一步封装的。 package version element-plus 2.2.15 Vue3 3.3.4 前置知识阅读本文，你可能需要先了解以下typescript类型的三个知识点： Parameters typeof Exclude 在此简要说明，ts中的、typeof和js的typeof还是有着一些区别的，js中typeof只能识别基本类型而已，对于Array、Date两个只知道是对象，不知道是哪两个中的哪一个；而ts中的typeof完全可以精确识别出...
Vue2对数组和对象的复杂更新
问题描述 最近公司项目需要主表下添加若干个子表，而子表的某些字段之间有联动，且子表由和主表有联动。联动很简单，不就是监听嘛，但是请注意我们的数据结构是这样的。 12345678910111213{ "id":"", "name":"", "location":"", "account":"", "sub_table":[ { "name":"", "location":"", "account":"" } ...
手写实现new
描述手写一个函数myNew实现new操作符。 new干了什么 在内存中创建一个新的对象obj 将新对象的[[Prototype]]被赋值为构造函数的prototype属性 将构造函数中的this指向新对象obj 执行构造函数中的代码获取返回值 如果构造函数返回非空对象，则返回该对象；否则返回刚创建的新对象 手写1234567891011121314function myNew() { // 创建一个新对象 let obj = Object.create(null); // 获取构造函数 let Constructor = Array.prototype.shift.call(arguments); //获取参数数组的第一个，也就是传入的构造函数 // 实现继承 obj.__proto__ = Constructor.prototype; // 执行构造函数,并让构造函数的this指向新对象 let result = Constructor.apply(obj, arguments); //...
不使用临时变量交换两者的值
题目描述要求交换a、b两者的值，但是不能使用临时变量。 解题1234var a = 2;var b = 5;[a,b] = [b,a]console.log(a,b) // 5 2 这是利用了解构赋值的特性，右边会创建临时数组求值，实际上会临时有：[a,b]=[5,2]，当赋值完成后，临时数组也就不存在了。因此没有使用额外的临时变量。