JS配列から重複を削除する方法は何ですか?

1.インデックスの

  • 定義:
    indexOf() メソッドは、文字列内で最初に出現した指定された文字列値を返します。一致する文字列が見つからない場合は、-1 が返されます。注: IndexOf() メソッドでは大文字と小文字が区別されます。
  • 構文:
    string.indexOf(searchvalue,start)//;検索値が必要です。searchvalue オプションのパラメータ。
  • 戻り値:
    数値 //指定された文字列の最初の出現を検索します。一致する文字列が見つからない場合は、-1 が返されます。
  • 例:
js
复制代码
//indexOf
var str="Hello world, welcome to the universe.";
var n=str.indexOf("e");
//去重
const arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', {}, {}];
var newArr = [];
arr.forEach((key,index)=>{
    if(newArr.indexOf(key) === -1){
        newArr.push(key)
  }        
})
console.log(newArr);// [1, '1', 17, true, false, 'true', 'a', {}, {}]

2. 新しい Set()

  • 意味:

ES6 は新しいデータ構造 Set を提供します。配列に似ていますが、メンバーの値は一意であり、重複する値はありません。Set 自体は Set データ構造を生成するために使用されるコンストラクターです。

  • 例:
js
复制代码
let arr = [1,1,2,2,3,3];
let set = new Set(arr);
let newArr = Array.form(set);   //Array.from方法可以将Set结构转为数组。
console.log(newArr);   //[1,2,3]
  • Set オブジェクトのその他のメソッド:
