JavaScript学習メモ：配列(6)_html/css_WEB-ITnose

ご存知のとおり、配列項目には配列内で独自の場所があります。 JavaScript には、配列項目の位置を決定するための 2 つのメソッド、indexOf() と lastIndexOf() が用意されています。今日は主に、これら 2 つのメソッドを一緒に使用する方法と、配列内の配列項目の正確な位置を見つける方法を学びます。

IndexOf() メソッド

IndexOf() メソッドは、配列の先頭 (位置 0) から開始して逆方向に検索します。 IndexOf() メソッドは、指定された配列項目の配列内で見つかった最初のインデックス値を返します。 IndexOf() で指定された配列項目が配列内に存在しない場合、戻り値は -1 になります。

構文

IndexOf() で使用される構文は非常に単純です。

arr.indexOf(searchElement[, fromIndex = 0])

• searchElement : 配列項目を指定します。
• fromIndex : 検索を開始する位置。

インデックス値 (fromIndex) が配列の長さ (length) 以上の場合、配列内で検索されないことを意味し、-1 が返されます。パラメータで指定されたインデックス値が負の値である場合、配列の末尾へのオフセットとして扱われます。つまり、-1 は最後の要素から開始することを意味し、-2 は最後から 2 番目の要素から開始することを意味します。 。

注: パラメーターで指定されたインデックス値が負の値の場合でも、配列は前から後ろにクエリされます。オフセット インデックス値がまだ 0 未満である場合は、配列全体がクエリされます。デフォルト値は 0 です。

例

使用例を見てみましょう:

var arr = [0,1,2,3,4,5,6,5,4,3,2,1,0];console.log(arr.length); // 13arr.indexOf(2); // 2arr.indexOf(7); // -1arr.indexOf(9, 2); // -1arr.indexOf(2, -1); // -1arr.indexOf(2, -3); // 10

関連する位置図を見てみましょう:

arr.indexOf (2)

arr.indexOf(2) は、配列 arr の 0 番目のインデックス値から開始して最初の配列項目 2 を検索し、配列内の対応するインデックス値を返すことを意味します。

arr.indexOf(7)

arr.indexOf(7) 配列内の配列項目 7 のインデックス値を決定したいのですが、配列全体 arr には配列が存在しませんitem 7. このように、indexOf () メソッドは arr 配列内で配列 item 7 を見つけることができません。この場合、 arr.indexOf(7) は値 -1 を返します。

arr.indexOf(9, 2)

arr.indexOf(9, 2) は、配列の 2 番目のインデックス値の位置から配列項目 9 を検索することを意味しますarr ですが、配列項目 9 は配列 arr 全体に存在しないため、indexOf() メソッドは arr 配列内で配列項目 9 を見つけることができません。返される最終値は -1 です。

arr.indexOf(2, -1)

arr.indexOf(2, -1) は、配列 arr の最後のものを表します (arr.length と同等) - 1、つまり 12) 配列項目内の最初の 2 の検索を開始します。存在しない場合は -1 を返します。

arr.indexOf(2, -3)

arr.indexOf(2, -3) は、配列 arr の逆数から 3 番目のインデックス値を表します ( arr.length-3、つまり 10) 配列項目の最初の 2 を探し始めます。この例では、返される値は 10 です。

上記の例から、indexOf() によって返された値が -1 であれば、配列項目が配列内に存在するかどうかを簡単に判断できることがわかります。例:

var arr = ['a','b','c'];function arrIndexOf (arrayItems, arrayItem) {    if (arrayItems.indexOf(arrayItem) === -1) {        console.log(arrayItem + '不在[' + arrayItems + ']数组中');    }    else if (arrayItems.indexOf(arrayItem) > -1){        console.log(arrayItem + '在[' + arrayItems + ']数组中的索引值是：' + arrayItems.indexOf(arrayItem));    }}arrIndexOf(arr, 'c'); // c在[a,b,c]数组中的索引值是：2arrIndexOf(arr, 'd'); //d不在[a,b,c]数组中

互換性処理

IndexOf() メソッドはすべてのブラウザ (IE9 以降、Firefox2 以降、Safari 3 以降、Opera 9.5 以降、および Chrome) でサポートされているわけではないことに注意してください。 ）。ブラウザーでの IndexOf() メソッドのサポートを改善するには、コードの先頭に次のコードを追加します。

if (!Array.prototype.indexOf) {    Array.prototype.indexOf = function(elt /*, from*/) {        var len = this.length;        var from = Number(arguments[1]) || 0;        from = (from < 0) ? Math.ceil(from) : Math.floor(from);        if (from < 0) {            from += len;            for (; from < len; from++) {                if (from in this && this[from] === elt) {                    return from;                }            }            return -1;        };    }  }

lastIndexOf() メソッド

lastIndexOf The ()このメソッドは、indexOf() の逆で、配列の末尾から順に配列項目を検索し、配列内に配列項目のインデックス値が存在しない場合、戻り値は -1 です。

構文

lastIndexOf() メソッドの構文規則は次のとおりです。

arr.lastIndexOf(searchElement[, fromIndex = arr.length - 1])

• searchElement: 配列項目be found
• fromIndex: 配列の末尾から前方に検索します。デフォルト値は arr.length -

IndexOf() メソッドと同じです。 fromIndex 値が配列の長さ (arr.length) 以上の場合、配列全体が検索されます。パラメータで指定されたインデックス値が負の値である場合、配列の末尾へのオフセットとして扱われます。つまり、-1 は最後の要素から開始することを意味し、-2 は最後から 2 番目の要素から開始することを意味します。 。さらに、値が負であり、その絶対値が配列の長さより大きい場合、メソッドは -1 を返します。つまり、配列は検索されません。値が正の数の場合、配列内の対応する位置を示し、配列内で前方に検索されます。

例

lastIndexOf() メソッドの使用例を見てみましょう:

var arr = [0,1,2,3,4,5,6,5,4,3,2,1,0];console.log(arr.length); // 13arr.lastIndexOf(2); // 10arr.lastIndexOf(7); // -1arr.lastIndexOf(9, 2); // -1arr.lastIndexOf(4,9); // 8arr.lastIndexOf(2, -1); // 10

関連する位置図を見てみましょう:

arr.lastIndexOf(2)

arr.lastIndexOf(2) は、配列 arr (arr.length - 1) の末尾から配列項目 2 のインデックス値を前方検索することを意味します。返されるインデックス値は 10 です。

arr.lastIndexOf(7)

arr.lastIndexOf(7) は、配列 arr ( arr の末尾から開始することを意味します) .length - 1 ) 配列項目 7 のインデックス値まで前方検索します。配列 arr 全体には配列項目 7 がないため、値 -1 が返されます:

arr.lastIndexOf(9, 2)

arr.lastIndexOf(9, 2) 表示从数组 arr 倒数第二位向前查找数组项 9 的索引值。由于整个数组 arr 都没有数组项 9 ，因此其将返回的值为 -1 :

arr.lastIndexOf(4,9)

arr.lastIndexOf(4,9) 表示从数组 arr 索值值为 9 的位置查找第一个数组项为 4 。其返回的值为 8 ：

arr.lastIndexOf(2, -1)

arr.lastIndexOf(2, -1) 表示的从数组 arr 倒数第一个位置向前查找第一个数组项 2 ，其返回的值``:

使用 lastIndexOf() 方法查找一个数组项时，如果数组项不在数组中时，其返回的值同样为 -1 。如此一来，也可以像使用 indexOf() 方法一样， lastIndexOf() 可以用来判断数组项是不是在数组中：

var arr = ['a','b','c'];function arrLastIndexOf (arrayItems, arrayItem) {    if (arrayItems.lastIndexOf(arrayItem) === -1) {        console.log(arrayItem + '不在[' + arrayItems + ']数组中');    }    else if (arrayItems.lastIndexOf(arrayItem) > -1){        console.log(arrayItem + '在[' + arrayItems + ']数组中的索引值是：' + arrayItems.lastIndexOf(arrayItem));    }}arrIndexOf(arr, 'c'); // c在[a,b,c]数组中的索引值是：2arrIndexOf(arr, 'd'); //d不在[a,b,c]数组中

兼容性处理

还有 lastIndexOf() 也只在IE9+、Firefox2+、Safari 3+、Opera 9.5+和Chrome得到支持，如果希望自己的代码更健壮，在使用 lastIndexOf() 方法的前面需要添加下面的代码：

if (!Array.prototype.lastIndexOf) {    Array.prototype.lastIndexOf = function(elt /*, from*/) {        var len = this.length;        var from = Number(arguments[1]);        if (isNaN(from)) {            from = len - 1;        } else {            from = (from < 0) ? Math.ceil(from) : Math.floor(from);            if (from < 0) {                from += len;            } else if (from >= len){                from = len - 1;            }        }        for (; from > -1; from--) {            if (from in this && this[from] === elt) {                return from;            }        }        return -1;    };}

总结

indexOf() 和 lastIndexOf() 两个方法都是用来查找数组项在一个数组中的索引值，其中 indexOf() 是从前向后寻找，而 lastIndexOf() 是从后向前寻找。如果数组项不在数组中，返回的值为 -1 。这样一来，可以使用 indexOf() 或 lastIndexOf() 的值是否全等于( === ) -1 来做判断。

初学者学习笔记，如有不对，还希望高手指点。如有造成误解，还希望多多谅解。

大漠

常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。中国Drupal社区核心成员之一。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《 图解CSS3：核心技术与案例实战 》。