webRambler-blog

前言做页面时，如果用到inline-block元素来布局，就无可避免都会遇到一个问题，就是inline-block元素之间的间隙。这些间隙会导致一些布局上的问题，需要把间隙去掉。 1、标签写在一行，移除标签间的空格123<div class="demo"> <span>我是一个span</span><span>我是一个span</span><span>我是一个span</span></div> 2、利用HTML注释标签123456<div class="demo"> <span>我是一个span</span><!-- --><span>我是一个span</span><!-- --><span>我是一个span</span><!-- --><span>我是一个span</span&g ...

定义快速排序（英语：Quicksort），又称分区交换排序（partition-exchange sort），简称快排，一种排序算法，最早由东尼·霍尔提出。在平均状况下，排序 n 个项目要 O(nlogn) 次比较。在最坏状况下则需要 O(n^2) 次比较，但这种状况并不常见。事实上，快速排序 (nlogn) 通常明显比其他算法更快，因为它的内部循环（inner loop）可以在大部分的架构上很有效率地达成。 算法逻辑思想快速排序使用分治法（Divide and conquer）策略来把一个序列（list）分为较小和较大的2个子序列，然后递归地排序两个子序列。 步骤为： 挑选基准值：从数列中挑出一个元素，称为“基准”（pivot）， 分割：重新排序数列，所有比基准值小的元素摆放在基准前面，所有比基准值大的元素摆在基准后面（与基准值相等的数可以到任何一边）。在这个分割结束之后，对基准值的排序就已经完成， 递归排序子序列：递归地将小于基准值元素的子序列和大于基准值元素的子序列排序。 递归到最底部的判断条件是数列的大小是零或一，此时该数列显然已经有序。 选取基准值有数种具体方法，此选取方 ...

定义归并排序（英语：Merge sort，或mergesort），是创建在归并操作上的一种有效的排序算法，效率为O(nlogn)。1945年由约翰·冯·诺伊曼首次提出。该算法是采用分治法（Divide and Conquer）的一个非常典型的应用，且各层分治递归可以同时进行。 算法逻辑思想采用分治法: 分割：递归地把当前序列平均分割成两半。 集成：在保持元素顺序的同时将上一步得到的子序列集成到一起（归并）。 归并操作归并操作（merge），也叫归并算法，指的是将两个已经排序的序列合并成一个序列的操作。归并排序算法依赖归并操作。 递归法（Top-down） 申请空间，使其大小为两个已经排序序列之和，该空间用来存放合并后的序列 设定两个指针，最初位置分别为两个已经排序序列的起始位置 比较两个指针所指向的元素，选择相对小的元素放入到合并空间，并移动指针到下一位置 重复步骤3直到某一指针到达序列尾 将另一序列剩下的所有元素直接复制到合并序列尾 迭代法（Bottom-up）原理如下（假设序列共有 n 个元素）： 将序列每相邻两个数字进行归并操作，形成 ceil(n/2) 个序列，排序后每个 ...

定义希尔排序（Shellsort），也称递减增量排序算法，是插入排序的一种更高效的改进版本。希尔排序是非稳定排序算法。 希尔排序是基于插入排序的以下两点性质而提出改进方法的： 插入排序在对几乎已经排好序的数据操作时，效率高，即可以达到线性排序的效率； 但插入排序一般来说是低效的，因为插入排序每次只能将数据移动一位。 算法实现逻辑希尔排序通过将比较的全部元素分为几个区域来提升插入排序的性能。这样可以让一个元素可以一次性地朝最终位置前进一大步。然后算法再取越来越小的步长进行排序，算法的最后一步就是普通的插入排序，但是到了这步，需排序的数据几乎是已排好的了（此时插入排序较快）。 步长序列步长的选择是希尔排序的重要部分。只要最终步长为1任何步长序列都可以工作。算法最开始以一定的步长进行排序。然后会继续以一定步长进行排序，最终算法以步长为1进行排序。当步长为1时，算法变为普通插入排序，这就保证了数据一定会被排序。 Donald Shell最初建议步长选择为n/2并且对步长取半直到步长达到1。虽然这样取可以比O(n^2)类的算法（插入排序）更好，但这样仍然有减少平均时间和最差时间的余地。 Ja ...

