day-022-twenty-two-20230307-快速排序-插入排序-字符串模版-字符串相关方法-Math相关方法-学习思路

快速排序

• 先拿出中间项，然后把此项从数组中删除掉，让数组中的剩余项一一跟这个中间项做比较，新建两个左右数组，如果大的项就放到右数组，如果小的项就放到数组。从左到右返回递归存放大数的右数组的返回值用concat()把中间项及递归存放小数的左数组的返回值。

  ```jsconst ary = [5, 4, 3, 2, 1];function quicksort(array = []) {//停止递归的条件 - 入参数组里面只有1项或者0项，就停止if (array.length <= 1) {return array;}//1 拿出中间项，并且删除那一项const centerIndex = Math.floor(array.length / 2);//中间项下标const centerItem = array.splice(centerIndex, 1)[0];//中间项数值//2 创建两个空数组，遍历剩余数组中每一项如果比中间项数值大，那就放右边，比中间项数值小放左边const minArray = [];const maxArray = [];for (let i = 0; i < array.length; i++) {const nowItem = array[i];if (nowItem < centerItem) {minArray.push(nowItem);} else {maxArray.push(nowItem);}}return quicksort(minArray).concat(centerItem, quicksort(maxArray));}console.log(quicksort(ary));
  ```
  

插入排序

• 新建一个数组:依次拿出原数组中的每一项往新数组里面插入，插入的时候需要遵循一个规律：

  1. 方向：从右向左

  2. 最终实现的效果，从小到大，在插入的时候，拿出的项从右向左依次比较(新数组)，如果拿出的项大（或者相等），就直接插入首次比它小的后面，

  3. 如果一直比到第一项了，条件还没满足,后面就是最小项，直接放到数组的最前面

      ```js// @1 创建一个空数组// @2 将原数组的第一项放进新数组里// @3 依次拿出原数组的每一项和新数组比较（从后往前比）// @4 如果拿出这一项比原数组的某一项（第一次出现）的大，那就放他后面// @5 全部比完，还没有大的，那就放在数组开头var ary = [11, 7, 12, 46, 35];function insertSort(ary) {var newAry = [];newAry.push(ary[0]);for (var i = 1; i < ary.length; i++) {var getItem = ary[i];for (var j = newAry.length - 1; j >= 0; j--) {var newAryItem = newAry[j];if (getItem >= newAryItem) {newAry.splice(j + 1, 0, getItem);break;//如果一旦找到，就停止}if (j === 0) {newAry.unshift(getItem);}}}return newAry;}console.log(insertSort(ary));```
     

字符串

• 用’'、“”、``包着的就是字符串。

  ```jsvar str1 = 'fang'var str2 = "fang"var str3 = `fang`
  ```
  

• 年月日示例

  • ES6模板字符串

    ```jsvar year = 2023var month = 3var day = 7console.log(year+'年'+month+'月'+day+'日')console.log(`${year}年${month}月${day}日`)
    ```
    

• 字符串取字符

  • 用中括号语法去取

        ```jsvar str = "zhufeng";console.log(str[0]);//z```
    

    • 但不支持用中括号语法去修改值

        ```jsvar str = "zhufeng";console.log(str[0]);//zstr[0] = "c"; //不报错，但str里的值依旧是原来的。不能像数组一样去修改console.log(str);```
      

      • 使用中括号语法去修改单个字符，跃然不报错，但字符串依旧是之前的，并没有被修改。

• 字符串长度

  • 字符串包装对象上有个length属性，里面表示的字符串的字符长度。

    ```js
    console.log('fangchaoduan'.length);//12
    ```
    

    • 字符长度不一定等于字符数

      ```js
      const emoji = "😄";
      console.log(emoji.length); //2
      ```
      

字符串相关方法

• charAt(index) 通过下标去取字符
  • 'fang😄fang fang'.charAt(0)//'f'
• charCodeAt(index) 通过下标取值对应的字符编码
  • 'fang😄fang fang'.charCodeAt(0)//102
• indexOf(string,index) 通过字符片断初次开始的位置
  • 'fang方fang fang'.indexOf('fa',4)//5
• lastIndexOf(string,index) 通过字符片断最后一次开始的位置
  • 'fang方fang fang'.lastIndexOf('fa',13)//10
• slice(start,endLength) 查找字符串中特定位置的字符
  • 'fang方fang fang'.slice(4,-2)//'方fang fa'
  • 字符串’'在控制台选不到
  • 字符串’ '虽然看不到但可以在控制台上选到
• subString()
  • 'fang方fang fang'.subString(4,11)//'方fang f'
  • subString()和slice()基本都一样，唯一不同在于，subString()不支持负数索引，而slice()支持负数索引
