「javascript高級プログラム設計」学習ノート

7259 ワード
前端の民謡に注目し、より多くのオリジナル技術記事を読む.
Map
  • Mapは、ECMAScript 6の新規な特性であり、そのほとんどの特性はObjectタイプによって
    • を実現することができます.
    関連コード→
    基本API
  • newキーワードとMapコンストラクタを使用して空マッピング
    • を作成することができます.
    const m = new Map()
console.log(m) // Map(0) {}
  • は、キー／値対配列
    • を含む必要がある、Mapコンストラクターに反復可能なオブジェクトを入力することができる.
    //          
const m1 = new Map([
  ['key1', 'val1'],
  ['key2', 'val2'],
  ['key3', 'val3'],
])
console.log(m1) // Map(3) { 'key1' => 'val1', 'key2' => 'val2', 'key3' => 'val3' }

//            
const m2 = new Map({
  [Symbol.iterator]: function* () {
    yield ['key1', 'val1']
    yield ['key2', 'val2']
    yield ['key3', 'val3']
  },
})
console.log(m2) // Map(3) { 'key1' => 'val1', 'key2' => 'val2', 'key3' => 'val3' }
  • 初期化後、set()を用いてキー/値ペアを追加し、get()とhas()を用いて照会し、size属性を通じてマッピング中のキーパッドの数を取得し、delete()とclear()を用いて値
    • を削除することができる.
    const m3 = new Map()
console.log(m3.size) // 0

m.set('firstName', 'Matt').set('lastName', 'Frisbie')
console.log(m.has('firstName')) // true
console.log(m.get('firstName')) // 'Matt'
console.log(m.size) // 2

m.delete('firstName') //        
console.log(m.has('firstName')) // false
console.log(m.get('firstName')) // undefined
console.log(m.has('lastName')) // true
console.log(m.size) // 1

m.clear() //        
console.log(m.has('firstName')) // false
console.log(m.has('lastName')) // false
console.log(m.size) // 0
  • set()方法は、マッピング・インスタンスに戻るので、複数の動作をつなぎ合わせて、初期化から追加キー／値ペアにすることができる.
    const m4 = new Map().set('key1', 'val1')
console.log(m4) // Map(1) { 'key1' => 'val1' }
  • とobjectとは、キーとして数値、文字列または記号のみを使用することができ、Mapは、任意のJSデータタイプを構築
    • として使用することができる.
    const m5 = new Map()

const functionKey = function () {}
const symbolKey = Symbol()
const objectKey = new Object()

m5.set(functionKey, 'functionValue')
  .set(symbolKey, 'symbolValue')
  .set(objectKey, 'objectValue')

console.log(m5.get(functionKey)) // 'functionValue'
console.log(m5.get(symbolKey)) // 'symbolValue'
console.log(m5.get(objectKey)) // 'objectValue'
  • は、Objectと同様に、キーまたは値がオブジェクトまたは他の「セットタイプ」であれば、キーまたは値の内容または属性が修正されると、マッピングも影響を受ける.
    const m6 = new Map()

const objKey = {},
  objValue = {},
  arrKey = [],
  arrValue = []

m6.set(objKey, objKey)
m6.set(arrKey, arrValue)
console.log(m6) // Map(2) { {} => {}, [] => [] }

objKey.foo = 'foo'
objValue.bar = 'bar'
arrKey.push('foo')
arrValue.push('bar')
console.log(m6) // Map(2) { { foo: 'foo' } => { foo: 'foo' }, [ 'foo' ] => [ 'bar' ] }
console.log(m6.get(objKey)) // { foo: 'foo' }
console.log(m6.get(arrKey)) // [ 'bar' ]
    順序と反復
  • はObjectと違って、キーパッドの挿入順序(Objectは無秩序)を維持し、挿入順に反復動作を実行することができる.
  • マッピング・インスタンスは、挿入順序でMapの形の配列
    • を生成することができる、1つのローズマリーIteratorを提供することができる.
  • は、[key,value]方法またはentries()属性によって、このスキニージェネレータ
    • を取得することができる.
    const m7 = new Map([
  ['key1', 'val1'],
  ['key2', 'val2'],
  ['key3', 'val3'],
])
console.log(m7.entries === m7[Symbol.iterator]) // true

