快捷搜索:  汽车  科技

javascript的应用范围及举例,JavaScript高级应用

javascript的应用范围及举例,JavaScript高级应用let arr = [1 2 3]; let res = arr.map(item => item 1); res // [2 3 4]1.2.2 filter根据条件筛选出符合条件的元素,并返回一个新数组eg:/** * https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax * myFunction(...iterableObj); * * [...iterableObj '4' ...'hello' 6]; */ let str = "1234"; console.log([...str]); // <=> str.split(""); //

javascript的应用范围及举例,JavaScript高级应用(1)

Author:Gorit

Date:2022年1月

target:讲解一下开发中不常见,但是很好用的 API

一、数组篇1.1 展开表达式

展开数组的每一项,返回一个新数组

/** * https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax * myFunction(...iterableObj); * * [...iterableObj '4' ...'hello' 6]; */ let str = "1234"; console.log([...str]); // <=> str.split(""); // console.log(str.split("")); // 应用一:数组拷贝 let arr = [2 3 4]; let resArr = [...arr]; resArr.push(5); // [2 3 4 5] console.log(resArr); // 应用二:等价 apply myFunc(...arr); myFunc.apply(undefined arr); function myFunc(x y z) {} // 应用三:对象展开 let obj = {"a": 1 "b": 2}; let result = {...obj}; console.log(result);

MDN参考链接:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax

1.2 返回一个新数组

除了数值的 for 循环,forEach 循环,还有哪些好用的循环处理方案

1.2.1 map

使用 map,对每一项元素进行特定操作,然后返回操作后的新数组

eg:

let arr = [1 2 3]; let res = arr.map(item => item 1); res // [2 3 4]1.2.2 filter

根据条件筛选出符合条件的元素,并返回一个新数组

eg:

let arr [1 2 3 4 5 6]; // 获取数组中的偶数 let res = arr.filter(item => item % 2 === 0); res // [2 4 6]1.2.3 concat

合并两个或者多个数组 不改变原数组

concat() concat(value0) concat(value0 value1) concat(value0 value1 ... valueN)

const array1 = ['a' 'b' 'c']; const array2 = ['d' 'e' 'f']; const array3 = array1.concat(array2); console.log(array3); // expected output: Array ["a" "b" "c" "d" "e" "f"]

实际应用

本地定义一个数,再从其他的地方加载一个数据,两个数据处理后,合并

1.3 索引相关问题
  • indexOf() || lastIndexOf() (不存在,返回 -1)
  • find() // 查找具体的元素,并且返回第一个符合条件的元素 没找到返回 undefined

const array1 = [5 12 8 130 44]; const found = array1.find(element => element > 10); console.log(found); // expected output: 12

  • findIndex() // 查找第一个符合条件的元素的下标,没找到返回 -1

const array1 = [5 12 8 130 44]; const isLargeNumber = (element) => element > 13; console.log(array1.findIndex(isLargeNumber)); // expected output: 3

  • at() // Node.js 不支持

let arr = [1 2 3]; // 获取最后一个元素 arr.at(-1) 等价于 arr[arr.length - 1];1.4 返回 boolean 值

  • every() // 测试所有元素是否符合条件

let arr = [1 2 3 4 5]; let isLargerThan = (num) => num > 0; function testEachElement (arr) { return arr.every(isLargerThan); } console.log(testEachElement(arr)); // 所有元素都大于 0,所以为true

  • some() // 测试,只要有元素通过即可

let arr = [1 2 3 4 5]; let isLargerThan1 = (num) => num > 4; function testSomeElement (arr) { return arr.some(isLargerThan1); } console.log(testSomeElement(arr)); // 有一个元素大于 4,所以为 true

  1. includes[] // 条件筛选,一般用于 消除多重 if 操作

includes 的值是否都包含于 数组 arr 中

let arr = [1 2 3]; // 加载网络数据,将拿到的列表数据比对是否存在与预先定义好的数组 const {data : res} = await getData("/xxx/xxx"); { "code": 200 "msg": "SUCCESS" "data": { xx: xx list: [2 3] } } // 循环判断返回的设置是否和前端定义的相等 if (res.data.list[0] === arr[1] || res.data.list[1] === arr[2]) { } // 优化 if (arr.includes[res.data.list]) { // true }1.5 返回一个最终结果

