ImmuableJS 簡單入門用法

時間 2019-11-12

標籤 immuablejs 簡單入門用法简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./lib/immutable.4.0.0.js"></script>
    <title>不可變量</title>
</head>
<body>
    <div id="app"></div>

    <div id="box">
        持久化數據，使用結構共享，immutable對象不可被修改，修改後返回一個新的immutable新對象
    </div>
    <script>
        console.log( Immutable )  
        console.log(Immutable.version,'版本號')
     
        // fromJS 把一個js對象轉換成 immutable 對象
 let imuobj = Immutable.fromJS({name:'lili',age:12,sex:'gril',hobby:['唱歌','跳舞','打豆豆']}) 
        console.log(imuobj)
        
        console.log(imuobj.size)
        console.log(imuobj._root)
        console.log(imuobj._root.entries)
        console.log(imuobj._root.entries.length)

　　　　　 // toJS 把一個 immutable 對象轉換成 js 對象

　 let tojs = imuobj.toJS()

　console.log('tojs',tojs)

</script>
    
</body>
</html>

Map的增刪改查html

// 建立一個map對象
const map = Immutable.Map({name:'lili',age:12,mather:{name:'kate',age:32,height:'178cm'}})
        console.log(map)

        // 增 
        // 方法一
        let map1 = map.set({"other":"hello"})
        console.log(map1)

        // 方法二
        let map2 = map.setIn(["petdog","name"],"哈士奇")
        console.log(map2)
        console.log(JSON.parse(JSON.stringify(map2)))

        // 當對象屬性是一個對象，並未該對象添加多個鍵值對時候
        let map3 = map.setIn(["petcat","name"],"加菲貓").setIn(["petcat","color"],"花色").setIn(["petcat","sex"],"公貓")
        console.log(JSON.parse(JSON.stringify(map3)))


        // 刪除
        // 方法一
        let mapdelete1 = map.delete('name')
        console.log('刪除方法一 : ',JSON.parse(JSON.stringify(mapdelete1))) // {age: 12}

        // 方法二
        let mapdelete2 = map.deleteIn(['name'])
        console.log(JSON.parse(JSON.stringify(mapdelete2)))
        // 刪除對象的屬性是對象時採用此方法比較合適
        let mapdelete3 = map.deleteIn(['mather','age'])
        console.log(JSON.parse(JSON.stringify(mapdelete3)))


        // 修改  
        // 參數一：須要修改的屬性名，參數二是一個函數
        let mapmodify1 = map.update('name',(arg)=>{return arg="LUCY"})
        console.log(JSON.parse(JSON.stringify(mapmodify1)))   

        let mapmodify2 = map.updateIn(['mather','height'],(arg)=>{return arg ="168CM"})
        console.log(JSON.parse(JSON.stringify(mapmodify2)))   

        // 查詢
        let mapget1 = map.get('name')
        console.log(mapget1)  // lili 

        let mapget2 = map.getIn(['mather','height'])
        console.log(mapget2)

List 的增刪改查app

        let list = Immutable.List([1,21,10,45,32])
        console.log(list)
        console.log(list.size) // 5
        console.log(list._tail)
        console.log(list._tail.array)
        
        // 增
        let list1 = list.push(75)
        console.log(list1)

        // 刪除
        let list2 = list.splice(0,1)
        console.log(list2)

        // 查詢
        let list3 = list.toArray()  // toArray 只能轉換一層
        console.log(list3)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。