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

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