JavaScript不清不楚之includes、indexOf、lastIndexOf
程序员文章站
2022-03-09 09:37:09
...
Array.prototype.includes
以下代码均来自:MDN
- includes判断一个数组是否包含某个元素,找到返回true,否则返回false,默认从0开始查找,如果传入的索引值大于等于数组长度则不会遍历数组,直接返回false
- IE系列不支持
// https://tc39.github.io/ecma262/#sec-array.prototype.includes
if (!Array.prototype.includes) {
Object.defineProperty(Array.prototype, 'includes', {
value: function(searchElement, fromIndex) {
// 1. Let O be ? ToObject(this value).
if (this == null) {
throw new TypeError('"this" is null or not defined');
}
var o = Object(this);
// 2. Let len be ? ToLength(? Get(O, "length")).
var len = o.length >>> 0;
// 3. If len is 0, return false.
//空数组直接返回false
if (len === 0) {
return false;
}
// 4. Let n be ? ToInteger(fromIndex).
// (If fromIndex is undefined, this step produces the value 0.)
// undefined null NaN和0 | 0 都会输出0
var n = fromIndex | 0;
// 5. If n ≥ 0, then
// a. Let k be n.
// 6. Else n < 0,
// a. Let k be len + n.
// b. If k < 0, let k be 0.
//k值会被扶正,k >= 0 ,如果k >= len 不会循环
var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
// 7. Repeat, while k < len
while (k < len) {
// a. Let elementK be the result of ? Get(O, ! ToString(k)).
// b. If SameValueZero(searchElement, elementK) is true, return true.
// c. Increase k by 1.
// NOTE: === provides the correct "SameValueZero" comparison needed here.
if (o[k] === searchElement) {
return true;
}
k++;
}
// 8. Return false
return false;
}
});
}
//也可以用在非数组
(function() {
console.log([].includes.call(arguments, 'a')); // true
console.log([].includes.call(arguments, 'd')); // false
})('a','b','c');
Array.prototype.indexOf
- 从数组中找到给定的元素的索引,找到了返回该索引,找不到返回-1
- IE9+支持此方法
3.
// Production steps of ECMA-262, Edition 5, 15.4.4.14
// Reference: http://es5.github.io/#x15.4.4.14
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function(searchElement, fromIndex) {
var k;
// 1. Let O be the result of calling ToObject passing
// the this value as the argument.
if (this == null) {
throw new TypeError('"this" is null or not defined');
}
var O = Object(this);
// 2. Let lenValue be the result of calling the Get
// internal method of O with the argument "length".
// 3. Let len be ToUint32(lenValue).
var len = O.length >>> 0;
// 4. If len is 0, return -1.
//空数组直接返回false
if (len === 0) {
return -1;
}
// 5. If argument fromIndex was passed let n be
// ToInteger(fromIndex); else let n be 0.
var n = +fromIndex | 0;
//n为无穷则赋值为0
if (Math.abs(n) === Infinity) {
n = 0;
}
//如果n大于数组长度,直接返回-1
// 6. If n >= len, return -1.
if (n >= len) {
return -1;
}
// 7. If n >= 0, then Let k be n.
// 8. Else, n<0, Let k be len - abs(n).
// If k is less than 0, then let k be 0.
k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
// 9. Repeat, while k < len
while (k < len) {
// a. Let Pk be ToString(k).
// This is implicit for LHS operands of the in operator
// b. Let kPresent be the result of calling the
// HasProperty internal method of O with argument Pk.
// This step can be combined with c
// c. If kPresent is true, then
// i. Let elementK be the result of calling the Get
// internal method of O with the argument ToString(k).
// ii. Let same be the result of applying the
// Strict Equality Comparison Algorithm to
// searchElement and elementK.
// iii. If same is true, return k.
if (k in O && O[k] === searchElement) {
return k;
}
k++;
}
return -1;
};
}
//查找引用类型的值
var a = [5];
[1,2,3,4,a,6].indexOf(a);
// 4
[1,2,3,4,[5]].indexOf([5]);
// -1
//检测某个元素出现的次数
var indices = [];
var array = ['a', 'b', 'a', 'c', 'a', 'd'];
var element = 'a';
var idx = array.indexOf(element);
while (idx != -1) {
indices.push(idx);
//如果找到了,就从此次的idx + 1开始继续搜索
idx = array.indexOf(element, idx + 1);
}
console.log(indices);
// [0, 2, 4]
Array.prototype.lastIndexOf
- 从传入的索引处开始,从数组的后面向前查找相同元素,找到则返回元素项的索引,未找到则返回-1
- 空数组直接返回-1,如果传入的索引值是负数,绝对值大于数组长度,则直接返回-1
var indices = [];
var array = ['a', 'b', 'a', 'c', 'a', 'd'];
var element = 'a';
var idx = array.lastIndexOf(element);
while (idx != -1) {
indices.push(idx);
//当索引值等于0时便不用在循环查找了
idx = (idx > 0 ? array.lastIndexOf(element, idx - 1) : -1);
}
console.log(indices);
// [4, 2, 0];
上一篇: LaTeX的Beamer元素控制
下一篇: 深入讲解PHP垃圾回收及内存管理相关内容
推荐阅读
-
Javascript中indexOf()和lastIndexOf应用方法实例
-
Javascript中indexOf()和lastIndexOf应用方法实例
-
javascript indexOf方法、lastIndexOf 方法和substring 方法_基础知识
-
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法_基础知识
-
JavaScript从数组的indexOf()深入之Object的Property机制_javascript技巧
-
js中substr,substring,indexOf,lastIndexOf的用法小结_javascript技巧
-
JavaScript从数组的indexOf()深入之Object的Property机制_javascript技巧
-
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解_javascript技巧
-
js中substr,substring,indexOf,lastIndexOf的用法小结_javascript技巧
-
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法_基础知识