JavaScript トピック 8: 配列の平坦化

#ディレクトリ

1.再帰
• 2.reduce
• 3.apply some
• 4. ES6 展開演算子
• 5. toString
• 6. 規則性
• 7. 独自のフラット ツール メソッドを実装
• Write最後に

# (無料学習の推奨事項: JavaScript ビデオ チュートリアル )

1. 再帰

for ループは、時間と空間の複雑さを考慮しない場合、配列操作を実行するときに考えるのが最も簡単です。 、再帰は完璧な選択であるはずです。

例:

输入 
const arr = [1, [2, [3, 4, { a: 1 }], null], undefined];`
输出 
[ 1, 2, 3, 4, { a: 1 }, null, undefined ]

コード:

function flatten(arr) {
    let res = [];
    for (let i = 0; i < arr.length; i++) {
        if (Array.isArray(arr[i])) {
            // 因为函数返回的是数组，所以要做拼接处理
            res = res.concat(flatten(arr[i]));
        } else {
            res.push(arr[i])
        }
    }
    return res;}

注:

配列内の要素の基本型を判断します。
配列でない場合: 新しい配列に直接格納します。
配列である場合: まで最初の手順を繰り返します。配列ではない最後の要素は新しい配列に格納されます

2.reduce

まず

reduce# の内容を見てみましょう。 ## の動作: reduce( ) メソッドは、配列内の各要素に対して (昇順で実行されて) 提供された reducer 関数 を実行し、その結果を 1 つの戻り値に要約します。

例:

输入 
const arr = [1, [2, [3, 4, { a: 1 }], null], undefined];`
输出 
[ 1, 2, 3, 4, { a: 1 }, null, undefined ]

コード:

function flatten(arr) {
    return arr.reduce((prev, next) => {
        // prev表示上一次操作的结果
        return prev.concat(Array.isArray(next) ? flatten(next) : next)
    }, [])
    // 注意reduce的初始值应该是[]，否则无法进行拼接}

注:

メソッド 1

と メソッド 2 を注意深く比較してください。2 つのアイデアはまったく同じです - データ型が配列であるサブ要素を見つけて平滑化しますが、実装の詳細は若干異なります。違う、違う。 注意が必要な唯一のことは、スプライシング時にデータの基本タイプが配列で始まる必要があることです。

3. いくつかを適用する

方法 2 は方法 1 のバリエーションであるため、方法 3 も方法 2 のバリエーションであると言えますが、そうではありません。 recursion. メソッドを使用しますが、層ごとにネストを「解体」する方法です

まず、使用される API を見てみましょう:

apply
• : A を呼び出します。この値と配列 (または配列のようなオブジェクト) の形式の引数が指定された関数。
some
• : 配列内の少なくとも 1 つの要素が提供された関数テストに合格するかどうかをテストします。ブール型の値を返します

コード:

function flatten(arr) {
    while (arr.some(item => Array.isArray(item))) {
        // 只要存在数组类型的元素，就抹平一层
        arr = [].concat.apply([], arr)
    }
    return arr;}

注:

誰もが混乱しています 要点は

apply

です。実際、主な目的は括弧 <pre class="brush:php;toolbar:false">let res = [];res  = res.concat({});// 等价于[].concat.apply([], [{}])</pre> を減らすことです。この例では:

arr = [].concat.apply([], arr);// 等价于[].concat(1, [2, [3, 4, { a: 1 }], null], undefined)

4. ES6 展開演算子

メソッド 1 から 3 まで、コードの量を合理化するために既存のメソッドを引き続き使用していることに気づいたかもしれません。このメソッドについても同じことが当てはまります~

拡張機能を使用しますES6 の演算子 (パラメータ オブジェクトのすべてのトラバース可能な属性を取り出し、現在のオブジェクトにコピーするために使用)、メソッド 3 の合理化を継続します:

コード:

function flatten(arr) {
    while (arr.some(item => Array.isArray(item))) {
        // 只要存在数组类型的元素，就抹平一层
        arr = [].concat(...arr)
    }
    return arr;}

5. toString

最初の 4 つのメソッドが実装できる主流のメソッドである場合、次のいくつかは実装できる「非主流」メソッドです。コード！

function flatten(arr) {
    return arr.toString().split(',').map(function(item){
        return +item    })}

注:

データ変換時には型の制限があり、元のデータが [1, '2'] の場合、問題が発生します。

6. 規則性

型が変換されるという欠陥をデフォルトに設定する場合、より暴力的な方法で配列をフラット化することもできます:

function flatten(arr) {
    return JSON.stringify(arr).replace(/\[|\]/g, '').split(',');}

注:

純粋な配列であれば問題はないようです

function flatten(arr) {
    return JSON.parse('[' + JSON.stringify(arr).replace(/\[|\]/g, '').split(',') + ']')}

しかし、配列にオブジェクトが含まれている場合は、その影響を排除する必要があります。 JSON の後なので、より厳密になります~

この時点で、6 つのメソッドには配列平坦化の実装のほとんどが含まれています。では、メソッドをツールに「アップグレード」したい場合はどうすればよいでしょうか?現時点では、loadsh を「盗用」する必要があります~

7. 独自のフラット ツール メソッドを実装します

ここで、フラット化します。

 /*
 * @private
 * @param {Array} array 需要扁平化的数组
 * @param {number} depth 最多处理几层
 * @param {boolean} [isStrict] 是否严格处理函数
 * @param {Array} [result=[]] 输出的数组
 * @returns {Array}
 */function flatten(array, depth, isStrict, result) {
    result || (result = [])
    // 边界
    if (array == null) return result;

    for (const value of array) {
        if (depth > 0 && Array.isArray(value)) {
            if (depth > 1) {
                flatten(value, depth - 1, isStrict, result)
            } else {
                result.push(...value); // 只拆1层
            }
        } else if (!isStrict) {
            result[result.length] = value        }
    }
    return result;}

このメソッドは平坦化層の数を提供します

1. const res = flatten([1, 2, [3, 4, [5, 6]], { a: 1 }, null, undefined], 1, false);// [ 1, 2, 3, 4, [ 5, 6 ], { a: 1 }, null, undefined ]

このメソッドは、平坦化後の逆効果

2. const res = flatten([1, 2, [3, 4, [5, 6]], { a: 1 }, null, undefined], 1, true);// [ 3, 4, [ 5, 6 ] ]const res = flatten([1, 2, [3, 4, [5, 6]], { a: 1 }, null, undefined], 2, true);// [ 5, 6 ]

isStrict

パラメータをオンにすると、露出した要素は平坦化後に保持され、浅い要素は削除されます。 ここまで書いて、フラット化処理の考え方は理解でき、ある程度の実装能力はあると思いますので、上記のコードをしっかり理解できれば、フラット化部分は難しくないと思います。 loadsh の別の方法を検討してください~

関連する無料学習の推奨事項:

javascript(ビデオ)

以上がJavaScript トピック 8: 配列の平坦化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。