javascript学習ノート(3)--map&set&元素遍歴&filter

JavaScriptのデフォルトのオブジェクト表示方式{}は他の言語のMapまたはDictionaryのデータ構造と見なすことができます.つまり、キーのセットは正しいですが、JavaScriptのオブジェクトには小さな問題があります.キーは文字列でなければなりません.しかし、実際にはNumberや他のデータタイプがキーとして使用されるのも非常に合理的です.この問題を解決するために、ES 6仕様は新しいデータタイプMapを導入しました.

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]); //   object  
m.get('Michael'); // 95 
var m = new Map(); //  Map 
m.set('Adam', 67); //     key-value 
m.set('Bob', 59); 
m.has('Adam'); //     key 'Adam': true 
m.get('Adam'); // 67 
m.delete('Adam'); //   key 'Adam' 
m.get('Adam'); // undefined    

一つのキーは一つのvalueにしか対応できないので、一つのキーを何度もvalueに入れて、値を後の値に更新します.

var m = new Map(); 
m.set('Adam', 67); 
m.set('Adam', 88); 
m.get('Adam'); //88

SetはMapと同様に、keyのセットでもありますが、valueは記憶されていません.keyは重複できないので、Setでは重複値がなく、重複要素はSetで自動的にフィルタリングされてセットを作成します.入力としてArayを提供する必要があります.あるいは直接に空セットを作成します.

var s1 = new Set(); //  Set 
var s2 = new Set([1, 2, 3]); //  1, 2, 3 
var s = new Set([1, 2, 3, 3, '3']); 
s; // Set {1, 2, 3, "3"}"3" 3  

add(key)法によりSetに要素を追加できます.繰り返し追加できますが、効果はありません.

 s.add(4) 
 s ;//{1, 2, 3, 4} 
s.add(4) 
 s ;//{1, 2, 3, 4} 

delete(key)方法で要素を削除できます.

var s = new Set([1, 2, 3]); 
s; // Set {1, 2, 3} 
s.delete(3); 
s; // Set {1, 2} 

コンソールがエラー情報を返します.Error:Not a number

throw 'Not a number'; //Error:Not a number

Arayは、下付きループを採用することができます.MapとSetを遍歴しても、下付き集合タイプのために使用できません.ES 6標準は、新しいiterableタイプを導入しました.Aray、Map、Setは、すべてiterableタイプの集合に属しています.新しいfor...ofサイクルでforを巡回します.使い方は以下の通りです.

var a = ['A', 'B', 'C']; 
var s = new Set(['A', 'B', 'C']); 
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]); 

for (var x of a)
 {  console.log(x); };//A B C

for (var x of s) {console.log(x); };//A B C

for (var x of m) {console.log(x[0] + '=' + x[1]); };//1=x 2=y3=z

Mapが遍歴している時、各Mapの要素は相当します.一つはKeyで、一つはValueで、x[0]とx[1]に対応しています.
for...ofサイクルとfor...inサイクルはどう違いますか?for...inサイクルは、歴史的なレガシー問題のため、実際にはオブジェクトの属性名(key)であるAray配列も実際にはオブジェクトであり、各要素のインデックスは属性として扱われています.Arayオブジェクトに手動で追加の属性を追加した後、for...inサイクルは予期せぬ効果をもたらします.

var a = ['A', 'B', 'C'];
a.name="hello";
for (var x in a) { console.log(x); }0 1 2 name
for (var x in a) { console.log(a[x]); };//AB C hello

for…inサイクルはnameを含めますが、Arayのlength属性は含まれていませんので、for…inサイクルを使うと問題が発生する可能性があります.
for…ofサイクルはこれらの問題を完全に修復し、それは自分の元素だけを集めて循環します.

var a = ['A', 'B', 'C']; 
a.name = 'Hello'; 
for (var x of a) { console.log(x); };//A B C

より良い方法は、直接iterableに内蔵されたforEach方法を使用して、関数を受信し、反復ごとに自動的にこの関数をアラーを例に戻します.これは、arrayを構成するのがelement(要素自体)、index(インデックス)、array(配列オブジェクト)function()内の順序が要素、索引、配列、入力された変数名によって変更できます.(ここは理解しやすいだけです.)

var a = ['A', 'B', 'C']; 
a.forEach(function (element, index, array)
 { 
console.log(element);
}); 
A 
B 
C

a.forEach(function (element, index, array)
 { 
console.log(index);
});
0 
1 
2

a.forEach(function (element, index, array)
 { 
console.log(array);
});
Array(3) [ "A", "B", "C" ]
Array(3) [ "A", "B", "C" ]
Array(3) [ "A", "B", "C" ]