reduce

这个内置的函数比较特殊,他是通过回调处理每一个值,每次处理都会保存上次处理的结果,继续与下一个元素继续处理

实现对一个数字的连续操作

接下来我们要实现一个累加器,用 循环

let res = 0; for (const item of [1 2 3 4 5]) { res =item; } console.log(res);

使用 reduce 实现相同的功能

let arr = [1 2 3 4 5]; // 实现一个累加器 const reducer = (preVal curVal) => preVal curVal; console.log(arr.reduce(reducer)); /** * preVal curVal (curVal) 是从数组下标开始的 (preVal) 是从上一次处理的结果开始的 第一次执行,由于没有赋初始值,所以就 preVal 从 0 开始 0 1 => 1 第二次,继续使用第一次的结果 1 2 = 3 3 3 = 6; 6 4 = 10; 10 5 = 15; **/ console.log(arr.reduce(reducer 6)); /** * 有初始值了 * 6 1 = 7 * 7 2 = 9 * 9 3 = 12 * 12 4 = 16 * 16 5 = 21 **/1.6 参考资料

MDN Array:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

二、JS 正则表达式篇

正则表达式常用来处理 “字符串问题”,很多编程语言基本都支持 正则表达式。

为了保证学习难度,依次提升,我对 MDN 内容进行了一个重新整理,并且使用了比较清晰的例子讲解

2.1 正则表达式的介绍

官方文档:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions

2.2 创建正则表达式的两种方式

// 创建一个正则表达式 let re = /ab c/; // 方式一:该方式性能更好 let reg = new RegExp("ab c"); // 方式二:xxx let res = reg.test("ab c"); console.log(res); // true

PS: 正则表达式里面空格要慎用,空格也会代表一次匹配

还有哪些地方会用到正则表达式呢?

答:正则表达式是用于匹配字符串中的字符组合的模式。在 JavaScript中,正则表达式也是对象。这些模式被用于 RegExp 的 exec 和 test 方法 以及 String 的 match、matchAll、replace、search 和 split 方法。

2.3 简单模式匹配

我们指定什么字符,就会匹配什么字符

let word = /abc/; // 字符串包含了 'abc' 可以 'ab c' 不可以2.4 特殊字符匹配2.4.1 '\' 匹配转义字符

作用:在特殊字符之前的反斜杠表示下一个字符不是特殊字符

PS:一个转义字符也是代表一次匹配!!!

转义字符

含义

等价

示例

\d

匹配 0 ~ 9 之间任意数字

[0-9]

/\d/.test("a12 ") => 1

\D

匹配一个非数字字符

[^0-9]

\f

匹配一个换页符 (U 000C)

\n

匹配一个换行符 (U 000A)

\r

匹配一个回车符 (U 000D)

\s

匹配一个空白字符

,包括空格、制表符、换页符和换行符. \s不匹配"\u180e

几乎用不到

\S

匹配一个非空白字符

/S\w*/.test("foo bar") => foor

\t

匹配一个水平制表符 (U 0009)

\v

匹配一个垂直制表符 (U 000B)

\w

配一个单字字符(字母、数字或者下划线)。等价于 [A-Za-z0-9_]

/\w/.test("banana") => 'b' /\w/.test("$3.28") => 3

\W

匹配一个非单字字符。等价于 [^A-Za-z0-9_]

/\W/.test("50%") => %

\n(少用)

在正则表达式中,它返回最后的第n个子捕获匹配的子字符串(捕获的数目以左括号计数)。

\0

匹配 NULL(U 0000)字符, 不要在这后面跟其它小数,因为 \0<digits>

是一个八进制转义序列。

javascript的应用范围及举例,JavaScript高级应用(2)

2.4.2 '^' 从头匹配

作用:匹配输入的开始。如果多行标志被设置为 true,那么也匹配换行符后紧跟的位置。(单独拿出来讲没太大意义)

/** * 从 A 开始匹配 */ let eg = /^A/; console.log(`an A is not match`.search(eg)); // -1 console.log(`An apple is matched`.search(eg)); // 02.4.3 '$' 匹配输入结束

作用: 匹配输入的结束。如果多行标志被设置为 true,那么也匹配换行符前的位置。(同上)

