[JAVASCRIPT] MAP TEST(맵 테스트)

1) NewMapTest

 

const NewMapTest = () => {
    let mapData = new Map()
 
    console.log(mapData)
    // 출력 : Set(0) { }
    //        아무런 데이터 값이 없기 때문에 안뜬다.
 
    return (
        <div className="NewMapTest">
            <p>NewMapTest</p>
        </div>
    )
}
 
export default NewMapTest

 

 

 

 

 

 

 

 

2) NewMapInitTest

 

const NewMapInitTest = () => {
    let mapData = new Map(
        [
            ["apple", "red"], ["grape", "purple"]
        ]
    )
 
    console.log(mapData)
    // 출력 : {"apple" => "red", "grape" => "purple"}
    console.log("Size: " + mapData.size)
    // 출력 : 2
 
    return (
        <div className="NewMapInitTest">
            <p>NewMapInitTest</p>
        </div>
    )
}
 
export default NewMapInitTest

 

 

 

 

 

 

 

 

3) MapSetTest

 

const MapSetTest = () => {
    let mapData = new Map(
        [
            ["apple", "red"], ["grape", "purple"]
        ]
    )
 
    console.log(mapData)
    // 출력 : {"apple" => "red", "grape" => "purple"}
 
    mapData.set("test1", "blue")
    mapData.set("test2", "green")
    // set 으로 mapData => ("test1", "blue") ("test2", "green") 추가.
 
    console.log(mapData)
    // 출력 : {"apple" => "red", "grape" => "purple", "test1" => "blue", "test2" => "green"}
    console.log(mapData.get("test2"))
    // 출력 : green // test2 의 속성값을 출력
    console.log(mapData.get("grape"))
    // 출력 : purple // grape 의 속성값을 출력
    console.log(mapData.has("test1"))
    // 출력 : true // set과 map 객체에 주어진 요소가 존재하는지 여부를 판별해 반환
    console.log(mapData.has("apple"))
    // 출력 : true
    console.log(mapData.has("헤헿"))
    // 출력 : false
 
    return (
        <div className="MapSetTest">
            <p>MapSetTest</p>
        </div>
    )
}
 
export default MapSetTest

 

 

 

 

 

 

 

 

4) MapIterationTest

 

const MapIterationTest = () => {
    let mapData = new Map(
        [
            ["apple", "red"], ["grape", "purple"], ["바보", "천!재"], [1, 20]
            // 앞 = key 값  // 뒤 = value 값.
        ]
    )
 
    console.log(mapData)
    // 출력 : {"apple" => "red", "grape" => "purple", "바보" => "천!재", 1 => 20}
 
    var keyIter = mapData.keys()
 
    for (var key of keyIter) {
        console.log(key)
        // 출력 : apple
        //       grape
        //        바보
        //         1
    }
 
    var valueIter = mapData.values()
 
    for (var value of valueIter) {
        console.log(value)
        // 출력 : red
        //       purple
        //       천!재
        //       20
    }
 
    var entryIter = mapData.entries()
 
    for (var entry of entryIter) {
        console.log(entry)
        // 출력 : {"apple", "red"}
        //        {"grap", "purple"}
        //        {"바보", "천!재"}
        //        {1, 20}
    }
 
    mapData.forEach(
        (value, key) =>
            console.log(key + " : " + value)
        // 출력 : apple : red
        //       grap : purple
        //        바보 : 천!재
        //        1 : 20
    )
 
    return (
        <div className="MapIterationTest">
            <p>MapIterationTest</p>
        </div>
    )
}
 
export default MapIterationTest

 

 

 

 

 

 

 

 

5) MapDeleteTest

 

const MapDeleteTest = () => {
    let mapData = new Map(
        [
            ["apple", "red"], ["grape", "purple"]
        ]
    )
 
    console.log(mapData)
    // 출력 : {"apple" => "red", "grape" => "purple"}
 
    mapData.delete("apple")
 
    console.log(mapData)
    // 출력 : {"grape" => "purple"}
 
    mapData.clear()
    // clear 는 모든 값을 지운다.
 
    console.log(mapData)
    // 출력 : { }
 
    let mapData2 = new Map(
        [
            ["apple", "red"], ["grape", "purple"], ["코딩", "천재"]
        ]
    )
 
    console.log(mapData2)
    // 출력 : {"apple" => "red", "grape" => "purple", "코딩" => "천재"}
 
    mapData2.clear()
    console.log(mapData2)
    // 출력 : { }
 
    let mapData3 = new Map(
        [
            ["apple", "red"], [1, 999], ["코딩", "천재"]
        ]
    )
 
    console.log(mapData3)
    // 출력 : {"apple" => "red", 1 => 999, "코딩" => "천재"}
 
    mapData3.delete(1)
 
    console.log(mapData3)
    // 출력 : {"apple" => "red", "코딩" => "천재"}
 
    return (
        <div className="MapDeleteTest">
            <p>MapDeleteTest</p>
        </div>
    )
}
 
export default MapDeleteTest

 

 

 

 

 

 

 

 

베타존 : 네이버쇼핑 스마트스토어