lio零度 - 个人主页动态 - 牛客网

发布(377) 刷题

2022-03-20 14:43

前端工程师

在牛客打卡2天，今天学习：刷题 40 道

每日监督打卡

0 点赞评论收藏

转发

2022-03-20 17:54

已编辑

前端工程师

JavaScript 和 TypeScript 中的布尔值

boolean 是 JavaScript 中一种原始数据类型。在 TypeScript 中，它总共允许四个值（?）。 JavaScript 中的布尔值 boolean 可以取 true 和 false 的值。其他类型的值可以是 truthy 或 falsy，例如 undefined 或 null。 let b = true if(b) console.log('logged') b = false if(b) console.log('not logged') b = undefined if(b) console.log('not logged') b = null if(b) ...

0 点赞评论收藏

转发

2022-03-20 17:54

已编辑

前端工程师

TypeScript 基础 — 类型谓词

TypeScript 中的类型谓词（type predicates）可以帮助您根据条件缩小类型范围。它与 type guards 类似，但在函数上工作。如果函数返回 true，则将参数的类型更改为更有用的类型。 让我们从一个基本的例子开始。假设您有一个函数，用于检查某个值是否为 string 类型： function isString(s) { return typeof s === 'string' } 在另一个函数中使用 isString 函数： function toUpperCase(x: unknown) { if(isString(x)) { x.toUp...

0 点赞评论收藏

转发

2022-03-20 17:54

已编辑

前端工程师

JavaScript 和 TypeScript 中的 void

如果您使用过强类型语言，你可能熟悉 void 的概念：一种类型告诉你函数和方法在调用时不返回任何东西。 void 作为操作符存在于 JavaScript 中，作为基本类型存在于 TypeScript 中。在这两个世界里，void 的工作方式和大多数人习惯的略有不同。 JavaScript 中的 void JavaScript 中的 void 是一个运算符，用于计算它旁边的表达式。无论对哪个表达式求值，void 总是返回 undefined。 let i = void 2 i === undefined // true 为什么我们需要这样的东西？ 首先，在早期，人们能够覆盖 un...

0 点赞评论收藏

转发

2022-03-20 17:54

已编辑

前端工程师

TypeScript 基础 — enum 枚举

什么是枚举？ 在大多数面向对象的编程语言（如 C、C# 和 Java）中，有一种数据类型我们称为枚举 — 简称为 enum。Java 枚举是一种特殊的 Java 类，用于定义常量集合。然而，JavaScript 没有 enum 数据类型，但幸运的是，它们现在在 TypeScript 2.4 版本中可用。 枚举是一组可以采用数字或字符串形式的命名常量。与 TypeScript 中可用的某些类型不同，枚举是经过预处理的，不会在编译时或运行时进行测试。 enum State { on = 'ON', off = 'OFF' } enum 类型是对 JavaScript 标准数据类型...

0 点赞评论收藏

转发

2022-03-20 17:54

已编辑

前端工程师

ES2017（ES8）

ES2017 新特性： async 函数 Object.values/Object.entries 字符串填充：String.prototype.padStart() 和 String.prototype.padEnd() Object.getOwnPropertyDescriptors() 函数参数列表和调用中的尾随逗号 async 函数 ES8 引入了 async 函数。async 函数基本上是 co 的专用语法： async function fetchJson(url) { try { let request = await fetc...

0 点赞评论收藏

转发

2022-03-20 17:54

已编辑

前端工程师

Vue3 Teleport 组件

<Teleport>是一个内置组件，它允许我们将组件模板的一部分“传送”到存在于该组件 DOM 层次结构之外的 DOM 节点中。 Teleport 的目的 我们首先要了解的是，何时使用、以及为什么使用 Teleport。 在处理更大的 Vue 项目时，以逻辑的方式组织代码库变得非常重要。然而，当处理某些类型的组件（如模态、通知或工具提示）时，模板 HTML 的逻辑可能位于不同的文件中，而不是我们想要渲染元素的文件中。 事实上，很多时候，当这些元素与我们的 Vue 应用程序的 DOM 完全分开处理时，它们更容易管理。这一切都是因为处理嵌套组件的定位、z-index 和样式...

0 点赞评论收藏

转发

2022-03-20 17:54

已编辑

前端工程师

Vue 3 中的新的响应式 API

Vue3 使用基于 ES6 Proxy 的新的响应性系统。 详细内容可查阅 Reactivity Fundamentals。 使用 ref() Vue 有一个全局 ref() 方法，它在 JavaScript 原始类型创建一个响应式包装器。它通常只能用于基本类型：number、string、boolean、bigint 和 symbol。 例如，下面是如何创建一个响应式计数器对象。 import { ref } from 'vue' const count = ref(0) console.log(count.value) // 0 ++count.value co...

0 点赞评论收藏

转发

2022-03-20 17:54

已编辑

前端工程师

Vue 错误处理 — onErrorCaptured 钩子

Vue 实例有一个 onErrorCaptured 钩子，每当事件处理程序或生命周期钩子抛出错误时，Vue 会调用该钩子。 例如，下面的代码将增加一个计数器，每次单击按钮时，组件 test 都会抛出一个错误。 <template> <span id="count">{{ count }}</span> <test></test> </template> <script setup> import { defineComponent, onErrorCaptured, ref }...

0 点赞评论收藏

转发

2022-03-20 17:54

已编辑

前端工程师

在 Vue2 与 Vue3 中构建相同的组件

Vue2 和 Vue3 有什么不同？ 我们以一些简单的示例，来看看具体的变化。 你可以查看 Vue3 文档，以了解更加详细的内容示例。 创建模板 Vue3 支持 Fragments，这意味着组件可以有多个根节点。 <template> <div class="app"></div> <div class="popup"></div> </template> 设置数据 主要的区别所在：Options API 与 Composition API Optio...

0 点赞评论收藏

转发

2022-03-20 17:55

已编辑

前端工程师

ES2016（ES7）

ES2016 包含了两个新的功能： 幂运算符（** 和 **=） 数组方法 Array.prototype.includes Array.prototype.includes() includes() 确定给定元素是否包含在指定数组中。如果存在返回 true，否则返回 false。 const arr = [10, 11, 3, 20, 5] const includesTwenty = arr.includes(20) console.log(includesTwenty) // true includes 方法还接受一个可选参数来指定要从中搜索的索引。默认情况...

0 点赞评论收藏

转发

2022-03-20 17:55

已编辑

前端工程师

可以使用 CSS overscroll-behavior: contain 来防止滚动链

当用户滚动嵌入的网页（或网页上的任何嵌套滚动容器）并到达末尾时，浏览器将开始滚动外部页面。这被称为滚动链。 滚动链是指滚动从一个滚动容器传播到滚动链后面的祖先滚动容器。 一些用户可能会觉得这种行为很烦人。幸运的是，可以通过将 overscroll behavior: contain 应用于嵌入页面（或滚动容器）的 <body> 元素来禁用滚动链接。。 body { overscroll-behavior: contain; } Firefox、Chromium 和 Edge 通过 AutoRefixer 支持此功能，但 Safari 目前还不支持此功能： ...

0 点赞评论收藏

转发

2022-03-20 17:55

已编辑

前端工程师

Vue 动态组件

Vue 动态组件可以非常方便地让代码更具可读性和适应性。它们可以将多个条件组件（使用 v-if、v-else-if、v-else 切换的组件）简化为一行代码。 简而言之，它们允许您以最简单的方式在不同组件之间切换。 什么是动态组件？ 动态组件是在运行时在组件之间动态切换的方法。 为了更好地理解，让我们看看一些示例。 浏览选项卡式组件而无需路由到新页面 在一个组件元素中管理不同类型的弹出窗口 根据用户是否登录显示不同的内容。 所有这些都需要唯一的组件，但动态组件提供了一种快捷方式，而不必逐个包含所有组件。 使用动态组件有几个好处。 从开发人员的角度来看，它...

0 点赞评论收藏

转发

2022-03-20 17:55

已编辑

前端工程师

开始使用 Canvas

canvas 是 HTML5 新增的标签，它就像一块幕布，可以用 JavaScript 在上面绘制各种图表、动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。 <canvas></canvas> canvas 默认是看不见的，为了帮助我们可视化 canvas 元素，我们为它添加一个边框： canvas { border: #333 10px solid; } 效果如下： 为 canvas 添加边框 调整我们的 canvas 元素 默认情况下，canvas 元素是宽 300 像素...

0 点赞评论收藏

转发

2022-03-20 17:55

已编辑

前端工程师

bash 中的历史命令快捷方式

$ echo "Hello world" Hello world !! — 最后一个命令 $ !! $ echo "Hello world" !1 — 历史上的第一个条目 !-1 — 历史上的最后一个条目 !ssh — 最后一个以 ssh 开头的命令 $ !1 $ !-1 $ !echo $ echo "Hello world" !:1 — 最后一个命令的第一个参数 $ !:1 $ "Hello world" 更多资料 How To Use B...

0 点赞评论收藏

转发

工具箱

TA的圈子

TA的笔记

牛客网
牛客企业服务