SetはArayと似ていますが、Setにはインデックスがありません.したがって、コールバック関数の最初の二つのパラメータは要素自体です.ここの変数名も同じです.みんなが理解しやすいだけで、変更できます.

 var s = new Set(['A', 'B', 'C']); 
 s.forEach(function (element, sameElement, set) { console.log(element); });

Mapのコールバック関数パラメータは、value、key、map自体となりますが、同じ変数名は分かりやすいだけです.

 var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]); 
 m.forEach(function (value, key, map) { console.log(value); }); 

いくつかのパラメータに興味がない場合、JavaScriptの関数呼び出しはパラメータが一致する必要がないので、それらを無視することができます.ただArayのelementを得る必要があります.

var a = ['A', 'B', 'C']; 
a.forEach(function (element) { console.log(element); })

filterも一般的な動作であり、Arayのいくつかの要素をフィルタリングして、残りの要素とmap()と同様にArayのfilter()も関数を受信して、map()とは違って、filter()は入力された関数を順番に各要素に作用して、帰り値によってtrueかfalseかによって、この要素を保留するかそれとも廃棄するかを決定します.
例えば、一つのArayでは偶数を削除し、奇数だけ残します.

 var arr = [1, 2, 4, 5, 6, 9, 10, 15]; 
 var r = arr.filter(function (x) { return x % 2 !== 0; });
 r;//Array(4) [ 1, 5, 9, 15 ]
 arr;//Array(8) [ 1, 2, 4, 5, 6, 9, 10, 15 ] 

x&2!==0がtrueに戻ると奇数となり、偶数ならfalseに戻りますが、arrは変わりません.
Arayの空の文字列を削除します.まず、trim関数trimを説明します.文字列の先頭のスペースを削除します.

var  str="    Noob  ";
str.trim();//"Noob"

javascriptの中にはいくつかの先天的なfalseの常量null、undefined、'、''0があります.だから時々arrayの中に現れたら削除したいかもしれません.

var arr = ['A', '', 'B', null, undefined, 'C', ' ']; 
var r = arr.filter(function (s) { return s});
r;//Array(4) [ "A", "B", "C", " " ]        ，       

また、上に出てくる5つはfalseで、具体的には違いがあります.

""==false;//true
!null;//true
null==false;//false
!undefined;//true
undefined==false;//false
''==false;//true
0==false;//true

“”0は直接==falseですが、null、undefinedはfalseに等しくないです.彼らはまだ自分の意味があります.しかし、後はtrueに等しいです.いくつかの戻り値の中でfalseと等価になると考えられます.例えば、ここでは帰り値trueとfalseによって取捨選択します.盲目的に推測して実現する原理の中で逆を取る必要があります.でないと、undefinedとnullも同じです.私達は目を覚まして、その後nullとundeifnedを判断する時はやはり逆を取る必要があります.
しかし、時には、私達はすべてスペースと空の文字列だけを取り除きたいです.nullとundefiendはまだ使えます.

var arr = ['A', '', 'B', null, undefined, 'C', ' ']; 
var r = arr.filter(function (s) { return String(s).trim();  });
r;//Array(5) [ "A", "B", null, undefined, "C" ]

ここでtoStringを使わないでください.nullとundefinedはtoStringという属性がないからです.

String(null);//"null"
String(undefined);//"undefined"

filter()が受信したコールバック関数は、実際には複数のパラメータがあります.通常は最初のパラメータだけを使用して、Arayを表す要素コールバック関数は他の2つのパラメータも受信できます.要素の位置と配列自体を表します.

var arr = ['A', 'B', 'C']; 
var r = arr.filter(function (element, index, self) { console.log(element); 
console.log(index); 
console.log(self); 
return true; }); 
A 
0 
Array(3) [ "A", "B", "C" ]
B 
1 
Array(3) [ "A", "B", "C" ]
C 
2 
Array(3) [ "A", "B", "C" ]

r
Array(3) [ "A", "B", "C" ]

各要素の順番に従って順次実行して、arrも繰り返し出力されました.上のForEachに似ていますが、後はreturnを加えます.filterの本職のためです.
filterを利用して、Arayの重複要素indexOf()を除去して、前のセクションで先ほど話しました.指定された文字列または文字の出現位置を検索して、最初の値を返します.

var arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry']; 
var r = arr.filter(function (element, index, self) { return self.indexOf(element) === index; }); 

r
Array(5) [ "apple", "strawberry", "banana", "pear", "orange" ]

ここのindexOfは最初のインデックスだけを返すので、要素が最初に現れたときだけ残します.後に繰り返し出てくるものはフィルタにかけられます.