一篇文章帶你瞭解JavaScript中的基礎算法之「字符串類」

做者 | Jeskson

來源 | 達達前端小酒館

1

算法能夠幹什麼呢？提升什麼？有什麼好處呢？

前端的同窗須要提高編程核心內功，創建和健全算法知識體系，基礎算法、數據結構、進階算法，由淺入深講解，透徹理解抽象算法，算法面試是關鍵一環，衝擊大廠前端offer。

學習算法前掌握ES6哦！須要掌握單元測試的語言，Jest

Jest is a delightful JavaScript Testing Framework with a focus on simplicity.

It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more!

Jest是一個使人愉悅的JavaScript測試框架，專一於簡單性。

它適用於使用如下項目的項目：Babel，TypeScript，Node，React，Angular，Vue等！

zero config

Jest aims to work out of the box, config free, on most JavaScript projects.

零配置Jest旨在在大多數JavaScript項目中開箱即用，無需配置。

snapshots

Make tests which keep track of large objects with ease. Snapshots live either alongside your tests, or embedded inline.

快照

進行測試以輕鬆跟蹤大型物體。快照能夠與測試同時存在，也能夠嵌入式嵌入。

isolated

Tests are parallelized by running them in their own processes to maximize performance.

孤立

經過在它們本身的流程中運行測試來並行化它們以最大化性能。

great api

From it to expect - Jest has the entire toolkit in one place. Well documented, well maintained, well good.

很棒的api

從it到expect-Jest將整個工具包放在一個地方。有據可查，維護得很好，很好。

Jest自動化測試特色：

快速安全代碼覆蓋率輕鬆模擬

基礎算法：字符串類，數組類，排序類，遞歸類，正則類。

數據結構：堆，棧，隊列，鏈表，矩陣，二叉樹。

學習Jest，Getting Started，使用yarn 安裝 Jest:

yarn add --dev jest

或者使用npm

npm install --save-dev jest

寫一個兩個數字相加的函數：

function sum(a,b) {
 return a   b;
}

module.exports = sum;

測試文件

const sum = require('./sum');
// 測試咱們的相加函數文件

test('adds 1 2 to equal 3', () => {
 expect(sum(1,2)).toBe(3);
});

配置package.json

{
 "scripts": {
  "test": "jest"
 }
}

Jest是Facebook推出的一款測試框架，集成了Mocha，chai，jsdom等功能。

安裝配置

npm install --save-dev jest

npm install -g jest

運行命令jest後，會自動運行項目下全部.test.js文件和.spec.js文件，jest的配置默認只須要package.json中配置便可。

將jest運行範圍限制在test文件夾下，package.json中加入

"jest" {
 "testRegex": "/test/.*.test.jsx?$"
}

Jest是一種很容易使用的測試工具，下面咱們分幾個小步驟來實際操做一下吧。

須要新建一個js文件名爲sum

// sum.js
function sum (value1, value2) {
 return value1   value2;
}
module.exports = sum;

sum-test.js

// _tests_/sum-test.js
jest.dontMock('../sum');

describe('sum', function() {
 it('add 1   2 to equal 3', function() {
  var sum = require('../sum');
  expect(sum(1,2)).toBe(3);
 });
});

package.json代碼

{
 "scripts": {
   "test": "jest"
 }
}

執行命令 "npm test" 或 "jest"

npm install --save-dev jest

npm run test Jest

Jest-Test

https://github.com/huangguangda/Jest-Test

master分支：

git checkout master

環境搭建

dev分支：

全部源碼

git checkout div

給定一個整數的數組和一個目標值target：

給定 nums = [2, 7, 11, 15], target = 9

由於 nums[0]   nums[1] = 2   7 = 9
因此返回 [0, 1]

<template>
  <view class="content">
    <image class="logo" src="/static/logo.png"></image>
    <view class="text-area">
      <text class="title">{{da[0]}}   {{da[1]}}</text>
    </view>
    <button @click="twoSum">點擊兩數之和</button>
  </view>
</template>
<!-- 給定 nums = [2, 7, 11, 15], target = 9

由於 nums[0]   nums[1] = 2   7 = 9
因此返回 [0, 1] -->
<script>
  export default {
    data() {
      return {
        nums: [2, 7, 11, 15],
        target: 9,
        title: 'Hello',
        da: [],
      }
    },
    onLoad() {

    },
    // nums[0]   nums[1] = 2   7 = 9
    // [0, 1] 
    methods: {
      twoSum:function() {
        // 數組長度
        var len = this.nums.length;
        // 目標數組
          var nums = this.nums;
        // 兩數之和
        var target = this.target;
        // [0, 1] 設置da數組
        var da = [];
        // 循環
        for(var i=0; i<len; i  ) {
          for(var j = i 1; j<len; j  ){
            if(nums[i]   nums[j] == target) {
              da[0] = i;
              da[1] = j;
            }
          }
        }
        return this.da = da;
      }
    }
  }
</script>

<style>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
  }

  .text-area {
    display: flex;
    justify-content: center;
  }

  .title {
    font-size: 36rpx;
    color: #8f8f94;
  }
</style>

/**
 * @param {number[]} nums
 * @param {number} target
 * @return {number[]}
 */