for (let pair of m7.entries()) {
  console.log(pair)
  /* 
    [ 'key1', 'val1' ]
    [ 'key2', 'val2' ]
    [ 'key3', 'val3' ]
  */
}
for (let pair of m7[Symbol.iterator]()) {
  console.log(pair)
  /* 
    [ 'key1', 'val1' ]
    [ 'key2', 'val2' ]
    [ 'key3', 'val3' ]
  */
}
  • は、マッピング・インスタンスに直接拡張動作を使用して、マッピングを行列
    • に変換することができる.
    console.log([...m7]) // [ [ 'key1', 'val1' ], [ 'key2', 'val2' ], [ 'key3', 'val3' ] ]
console.log(...m7) // [ 'key1', 'val1' ] [ 'key2', 'val2' ] [ 'key3', 'val3' ]
  • ローズマリーを使用しない場合は、Symbol.iterator方法を呼び出してコールバックし、各キーのペアを順次繰り返すことができます.
  • コールバックの第2のオプションパラメータは、コールバック内部のthisの値
    • を書き換えるためのものである.
    m7.forEach((val, key) => {
  console.log(`${key}->${val}`)
  /* 
    key1->val1
    key2->val2
    key3->val3
  */
})
  • は、forEach(callBack,opt_thisArg)のローズマリー方法と同様に、ArrayのMapおよびkeys()は、それぞれ挿入順序で生成されたキーおよび値のローズマリー
    • を返す.
    for (let key of m7.keys()) {
  console.log(key)
  /* 
    key1
    key2
    key3
  */
}
for (let value of m7.values()) {
  console.log(value)
  /* 
    val1
    val2
    val3
  */
}
  • 重ね着時、キーと値は変更できます.異なるタイプのキーまたは値の変更はマッピングに異なる影響を与えます.
  • 元の値のキーまたは値を変更したり、参照値のキーまたは値を書き換えたりしても、マッピング内部の参照は変更できません.マッピングは影響を受けません.
  • は、参照値のキーまたは値の属性を変更し、マッピング内部の参照は変更されておらず、マッピングは影響を受けない.
    • /*             */
const m8 = new Map([['key1', 'val1']])

for (let key of m8.keys()) {
  key = 'newKey' //    
  console.log(key) // 'newKey'
  console.log(m8.get('key1')) // 'val1'，           
  console.log(m8.get('newKey')) // undefined
  console.log(m8.get(key)) // undefined
}
console.log(m8) // Map(1) { 'key1' => 'val1' }，      

/*          */
const keyObj = { id: 1 }
const m9 = new Map([[keyObj, 'val2']])

for (let key of m9.keys()) {
  key.id = 2 //       
  console.log(key) // { id: 2 }
  console.log(m9.get(key)) // val2，          ，               
}
console.log(m9) // Map(1) { { id: 2 } => 'val2' }，     

for (let key of m9.keys()) {
  key = { id: 3 } //    
  console.log(key) // { id: 3 }
  console.log(m9.get(key)) // undefined，           
}
console.log(m9) // Map(1) { { id: 2 } => 'val2' }，
    ObjectかそれともMapかを選択します.
  • 固定サイズのメモリは、MapがObjectより約50%のキーペア
    • を記憶します.
  • は大量の挿入操作に関連しています.Mapの性能はより良いです.
  • は大量の検索操作に関連し、Objectは
    • に適合している.
  • 大量削除操作に関連しています.間違いなくMap
    • を選択します.
    まとめ&質問
    秩序立っている
    キー
    Object
    いいえ、
    数値、文字列、記号
    Map
    はい、
    任意のJSデータタイプ
  • Mapはどのタイプですか?どのようにMapタイプを作成しますか?初期化後はどのような操作ができますか?
  • Mapはキーとしてどのタイプのデータを使用できますか?キーや値がオブジェクトの場合、その内容や属性が変更された場合、マッピングは影響を受けますか?
  • MapとObjectはどのような違いがありますか?
  • はどうやってMapを行列に変換しますか?どのようにMapの各キーを取得しますか?個別のキーまたは値は?
  • は、Map通過時に内部のキーまたは値を修正できますか?修正後はMapに影響がありますか?
    • nodejsインタラクティブライブラリ--hash-sum,deepmergeとyaml-front-mater