/** * 从 t 为结尾匹配 */ let eg1 = /t$/; console.log("eat is not matched".search(eg1)); // -1 console.log("matched is eat".search((eg1))); // 13 最后一个字符串下标2.4.4 '*' 匹配零个或多个

作用:匹配前一个表达式 0 次或多次。等价于 {0 }。

let eg1 = /ab*c/; console.log(eg1.test("ac" eg1.test("abbc"))); // true true2.4.5 ' '匹配一次或多次

作用:匹配前面一个表达式 1 次或者多次。等价于 {1 }。

let eg2 = /ab c/; console.log("/ab c/:" eg2.test("ac") eg2.test("abc") eg2.test("abbc")); // false true true2.4.6 ‘?' 匹配0次或者1次

作用:匹配前面一个表达式 0 次或者 1 次。等价于 {0 1}

let eg3 = /a?bc?/ console.log("/a?bc?: " eg3.test("abc") eg3.test("abb") eg3.test("bcc")); // true true true2.4.7 ‘.' 匹配任意字符,除了换行

作用:(小数点)默认匹配除换行符之外的任何单个字符。

let eg4 = /.n/; console.log(eg4.test('na an apple on the tree')); // true (na 不会被匹配,an,on 会被匹配2.4.8 ‘|’ 两个选项中的一个都可以被匹配

作用: x | y 匹配‘x’或者‘y’。

/** * 两者中有一个命中即可 */ let eg2 = /green|yellow/; console.log(eg2.exec("green apple is matched")); // ['green' index: 0 input: 'green apple is matched' groups: undefined] console.log(eg2.exec("red apple is not matched")); // null2.4.9 '{x}'指定出现的次数

作用:{n}, n 是一个正整数,匹配了前面一个字符刚好出现了 n 次。

/** * 指定出现的次数(2次) */ let eg3 = /a{2}/; console.log("candy is not matched".search(eg3)); // -1,小于2次,匹配不到 console.log("caaandy".search(eg3)); // 输出下标 1(匹配最先出现的)2.5 如何使用正则表达式

正则表达式可以被用于 RegExp 的 exec 和 test (en-US) 方法以及 String 的 match (en-US)、replace、search (en-US) 和 split (en-US) 方法。这些方法在 JavaScript 手册中有详细的解释。

2.5.1 正则表达式匹配会用到的方法

javascript的应用范围及举例,JavaScript高级应用(3)

2.5.2 高级搜索

正则表达式有六个可选参数 (flags) 允许全局和不分大小写搜索等。这些参数既可以单独使用也能以任意顺序一起使用 并且被包含在正则表达式实例中。

javascript的应用范围及举例,JavaScript高级应用(4)

// 语法 let re = /pattern/flags; let re = new RegExp("pattern" "flags");

想到一个题目,使用正则表达式,匹配每个单词项

let reg = /\w /g; let word = "an apple a day keep the doctor away"; // 使用正则表达式,匹配每一个单词 console.log(word.match(reg)); // 匹配还会有 day 【弊端】 console.log(word.split(" "));2.6 案例

PS:自己写可能比较困难,但是有印象足够了,能够及时回顾过来

2.6.1 校验11位手机号

不去考虑特殊的情况,能满足大部分场景

let reg = /\d{11}/; // 这是不是最容易想到的,但是真实的手机号码比这个复杂多很多 let reg1 = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;2.6.2 校验邮箱地址

let reg = /^\w ([- .]\w )*@\w ([-.]\w )*\.\w ([-.]\w )*$/;2.6.3 校验域名

啥是域名?以百度为例

https://www.baidu.com

  1. https / http 为一个网站的域名协议,带 's' 的是开启了 SSL 的,理解为这个网站是安全的
  2. 后面的 www.baidu.com 才是我们的域名,baidu.com 是根域名,但是 一般情况来说 www.baidu.com 和 baidu.com 都可以访问到百度。像 tieba.baidu.com 这样的,带前缀的就属于二级域名,依次类推

let reg = /http|https:\/\/[a-zA-Z0-9][-a-zA-Z0-9]{0 62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0 62}) /.?/;三、彩蛋

粉丝福利:限时!!!

  1. 不定期分享一些知识技能
  2. 前沿技术分享
  3. 个人学结

javascript的应用范围及举例,JavaScript高级应用(5)

猜您喜欢: