Coder

本篇文章关于遍历对象属性的问题，包括 for ...in，Object.keys()，Reflect.ownKeys()， Object.getOwnPropertyNames()，ObjectgetOwnPropertySymbols() 等方法及区别。 Object.keys()Object.keys(obj) 方法返回对象 obj 上所有可枚举的属性，不包括其原型上的属性 let parent = { category: 'parent'}// 设置 person 为 child 的原型let child = Object.create(parent)child.name = 'Alice'child[Symbol('age')] = 18Object.defineProperty(child, 'gender', { enumerable: false, value: 'female'})console.log(Objec ...

防抖与节流是两个出于性能考虑提出的概念，如果在短时间内多次触发同一函数，可能会产生页面的卡顿，以及性能的降低，针对这种情况，提出了防抖与节流两个解决方案。 防抖与节流的概念为了解释如上的两个概念，我们以一个例子开始。有一个搜索框，当用户输入搜索内容时，会同时向后端发起请求，给出相近的词条以给用户提示 如果当每次用户输入一个字符都向都端发起一个请求，那么发起请求的次数就太频繁了，这时有两种策略： 当用户停止输入一段时间后，例如 500ms，我们向后端发起一个请求 每隔固定的时间向后端发起一个请求 第一种策略我们叫做防抖，第二种策略我们称为节流。 有一个形象的比喻，以公交车发车为例，有两种发车方案： 当乘客上车后，如果经过一段时间没有乘客上车了，就发车 发车时间固定，每隔一段时间发一次车 我们将发车比喻为向后端发起一个请求，那么这两种发车的策略就分别对应为防抖和节流。 防抖实现我们要实现一个 debounce 函数，该函数接收一个函数以及时间，返回一个函数，debounce 函数的作用就是将一个普通的函数变为防抖的函数，即多次调用该函数，只有经过指定时间后，函数才会触发一次 c ...

本篇文章总结控制对象访问的相关 API。 Object.definePropertyObject.defineProperty 可以对对象的属性进行配置，它接收如下参数： obj：对象 prop：属性 descriptor：属性描述符 其中 descriptor 包括如下配置选项 value：属性的值 writable：属性是否可写，默认为 false set：为属性设置值时会触发此方法，设置的新值会作为参数传入 get：访问此属性是会触发此方法 configurable：该属性是否可再次进行配置，默认为 false enumerable：是否可遍历，默认为 false 其中 value 与 writable 是一组，set 和 get 是一组，二者不可同时使用。 例子1const obj = {}Object.defineProperty(obj, 'name', { value: 'Alice', writable: false})console.log(obj.name) // A ...

以前我们数据的获取一般都是通过父组件向子组件数据，或者通过向子组件注册自定义事件，使得子组件向父组件传递数据。如果组件的层级比较深，组件数据的传递跨越多个层级，那么无论是从父组件传递数据到子组件，还是从子组件传递数据到父组件，都会写出难看的代码。 Vuex 提供了全局管理数据能力，它集中管理所有需要被共享的数据，无论组件在什么层级，都可以直接向 Vuex 获取数据。 安装对于 script 标签引入 <script src="https://unpkg.com/vuex"></script> 对于 npm 项目 npm install vuex --save 对于 vue-cli 项目 vue add vuex 可以通过 vue ui 通过 GUI 界面创建一个带 Vuex 预设的项目。 Get Started首先通过 vue-cli 创建一个 Vue 项目，命令行或 GUI 的方式都是可以的，接着添加 vuex 插件，添加 vuex 插件的时候会在 src 目录下新建 store 文件夹，其中有一个 index.js 文件，我们首 ...

Vue 经常被用来构建单页应用，这意味着需要在前端完成在多个视图之间的切换，想要做到这一点，目前的解决方案通过监控路由，根据路由来切换不同的组件，以达到多视图的切换。Vue 官方为我们提供了 Vue Router 来帮助我们实现这个目的。 安装如果你的项目只是简单的 HTML 页面，那么可以通过 CDN 引入 Vue Router <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 如果你的项目是一个 npm 项目，那么可以通过 npm 下载 Vue Router npm install --save vue-router 如果你是通过 vue-cli 创建的项目，则你可通过 vue add 来添加 Vue Router vue add router 基本使用首先看入口组件 App.vue // App.vue<template> <div id="app"> <router-link t ...

在之前使用 Vue 的过程，我们所有的代码都是放在一个 script 标签中，所有的代码放在一起，势必会带来维护上的困难，另外，现如今的软件开发模式，都是多人协作，所有的代码都放在一起，也会给多人协作带来困扰，我们需要更加工程的方式来写 Vue 代码。 一般我们要求一个 Vue 组件对应一个以 .vue 结尾的文件，例如 // Hello.vue<template> <div> {{msg}} </div></template><script>export default { data() { return { msg: 'Hello World!' } },}</script> 上面就定义了一个局部组件。 安装 vue-cli对于上述 .vue 文件是无法在浏览器显示的，因为浏览器只认识 html, css ...

{% raw %}这几天写了一篇有关于 Vue.js 的博客，在讲述插值语法时会用到 }}，但是 Hexo 博客使用的是 Nunjucks 来解析文章，内容中如果包含 {{ }} 或者 {% %} 就会发生错误 {% endraw %} 官方给出了三种解决办法： 使用 raw 标签 {% raw %}将包含 {{ }} 或者 {{% %}} 的内容放在其中{% endraw %} 使用 ` 或者 ``` `{{ }}` `{% %}` 在 front-matter 中禁止 Nunjucks disableNunjucks: true {% raw %} 我首先选择的是第三个解决办法，设置 front-matter，但是没有用；而第二个办法直接排除，因为我的 {{}} 就是放在 single backtick 中，但是明显没有效果；那我只有选择第一种办法了，但是事情没有解决，因为 }} 会被解析为行内公 ...

本篇文章的目的是快速的入门 Vue.js，力求能够通过本篇文章了解 Vue.js 的基本用法，但是并不会覆盖 Vue.js 的方方面面，在读完本篇文章之后，便可阅读 Vue.js 的官方教程，进一步的了解 Vue 的进阶内容。 Vue 带来的开发思维的改变假设有这么一个要求，要我们根据一个数组渲染出一个列表，对于下面的数组 const courses = ['语文', '数学', '英语']; 要求渲染出下面的 HTML 结构 <ul> <li>语文</li> <li>数学</li> <li>英语</li></ul> 所以我们会写出这样的代码 const courses = ['语文', '数学', '英语'];const ulEle = document.getElementsByTagName("ul")[0];courses. ...

题目描述给你一个链表数组，每个链表都已经按升序排列。请你将所有链表合并到一个升序链表中，返回合并后的链表。 解题思路我一开始的解题思路就是将两个链表一一合并，思路如下： list1 + list2 -> list list3 + list -> list list4 + list -> list … 所以第一版的代码如下 public ListNode mergeKLists(ListNode[] lists) { ListNode root = null; if (lists.length == 0) { return root; } root = Arrays.stream(lists).reduce(null, this::mergeTwoList); return root;}// 合并两个链表private ListNode mergeTwoList(ListNode l1, ListNode l2) { if (l1 == null) { ...

题目描述给你一个包含 $n$ 个整数的数组 nums，判断 nums 中是否存在三个元素 $a$，$b$，$c$ ，使得 $a + b + c = 0$ 。请你找出所有和为 $0$ 且不重复的三元组。 注意：答案中不可以包含重复的三元组。 解题思路如果只是单纯的三数之和，那么就是一道很简单的题，首先对数组进行排序，接着固定一个数，然后在剩下的数中查找有无两个数字与这个固定的数字加起来为 $0$，有则找到一对，使用双指针即可，具体可以参考两数之和。但是题目要求找到所有的不重复的三元组，这就使得题目有点不一样了。正是因为在这里耗费了大量的时间，我才决定将此题记录下来。 一开始我的想法就是先找到所有的三元组，然后去重。找到所有的三元组容易，但是去重难，一开始我想使用 Set 集合进行去重。但是因为每一个三元组都是一个 List 集合，去重比较的是地址值，所以直接添加 List 集合到 Set 集合中是无法去重。因此我产生了一个大胆的想法，因为它比较的是地址值，所以我想写一个类继承 List 类，然后重写它的 hashCode 与 equals 方法(我不知道 Set 是不是靠这两个判 ...