• substr(n,m) 从索引n开始截取m个字符
  • 'fang方fang fang'.substr(4,4)//'方fan'
• toUpperCase() 把字符串转换为大写
  • 'fang方fang Fang'.toUpperCase()//'FANG方FANG FANG'
• toLowerCase() 把字符串转换为小写
  • 'fang方fang Fang'.toLowerCase()//'fang方fang fang'
• replace() 把字符串中某部分的字符替换成另一部分字符
  • 'fang方fang Fang'.replace('fang','方朝端')//'方朝端方fang Fang'
  • 多次调用，重复替换
    • 'fang方fang Fang'.replace('fang','方朝端').replace('fang','方朝端')//'方朝端方方朝端 Fang'
    • 链式调用
  • 配合正则去使用
• split() 按照指定的字符把字符串分割成数组
  • 'fang方fang Fang'.split('fa')//['', 'ng方', 'ng Fang']

示例

字符串转化日期

```jsvar str = "2008-8-8 8:8:8";const transformTime = (time = "2019-8-18 12:32:18") => {function addZero(num) {return num < 10 ? "0" + num : num;}const before = time.split(" ")[0].split("-");const after = time.split(" ")[1].split(":");const res = `${before[0]}年${addZero(before[1])}月${addZero(before[2])}日 ${addZero(after[0])}时${addZero(after[1])}分${addZero(after[2])}秒`; //2019年08月18日 12时32分18秒return res;};console.log(transformTime(str));
```

字符串转化URL

```jsvar str = "https://www.baidu.com?name=zhufeng&age=10&id=14";var transformUrl = (url) => {var queryString = url.split("?")[1];var queryList = queryString.split("&");const res = {};for (let i = 0; i < queryList.length; i++) {const query = queryList[i].split("=")const key = query[0];const value = query[1];res[key] = value;}return res;};console.log(transformUrl(str));
```

Math方法

• Math.abs(num) num求绝对值 不管正数还是负数，结果都是对应的正数

  • Math.abs(-5.3)//5.3

• Math.floor(num) num向下取整，不管正数还是负数，都是取小的

  • Math.floor(5.91)//5

• Math.ceil(num) num向上取整，无论是正数还是负数，都取最大的值

  • Math.ceil(5.01)//6

• Math.round(num) num四舍五入

  • 如果是负数，小数的临界值一定要大于0.5才会变成被舍入
    • Math.round(-1.3)//-1
    • Math.round(-1.5)//-1
    • Math.round(-1.51)//-2
    • Math.round(-1.6)//-2

• Math.sqrt(num) num开平方，即返回值为根号num

  • Math.sqrt(81)//9

• Math.pow(num,power) num取power幂，即返回值为num的power次方

  • 只有一个入参时会返回NaN
  • 两个入参才正常显示多少次方
    • Math.pow(4)//NaN
    • Math.pow(4,2)//16
    • Math.pow(4,3)//64
  • ES6简写 **;
    • 4**2//16

• Math.PI 取π值，不是一个方法，是一个属性。

• Math.max() 获取最大值

  • Math.max(12,3,6,15,5,8,9)//15
  • 配合扩展运算符...取数组中的最大值

• Math.min() 获取最小值

  • Math.min(12,3,6,15,5,8,9)//3
  • 配合扩展运算符...取数组中的最小值

• Math.random() 范围在[0,1)的随机小数，包括0但不包含1。

  • min-max之间的随机小数
    • Math.random()*(max-min)+min
      • Math.random()*(10-5)+5//范围在[5,10)的随机小数
  • min-max之间的随机整数
    • Math.floor(Math.random()*(max-min+1)+min)
      • Math.floor(Math.random()*(10-5+1)+5)//范围在[5,10]的随机整数

案例

点击按钮切换背景

```html

切换背景

```

得到不同的随机数验证码

每执行一次，就能得到一个四位的随机数，随机数里的字符不能重复

```js
var str = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
function randomCode(numLength = 4, string = "0123456789", isRepeat = false) {const chars = string.split("");const newList = [];for (; newList.length < numLength; ) {const num = Math.floor(Math.random() * (chars.length - 1 - 0 + 1) + 0);if (isRepeat || !newList.includes(chars[num])) {newList.push(chars[num]);}}let res = newList.join("");return res;
}
console.log(randomCode(4, str));
```

学习

• 理解案例
  1. 看别人写的源码，自己写注释
  2. 把别人源码去掉，留下注释，自己来写
  3. 把注释去掉，自己默写
  4. 几天之后，自己独立写

进阶参考

1. Math.random()