diff --git a/04-JavaScript基础/12-内置对象 String:字符串的常见方法.md b/04-JavaScript基础/12-内置对象 String:字符串的常见方法.md index 9c8d892..d53b67b 100644 --- a/04-JavaScript基础/12-内置对象 String:字符串的常见方法.md +++ b/04-JavaScript基础/12-内置对象 String:字符串的常见方法.md @@ -8,7 +8,7 @@ ## 查找字符串 -### indexOf()/lastIndexOf():获取指定字符的索引 +### 1、indexOf()/lastIndexOf():获取字符串中指定内容的索引 > 这个方法,是使用频率最高的一个方法。 @@ -16,12 +16,12 @@ **语法 1**: ```javascript -索引值 = str.indexOf(想要查询的字符); +索引值 = str.indexOf(想要查询的字符串); ``` -解释:`indexOf()` 是从前向后查找字符串的位置。同理,`lastIndexOf()`是从后向前寻找。 +备注:`indexOf()` 是从前向后查找字符串的位置。同理,`lastIndexOf()`是从后向前寻找。 -**作用**:可以检索一个字符串中是否含有指定内容。如果字符串中含有该内容,则会返回其**第一次出现**的索引;如果没有找到指定的内容,则返回 -1。 +**解释**:可以检索一个字符串中是否含有指定内容。如果字符串中含有该内容,则会返回其**第一次出现**的索引;如果没有找到指定的内容,则返回 -1。 因此可以得出一个重要技巧: @@ -29,7 +29,7 @@ - 如果获取的索引值为-1,说明这个字符串中没有指定的内容。 -举例 1: +举例 1:(查找单个字符) ```javascript const str = 'abcdea'; @@ -46,7 +46,7 @@ console.log(str.lastIndexOf('a')); ![](http://img.smyhvae.com/20180202_1420.png) -举例 2: +举例 2:(查找字符串) ```js const name = 'qianguyihao'; @@ -59,7 +59,7 @@ console.log(name.indexOf('yi')); // 打印结果:6 这个方法还可以指定第二个参数,用来指定查找的**起始位置**。语法如下: ```javascript -索引值 = str.indexOf(想要查询的字符, [起始位置]); +索引值 = str.indexOf(想要查询的字符串, [起始位置]); ``` 举例 3:(两个参数时,需要特别注意) @@ -101,11 +101,122 @@ console.log('a 出现的次数是: ' + num); ``` -### +### 2、search():获取字符串中指定内容的索引(参数里一般是正则) + + +**语法**: + +```javascript +索引值 = str.search(想要查找的字符串); +索引值 = str.search(正则表达式); + +``` + +备注:`search()` 方法里的参数,既可以传字符串,也可以传正则表达式。 + +**解释**:可以检索一个字符串中是否含有指定内容。如果字符串中含有该内容,则会返回其**第一次出现**的索引;如果没有找到指定的内容,则返回 -1。 + + +举例: + +```js +const name = 'qianguyihao'; + +console.log(name.search('yi')); // 打印结果:6 +console.log(name.search(/\yi/i)); // 打印结果:6 +``` +### 3、includes():字符串中是否包含指定的内容 + +**语法**: + +```js +布尔值 = str.includes(想要查找的字符串, [position]); +``` + +**解释**:判断一个字符串中是否含有指定内容。如果字符串中含有该内容,则会返回 true;否则返回 false。 + +参数中的 `position`:如果不指定,则默认为0;如果指定,则规定了检索的起始位置。 + +```js +const name = 'qianguyihao'; + +console.log(name.includes('yi')); // 打印结果:true +console.log(name.includes('haha')); // 打印结果:false + +console.log(name.includes('yi',7)); // 打印结果:false +``` + + +### 4、startsWith():字符串是否以指定的内容开头 + +**语法**: + +```js +布尔值 = str.startsWith(想要查找的内容, [position]); +``` + +**解释**:判断一个字符串是否以指定的子字符串开头。如果是,则返回 true;否则返回 false。 + +**参数中的position**: + +- 如果不指定,则默认为0。 + +- 如果指定,则规定了**检索的起始位置**。检索的范围包括:这个指定位置开始,直到字符串的末尾。即:[position, str.length) + +举例: + +```js +const name = 'abcdefg'; + +console.log(name.startsWith('a')); // 打印结果:true +console.log(name.startsWith('b')); // 打印结果:false + +// 因为指定了起始位置为3,所以是在 defg 这个字符串中检索。 +console.log(name.startsWith('d',3)); // 打印结果:true +console.log(name.startsWith('c',3)); // 打印结果:false +``` + +### 5、endsWith():字符串是否以指定的内容结尾 + +**语法**: + +```js +布尔值 = str.endsWith(想要查找的内容, [position]);z +``` + +**解释**:判断一个字符串是否以指定的子字符串结尾。如果是,则返回 true;否则返回 false。 + +**参数中的position**: + +- 如果不指定,则默认为 str.length。 + +- 如果指定,则规定了**检索的结束位置**。检索的范围包括:从第一个字符串开始,直到这个指定的位置。即:[0, position) + +- 或者你可以这样简单理解:endsWith() 方法里的position,表示**检索的长度**。 + +注意:startsWith() 和 endsWith()这两个方法,他们的 position 的含义是不同的,请仔细区分。 + +举例: + +```js +const name = 'abcdefg'; + +console.log(name.endsWith('g')); // 打印结果:true +console.log(name.endsWith('f')); // 打印结果:false + +// 因为指定了截止位置为3,所以是在 abc 这个长度为3字符串中检索 +console.log(name.endsWith('c', 3)); // 打印结果:true +console.log(name.endsWith('d', 3)); // 打印结果:false +``` + +注意看上方的注释。 + +参考链接:[JavaScript endsWith()介绍](https://www.softwhy.com/article-2885-1.html) + ## 获取指定位置的字符 ### 1、charAt(index) @@ -200,6 +311,75 @@ for (var i = 0; i < str.length; i++) { 另外,sort()方法其实底层也是用到了 charCodeAt(),因为用到了 Unicode 编码。 +## 字符串截取 + + +### 1、slice() + + +> slice() 方法用的最多。 + + +语法: + +```javascript +新字符串 = str.slice(开始索引, 结束索引); //两个参数都是索引值。包左不包右。 +``` + +解释:从字符串中截取指定的内容。不会修改原字符串,而是将及截取到的内容返回。 + +注意:上面的参数,包左不包右。参数举例如下: + +- `(2, 5)` 截取时,包左不包右。 + +- `(2)` 表示**从指定的索引位置开始,截取到最后**。 + +- `(-3)` 表示从倒数第三个开始,截取到最后。 + +- `(1, -1)` 表示从第一个截取到倒数第一个。 + +- `(5, 2)` 表示前面的大,后面的小,返回值为空。 + +### 2、substring() + +语法: + +```javascript +新字符串 = str.substring(开始索引, 结束索引); //两个参数都是索引值。包左不包右。 +``` + +解释:从字符串中截取指定的内容。和`slice()`类似。 + +`substring()`和`slice()`是类似的。但不同之处在于: + +- `substring()`不能接受负值作为参数。如果传递了一个**负值**,则默认使用 0。 + +- `substring()`还会自动调整参数的位置,如果第二个参数小于第一个,则自动交换。比如说, `substring(1, 0)`相当于截取的是第一个字符。 + +### 3、substr() + +语法: + +```javascript +字符串 = str.substr(开始索引, 截取的长度); +``` + +解释:从字符串中截取指定的内容。不会修改原字符串,而是将及截取到的内容返回。 + +注意,这个方法的第二个参数**截取的长度**,不是结束索引。 + +参数举例: + +- `(2,4)` 从索引值为 2 的字符开始,截取 4 个字符。 + +- `(1)` 从指定位置开始,截取到最后。 + +- `(-3)` 从倒数第几个开始,截取到最后. + +备注:ECMAscript 没有对 `substr()` 方法进行标准化,因此不建议使用它。 + + + ## String.fromCharCode() `String.fromCharCode()`:根据字符的 Unicode 编码获取字符。 @@ -238,66 +418,6 @@ var result = str1.concat(str2); console.log(result); // 打印结果:qianguyihao ``` -## slice() - -语法: - -```javascript -字符串 = str.slice(开始索引, 结束索引); //两个参数都是索引值。包左不包右。 -``` - -解释:从字符串中截取指定的内容。不会修改原字符串,而是将及截取到的内容返回。 - -注意:上面的参数,包左不包右。参数举例如下: - -- `(2, 5)` 截取时,包左不包右。 - -- `(2)` 表示**从指定的索引位置开始,截取到最后**。 - -- `(-3)` 表示从倒数第三个开始,截取到最后。 - -- `(1, -1)` 表示从第一个截取到倒数第一个。 - -- `(5, 2)` 表示前面的大,后面的小,返回值为空。 - -## substring() - -语法: - -```javascript -字符串 = str.substring(开始索引, 结束索引); //两个参数都是索引值。包左不包右。 -``` - -解释:从字符串中截取指定的内容。和`slice()`类似。 - -`substring()`和`slice()`是类似的。但不同之处在于: - -- `substring()`不能接受负值作为参数。如果传递了一个**负值**,则默认使用 0。 - -- `substring()`还会自动调整参数的位置,如果第二个参数小于第一个,则自动交换。比如说, `substring(1, 0)`相当于截取的是第一个字符。 - -## substr() - -语法: - -```javascript -字符串 = str.substr(开始索引, 截取的长度); -``` - -解释:从字符串中截取指定的内容。不会修改原字符串,而是将及截取到的内容返回。 - -注意,这个方法的第二个参数**截取的长度**,不是结束索引。 - -参数举例: - -- `(2,4)` 从索引值为 2 的字符开始,截取 4 个字符。 - -- `(1)` 从指定位置开始,截取到最后。 - -- `(-3)` 从倒数第几个开始,截取到最后. - -备注:ECMAscript 没有对 `substr()` 方法进行标准化,因此不建议使用它。 - ## split():字符串转换为数组 【重要】 语法: @@ -350,7 +470,7 @@ console.log(str3.split('许')); // 同理 解释:将字符串中的指定内容,替换为新的内容并返回。不会修改原字符串。 -注意:这个方法,只会替换第一个字符。 +注意:这个方法,默认只会替换第一个被匹配到的字符。如果要全局替换,需要使用正则。 代码举例: @@ -363,6 +483,39 @@ console.log(str2.replace('today', 'tomorrow')); //只能替换第一个today console.log(str2.replace(/today/gi, 'tomorrow')); //这里用到了正则,才能替换所有的today ``` +## repeat():重复字符串 + +语法: + +```js +newStr = str.repeat(重复的次数); +``` + +解释:将字符串重复指定的次数。会返回新的值,不会修改原字符串。 + +举例1: + +```js +const name = 'qianguyihao'; + +console.log(name.repeat(2)); // 打印内容:qianguyihaoqianguyihao +``` + +举例2:(模糊字符串的后四位) + +```js +const telephone = '13088889999'; +const mix_telephone = telephone.slice(0, -4) + '*'.repeat(4); // 模糊电话号码的后四位 + +console.log(telephone); // 打印结果:13088889999 +console.log(mix_telephone); // 打印结果:1308888**** +``` + + + + + + ## trim() `trim()`:去除字符串前后的空白。 diff --git a/12-React基础/10-AntD框架的upload组件上传图片时使用customRequest方法自定义上传行为.md b/12-React基础/10-AntD框架的upload组件上传图片时使用customRequest方法自定义上传行为.md index 29a52a6..308ed27 100644 --- a/12-React基础/10-AntD框架的upload组件上传图片时使用customRequest方法自定义上传行为.md +++ b/12-React基础/10-AntD框架的upload组件上传图片时使用customRequest方法自定义上传行为.md @@ -1,7 +1,7 @@ 本次做后台管理系统,采用的是 AntD 框架。涉及到图片的上传,用的是AntD的 [upload](https://ant.design/components/upload-cn/) 组件。 -我在上一篇文章《[AntD框架的upload组件上传图片时使用customRequest方法自定义上传行为](https://www.cnblogs.com/qianguyihao/p/13093592.html)》中讲到:AntD 的 upload 组件有很多坑,引起了很多人的关注。折腾过的人,自然明白其中的苦楚。 +我在上一篇文章《[前端AntD框架的upload组件上传图片时遇到的一些坑](https://www.cnblogs.com/qianguyihao/p/10460834.html)》中讲到:AntD 的 upload 组件有很多坑,引起了很多人的关注。折腾过的人,自然明白其中的苦楚。 今天这篇文章,我们继续来研究 AntD 的 upload 组件的另一个坑。 diff --git a/13-前端面试/01-面试必看/00-准备.md b/13-前端面试/01-面试必看/00-准备.md index 7343a24..ff78c7e 100644 --- a/13-前端面试/01-面试必看/00-准备.md +++ b/13-前端面试/01-面试必看/00-准备.md @@ -283,25 +283,35 @@ ES6语法:import、export等。 - webpack 打包工具 -## 技术栈准备 +## 前端技术栈准备 ![](http://img.smyhvae.com/20180310_1040.png) 上图中,左侧是前端技术核心,右侧是前端工程化。 -左侧: +**左侧**:(前端技术核心) - jQuery:要注意看源码。看源码时,要看这几个:核心架构、事件委托是什么、插件机制、兼容性。 -- 三大框架:都是mvvm框架,准备一至两个即可,或者精心准备一个。面试时会问得很细。比如阿里会经常问Vue的源码。建议找网上的源码分析的文章。 +- 三大框架:都是mvvm框架,准备一至两个即可,或者精心准备一个。面试时会问得很细。比如面试官会经常问Vue、React的源码。建议找网上的源码分析的文章。 -- Node.js:如果没有相关项目经历,就尽量不要提。 +- Node.js:服务器端的运行环境。如果没有相关项目经历,就尽量不要提。 -右侧: +- JavaScript 基础:框架有时候都很虚;熟练掌握 JavaScript 基础,才是行走江湖、驰骋千里的关键。 + +**右侧**:(前端工程化) + +- npm、yarn:包管理工具。npm的常见命令、npm scripts 怎么用的。 + +- webpack:模块打包。 + +- gulp、grunt:构建工具。 + +- Sass、less:CSS 预处理器。 + +- Babel:ES6转ES5 -- npm:npm的常见命令、npm scripts 怎么用的。 -- webpack:有个中文网站,讲的内容比较全。 diff --git a/15-前端综合/01-2019年Web前端入门自学路线.md b/15-前端综合/01-2019年Web前端入门自学路线.md index 3d6a475..9236eac 100644 --- a/15-前端综合/01-2019年Web前端入门自学路线.md +++ b/15-前端综合/01-2019年Web前端入门自学路线.md @@ -28,7 +28,7 @@ 九、Node.js。属于加分项,如果时间不够,可以先不学,但至少要知道 node 环境的配置。 -十、自动化工具:构建工具 Webpack、构建工具 gulp、CSS 预处理器 Sass 等。注意,Sass 比 Less 用得多,gulp 比 grunt 用得多。 +十、前端工程化:构建工具 Webpack、构建工具 gulp、CSS 预处理器 Sass 等。注意,Sass 比 Less 用得多,gulp 比 grunt 用得多。 十一、前端综合:HTTP协议、跨域通信、安全问题(CSRF、XSS)、浏览器渲染机制、异步和单线程、页面性能优化、防抖动(Debouncing)和节流阀(Throtting)、lazyload、前端错误监控、虚拟DOM等。 @@ -36,6 +36,8 @@ 十三、TypeScript(简称TS)。ES 是 JS 的标准,TS 是 JS 的超集。TS属于进阶内容,建议把上面的基础掌握之后,再学TS。 +备注:框架有时候都很虚;熟练掌握 JavaScript 基础,才是行走江湖、驰骋千里的关键。 + ## 推荐的前端图文教程 我在GitHub上有一个Web前端入门的学习教程,非常详细,地址是: diff --git a/16-推荐链接/02-GitHub项目推荐.md b/16-推荐链接/02-GitHub项目推荐.md index 2cba18f..94114f0 100644 --- a/16-推荐链接/02-GitHub项目推荐.md +++ b/16-推荐链接/02-GitHub项目推荐.md @@ -38,16 +38,16 @@ - [前端精读周刊](https://github.com/dt-fe/weekly) - - -## 前端教程类 - ## 其他 - 单元测试: ## 面试 +- 前端开发面试题: + +- web前端面试宝典: + - 反向面试(反问面试官的问题): - 掘金前端面试题合集: