Heim > Web-Frontend > js-Tutorial > Hauptteil

JavaScript-Thema 9: Suchen Sie das angegebene Element im Array

coldplay.xixi
Freigeben: 2021-03-12 10:13:33
nach vorne
2998 Leute haben es durchsucht

1. findIndex und findLastIndex zusammenführen

JavaScript-Thema 9: Suchen Sie das angegebene Element im Array

2. sortIndex

    • 2.1 Durchquerung
    • 3.3 indexOf und lastIndexOf sind üblich. Zweite Ausgabe
        • Referenz
        • steht am Ende
    • (kostenlose Lernempfehlung:
    • Javascript-Video-Tutorial
        • )
        • 1. findIndex und findLastIndex
      1.1 findIndex
    • Die Methode findIndex() gibt den Index des ersten Elements im Array zurück, das die bereitgestellte Testfunktion erfüllt. Wenn das entsprechende Element nicht gefunden wird, wird -1 zurückgegeben.
    const array1 = [5, 12, 8, 130, 44];const isLargeNumber = (element) => element > 13;console.log(array1.findIndex(isLargeNumber));// expected output: 3
    Nach dem Login kopieren
    • Implementierung
      • Array.prototype.newFindIndex = function(callback) {
          const _arr = this;
          const len = _arr.length;
          for (let i = 0; i  element > 13;console.log(array1.newFindIndex(isLargeNumber));// 3
        Nach dem Login kopieren
      • 1.2 findLastIndex
      • Ähnlich können wir, wenn wir zurückblicken, um die erste Methode zu finden, die die Bedingungen erfüllt, so schreiben:
      Array.prototype.newFindlastIndex = function(callback) {
        const _arr = this;
        const len = _arr.length;
        for (let i = len - 1; i >= 0; i--) {
          if (callback(_arr[i], i, _arr)) {
            return i;
          }
        }
        return -1;};const array1 = [5, 12, 8, 130, 44];const isLargeNumber = (element) => element > 13;console.log(array1.newFindlastIndex(isLargeNumber));// 4
      Nach dem Login kopieren
    • Der obige Code ist nur der Vorwärtssuche sehr ähnlich Ändern der Bedingungen für die Durchquerung.
    1.3 findIndex und findLastIndex zusammenführenWie Sie sehen können, sind die beiden Methoden bis auf die unterschiedlichen Schleifenbedingungen nahezu identisch. In Bezug auf lodash werden wir die beiden Methoden vereinfachen
    /**
     * @private
     * @param {Array} array The array to inspect.
     * @param {Function} predicate The function invoked per iteration.
     * @param {boolean} [fromRight] 从右向左查找
     * @returns {number} 返回第一个符合条件元素的下标或-1
     */function baseFindIndex(array, predicate, fromRight) {
      const { length } = array;
      let index = fromRight ? length : -1; // 确定下标的边界
    
      while (fromRight ? index-- : ++index 
    Nach dem Login kopieren
  • Werfen wir einen Blick auf seinen Bruder - Die Idee von underscore besteht darin, die verschiedenen übergebenen Parameter zu verwenden, um verschiedene Funktionen zurückzugeben.
  • function createIndexFinder(dir) {
      return function(array, predicate, context) {
        const { length } = array;
        var index = dir > 0 ? 0 : length - 1;
    
        for (; index >= 0 && index 
    Nach dem Login kopieren
  • Wir sind mit findIndex~ fertig, werfen wir einen Blick auf neue Szenarien und Implementierungen!
  • Bildbeschreibung hier einfügen

    2. sortIndex Finden Sie die Position, die value in einem sortierten Array entspricht. Dadurch wird sichergestellt, dass die Reihenfolge nach dem Einfügen in das Array erhalten bleibt.

    Wie kann man das erreichen? 2.1 Traversal

    Jeder kann sich Traversal vorstellen, auch wenn es nicht unbedingt die optimale Lösung ist: Gibt den ersten

    -Index im Array zurück, in dem ein bestimmtes Element gefunden werden kann, oder -1, wenn es nicht existiert. Suchen Sie vom Anfang des Arrays rückwärts, beginnend mit fromIndex. lastIndexOf(): Gibt den Index des

    letzten

    des angegebenen Elements im Array zurück, oder -1, wenn es nicht existiert. Suche vorwärts von der Rückseite des Arrays, beginnend bei fromIndex.

    3.1 Die erste Version der indexOf-Implementierung

    function sortIndex(array, value) {
      for (let i = 0; i  value) {
          return i;
        }
      }
      return array.length;}
    Nach dem Login kopieren
    emmmm...Nachdem ich die Implementierung von findIndex und lastFindIndex gesehen habe, sollte indexOf auch ordentlich sein~3.2 Die erste Version von indexOf und lastIndexOf ist universell

    Erstellt durch Parameter Anders Suchmethoden

    function sortIndex(array, value) {
      let low = 0,
        high = array.length;
      while (low 3.3 indexOf und lastIndexOf Universelle zweite Version<p></p>Dieses Mal ermöglichen wir die Angabe der Suchposition. Werfen wir einen Blick auf die Rolle von fromIndex: <h4></h4><p>Legen Sie die Position fest, an der die Suche beginnt. Wenn der Indexwert größer oder gleich der Array-Länge ist, bedeutet dies, dass die Suche im Array nicht durchgeführt wird und -1 zurückgegeben wird. <br> Wenn der im Parameter angegebene Indexwert ein negativer Wert ist, wird er als Offset vom Ende des Arrays verwendet, d. h. -1 bedeutet, vom letzten Element aus zu suchen, -2 bedeutet, vom letzten Element aus zu suchen vorletztes Element, bis Und so weiter. <br> Hinweis: Wenn der im Parameter angegebene Indexwert ein negativer Wert ist, wird das Array weiterhin von vorne nach hinten abgefragt. Wenn der Offset-Indexwert immer noch kleiner als 0 ist, wird das gesamte Array abgefragt. Der Standardwert ist 0. </p><p></p><pre class="brush:php;toolbar:false">function indexOf(array, value) {
      for (let i = 0; i <code>underscore</code> 的思路就是利用传参的不同,返回不同的函数。<pre class="brush:php;toolbar:false">function createIndexOf(dir) {
      return function(array, value) {
        let index = dir > 0 ? 0 : arr.length - 1;
        for (; index >= 0 && index <p>关于 <code>findIndex</code> 我们就告一段落了~,再来看看新的场景和实现吧!</p><p><img src="https://img.php.cn/upload/article/000/000/052/c975230185fb614ade747b6d7f8688db-0.jpg" alt="JavaScript-Thema 9: Suchen Sie das angegebene Element im Array"></p><p><strong>二、sortIndex</strong></p><p>在一个排好序的数组中找到 <code>value</code> 对应的位置,即保证插入数组后,依然保持有序的状态。</p><pre class="brush:php;toolbar:false">function createIndexOf(dir) {
      return function(array, value, fromIndex) {
        // 设定开始查找的位置。如果该索引值大于或等于数组长度,意味着不会在数组里查找,返回 -1。
        let length = array == null ? 0 : array.length;
        let i = 0;
        if (!length) return -1;
        if (fromIndex >= length) return -1;
        if (typeof fromIndex === "number") {
          if (dir > 0) {
            // 正序
            // 起始点>=0,沿用起始点,否则起始点为从后向前数fromIndex
            i = fromIndex >= 0 ? fromIndex : Math.max(length + fromIndex, 0);
          } else {
            // 倒序
            // 起始点>=0,沿用起始点,否则起始点为从后向前数fromIndex
            length =
              fromIndex >= 0
                ? Math.min(fromIndex + 1, length)
                : fromIndex + length + 1;
          }
        }
        // 起始下标
        for (
          fromIndex = dir > 0 ? i : length - 1;
          fromIndex >= 0 && fromIndex <p>那么这个又该如何实现呢?</p><h4>2.1 遍历</h4><p>遍历大家都能想到,虽然它不一定最优解:</p>rrreee<h4>2.2 二分法</h4>rrreee<p><strong>三、indexOf 和 lastIndexOf</strong></p>
    Nach dem Login kopieren
    • indexOf():返回在数组中可以找到一个给定元素的第一个索引,如果不存在则返回-1。从数组的前面向后查找,从 fromIndex 处开始。
    • lastIndexOf() :返回指定元素在数组中的最后一个的索引,如果不存在则返回-1。从数组的后面向前查找,从 fromIndex 处开始。

    3.1 indexOf 的第一版实现

    rrreee

    emmmm…在看过 findIndex 和 lastFindIndex 的实现后,indexOf 也要整整齐齐的啊~

    3.2 indexOf 和 lastIndexOf 通用第一版

    通过参数来创建不同的查找方法

    rrreee

    3.3 indexOf 和 lastIndexOf 通用第二版

    这一次,我们允许指定查找位置,我们来看看 fromIndex 的作用:

    设定开始查找的位置。如果该索引值大于或等于数组长度,意味着不会在数组里查找,返回 -1。
    如果参数中提供的索引值是一个负值,则将其作为数组末尾的一个抵消,即 -1 表示从最后一个元素开始查找,-2 表示从倒数第二个元素开始查找 ,以此类推。
    注意:如果参数中提供的索引值是一个负值,仍然从前向后查询数组。如果抵消后的索引值仍小于 0,则整个数组都将会被查询。其默认值为 0。

    rrreee

    写到这里我们在数组中查找元素就结束了,自己实现的和loadshunderscoreDies ist das Ende unserer Suche nach Elementen im Array. Was wir implementiert haben, unterscheidet sich immer noch stark von loadsh oder underscore Wenn Sie eine bessere Implementierung des Codes haben, schreiben Sie diese bitte unbedingt in den Nachrichtenbereich

    Das obige ist der detaillierte Inhalt vonJavaScript-Thema 9: Suchen Sie das angegebene Element im Array. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

    Verwandte Etiketten:
    Quelle:csdn.net
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage