JAvascript配列のいくつかの処理方法

22207 ワード

JavaScript jquery アレイ処理

JAvascript配列のいくつかの処理方法
今日のプロジェクトでは、多くの配列の知識を使って、ここで記録をして、多くのことを学びました.
JAvascript配列内の空の配列をフィルタする方法.

var tagValue = [1,"",""];
var realValue = [];

for (var i = 0; i < tagValue.length; i++) {
    if (tagValue[i]!='') {
        realValue.push(tagValue[i]);
    }
};

説明:
tagValue配列をループし、空でなければrealValueという配列に値を挿入します.最後に、空の値のない配列realValueが得られました
2つの配列を比較する方法
質問詳細:A配列にはすべての文字列が含まれており、B配列には未知の文字列があります.A配列内の文字列がB配列内の各文字列を含む場合、真であり、そうでなければ偽である.
例を挙げる

var a = [1,2,3,4,5,6,7,8,9];
var b = [1,3];
//   ，  b   a     ，        
var b = [0,1]
//   ，

はい、方法は次のとおりです.

return a.filter(function(item){ return b.indexOf(item) !== -1 }).length === b.length

これは達人が書いたものです.よく研究した結果、何なのか分かりましたが、まだ正確な説明ができません.では、関数を1つカプセル化して、次回使いやすいようにしましょう.

function arr_contrast(a,b){
    return a.filter(function(item){ return b.indexOf(item) !== -1 }).length === b.length
}

JS多次元配列の運用
JSでは多次元配列はサポートされていませんが、1つの配列に配列が含まれていることで多次元配列をシミュレートできます.
読み出し方法はarr[1][2]である.2回のループを使用すると、多次元配列に値を追加するのに便利です.
次に多次元配列の例を書きます

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="js/jquery/jquery.js"></script>
</head>
<body>
<table id="table">
    <tr>
        <td>test11</td>
        <td>test12</td>
        <td>test13</td>
    </tr>
    <tr>
        <td>test21</td>
        <td>test22</td>
        <td>test23</td>
    </tr>
    <tr>
        <td>test31</td>
        <td>test32</td>
        <td>test33</td>
    </tr>
</table>
</body>
</html>
<script> $(function(){ var table = $("#table"), tr = table.find('tr'); var arr = []; tr.each(function(trIndex) { var td = $(this).find('td'); arr[trIndex]=[]; td.each(function(tdIndex) { arr[trIndex][tdIndex] = $(this).html(); }); }); console.log(arr); }) </script>

以上の各知識点の組み合わせ運用
今日はDEMOを作りました.はい、詳しく説明しません.コードは次のとおりです.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>    </title>
<script src="js/jquery/jquery.js"></script>
</head>
<body>
<ul id="zoom">
    <li data-value="1:101,1:102,2:201,2:202,2:203,2:204,3:301,3:302"><img src="image/1.jpg"></li>
    <li data-value="1:102,1:103,2:201,2:203,2:204,3:301,3:303"><img src="image/2.jpg"></li>
    <li data-value="1:103,1:104,2:201,2:202,2:203,2:204,3:301,3:304"><img src="image/3.jpg"></li>
    <li data-value="1:104,1:101,2:201,2:202,2:204,3:303,3:304"><img src="image/4.jpg"></li>
</ul>
<p class="data_tag">
    <span data-name="color" data-value="1:101">101  </span>
    <span data-name="color" data-value="1:102">102  </span>
    <span data-name="color" data-value="1:103">103  </span>
    <span data-name="color" data-value="1:104">104  </span>
</p>
<p class="data_tag">
    <span data-name="rom" data-value="2:201">16G</span>
    <span data-name="rom" data-value="2:202">8G</span>
    <span data-name="rom" data-value="2:203">32G</span>
    <span data-name="rom" data-value="2:204">64G</span>
</p>
<p class="data_tag">
    <span data-name="love" data-value="3:301">  </span>
    <span data-name="love" data-value="3:302">  </span>
    <span data-name="love" data-value="3:303">  </span>
    <span data-name="love" data-value="3:304">   </span>
</p>
</body>
</html>
<script> $(function(){ var zoom = $("#zoom"), zoomImg = zoom.children('li'); var dataTag = $(".data_tag"); var zoomImgVal = [], //             tagValue = []; //           zoomImg.each(function(index){ var img = $(this), value = img.data('value'); zoomImgVal[index]=[]; var arr = value.split(","); for (var i = 0; i < arr.length; i++) { zoomImgVal[index][i]=arr[i]; }; }); dataTag.each(function(tagIndex){ var tag = $(this), tagSpan = tag.children('span'); tagValue[tagIndex] = ''; tagSpan.each(function(spanIndex){ $(this).click(function() { var span = $(this), value = span.data('value'); tagValue[tagIndex] = value; span.addClass('on').siblings('span').removeClass('on'); var realValue = []; for (var i = 0; i < tagValue.length; i++) { if (tagValue[i]!='') { realValue.push(tagValue[i]); } }; for (var i = 0; i < zoomImgVal.length; i++) { arr_contrast(zoomImgVal[i],realValue) ? zoomImg.eq(i).show() : zoomImg.eq(i).hide(); }; }); }); }); function arr_contrast(a,b){ return a.filter(function(item){ return b.indexOf(item) !== -1 }).length === b.length } }) </script>

<style> *{font-weight: normal;line-height: 1;list-style: none;margin: 0;padding: 0;} body {font-family: tahoma,"    ";text-align: center;} li {display: inline-block;} img {width: 200px;} p {display: block;clear: both;padding: 10px;} span {padding: 10px;border: 3px solid #ddd;display: inline-block;cursor: pointer;} span.on {background: #f60;border: 3px solid #f60;color: #fff;} </style>

[ZZ]スタックとスタックの違い

Pythonを学んでどんな仕事に従事することができて、大体給料はいくらです