方法 説明する
追加 値を追加し、Set オブジェクト自体を返します。インスタンス内に既に存在する要素を追加する場合、セットは追加を処理しません。 let list = new Set(arr); list.add(5).add(2);//配列の長さは 4 [1,2,3,5]
クリア すべてのキーと値のペアを削除します。戻り値はありません。 list.clear();
消去 キーを削除し、値 true を返します。削除に失敗した場合は false を返します list.delete(3);
もっている キーが現在の Set オブジェクトにまだ存在するかどうかを示すブール値を返します。 list.has(2);
それぞれに 各要素に対して指定された操作を実行する list.forEach((val,key) => {console.log(key + ':' + val); //1:1 2:2 3 })
キー 各要素に対して指定された操作を実行し、キー名を返します。 for(set.keys() のキーを許可) {console.log(key);}
価値観 各要素に対して指定された操作を実行し、キー値を返します。 for(set.values() の値を設定) {console.log(value);}

3. new Map()

  • それは何ですか?:
    マップ データ構造は es6 の新しい構文であり、その本質もキーと値のペアですが、そのキーは通常のオブジェクト文字列に限定されません。
    マップのデータ構造: キーと値のペアを持つ構造のセットです。パラメータの順序 (キー:値) に注意してください。キーは一意であり、値は不要で反復可能です。

  • 書き方:

js
复制代码
//1
var m = new Map([['Lily',12],['Bob',15],['Amy',13]]);
//2
var scoreList = [
{name:'Lily',age:12,score:98},
{name:'Bob',age:15,score:95},
{name:'Amy',age:13,score:99},
]
  • 例:
js
复制代码
let list = ['你是最棒的2', 8, 8, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 1, 2, 3, 4, 5, 6, 7, 8, '你是最棒的2',]
let newList3 = [];
let map = new Map();
// 如果map.has指定的item不存在,那么就设置key和value 这个item就是当前map里面不存在的key,把这个item添加到新数组
// 如果下次出现重复的item,那么map.has(item等于ture 取反 !map.has(item)  不执行
list.forEach((item) => {
    if(!map.has(item)){
        map.set(item,true)
        newList3.push(item)
    }
})
console.log('newList3', newList3);//newList3 (9) ["你是最棒的2", 8, 1, 2, 3, 4, 5, 6, 7]
  • Map オブジェクトのその他のメソッド:
方法 説明する
セット 新しいキー値を追加 var mymap = 新しい Map(); mymap.set('名前','エイミー')
得る マップ内のキーの値を取得します mymap.get('名前');
もっている マップにこのキーはありますか? mymap.has('名前');
消去 マップの要素を削除する mymap.delete('名前');
クリア クリアマップ mymap.clear();
サイズ属性 マップのメンバーの数を返します。 マイマップのサイズ;

4.filter() +indexOf

  • 定義: filter() は配列をフィルタリングするために使用されます。
  • 使用法: filter() メソッドは新しい配列を作成します。新しい配列内の要素は、条件を満たす指定された配列内のすべての要素をチェックすることによってチェックされます。- 注: filter() は空の配列を検出せず、元の配列を変更しません。
  • 文法:array.filter(function(currentValue,index,arr){},thisValue);
  • 戻り値: 条件を満たすすべての要素を含む配列を返します。一致する要素がない場合は、空の配列が返されます。
js
复制代码
//filter
let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 8, 9, 2];
let res = nums.filter((num) => {
    return num < 5;
});
console.log(res);  // [1, 2, 3, 4, 2]

//去重
 let res = nums.filter((item,index) => {
    return nums.indexOf(item) === index;
})
console.log(res);  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

5.reduce() + インクルード

①reduce();
  • 定義と使用法:
    reduce() メソッドは関数をアキュムレータとして受け取り、配列内の各値 (左から右へ) が減算され、最終的に値が計算されます。reduce() は関数を構成するための高階関数として使用できます。注:reduce() は空の配列に対してコールバック関数を実行しません。
  • 文法:
    array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
  • パラメータ:
    function(total,currentValue, index,arr)必須。配列の各要素を実行するために使用される関数。関数パラメータ: 合計。必須。初期値、または計算完了後の戻り値。currentValue は必須です。現在の要素。currentIndex はオプションです。現在の要素のインデックス。arr はオプションです。現在の要素が属する配列オブジェクト。
    initialValueオプション。関数に渡される初期値。
  • 例:
js
复制代码
 //html
 <button onclick="myFunction()">点我</button> 
 <p>数组元素之和: <span id="demo"></span></p>
 //js 四舍五入后计算数组元素的总和:
 var numbers = [15.5, 2.3, 1.1, 4.7];  
 function getSum(total, num) {
     return total + Math.round(num);
 }
 function myFunction(item) {
     document.getElementById("demo").innerHTML = numbers.reduce(getSum, 0);
 }
② include();
  • 定義と使用法:
    include() メソッドは、文字列に指定された部分文字列が含まれているかどうかを判断するために使用されます。一致する文字列が見つかった場合は true を返し、それ以外の場合は false を返します。include() メソッドでは大文字と小文字が区別されます。
  • 文法:
    string.includes(searchvalue,start)
  • パラメータ:
    searchvalue必須。検索する文字列。startオプションで、検索を開始する場所を設定します。デフォルトは 0 です。
  • 戻り値:
    ブール値。一致する文字列が見つかった場合は true を返し、それ以外の場合は false を返します。
  • 例:
js
复制代码
// 判断数组中是否包含某个元素
var arr = [1, 2, 3, 4, 5];
var result1 = arr.includes(3); // true
var result2 = arr.includes(6); // false
console.log(result1);
console.log(result2);
③ 重複を削除する
  • このメソッドは、配列内の各要素に対して指定したリデューサー関数を (昇順で) 実行し、その結果を 1 つの戻り値に要約します。
  • 例:
js
复制代码
 let arr = [1,3,5,3,5]
    let newArr = [];
    let unique = (arr)=>{
        let newArr = [];//新数组,用来接管不反复的数组
        for(var i=0; i<arr.length; i++){
            if(! newArr.includes(arr[i])){
                newArr.push(arr[i]);
            }
        }
        return newArr;
    }
    console.log(unique(arr));

js開発についてさらに詳しく知りたい場合は、CRMEBオープンソースモールのソースコードをダウンロードして勉強してください。

おすすめ

転載: blog.csdn.net/CRMEB/article/details/133360325