欢迎来到我的小站

快速排序算法算法简介 快速排序（英语：Quicksort），又称划分交换排序（partition-exchange sort），简称快排，一种排序算法，最早由东尼·霍尔提出。在平均状况下，排序n个项目要O(nLogn)次比较。在最坏状况下则需要O(n^2)次比较，但这种状况并不常见。事实上，快速排序O(nLogn)通常明显比其他算法更快，因为它的内部循环（inner loop）可以在大部分的架构上很有效率地达成。 以下列举两种不同的快排代码进行分析： 快速排序的3个基本步骤 从数组中选择一个元素作为基准点 排序数组，所有比基准值小的元素摆放在左边，而大于基准值的摆放在右边。每次分割结束以后基准值会插入到中间去。 最后利用递归，将摆放在左边的数组和右边的数组在进行一次上述的1和2操作。 为了更深入的理解，可以看下面这张图 我们根据上面这张图，来用文字描述一下 选择左右边的元素为基准数，7 将小于7的放在左边，大于7的放在右边，然后将基准数放到中间 然后再重复操作从左边的数组选择一个基准点2 3比2大则放到基准树的右边 右边的数组也是一样选择12作为基准数，15比12大所以放到了1 ...

文字换行在一般长文字下，会自动换行，如果不能自动换行可通过以下CSS样式修改 12345678span{ word-break:normal; width:auto; display:block; white-space:pre-wrap; word-wrap : break-word ; overflow: hidden ;} 长url换行想让一个长单词在中间截断换行时，上述方式便不适用，因为其换行原理在于不从一个单词中间截断，因此以下代码才能实现长单词换行功能 123white-space: pre-line; // 处理元素中的空白word-break: break-all;// 单词内断行word-wrap: break-word;// 换行位置 normal只允许在断字点换行 break-word 长单词或url内部换行

选择排序算法算法简介 选择排序是一个简单直观的排序方法，它的工作原理很简单，首先从未排序序列中找到最大的元素，放到已排序序列的末尾，重复上述步骤，直到所有元素排序完毕。 算法描述 假设未排序序列的第一个是最大值，记下该元素的位置，从前往后比较 若某个元素比该元素大，覆盖之前的位置 重复第二个步骤，直到找到未排序的末尾 将未排序元素的第一个元素和最大元素交换位置 重复前面几个步骤，直到所有元素都已经排序。 算法分析 选择排序的交换操作次数最好情况已经有序为0次，最坏情况逆序n-1次，因此交换操作次数位于0 —— (n-1)次之间；比较操作次数（n-1+…+2+1+0. 为n(n-1)/2次；交换元素赋值操作为3次，逆序需要n-1趟交换，因此，赋值操作位于0 —— 3(n-1)次之间。由于需要交换位置，所以肯定是不稳定的。 时间复杂度均为o(n^2) 空间复杂度为o(1) 不稳定 代码实现12345678910111213141516function selsetSort(arr){ let len = arr.length; let index; for(let ...

冒泡排序算法 对数组进行 冒泡排序 ,是算法当中比较简单易理解的。 原理 数组中有 n 个数，比较每相邻两个数，如果前者大于后者，就把两个数交换位置；这样一来，第一轮就可以选出一个最大的数放在最后面；那么经过 n-1（数组的 length - 1） 轮，就完成了所有数的排序。 首先，通过一次循环，从而找到最大数放于数组队尾 123456789let arr = [3,4,1,2];// 遍历数组，次数就是arr.length - 1for (let i = 0; i < arr.length - 1; i++) { // 如果前一个数 大于 后一个数 就交换两数位置 if (arr[i] > arr[i + 1]) { [arr[i],arr[i + 1]] = [arr[i + 1], arr[i]]; }}console.log(arr) // [3, 1, 2, 4] 总计，重复 arr.length - 1 次，便可以实现数组按从小到大的顺序 1234567891011let arr = [3,4,1,2];// ...

在做前端的时候，难免会遇到需要用动画的需求。 思考由于没有相关属性直接定义，就只能使用间接的方式了。就把间隔的时间也加到动画的时间里面。 代码定义一个间隔3秒的动画简单代码如下 1234567891011121314151617181920212223242526272829303132333435@keyframes redpack { 0% { transform: translateY(0); } 75% { transform: translateY(0); } 79% { transform: translateY(5rpx); } 82% { transform: translateY(-20rpx); } 84% { transform: translateY(0rpx); } 87% { transfor ...

页面点击本地页面打开新页面 引入ant的Button组件1234<Button style={{backgroundColor:'#F0F2F5'}} onClick={()=>{window.location.href="https://baidu.com"}} className="r-button"> 引入import {Link} from ‘react-router-dom’123<Link to="/new/login/"><Button className="e-button" type="primary">Back to login page</Button></Link> 带参跳转 引入import { Link} from ‘umi’;123<Link to={{pa ...

Form 表单记录 Form 表单的 labelCol，wrapperCol翻阅文档赫然清晰说明了它两的用法： labelCol: label 标签布局，同 组件，设置 span offset 值，如 {span: 3, offset: 12} 或 sm: {span: 3, offset: 12}。你可以通过 Form 的 labelCol 进行统一设置，，不会作用于嵌套 Item。当和 Form 同时设置时，以 Item 为准。 言下之意就是可以下面两种设置：方法一： 1234567<Form labelCol={{span:3}} wrapperCol={{span:8}}></Form> 方法二： 12345678910111213<Form labelCol={{span:3}} wrapperCol={{span:8}}> <Form.Item > < ...

Form 表单记录 3.x 版本 antd 文档表明表单项的值不推荐通过设置状态来更新，我们应该使用 form.setFieldValue 来更新 设置一组输入控件的值（注意：不要在 componentWillReceiveProps 内使用，否则会导致死循环） 123({ [fieldName]: value }, callback: Function ) => void Form.createFormField用于标记 mapPropsToFields 返回的表单域数据 经过 getFieldDecorator 包装的控件，表单控件会自动添加 value（或 valuePropName 指定的其他属性） onChange（或 trigger 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果： 不再需要也不应该用 onChange 来做同步，但还是可以继续监听 onChange 等事件。 不能用控件的 value defaultValue 等属性来设置表单域的值，默认值可以用 getFieldDecorator 里的 i ...

「布局技巧」图片未加载前自动撑开元素高度在移动端开发中，有一些元素是根据图片高度来自动撑开的 ，高度不能写死（如轮播图的外层元素）。在网络较慢的情况下，图片加载需要一些时间，此时该元素的高度没有被撑开，在网页布局上会有一些不想看到的效果。 这种情况我们可以设置如下样式来设置该元素的高度： 123456.wrapper overflow hidden width 100% height 0 padding-bottom 26.66% // 这个数值是图片的高宽比，即 高/宽 background #eee 上面代码中，padding-bottom 的取值是图片的高宽比（即，高/宽），它会根据 width值的26.66%计算，最终元素的高度会和图片加载完成后的高度一致。 也可以使用vw的方法，但在一些浏览器可能有兼容性问题： 1234.wrapper width 100% height 26.66vw background #eee vw，viewpoint width，视窗宽度，1vw=视窗宽度的1% vh，viewpoint height，视窗高度，1vh=视窗 ...

flex布局案例-网格布局 可用F12开发者工具查看元素及样式，可打开codepen在线编辑代码。 ::: demo [vanilla] 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182<html> <div class="grid"> <div class="grid-cell">1/2</div> <div class="grid-cell">1/2</div> </div> <div class="grid"> <div class="grid-cell">1/3</div> ...