leetCode-058 - 最后一个单词的长度（length-of-last-word）

058 - 最后一个单词的长度（length-of-last-word）

/*
 * @Author: lvjingshuai 
 * @Date: 2019-07-24 07:21:12 
 * @Last Modified by: lvjingshuai
 * @Last Modified time: 2019-08-20
 */

文章结构
1、题目介绍
2、解题
2.1 解法 - 字符串遍历
2.2 解法 - 去空格法
3、每日一问

1、题目介绍

• 难度：简单 （系统学习算法与数据结构）
• 涉及知识：字符串
• 题目编号：058
• 题目地址：https://leetcode-cn.com/problems/length-of-last-word/
• 题目内容：

给定一个仅包含大小写字母和空格 ' ' 的字符串，返回其最后一个单词的长度。

如果不存在最后一个单词，请返回 0 。

说明：一个单词是指由字母组成，但不包含任何空格的字符串。

示例:
输入: "Hello World"
输出: 5

2、解题

2.1 解法 - 字符串遍历

解题思路：

1. 通过 split() 将字符串按空格分割成数组，结果会切割成单个字符
2. 倒叙查找，找到非空字符串，并返回长度

解题代码：

var lengthOfLastWord = function(target) {
  // 将字符串按`空格`分割成数组
  const result = target.split(' ');
  let currentValue = '';
  for( let i = result.length -1; i >= 0; i--) {
        if (result[i]){
            currentValue = result[i];
            break;
        }
  }
  return currentValue.length;
};

执行测试：

1. s：Hello World
2. return：5

知识点：

1. split()：split() 方法使用指定的分隔符字符串将一个 String 对象分割成字符串数组。

2.2 解法 - 去空格法

解题代码01：

var lengthOfLastWord = function(target) {
    const result = target.split(" ") // 将字符串按`空格`分割成数组
    while(!result[result.length - 1]) {
       words.pop()
    } // 去除末位空格
    if (!result.length) {
        return 0
    } // 非空判断
    return words[words.length-1].length
};

解题代码02：

var lengthOfLastWord = function(target) {
    const result =  target.replace(/(\s*$)/g, ""); // 正则表达式处理空格
    let arr = result.split(' ');  // 将字符串按`空格`分割成数组
    return arr[arr.length - 1].length; // 末位空格已经被清除，直接返回length
};

解题代码03：

var lengthOfLastWord = function(target) {
    // 先trim，再取值
    const result =  target.trim(); // 正则表达式处理空格
    let arr = result.split(' ');  // 将字符串按`空格`分割成数组
    return arr[arr.length - 1].length; // 末位空格已经被清除，直接返回length
};

执行测试：

1. s：Hello World
2. return：5

知识点：

1. RegExp：进行正则去空格，\s 的意思是匹配任何空白字符，包括空格、制表符、换行符等，而 * 表示任意个，$ 表示结尾，所以 \s*$ 的意思就是匹配结尾的任意个空格，并将其替换为 ''（注意，不是空，而是去掉）
2. split()：split() 方法使用指定的分隔符字符串将一个 String 对象分割成字符串数组，以将字符串分隔为子字符串，以确定每个拆分的位置。
3. trim(): 移除字符串首尾空格。

解题思路：

1. 以下的几种解法都为相同思路的一种解法，即去除首尾空格，

2. 那么末位就为非空字符串

3、每日一题

webpack的热更新是如何做到的？以及其原理？

1. webpack的热更新又称热替换（Hot Module Replacement），缩写为HMR。 这个机制可以做到不用刷新浏览器而将新变更的模块替换掉旧的模块。
2. 在 webpack -- watch代码编译过程中某一个文件发生修改，webpack 监听到文件内容发生变化，即ctrl+s，对该模块重新编译打包，并将打包后的代码通过简单的JavaScript对象保存在内存中。
3. 通过我们的webpack-dev-server 和 webpack 之间的接口交互，而在这一步，主要是 dev-server 的中间件 webpack-dev-middleware 和 webpack 之间的交互，webpack-dev-middleware 调用 webpack 暴露的 API对代码变化进行监控，并且告诉webpack，将代码打包到内存中。
4. 我们的webpack-dev-server 对文件变化的一个监控，并不是监控代码变化重新打包。当我们在配置文件中配置了devServer.watchContentBase 为 true 的时候，Server 会监听这些配置文件夹中静态文件的变化，变化后会通知浏览器端对应用进行 live reload。注意，这儿是浏览器刷新，和 HMR 是两个概念。
5. 还是webpack-dev-server 代码的工作，该步骤主要是通过 sockjs（webpack-dev-server 的依赖）在浏览器端和服务端之间建立一个 websocket 长连接，将 webpack 编译打包的各个阶段的状态信息告知浏览器端，同时也包括第三步中 Server 监听静态文件变化的信息。浏览器端根据这些 socket 消息进行不同的操作。当然服务端传递的最主要信息还是新模块的 hash 值，后面的步骤根据这一 hash 值来进行模块热替换。
6. 模块webpack-dev-server/client 端并不能够请求更新的代码，也不会执行热更模块操作，而把这些工作又交回给了 webpack，webpack/hot/dev-server的工作就是根据 webpack-dev-server/client 传给它的信息以及 dev-server的配置决定是刷新浏览器呢还是进行模块热更新。当然如果仅仅是刷新浏览器，也就没有后面那些步骤了。
   HotModuleReplacement.runtime 是客户端 HMR 的中枢，它接收到上一步传递给他的新模块的 hash 值，它通过 JsonpMainTemplate.runtime 向 server 端发送 Ajax 请求，服务端返回一个 json，该 json 包含了所有要更新的模块的 hash 值，获取到更新列表后，该模块再次通过 jsonp 请求，获取到最新的模块代码。
7. 决定 HMR 成功与否的关键步骤，HotModulePlugin 将会对新旧模块进行对比，决定是否更新模块，在决定更新模块后，检查模块之间的依赖关系，更新模块的同时更新模块间的依赖引用。
8. 当 HMR失败后，回退到 live reload操作，也就是进行浏览器刷新来获取最新打包代码。