var nums = [2, 7, 11, 15], target = 9;
var twoSum = function(nums, target) {
    var da = [];
    for(var i=0; i<nums.length; i  ) {
        for(var j=i 1; j<nums.length; j  ) {
            if(nums[i]   nums[j] == target) {
                da[0] = i;
                da[1] = j;
            }
        }
    }
    return da;
};

給定一個字符串，你須要反轉字符串中每一個單詞的字符順序，同時仍保留空格和單詞的初始順序。

輸入: "Let's take LeetCode contest"
輸出: "s'teL ekat edoCteeL tsetnoc"

JavaScript join() 方法

定義和用法

join() 方法用於把數組中的全部元素放入一個字符串。元素是經過指定的分隔符進行分隔的。

JavaScript reverse() 方法

定義和用法reverse() 方法用於顛倒數組中元素的順序。

JavaScript split() 方法

定義和用法split() 方法用於把一個字符串分割成字符串數組。

/**
 * @param {string} s
 * @return {string}
 */
var s = "Let's take LeetCode contest";
var reverseWords = function(s) {
    // 字符串按空格進行分隔，保存數組，數組的元素的前後順序就是單詞的順序
    // 字符串變數組
    var daArray = s.split(' ');
    // 將字符串按空格分開變成數組
    // for(var i=0; i<daArray.length; i  ) {
        // 將數組中的各個元素分別分開、反轉、從新變成字符串，而後將當前數組元素從新賦值
        // daArray[i] = daArray[i].split('').reverse().join("");
    // }
    // 返回時將數組中的元素用空格隔開，變成字符串
    // return daArray.join('');
    // var result = daArray.reverse().join(' ');
    var result = daArray.map( item => {
        return item.split('').reverse().join('')
    })
    return result.join(' ');
};

/**
 * @param {string} s
 * @return {string}
 */
var s = "Let's take LeetCode contest";
var reverseWords = function(s) {
    // 字符串按空格進行分隔，保存數組，數組的元素的前後順序就是單詞的順序
    // 字符串變數組
    var daArray = s.split(' ');
    // 將字符串按空格分開變成數組
    for(var i=0; i<daArray.length; i  ) {
        // 將數組中的各個元素分別分開、反轉、從新變成字符串，而後將當前數組元素從新賦值
        daArray[i] = daArray[i].split('').reverse().join("");
    }
    // 返回時將數組中的元素用空格隔開，變成字符串
    return daArray.join(' ');
    // var result = daArray.reverse().join(' ');
    // var result = daArray.map( item => {
    //     return item.split('').reverse().join('')
    // })
    // return result.join(' ');
};

代碼優雅：

return str.split(' ').map(item => {
 return item.split('').reverse().join('')
}).join(' ');

字符串方法：

String.prototype.split
String.prototype.match

數組的方法

Array.prototype.mapArray.prototype.reverseArray.prototype.join

給定一個字符串 s，計算具備相同數量0和1的非空(連續)子字符串的數量，而且這些子字符串中的全部0和全部1都是組合在一塊兒的。

重複出現的子串要計算它們出現的次數。

var s = "00110011"

curlen 與 prelen 分別記錄當前數字出現次數與前半部分數字出現

/**
 * @param {string} s
 * @return {number}
 */
var s = "00110011"
var countBinarySubstrings = function(s) {
    let result = 0; 
    // curLen 與 preLen 分別記錄當前數字出現次數與前半部分數字出現次數
    let curLen = 1; // 當前數字
    let preLen = 0; // 下一個數字
    for (let i = 0; i < s.length - 1; i  ) {
        // 指針日後移動，若當前數字與下一個數字同樣則將curLen加1
        if (s[i] === s[i   1]) {
            curLen  = 1;
        } else {
            // 不然就是遇到了不一樣之處，把相同子串的長度交給preLen
            // curLen再從新日後尋找
            preLen = curLen;
            curLen = 1;
        }
        // curLen小於等於prLen則符合條件
        if (preLen >= curLen) {
            result  = 1;
        }
    }
    return result;
};

示例 2 :

輸入: "10101"
輸出: 4
解釋: 有4個子串：「10」，「01」，「10」，「01」，它們具備相同數量的連續1和0。

上面的截圖纔是有效的子串。數串串。

❤️ 不要忘記留下你學習的腳印 [點贊 收藏 評論]

做者Info：

【做者】：Jeskson

【原創公衆號】：達達前端小酒館。

【福利】：公衆號回覆 「資料」 送自學資料大禮包（進羣分享，想要啥就說哈，看我有沒有）！

【轉載說明】：轉載請說明出處，謝謝合做！~

大前端開發，定位前端開發技術棧博客，PHP後臺知識點，web全棧技術領域，數據結構與算法、網絡原理等通俗易懂的呈現給小夥伴。謝謝支持，承蒙厚愛！！！

若本號內容有作得不到位的地方（好比：涉及版權或其餘問題），請及時聯繫咱們進行整改便可，會在第一時間進行處理。

請點贊！由於大家的贊同/鼓勵是我寫做的最大動力！

歡迎關注達達的CSDN！

這是一個有質量，有態度的博客