【JavaScript】6_对象的深复制,Map,Set和Math类

79 阅读1分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第6天,点击查看活动详情

4、深复制

     <script>
         const obj = {
             name: '孙悟空',
             friend:{
                 name:'猪八戒',
             },
         }
 ​
         //对obj进行浅复制
         const obj2 = Object.assign({},obj)
 ​
         //对obj进行深复制
         const obj3 = structuredClone(obj)
 ​
         //利用JSON来完成深复制
         const str = JSON.stringify(obj)
         const obj4 = JSON.parse(str)
 ​
         const obj5 = JSON.parse(JSON.stringify(obj))//与上面两行代码的效果相同
     </script>

5、Map

Map(key-value)

  • Map用来存储键值对结构的数据(key-value)

  • Object中存储的数据就可以认为是一种键值对结构

  • Map和Object的主要区别:

    • Object中的属性名只能是字符串或符号,如果传递了一个其他类型的属性名, JS解释器会自动将其转换为字符串
    • Map中任何类型的值都可以称为数据的key

创建:

new Map()

属性和方法:

  • map.size() 获取map中键值对的数量
  • map.set(key, value) 向map中添加键值对
  • map.get(key) 根据key获取值
  • map.delete(key) 删除指定数据
  • map.has(key) 检查map中是否包含指定键
  • map.clear() 删除全部的键值对
     <script>
         const obj2 = {}
         const obj = {
             'name':'孙悟空',
             'age': 18,
             [Symbol()] : '哈哈',
             [obj2] : '嘻嘻'
         }    
         console.log(obj)
 ​
 ​
         //创建一个Map
         const map = new Map()
         map.set('name','孙悟空')
         map.set(obj2,'呵呵');
         map.set(NaN,'哈哈哈')
 ​
         map.delete(NaN)
         // map.clear()
         
         console.log(map)
         console.log(map.get('name'))//孙悟空
         console.log(map.has('name'))//true
     </script>

image.png

map.keys()

  • 获取map的所有的key

map.values()

  • 获取map的所有的value
     <script>
         const map = new Map()
         map.set('name','孙悟空')
         map.set('age',19)
         map.set({},'呵呵')
 ​
         //将map转换为数组
         // const arr = Array.from(map)
         const arr = [...map]
 ​
         const map2 = new Map([
             ['name','猪八戒'],
             ['age', 18],
             [{},() => {}],
         ]);
 ​
         //遍历map
         for(const [key, value] of map){
             // const [key,value] = entry
             console.log(key,value)
         }
 ​
         map2.forEach((key,value) => {
             console.log(key,value)
         })
 ​
         for(const key of map.keys()){
             console.log(key)
         }
     </script>

image.png

6、Set

Set - Set用来创建一个集合 - 它的功能和数组类似,不同点在于Set中不能存储重复的数据

  • 使用方式: 创建 - new Set() - new Set([...])

    方法 size 获取数量 add() 添加元素 has() 检查元素 delete() 删除元素

     <script>
         //创建一个Set
         const set = new Set()
 ​
         //向set中添加数据
         set.add(10)
         set.add('孙悟空')
         set.add(10)//无法重复添加数据
 ​
         for(const item of set){
             console.log(item)
         }
 ​
         const arr = [...set]
 ​
         const arr2 = [1,2,3,2,1,3,4,5,4,6,7,7,8,9,10]
         const set2 = new Set(arr2)
         console.log([...set2])
     </script>

7、Math

Math

  • Math一个工具类

  • Math中为我们提供了数学运算相关的一些常量和方法

  • 常量: Math.PI 圆周率

  • 方法:

    Math.abs() 求一个数的绝对值

    Math.min() 求多个值中的最小值 Math.max() 求多个值中的最大值 Math.pow() 求x的y次幂 Math.sqrt() 求一个数的平方根

    Math.floor() 向下取整 Math.ceil() 向上取整 Math.round() 四舍五入取整 Math.trunc() 直接去除小数位

    Math.random() 生成一个0-1之间的随机数

     <script>
         let result = Math.abs(10)
         result = Math.abs(-10)//取绝对值
 ​
         result = Math.min(10, 20, 30, 44, 55, -1)
         result = Math.max(10, 20, 30, 44, 55, -1)
         result = Math.pow(4, 2) // 4 ** 2
         result = Math.sqrt(4) // 4 ** .5
 ​
         result = Math.floor(1.2)
         result = Math.ceil(1.2)
         result = Math.round(1.4)
         result = Math.trunc(1.5)
 ​
         for (let i = 0; i < 50; i++) {
             /* 
                 生成0-5之间的随机数
                     Math.random() --> 0 - 1
                     // 生成 0-x之间的随机数:
                         Math.round(Math.random() * x)
                         Math.floor(Math.random() * (x + 1))
 ​
                     // 生成 x-y 之间的随机数
                         Math.round(Math.random() * (y-x) + x)
             // */
             result = Math.round(Math.random() * 5)
             // result = Math.floor(Math.random() * 6)
 ​
             // 1-6
             // result = Math.round(Math.random() * 5 + 1)
 ​
             // 11 - 20
             result = Math.round(Math.random() * 9 + 11)
 ​
             console.log(result)
         }
     </script>