JS配列の偏平化、重量除去、ソート操作例の詳細


本論文の例は、JS配列の平準化、重量除去、順序付け操作を述べている。皆さんに参考にしてあげます。具体的には以下の通りです。
オンラインで学校の募集テーマを見ました。行列var arr=[[1,3,2,1],[5,3,4,8,5,6,5],[6,2,8,9,[4,11,15,8,9,12,[12,13,[10],14]]を知られています。最終結果は、[1,2,3,4,5,6,8,9,10,11,12,13,14,16]であった。次に配列を平坦化し、重さを取り、並べ替えを行います。
一、配列の平坦化

var arr = [[1, 3, 2, 1],
[5, 3, 4, 8, 5, 6, 5],
[6, 2, 8, 9, [4, 11, 15, 8, 9, 12, [12, 13, [10], 14]]], 
16]
1、偏平化方法一(toString)
注意:arr配列に空の配列がある場合は、この方法を使用しないで、次の方法を使用します。配列の値は文字列であり、数値ではありません。

var newArr = arr.toString().split(',')
2、平準化方法二(正規表現)

var newArr1 = JSON.parse("[" +JSON.stringify(arr).replace(/(\[\]\,)|[\[\]]*/g, "") + "]");
3、扁平化方法三(reduce)
reduce()方法は、アキュムレータおよび配列内の各要素(左から右へ)に関数を適用し、それを単一の値に低減し、reduce詳細紹介

function flatten(arr) {
 return arr.reduce((a, b) => [].concat(Array.isArray(a) && a ? flatten(a) : a, Array.isArray(b) && b ? flatten(b) : b), [])
 }
var newArr2 = flatten(arr)
4、扁平化方法四(遍歴配列)

var newArr3 = []
function flat(arr) {
  for(var i = 0; i < arr.length; i++) {
    if(arr[i] instanceof Array) {
      flat(arr[i])
    } else {
      newArr3.push(arr[i])
    }
  }
}
flat(arr)
二、配列デ重量

var newArr1 =[1, 3, 2, 1, 5, 3, 4, 8, 5, 6, 5, 6, 2, 8, 9, 4, 11, 15, 8, 9, 12, 12, 13, 10, 14, 16]
1、取り方一つ(セット)
Aray.from法は、2つの種類のオブジェクトを真の配列に変換するために使用されます。類似の配列のオブジェクトとエルゴード可能なオブジェクト(ES 6に追加されたデータ構造SetおよびMapを含む)。
  ES 6は新しいデータ構造Setを提供します。配列に似ていますが、メンバーの値は全部唯一で、重複した値がありません。セット詳細

var duplicate = Array.from(new Set(newArr1))
2、取り方二(reduce)
配列reduce方法により、indexOfを用いて前回のフィードバックが配列aに現在の要素bのインデックスが含まれているかどうかを判断し、存在しない場合はb要素を配列aに参加し、そうでなければ直接aに戻る。

var duplicate1 = newArr1.reduce((a, b) => {
  if(a.indexOf(b) === -1) {
    a.push(b)
  }
  return a
}, [])
3、重量除去方法三(配列の下付きスケーリングと重量除去法)
配列のフィルタリングfilter方法により、indexOfを用いて、現在の要素eleのフィルタリングされた配列farrにおける最初のインデックス値を取得し、値が現在のインデックス値indexと等しい場合には戻り、等しくなければフィルタリングされる。

var duplicate2 = newArr1.filter((ele, index, farr) => {
  return farr.indexOf(ele) === index
})
4、デバッグ方法四(トラバース配列)
配列を巡回して、新しいduplicate 3配列を創立して、indexOfを利用して要素がduplicate 3の新しい配列の中に存在するかどうかを判断して、存在しないならpushはduplicate 3の新しい配列に着きます。

var duplicate3 = []
for(var i = 0; i < newArr1.length; i++) {
  if(duplicate3.indexOf(newArr1[i]) === -1) {
    duplicate3.push(newArr1[i])
  }
}
5、重量除去方法5(並べ替え後隣接して重量除去法)
入力された配列を並べ替え、並べ替え後の同じ値に隣接し、新しい配列は前の値と重複しない値だけを加える。

function unique3(arr) {
  arr.sort();
  var newArr = [arr[0]];
  for(var i = 1, len = arr.length; i < len; i++) {
    if(arr[i] !== newArr[newArr.length - 1]) {
      newArr.push(arr[i]);
    }
  }
  return newArr;
}
var duplicate4 = unique3(newArr1)
三、配列の並べ替え

var duplicate=[1, 3, 2, 5, 4, 8, 6, 9, 11, 15, 12, 13, 10, 14, 16]
1、並べ替え方法1:(sort方法)

function systemSort(arr) {
  return arr.sort(function(a, b) {
    return a - b
  })
}
var sort = systemSort(duplicate)
2、並べ替え方法2:(泡が立って並べ替える)

 function bubbleSort(arr) {
  var len=arr.length
    for(var i = len-1; i > 0; i--) {
     for(var j = 0; j < i; j++) {
       if(arr[j] > arr[j+1]) {
       var tmp = arr[j]
       arr[j] = arr[j + 1]
       arr[j + 1]= tmp
       } 
     }
    }
    return arr
  }
  var sort1 = bubbleSort(duplicate)
3、並べ替え方法3:(並べ替えの挿入)

function insertSort(arr){
  var tmp
  for(var i = 1; i < arr.length; i++) {
   tmp = arr[i]
   for(var j = i; j >= 0; j--) {
    if(arr[j - 1] > tmp) {
     arr[j] = arr[j - 1];
    } else {
     arr[j] = tmp;
     break;
    }
   }
  }
  return arr
}
var sort2 = insertSort(duplicate)
並べ替え方法はまだたくさんあります。ここではまとめずにフロントエンド面接は必須です。基本的な並べ替えアルゴリズムです。を参照してください。
四、配列の平坦化、重量除去、並べ替えの実例の実証
这里写图片描述

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>     、  、  </title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #contain {
      margin: 20px 70px;
    }

    fieldset span {
      font-size: 15px;
      font-weight: bold;
      color: blue;
      display: inline-block;
      width: 100%;
      text-align: center;
    }

    #result {
      border: solid blueviolet 2px;
      height: 100%;
      margin: 10px;
      padding: 10px;
      text-align: center;
      box-shadow: 5px 3px darkgray;
      border-radius: 10px;
    }
  </style>

  <body>
    <div id="contain">
      <fieldset>
        <legend>     、  、    :</legend>
        <span>    :[[1,3,2,1],[5,3, 4, 8, 5, 6, 5],[6, 2, 8, 9,[4, 11, 15, 8, 9, 12, [12,13,[10], 14]]],16]</span>
        <div id="result"></div>
      </fieldset>
    </div>
    <script>
      var result = document.getElementById('result')
      var offsetWidth = result.offsetWidth 
      var margin = (offsetWidth - 530) / 2
      var div = document.createElement('div')
      div.style.width = '530px'
      div.style.textAlign = 'left'
      div.style.margin = '10px ' + margin + 'px'
      var text = ''
      var arr = [
        [1, 3, 2, 1],
        [5, 3, 4, 8, 5, 6, 5],
        [6, 2, 8, 9, [4, 11, 15, 8, 9, 12, [12, 13, [10], 14]]], 16
      ]
      text +='*****************  **********************' + '<br>'
      /*
       *    
       */
      //       (  :  arr       ,      ,      ;          ,    )
      var newArr = arr.toString().split(',')
      text += '      (toString):' + newArr + '<br>'

      //       (     )
      var newArr1 = JSON.parse("[" + JSON.stringify(arr).replace(/(\[\]\,)|[\[\]]*/g, "") + "]");
      text += '      (     ):' + newArr1 + '<br>'

      //       (reduce)
      function flatten(arr) {
        return arr.reduce((a, b) => [].concat(Array.isArray(a) && a ? flatten(a) : a, Array.isArray(b) && b ? flatten(b) : b), [])
      }
      var newArr2 = flatten(arr)
      text += '      (reduce):' + newArr2 + '<br>'

      //       (    )
      var newArr3 = []

      function flat(arr) {
        for(var i = 0; i < arr.length; i++) {
          if(arr[i] instanceof Array) {
            flat(arr[i])
          } else {
            newArr3.push(arr[i])
          }
        }
      }
      flat(arr)
      text += '      (    ):' + newArr3 + '<br><br>'

      text +='*****************  **********************' + '<br>'
      /*
       *   
       */
      //      (Set)
      var duplicate = Array.from(new Set(newArr1))
      text += '     (Set):' + duplicate + '<br>'

      //      (reduce)
      var duplicate1 = newArr1.reduce((a, b) => {
        if(a.indexOf(b) === -1) {
          a.push(b)
        }
        return a
      }, [])
      text += '     (reduce):' + duplicate1 + '<br>'

      //      (       )
      var duplicate2 = newArr1.filter((ele, index, farr) => {
        return farr.indexOf(ele) === index
      })
      text += '     (       ):' + duplicate2 + '<br>'

      //      (    )
      var duplicate3 = []
      for(var i = 0; i < newArr1.length; i++) {
        if(duplicate3.indexOf(newArr1[i]) === -1) {
          duplicate3.push(newArr1[i])
        }
      }
      text += '     (    ):' + duplicate3 + '<br>'

      //      (        )
      function unique3(arr) {
        arr.sort();
        var newArr = [arr[0]];
        for(var i = 1, len = arr.length; i < len; i++) {
          if(arr[i] !== newArr[newArr.length - 1]) {
            newArr.push(arr[i]);
          }
        }
        return newArr;
      }
      var duplicate4 = unique3(newArr1)
      text += '     (        ):' + duplicate4 + '<br><br>'

   text += '*****************  **********************' + '<br>'
      /*
       *   
       */
      //      :(sort  )
    function systemSort(arr) {
    return arr.sort(function(a, b) {
      return a - b
    })
    }
    var sort = systemSort(duplicate)
      text += '     :(sort  ):' + sort + '<br>'

      //      :(    )
      function bubbleSort(arr) {
        var len=arr.length
      for(var i = len-1; i > 0; i--) {
      for(var j = 0; j < i; j++) {
      if(arr[j] > arr[j+1]) {
      var tmp = arr[j]
      arr[j] = arr[j + 1]
      arr[j + 1]= tmp
      } 
      }
      }
      return arr
      }
      var sort1 = bubbleSort(duplicate)
      text += '     :(    ):' + sort1 + '<br>'

      //      :(    )
      function insertSort(arr){
      var tmp
      for(var i = 1; i < arr.length; i++) {
      tmp = arr[i]
      for(var j = i; j >= 0; j--) {
       if(arr[j - 1] > tmp) {
        arr[j] = arr[j - 1];
       } else {
        arr[j] = tmp;
        break;
       }
      }
      }
      return arr
      }
      var sort2 = insertSort(duplicate)
      text += '     :(    ):' + sort2 + '<br>'

      div.innerHTML = text
      result.appendChild(div)
    </script>
  </body>

</html>
関心のある友達はオンラインHTML/CSS/JavaScriptコードを使ってツールを実行できます。http://tools.jb51.net/code/HtmlJsRunは上記のコードの運行効果をテストします。
さらに、JavaScriptに関する内容については、当駅のテーマを見ることができます。「JavaScript配列操作技術のまとめ」、「JavaScript文字と文字列操作テクニックのまとめ」、「JavaScriptはアルゴリズムと技術の総括を遍歴します。」、「JavaScript数学演算の使い方のまとめ」、「JavaScriptデータ構造とアルゴリズム技術のまとめ」、および「JavaScript検索アルゴリズムのテクニックのまとめ
本論文で述べたように、JavaScriptプログラムの設計に役に立ちます。