興味深いJavaScriptオリジナル配列関数

7416 ワード

JavaScriptでは、配列を作成するには、Aray構造関数を使用するか、配列の直接量を使用することができ、後者は優先的な方法である.ArayオブジェクトはObject.prototypeから継承され、配列に対してtypeofオペレータを実行し、アラーではなくobjectに戻る.しかし、[]instance of Arayもtrueに戻る.つまり、クラス配列オブジェクトの実装はより複雑であり、例えば、stingsオブジェクト、argmentsオブジェクト、argmentsオブジェクトはArayの例ではないが、length属性があり、インデックスによって値を取ることができるので、配列のように循環動作することができる.
本論文では,いくつかの配列プロトタイプの方法を復習し,これらの方法の使い方を探求する.
  • サイクル:forEach
  • 判断:someと.every
  • 区分.joinと.concat
  • スタックとキューの実現:.pop,push,shift,および.unshift
  • モデルマッピング:map
  • クエリ:filter
  • 並べ替え:sort
  • 計算:reduceと.reduceRight
  • コピー:slice
  • パワフル.splice
  • 検索:indexOf
  • オペレータ:in
  • 接近.reverse
  • サイクル:forEach
    これはJavaScriptの中で最も簡単な方法ですが、IE 7とIE 8はこの方法をサポートしていません.
    forEachパラメータとしてのフィードバック関数があります.配列を巡回すると、各配列要素はそれを呼び出します.コールバック関数は3つのパラメータを受け入れます.
  • value:現在の要素
  • index:現在の要素のインデックス
  • array:エルゴード配列
  • さらに、各関数として呼び出されるコンテキスト(this)として、オプションの第2のパラメータを渡すことができる.
    ['_', 't', 'a', 'n', 'i', 'f', ']'].forEach(function (value, index, array) {
        this.push(String.fromCharCode(value.charCodeAt() + index + 2))
    }, out = [])
    out.join('')
    // 
    後に言及します.joinは、この例では、配列内の異なる要素をつなぎ合わせて使用します.効果はout[0]+"+out[1]+"+out[2]+"+out[n]に似ています.
    中断できません.forEachサイクルで、異常を出すのも賢明ではありません.幸いなことに、私たちは別の方法で操作を中断します.
    判断:someと.every
    NETの中の列挙を使ったことがあるならば、この2つの方法は.Any(x=>x.IsAwesome)、All(x=>x.IsAwesome)と似ています.forEachのパラメータと同様に、value、index、arrayの3つのパラメータを含むコールバック関数が必要であり、オプションの第2のコンテキストパラメータもある.MDNペア.someの説明は以下の通りです.
    そして、配列内の各要素に対して、チューニング関数がtrueに戻るまでの間、一回のコールバック関数を実行します.ターゲット要素を見つけたら、すぐにtrueに戻ります.そうでなければ、falseに戻ります.コールバック関数は、指定された値の配列インデックスに対してのみ実行されます.削除された要素または指定されていない要素には呼び出しません.
    max = -Infinity
    satisfied = [10, 12, 10, 8, 5, 23].some(function (value, index, array) {
        if (value > max) max = value
        return value < 10
    })
    console.log(max)
    // 
    なお、コールバック関数のvalue<10の場合は、関数サイクルを中断します.everyの運行原理は.someと似ていますが、コールバック関数はtrueではなくfalseに戻ります.
    ジョンと.concatを区別する.
    ジョインと.concatはよく混同します.join(separator)はセパレータを区切り記号として配列要素をつづり、文字列形式に戻ります.separatorが提供されていない場合は、デフォルトで使用されます.concatはソース配列の浅いコピーとして新しい配列を作成します.
  • .concat一般的な使い方:array.co ncat(val,val 2,val 3,valn)
  • .concatは新しい配列
  • を返します.
  • array.co ncat()は、パラメータなしでソース配列の浅いコピーを返す.
  • 浅いコピーは、新しい配列と元の配列が同じオブジェクト参照を維持することを意味し、これは通常よいことである.たとえば:
    var a = { foo: 'bar' }
    var b = [1, 2, 3, a]
    var c = b.concat()
    console.log(b === c)
    // 
    スタックとキューの実現:pop,push,shiftと.unshift
    みんな知っています.pushはもう配列の最後に元素を追加してもいいですが、[].push(‘a’,‘b’,‘c’,‘d’,‘z’)を使って一度に複数の元素を追加してもいいですか?
    pop方法は.pushの逆動作で、削除された配列の最後の要素を返します.配列が空であれば、void 0(undefined)に戻り、使用してpopと.pushはLIFOスタックを作成することができる.
    function Stack () {
        this._stack = []
    }
    Stack.prototype.next = function () {
        return this._stack.pop()
    }
    Stack.prototype.add = function () {
        return this._stack.push.apply(this._stack, arguments)
    }
    stack = new Stack()
    stack.add(1,2,3)
    stack.next()
    // 
    モデルマップ:map
    mapは、配列内の各要素に対してフィードバック方法を提供し、呼び出し結果からなる新しい配列を返します.コールバック関数は、指定された値の配列インデックスに対してのみ実行されます.削除された要素または指定されていない要素には呼び出しません.
    Aray.prototype.mapと前述の.forEach、.someと.everyは同じパラメータフォーマットがあります.map(value、index、array)、thisAgment)
    values = [void 0, null, false, '']
    values[7] = void 0
    result = values.map(function(value, index, array){
        console.log(value)
        return value
    })
    // 
    undefined× 3よく説明しました.mapは削除されたまたは指定されていない値の要素に対して呼び出すことはできませんが、結果の配列には依然として含まれます.mapは、配列を作成または変更する際に非常に有用であり、以下の例を参照してください.
    // casting
    [1, '2', '30', '9'].map(function (value) {
        return parseInt(value, 10)
    })
    // 1, 2, 30, 9
    [97, 119, 101, 115, 111, 109, 101].map(String.fromCharCode).join('')
    // 
    お問い合わせ:filter
    filterは、各配列要素に対して一回のコールバック関数を実行し、リセット関数によってtrueの要素からなる新しい配列を返します.コールバック関数は、指定された値の配列項目のみを呼び出します.
    filter(fn(value,index,array)、thisAgment)は、C((zhi)のLINE表現とSQLのwhere文と類似しています.filterは、コールバック関数でtrue値の要素だけを返します.
    [void 0, null, false, '', 1].filter(function (value) {
        return value
    })
    // 
    並べ替え:sort(compreFunction)
    compreFunctionが提供されていない場合、要素は文字列に変換され、辞書に従って並べ替えられます.例えば、「80」は「9」より前で、その後ではない.
    ほとんどの並べ替え関数と同様に、Aray.prototype.sort(fn(a,b)は、2つのテストパラメータを含むコールバック関数が必要で、その戻り値は以下の通りである.
  • aは、bより前の値が0
  • より小さい.
  • aとbが等しい場合、戻り値は0
  • である.
  • aは、bの後、戻り値が0
  • より小さい.
    [9,80,3,10,5,6].sort()
    // 
    計算:.reduceと.reduceRight
    この二つの関数は分かりにくいです.reduceは左から右へ配列を遍歴します.reduceRightは右から左へ配列を遍歴します.二つの典型的な使い方はreduceです.
    previous Valueは最終的にコールバック関数の戻り値であり、initial Valueはその初期値であり、currentValueは現在の要素値であり、indexは現在の要素インデックスであり、arrayは呼び出し・reduceの配列である.
    典型的な用例として、reduceの求和関数を使用する.
    Array.prototype.sum = function () {
        return this.reduce(function (partial, value) {
            return partial + value
        }, 0)
    };
    [3,4,5,6,10].sum()
    // 
    配列を文字列につなぎたいなら、ジョインで実現できます.しかし、配列値が対象であれば、ジョインは私たちの期待通りに値を返しません.対象が合理的なvalueOfまたはtostring方法がある場合を除いて、この場合には使用できます.
    function concat (input) {
        return input.reduce(function (partial, value) {
            if (partial) {
                partial += ', '
            }
            return partial + value
        }, '')
    }
    concat([
        { name: 'George' },
        { name: 'Sam' },
        { name: 'Pear' }
    ])
    // 
    コピー:slice
    concatと同様に、パラメータなしのsliceを呼び出す方法はソース配列の浅いコピーを返します.sliceには二つのパラメータがあります.一つは開始位置と終了位置です.Aray.prototype.sliceは、クラスの配列オブジェクトを本物の配列に変換するために使用されます.
    Array.prototype.slice.call({ 0: 'a', 1: 'b', length: 2 })
    // 
    また、sliceのもう一つの一般的な使い方は一つのパラメータリストから一部の要素を削除することであり、これはクラスの配列オブジェクトを本物の配列に変換することができる.
    function format (text, bold) {
        if (bold) {
            text = '' + text + ''
        }
        var values = Array.prototype.slice.call(arguments, 2)
        values.forEach(function (value) {
            text = text.replace('%s', value)
        })
        return text
    }
    format('some%sthing%s %s', true, 'some', 'other', 'things')
    パワフル
    spliceは私の一番好きな原生配列関数です.一回だけ呼んで、元素を削除し、新しい要素を挿入し、同時に削除、挿入操作ができます.注意したいのは、`concatと.sliceとは違って、この関数はソース配列を変えます.
    var source = [1,2,3,8,8,8,8,8,9,10,11,12,13]
    var spliced = source.splice(3, 4, 4, 5, 6, 7)
    console.log(source)
    // 
    ご覧のように、spliceは削除された要素を返します.削除された配列を遍歴したいなら、これはとても便利です.
    var source = [1,2,3,8,8,8,8,8,9,10,11,12,13]
    var spliced = source.splice(9)
    spliced.forEach(function (value) {
        console.log('removed', value)
    })
    // 
    検索:indexOf
    indexOfを利用して、配列の中で1つの要素の位置を探すことができます.整合要素がない場合は-1を返します.私はよく使います.indexOfの場合は、比較がある場合、例えば、a========a'||a===b'𞓜a====c'だけ、または二つの比較がある場合に使用できます.indexOf:',b',c'.indexOf(=a=)!1です
    なお、提供された参照が同じであれば、indexOfもオブジェクトを検索することができる.第二のオプションパラメータは、検索を開始する位置を指定します.
    var a = { foo: 'bar' }
    var b = [a, 2]
    console.log(b.indexOf(1))
    // 
    後ろから前に検索したいなら、使います.lastIndexOf.
    操作子:in
    面接では初心者が犯しやすいミスは紛らわしいです.indexOfとin操作子:
    var a = [1, 2, 5]
    1 in a
    // 
    問題は、in操作子は、値ではなく検索対象のキーです.もちろん、これは性能的にはindexOfよりずっと速いです.
    var a = [3, 7, 6]
    1 in a === !!a[1]
    // 
    近付く
    この方法は配列中の要素を逆さまにする.
    var a = [1, 1, 7, 8]
    a.reverse()
    // [8, 7, 1, 1]
    reverseは配列自体を変更します.
    転載元:http://www.codeceo.com