喔或，这是一个很好的问题。 问题是，只有当视口宽度大于特定值时，开发人员才会使用组件的变体。例如，如果我在平板中使用 featured 也就是 PC 的样式，它不能工作，为什么?...第二种情况下(Case 2)也是一样的问题 如果使用容器查询，我们可以通过查询父组件来决定如何显示特定组件来解决这些问题。考虑下图，它展示了我们如何使用容器查询来修复这个问题。...这样的话，如果我们把思路转向组件的父组件呢?换句话说，如果我们查询父组件，并根据父组件的宽度或高度来决定组件应该是什么样子的呢?我们来看下容器查询的概念。 什么是容器查询 首先，让我定义容器。...当我们在设计UI时以这种心态思考时，我们可以开始考虑组件的不同变体，这些组件依赖于它们的父宽度。 在下面的图中，请注意文章组件的每个变化是如何以特定的宽度开始的。...当容器很小时，导航项标签是如何从一个新行切换的，当有足够的空间时，导航项标签是如何靠近导航图标的。 示例地址：https://codepen.io/shadeed/pe...
学习如何让JavaScript尽可能的不痛苦，是一项宝贵的技能，肯定会让你成为办公室的宠儿。...如果这个人的年龄是0（可能是刚出生的婴儿）。年龄将被计算为35，这是意想不到的行为。 进入空值凝聚运算符(??)。...它是一个逻辑运算符，当其左手操作数为空或未定义时，返回其右手操作数，否则返回其左手操作数。 要用??运算符重写上述代码。...在我的很多项目中，我都看到它们多次出现。 从一个数组中获取一个随机项目。...它将抛出一个错误。 error ---- 逗号运算符 当我意识到逗号(,)是一个独立的操作符时，我感到很惊讶，而且从来没有注意到它的存在。我一直在代码中使用它，但是，从来没有意识到它的真正存在。
2.展开语法 展开语法（三点： ... ）允许将数组、对象或函数参数扩展为单独的元素。这对于合并数组、克隆对象或向函数动态传递多个参数等任务非常有用。该功能可简化数据操作，大大减少代码的冗长度。.....array2]; 这样，array1 和 array2 中的元素就被展开，并组成了一个新的数组 combinedArray。...这种方法让代码更加简洁，也更加健壮。 4.空值合并运算符 空值合并运算符（??）提供了一种简洁的方式，在变量为 null 或 undefined 时分配一个默认值。...这在处理条件表达式或检索对象值时特别有用。通过使用空值合并运算符，您可以省去繁琐的空值检查，使代码更加简洁。...假设我们有一个变量，可能未定义或为空，我们想要为它分配一个默认值： let username = null; 在没有空值合并运算符的情况下，我们可能会使用逻辑或运算符 || 来分配默认值： let displayName
学习如何让JavaScript尽可能的不痛苦，是一项宝贵的技能，肯定会让你成为办公室的宠儿。...如果这个人的年龄是0（可能是刚出生的婴儿）。年龄将被计算为35，这是意想不到的行为。 进入空值凝聚运算符(??)。...在我的很多项目中，我都看到它们多次出现。 从一个数组中获取一个随机项目。...它将抛出一个错误。 ? error ---- 逗号运算符 当我意识到逗号(,)是一个独立的操作符时，我感到很惊讶，而且从来没有注意到它的存在。我一直在代码中使用它，但是，从来没有意识到它的真正存在。...让我在这里也介绍一下叫做 rest 操作符的东西。如果你想对一个数组进行重构，将一个或多个项目赋值给变量，然后将其余的项目存入另一个数组，你可以使用......休息运算符来实现，如下图所示。
在JavaScript中，将对象视为包含元素项的列表，并且列表中的每个项（属性或方法）都由内存中的键值对存储。 让我们看一个对象的例子。 ?...也就是说，newStudent将存储一个指向student对象的链接。读取属性时也会查询此父对象。 父对象可以有父对象，依此类推。重复这一过程，直到我们到达一个没有任何父项的对象，即父项为空。 3....当我们需要一种可以多次创建对象“类型”的方法时，构造函数非常有用，而无需每次都重新定义对象，这可以使用Object Constructor函数来实现。 我们来看一个例子吧。 ?...什么是按引用/共享复制和按值复制，它如何应用于对象？ 不同之处在于，通过值，我们的意思是每次创建内容时都会执行新的内存分配，而在引用的情况下，我们指向已经创建的内存空间。...上面将抛出一个错误，`converting circular structure to JSON.` 2.使用ES6展开运算符 ? 但是，nested对象仍然是浅层复制的。 如何比较两个对象？
== 'rejected'; })); }); 二：可选链 可选链 可让我们在查询具有多层级的对象时，不再需要进行冗余的各种前置校验。...三：空值合并运算符 当我们查询某个属性时，经常会遇到，如果没有该属性就会设置一个默认的值。比如下面代码中查询玩家等级。...user.level) { level = '暂无等级'; } else { level = user.level; } 来看看用空值合并运算符如何处理 // { // "level...'暂无等级'; // level -> '0级' 用空值合并运算在逻辑正确的前提下，代码更加简洁。 空值合并运算符 与 可选链 相结合，可以很轻松处理多级查询并赋予默认值问题。.../g; console.log(str.match(reg)); // -> ["JS", "正则"] 可以看出返回的数组里包含了父匹配项
这也就是我开篇说的函数式组件一把索的原因 Hook 的调用顺序在每次渲染中都是相同的，所以它能够正常工作，只要 Hook 的调用顺序在多次渲染之间保持一致，React 就能正确地将内部 state 和对应的...userState 函数初始化变量值，返回一个数组，数组第一项是这个初始化的变量，第二项是响应式修改这个变量的方法名。...这样就避免没有必要的重复渲染和清除操作 可以传递一个空数组（[]）作为第二个参数。...把“创建”函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算。...比如说，如果我们给 useFriendStatus 第二个参数一个空数组，每一次请求接口页面就会重新渲染，第二个参数的空数组引用地址变了，会导致死循环，自己尝试 函数防抖 //@ts-ignore import
该方法返回一个新数组，对原数据没有影响。 不传参数时，默认“拉平”一层，可以传入一个整数，表示想要“拉平”的层数。...是扁平对应的层数，显然这不是我们想要的，因为它还没有完全展开。...，我们可以用Infinity这个参数，帮我们全部展开。...再跟着我分析思路: 如何实现呢，其实思路非常简单：在数组中找到是数组类型的元素，然后将他们展开，这就是flat方法的关键思路 实现思路： 循环数组里的每一个元素 判断该元素是否为数组 是数组的话，继续循环遍历这个元素...——数组 不是数组的话，把元素添加到新的数组中 实现流程： 创建一个空数组，用来保存遍历到的非数组元素 创建一个循环遍历数组的函数，cycleArray 取得数组中的每一项，验证Array.isArray
但是我犯了一个大错，我的思维导图只是一个全局的蓝图，而在学习某个知识点的时候没有系统化，知识太过于零散，另一方面也很容易遗忘，回头复习时没有一个提纲，整体的学习效率不高。...当然，YY一下就好了，我保证你没有足够的时间给所有知识点都画上思维导图，挑重点即可。 提纲思路 当我们要研究一个问题或者知识点时，关注点无非是： 是什么？ 做什么？ 为什么？...这里主要注意一下只读属性和继承属性即可，细节不再展开。 原型和继承 原型 前面也提到了，原型是实现继承的基础。那么如何去理解原型呢？...缺点：父类构造函数被执行了两次，污染了子类原型。 原型式继承 原型式继承是相对于原型链继承而言的，与原型链继承的不同点在于，子类原型在创建时，不会执行父类构造函数，是一个纯粹的空对象。...所以在合并对象时，为了避免这个问题，一般会这样做： var mergedObj = Object.assign({}, a, b); 属性相关 Object.defineProperty：通过属性描述符来定义或修改对象属性
环形链表 II */ // 我们上节讲到第一种方法是 用一个数据结构去存储 // 链表的每个节点 如果它走到了 最后的一个空节点就说明它没有环形 // 如果它第二次走到一个相同的节点就说明 它具有环...} } // 如果跳出了循环呢 就说明它已经走到了空节点 // 链表的末尾一个空节点 // 所以就证明它是没有环的 // 然后我们直接返回null就好了...在排序数组中查找数字 I 522.剑指 Offer 60. n个骰子的点数 523.26. 删除有序数组中的重复项 523.122....CSS选择器的过程 427.手动实现一个new方法 428.属性data-的理解 429.用过CSS预处理器 430.如何快速让一个数组乱序 431.form标签的enctype属性 432....62.如何让一个盒子在页面垂直水平居中 63.前端性能优化方案 64.css选择器优先级顺序 65.CSS3有哪些新特性 66.什么是空元素 67.如何实现浏览器内多个标签页之间的通讯 68.为什么要初始化
如果使用Feign接口，没有携带token时，调用Feign接口，可以正常调用，但是如果携带token，就会出现appId拼接参数的情况。appId出现拼接时什么原因导致的呢？...当我看到打印的Feign的header传播时，我发现，里面也居然有一个appId，而这个appId就是我们看到的volvo。...问题是解决了，但是我比较好奇的是为啥Feign传播会将原先的参数进行拼接。所以这个问题需要去框架里面查询一探究竟。...null : String.valueOf(param.getValue()); //可以看到这里会做一个合并的操作，将同样的参数，合并成一个，数组以分号分隔...ThreadLocal有一个子类InheritableThreadLocal就是为了解决这个问题而产生的，使用这个变量就可以轻松的在子线程中依旧使用父线程中的本地变量
在 java 中，元注解是指可以注解在其他注解上的注解，spring 中通过对这个机制进行了扩展，实现了一些原生 JDK 不支持的功能，比如允许在注解中让两个属性互为别名，或者将一个带有元注解的子注解直接作为元注解看待...，或者在这个基础上，通过 @AliasFor 或者同名策略让子注解的值覆盖元注解的值。...，父接口，以及父类的父类，父类的父接口……整个继承树中所有 Class 文件中，那些与搜索的 Method 具有完全相同签名的方法； 当 AnnotatedElement 不是上述两者中的一种时，它没有层级结构...二、合并注解 当我们点进 AnnotationUtil 中的任意一个方法，比如 findAnnotation ： public static A findAnnotation...，若 AnnotatedElement 是 Class 或者 Method，还会搜索的它们的类/声明类的层级结构； 当我们通过 find 语义的方法搜索层级结构时，实际上会先生成一个合成注解聚合对象 MergedAnnotations
我当时看到这个需求的时候，心里想，这玩意我在 ElementUI 的官网见过，好说。结果当我去开发的时候，发现还是挺复杂的，于是我就花了点时间了研究一下，以防下次用的时候忘了。...那么怎么实现只可以建二级目录，三级的时候置灰呢，我们点击的时候不是保存了一个变量 nowClickNode 么。 这个变量里面有个 level 属性，代表的就是层级。我通过计算属性来完成这个需求。...我是在点击的时候，递归查找点击节点的父元素，然后把所有祖代元素放在数组里，最后进行拼接。...五的树结构懒加载，点完一级请求一级的数据 if (node.level >= 1) { this.getCategoryListNew(node, resolve); // 防止子节点为空时一直出现加载动画...$refs.tree.getNode(this.nodeId); // 把loaded手动置为false,也就是告诉tree这个节点没有加载过 node.loaded = false; // 主动调用展开节点方法
当组件被换掉时，会被缓存到内存中、触发 deactivated 生命周期；当组件被切回来时，再去缓存里找这个组件、触发 activated钩子函数。Vue组件如何通信？...当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 ( class 和 style 除外 )，并且可以通过v-bind="$attrs" 传入内部组件。...那vue中是如何检测数组变化的呢？...数组里每一项可能是对象，那么我就是会对数组的每一项进行观测，（且只有数组里的对象才能进行观测，观测过的也不会进行观测）vue3：改用proxy ，可直接监听对象数组的变化。...dep属性，// 当渲染的时候取值了 ，这个dep属性 就会将渲染的watcher收集起来// 数据更新 会让watcher重新执行// 观察者模式// 渲染组件时 会创建watcherclass Watcher
这不是一个非常有用的组件，但可以从中学到的最多，我们来看看。 无循环实现循环 通常，当我们要渲染元素或组件的列表时，可以使用v-for指令，但这次我们希望完全摆脱它。...这门课让我真正了解如何使用递归，因为在纯函数语言中，一切都是递归。不管怎样，从那门课我学到了可以使用递归地表示一个列表。 与使用数组不同，每个列表是一个值(头)和另一个列表(尾)。...[head, tail] 例如要表示列表[1、2、3]，则可以递归方式表示为： [1, [2, [3, null]]] 我们必须以某种方式结束列表，因此我们使用null而不是另一个数组（也可以使用空数组...，就会对它痴迷一样的感叹： 嵌套n级的插槽 递归插槽 包装组件将一个插槽转换为多个插槽 首先，我们将简要介绍嵌套插槽的工作方式，然后介绍如何将它们合并到v-for组件中。...如果没有提供插槽，则默认元素内部的内容，并像以前一样渲染list[0]。 但是如果我们提供了一个slot，它会将其渲染出来，并通过slot作用域将列表项传递给父组件。
其实这个问题旨在了解你在遇到问题的时候的解决方法，毕竟现在前端技术领域广，各种框架和组件库层出不穷，而业务需求上有时纷繁复杂，观察一个程序员在面对未知问题时是如何处理的，这个过程相对于只出一些面试题来考面试者更能了解面试者实际解决问题的能力...其实我也遇到过相同的情况，和面试官说如何通过搜索引擎解决这些坑的吧不太好，让面试官认为你只是一个API Caller，但是又没有什么值得一谈的项目难点 我的建议是，如果没有什么可以深聊的技术难点，不妨在日常开发过程中...可以看到具名插槽的名字也是通过配置项传入的,并且作用域插槽将整个表单内部的数据通过scope传给父组件,在复杂的业务场景,无法通过配置项解决问题的时候,通过插槽和作用域插槽让父组件去决定如何去处理数据...函数使得表头显示能够更加灵活 配置项暴露一个函数能够让当前列的数据执行这个函数达到预处理的效果 配置项中设置一个二维数组，能够让数据字段组合，达到数据显示在不同的行数的效果 添加了操作图标 添加了数据(...这里定义了一个computeFormItem的函数，通过传入配置项数组的每个元素，根据元素的tag值找到通用配置项(basic对象)中相应的值，随后用了Object.assgin做了合并，关于这个computeFormItem
ES2018 展开操作符 ES2015 中最有趣的特性就是展开操作符（Spread Operator）。展开操作符使得复制和合并数组变得更简单。...可选链操作符让你可以每次访问嵌套的对象属性，而不需要验证父属性是否存在。...空值合并操作符 空值合并操作符（Nullish Coalescing）增加了可以真正地检查空值（Nullish）的能力，而不是检查它是否为 false。...那么，我想你可能会问空值和 false 的区别是什么？...在空值合并操作符出现之前，很多时候你可能想检查一个变量是否为空值，它可能会是 undefined、null、空字符串，甚至是一个 false。 那么，现在这种情况下，你就可以使用空值合并操作符 ??
图 8-8 在一个步骤中添加多个追加项 或者，如果想要一次执行一个查询，并专注于创建一个易于使用的检查跟踪路径，那么可以在每次向数据源添加一个新的查询时采取如下操作。...8.2 追加列标题不同的数据 在【追加】查询时，只要被合并的查询的列标题是相同的，第二个查询就会按用户所期望的那样被【追加】到第一个查询上。但是，如果这些列没有相同的列标题呢？...【警告】 当使用 “=Excel.CurrentWorkbook ()” 来列举表或范围时，输出的查询在刷新时也会被识别，为了处理这个问题，需要一些新的步骤，有不同的方式，这取决于用户如何构建查询。...8.3.2 合并区域或工作表 现在，如果工作表没有表，而是由职员命名工作表呢，会怎么样呢？可以合并所有的工作表吗？是可以的，但正如第 6 章所提到的，没有内置函数可以从活动工作簿中的工作表中读取数据。...至此，已经探索了用外部数据源的手动追加，以及如何为工作簿中的数据生成自动更新系统，有没有可能把这些合并起来，创建一个系统，可以推广到合并一个文件夹中的所有文件，而不必在 Power Query 中手动添加每个文件
为了测试自己写的B树查询效率，这里我存储一百万的数据量，一个存储到B树，一个存储到List中，查询五十万的耗时 (B树一毫秒，遍历7毫秒。...这个比较可能也没什么意义，但是这里我不清楚如何模拟磁盘操作，所以暂时先这样)。 ? B-Tree的定义 对于B树的定义通常有两种，一种是算法导论中的度数说；另一种是维基百科的阶数说。...m的时候，就违反了定义2，此时就需要进行操作，来保证结点满足定义2，这个操作我们叫做分裂，分裂过程中，我还需要注意，树的深度， 因为定义5规定根结点到每个叶子结点的长度都相同， 当我们对生成的B树进行删除...，不满足时为了保证 满足这样的条件，我们看看兄弟结点有没有富裕(大于Math.ceil(m/2)-1)的关键字，给他借过来。...删完29之后，我们再来删除关键字11，此时兄弟结点没有富裕的关键字来让该结点满足 >=Math.ceil(m/2)-1 的条件，所以需要进行结点合并， 这里我们选择合并左孩子来进行合并，合并过程：将父结点关键字下移
在 GraphQL 中，空值处理有个特性是，当一个非空字段却没有值时，GraphQL 会自动冒泡到最近一个可空的节点，令其为空。...由于非空类型的字段不能为空，字段错误被传播到父字段中处理。如果父字段可能是null，那么它就会解析为null，否则，如果它是一个非null类型，字段错误会进一步传播到它的父字段。...四、GraphQL 落地 一个新的 BFF 层规划出来之后，前端团队第一个关注问题就是“我有多少代码需要重写？”，这是一个很现实的问题。...由于主要工作和测试都是围绕服务返回的报文，因此首先应该让 response 契约尽可能稳定。...在这个过程中可以实现相同的请求合并只发一次。 六、工程化实践 6.1 异常处理 在 GQL 关联查询中父节点失败导致子节点异常的情况很常见。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
腾讯会议