定义插入排序（英语：Insertion Sort）是一种简单直观的排序算法。它的工作原理是通过构建有序序列，对于未排序数据，在已排序序列中从后向前扫描，找到相应位置并插入。插入排序在实现上，通常采用in-place排序（即只需用到O(1)的额外空间的排序），因而在从后向前扫描过程中，需要反复把已排序元素逐步向后挪位，为最新元素提供插入空间。 算法实现逻辑一般来说，插入排序都采用in-place在数组上实现。具体算法描述如下： 从第一个元素开始，该元素可以认为已经被排序； 取出下一个元素，在已经排序的元素序列中从后向前扫描； 如果该元素（已排序）大于新元素，将该元素移到下一位置； 重复步骤3，直到找到已排序的元素小于或者等于新元素的位置； 将新元素插入到该位置后； 重复步骤2~5； JavaScript代码实现插入排序12345678910111213function insertSort(list) { const len = list.length for (let outer = 1; outer < len; outer++) { con ...

定义选择排序（Selection sort）是一种简单直观的排序算法。它的工作原理如下，首先在未排序序列中找到最小（大）元素，存放到排序序列的起始位置，然后，再从剩余未排序元素中继续寻找最小（大）元素，然后放到已排序序列的末尾。以此类推，直到所有元素均排序完毕。 选择排序的主要优点与数据移动有关。如果某个元素位于正确的最终位置上，则它不会被移动。选择排序每次交换一对元素，它们当中至少有一个将被移到其最终位置上，因此对n个元素的表进行排序总共进行至多(n-1)次交换。在所有的完全依靠交换去移动元素的排序方法中，选择排序属于非常好的一种。 算法实现逻辑选择排序算法，从数组的开头开始，将第一个元素和其他元素进行比较，检查完所有元素后，最小的元素会放在数组的第一个位置，然后算法会从第二个位置继续。这个过程一直进行，当进行到数组的倒数第二个位置时，所有的数据便完成了排序。 JavaScript代码实现选择排序1234567for (let i = 0, len = arr.length; i < len - 1; i++) { for (let j = i + 1; j < ...

定义冒泡排序（英语：Bubble Sort）又称为泡式排序，是一种简单的排序算法。它重复地走访过要排序的数列，一次比较两个元素，如果它们的顺序错误就把它们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。 冒泡排序之所以叫冒泡排序，是因为使用这种算法进行排序时，数据值会像气泡一样从数组的一端漂浮到另一端。假设正在将一组数字按照升序排列，较大的值会浮动到数组的右侧，而较小的值会浮动到数组的左侧。之所以产生这种现象是因为算法会多次在数组中移动，比较相邻的数据，而左侧值大于右侧值时将它们进行互换。 算法实现逻辑冒泡排序算法的运作如下： 比较相邻的元素。如果第一个比第二个大，就交换它们两个。 对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对。这步做完后，最后的元素会是最大的数。 针对所有的元素重复以上的步骤，除了最后一个。 持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较。 JavaScript代码实现冒泡排序写法一：123456789for (let i = ...

今天看到一个话题讨论JavaScript数组扁平化，忍不住自己也实现一下，在下采用的方式和别人不同，talk is cheap，show you the code! 法一：1234567891011121314function flattenArray(arr) { if (arr && Array.isArray(arr)) { return arr.reduce((acc, cur) => { acc = acc.concat(cur) for(let item of acc) { if (item && item instanceof Array) { return arguments.callee(acc) } } return acc }, []) &# ...

在vue项目中，很多场景需要我们刷新组件，一般常用的两种刷新方法： 123window.location.reload()，原生 js 提供的方法；this.$router.go(0)，vue 路由里面的一种方法； 这两种方法都可以达到页面刷新的目的，简单粗暴，但是用户体验不好，相当于按 F5 刷新页面，页面的重新载入，会有短暂的白屏。 那么，怎么实现无痕刷新呢？ 原理：先在全局组件注册一个方法，用该方法控制router-view的显示与否，然后在子组件调用。 步骤： v-if控制的显示。 provide：全局注册方法。 methods：设置reload方法。 在子组件中使用inject插入父组件的刷新方法。 第一步在app.vue里面设置： 123456789101112131415161718192021222324252627<template> <div id="app"> <router-view v-if="refresh"></router-view> ...

在移动端上，有事件监听的元素被点击的时候会被高亮显示，而-webkit-tap-highlight-color属性会在当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时，覆盖显示的高亮颜色。 对于添加了 cursor:pointer 属性的元素，在移动端点击时，背景会高亮。为元素添加 -webkit-tap-highlight-color: transparent; 属性可以隐藏背景高亮。