专栏首页达达前端一篇文章带你了解JavaScript中的基础算法之“字符串类”

一篇文章带你了解JavaScript中的基础算法之“字符串类”

file

作者 | Jeskson

来源 | 达达前端小酒馆

1

算法可以干什么呢?提高什么?有什么好处呢?

前端的同学需要提升编程核心内功,建立和健全算法知识体系,基础算法、数据结构、进阶算法,由浅入深讲解,透彻理解抽象算法,算法面试是关键一环,冲击大厂前端offer。

学习算法前掌握ES6哦!需要掌握单元测试的语言,Jest

file

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"

file

npm install --save-dev jest

file

npm run test Jest

Jest-Test

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

file

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]

file

<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;
};

file

给定一个字符串,你需要反转字符串中每个单词的字符顺序,同时仍保留空格和单词的初始顺序。

输入: "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.map Array.prototype.reverse Array.prototype.join

给定一个字符串 s,计算具有相同数量0和1的非空(连续)子字符串的数量,并且这些子字符串中的所有0和所有1都是组合在一起的。

重复出现的子串要计算它们出现的次数。

file

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。

file

上面的截图才是有效的子串。数串串。

❤️ 不要忘记留下你学习的脚印 [点赞 + 收藏 + 评论]

作者Info:

【作者】:Jeskson 【原创公众号】:达达前端小酒馆。 【福利】:公众号回复 “资料” 送自学资料大礼包(进群分享,想要啥就说哈,看我有没有)! 【转载说明】:转载请说明出处,谢谢合作!~

大前端开发,定位前端开发技术栈博客,PHP后台知识点,web全栈技术领域,数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。谢谢支持,承蒙厚爱!!!


若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。


请点赞!因为你们的赞同/鼓励是我写作的最大动力!

欢迎关注达达的CSDN!

这是一个有质量,有态度的博客

前端技术栈

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript对象编程-第3章

    时间:UTC全球标准时间,也被称为格林威治标准时间,UTC+800指比格林威治标准时间提前8个小时,也是北京时间。

    达达前端
  • PHP全栈学习笔记28

    sql标准语言: 数据查询语言 select 数据定义语言 create/alter/drop 数据操作语言 insert delete update ...

    达达前端
  • Web前端-JavaScript基础教程上

    JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript是必备的前端技能。

    达达前端
  • 麻省理工提出便捷的机器人学习方法

    美国麻省理工学院(MIT)网站发布消息称,该校已经提出了一种更便捷的机器人训练方法。 大多数机器人使用以下两种方法中的一种进行编程:从演示中学习,观察任务完成的...

    人工智能快报
  • Spring Cloud Gateway-使用自定义过滤器通过Hystrix实现降级处理

    在微服务架构中,下游依赖出现问题如果上游调用方不做请求降级处理,下游的异常依赖没有被隔离,很有可能出现因为一两个服务或者小到一两个接口异常导致上游所有服务不可用...

    Throwable
  • js|jq获取兄弟节点,父节点,子节点

    小小咸鱼YwY
  • 巧萌易携之ROS2Go的不完全教研攻略

    32GB版本完全可以满足日常课堂机器人编程教学的需要,但是依然推荐64GB或128GB版本,原因很简单,类比一下手机存储配置即可。

    zhangrelay
  • 架构组件:基于shard-jdbc中间件,实现数据分库分表

    一、水平分割 1、水平分库 1)、概念: 以字段为依据,按照一定策略,将一个库中的数据拆分到多个库中。 2)、结果 每个库的结构都一样;数据都不一样; 所有库的...

    知了一笑
  • LeetCode 26. 删除排序数组中的重复项

    给定一个排序数组,你需要在 原地 删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度。

    村雨遥
  • MetInfo米拓6.2模板开发改造和商城模块插件v4升级优化修改PHP+Mysql

    米拓商城经过4个版本的升级,现已支持在线商城的主要功能,代码开源,支付接口丰富,响应式布局(支持电脑、手机、平板)本次升级主要新增了如下功能:

    用户5043035

扫码关注云+社区

领取腾讯云代金券