欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

includes,startsWith,endsWith,find,findIndex 的应用与 indexOf

程序员文章站 2022-07-16 15:06:45
...

startsWith() 与 endsWith()

语法

es6在字符串上拓展了includes(), startsWith(), endsWith()三个方法,看着方法名也大概能猜到它的作用

startsWith():返回布尔值,表示参数字符串是否在原字符串的头部
endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部

s.startsWith('Hello') // true
s.startsWith('o') // true
s.endsWith('orld!') // true
s.endsWith('!') // true
s.includes('w') // true

从上面例子可以看到,
查找的字符串是连续的在 原字符串 的头部或尾部,则startsWith|endsWith返回true
查找的字符串是连续的在 原字符串 中,则includes返回true

应用

用到这几种方法的场景比如 检测文件类型、检测域名类型等等下面来看看应用实例:
检测域名类型:

var str = "https://www.jianshu.com/p/b5c26eef850d"

if (str.startsWith('https://')) console.log('加密网址')
else if (str.startsWith('http://')) console.log('普通网址')
else if (str.startsWith('git://')) console.log('git网址')
else if (str.startsWith('svn://')) console.log('svn网址')
else console.log('其他')

检测文件类型:

var str = "liwuwuzhi.png"

if (str.endWith('.txt')) console.log('文本文件')
else if (str.endWith('.jpg')) console.log('JPG文件')
else console.log('其他')




includes() 与 indexOf()

includes():返回布尔值,表示是否找到了参数字符串。
indexOf():返回在数组(字符串)中可以找到一个给定元素的第一个索引,如果不存在则返回-1。

es6部署了includes后好像indexOf就失宠了,那是indexOf有什么不足?

- 检测NaN值
在es5中,NaN值是不等于自身的(NaN === NaN // false),如果检测的数组中存在NaN值,indexOf是无法判断的,这个时候就可以用includes方法啦。

var arr = ['a','b', 'c', NaN];
console.log(arr.indexOf(NaN)) // -1
console.log(arr.includes(NaN)) // true 

- 检测数组未赋值元素
当数组的有空的值的时候,includes会认为空的值是undefined返回true,而indexOf不会自动识别空值。从js语法中来说,定义的变量未赋值那么该变量为undefined,所以个人认为还是includes的判断合理些。

var arr = new Array(3);
console.log(arr.indexOf(undefined));//-1
console.log(arr.includes(undefined))//true

- 检测 +0 -0

var arr = ['a','b', 'c', +0];
console.log(arr.indexOf(-0)) // 3
console.log(arr.includes(-0)) // true 




find() 与 findIndex()

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined
findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

// 查找数组中第一个大于10 的元素
[5, 12, 8, 130, 44].find(e => e > 10) // 12
[5, 12, 8, 130, 44].findIndex(e => e > 10) //1

// 查找数组中第一个奇数元素
[5, 12, 8, 130, 44].find(e => e %2 !== 0)  //5
[5, 12, 8, 130, 44].findIndex(e => e %2 !== 0) //0

当然我们在实际业务中的场景是会复杂些,例如在一个json数组中

var arr = [
    {name: 'apples', q: 10},
    {name: 'bananas', q: 8},
    {name: 'cherries', q: 50}
];

需求:
1.找出 bananas 的价格
2.删除 bananas 这条数据
实现:

arr.find(e => e.name == 'bananas').q; //8
arr.splice(
    arr.findIndex(e => e.name == 'bananas'),
    1
);
// console.log(arr)

当然用其他方法也可以实现,比如 :

arr.filter(e => e.name == 'bananas')[0].q //8
arr.forEach((e, i, arr) => {
    if(e.name == 'bananas') arr.splice(i, 1)
});
//console.log(arr)

emm仁者见仁智者见智吧,怎么方便怎么来。如果这些方法都理解透了,遇到不同的业务需求时就可以更简便的去解决,而不是明明可以一句代码就高逼格实现的你却绕了一大圈。
对于filter forEach 可以看看这篇 js中数组的循环与遍历


对比于 indexOf / includes,findIndex / find 就更灵活了,不仅可以检索元素是否在数组/字符串中,而且可以进行条件筛选。那么findIndex / find 对于特殊值(NaN ,undefined, +0 ,-0)的检索是怎样的呢?

var arr = ['a','b', 'c', NaN, undefined, +0];
arr.findIndex(e => e === NaN) // -1 
arr.findIndex(e => e === undefined) //4 
arr.findIndex(e => e === -0) // 5




总结

应用对象的不同:
应用对象:endsWith,endsWith 的应用对象为字符串,而其余的四种方法即可用于对象也可用于字符串;
取值对象:
如果你想要查找某个元素在数组中的位置,可以用indexOf, findIndex;
如果你只是想知道数组中是否存在某个元素,includes较合适;
如果你只是想知道数组中是否存在某个元素并返回该元素,find 较合适;




拓展 - 特殊值的对比

Object.is() 与 全等符 ===
  • es5中的 全等===运算符(==会自动做隐式类型转换这里先不做对比);
  • es6中的Object.is();

===的不足:
- NaN不等于自身 Boolean(NaN === NaN) // false
- 数字值 -0 全等于 +0 Boolean( +0 === -0) // true

Object.is()与 === 基本一致,不同点在于:
- Object.is(NaN, NaN) // false
- Object.is(NaN , 0/0) // true
- Object.is(+0, -0) // true
- Object.is(+0, 0) // true
- Object.is(-0, 0) // false


Set() 和 Map()

说道特殊值即上面的NaN, +0, -0 值 ,会联想到es6中的 Set()Map() 函数,

  • Set : 向 Set 加入值的时候,不会发生类型转换,所以5和"5"是两个不同的值。Set 内部判断两个值是否不同,类似于精确相等运算符(===),主要的区别是NaN等于自身。
new Set([NaN, NaN]) // Set(1) {NaN}
new Set([0, +0, -0]) // Set(1) {0}
  • Map: 如果 Map 的键是一个简单类型的值(数字、字符串、布尔值),则只要两个值严格相等,Map 将其视为一个键,比如0和-0就是一个键,布尔值true和字符串true则是两个不同的键。另外,undefined和null也是两个不同的键。虽然NaN不严格相等于自身,但 Map 将其视为同一个键。
let map = new Map();

map.set(-0, 123);
map.get(+0) // 123

map.set(true, 1);
map.set('true', 2);
map.get(true) // 1

map.set(undefined, 3);
map.set(null, 4);
map.get(undefined) // 3

map.set(NaN, 123);
map.get(NaN) // 123