数组的解构、对象的解构、对象的序列化、使用JSON进行深复制、Map、Map补充、Set——内建对象

目录

一、数组的解构

二、对象的解构

三、对象的序列化

四、使用JSON进行深复制

五、Map

六、Map补充

七、Set

一、数组的解构

因为不加分号而报错的情况，

        1.立即执行函数

        2.开头直接写 [ xxx ]，会被认为是上条语句的索引而报错，解决办法是在上条语句后加；或者；[xxx]

数组的解构：

        [变量名] = 数组    或  let [变量名] =数组 //声明同时解构赋值

解构时，

        1.变量多而元素少时，没有的为undefined，对于变量有默认值时，没有则为默认值，有则改变

        2.变量少而元素多时，按序赋值

        3.可以使用...变量名 来设置获取多余的元素

	<script>		
		const arr = ['孙悟空','猪八戒','沙和尚']
		let a,b,c
		// a = arr[0]
		// b = arr[1]
		// c = arr[2]
		[a,b,c] = arr//数组解构赋值
		
        let [d,e,f,g] = ['唐僧','白骨精','蜘蛛精','玉兔精']//声明同时解构
		console.log(a,b,c);//孙悟空 猪八戒 沙和尚
		console.log(d,e,f,g);//唐僧 白骨精 蜘蛛精 玉兔精
		// 注意：会容易报错，因为JS本应该每条语句后都加;,若不加;
		// 此时会自动将console.log(d,e,f,g)[d,e,f,g]视为一个整体，即一个对象的索引xxx[xx]
		
        // 变量多元素少的情况
		;[d,e,f,g] = [1,2,3]
		console.log(d,e,f,g);//1 2 3 undefined
		;[d,e,f = 9,g=10] = [1,2,3]
		console.log(d,e,f,g);//1 2 3 10,有默认值时，但后面赋值时就改变
		
        // 变量少元素多的情况
		let [n1, n2] = [4,6,8,9]
		console.log(n1,n2);//4 6
		;[n1, n2,...n3] = [4,6,8,9]
		console.log(n1,n2,n3);//4 6 (2) [8, 9],解构数组时，可以使用...来设置获取多余的元素
	</script>

可以通过解构快速交换两个变量的值

	<script>		
		function fn(){
			return ['二郎神','猪八戒']
		}
		let [name1, name2] = fn()
		console.log(name1, name2);//二郎神 猪八戒

		// 可以通过解构快速交换两个变量的值
		let a1 = 10
		let a2 = 20
		/*传统的方法交换两个变量值
		let temp = a1
		a1 = a2
		a2 = temp
		*/ 
		;[a1, a2] = [a2, a1]//注意加；，不然会报错，等号左边是两个变量，
							// 等号右边是指新建一个数组[20，10]
		console.log('a1 = ',a1);
		console.log('a2 = ',a2);

		// 将数组中的两个元素调换位置
		const arr2 = ['孙悟空','猪八戒']
		;[arr2[0],arr2[1]] = [arr2[1], arr2[0]]
		console.log(arr2);//(2) ['猪八戒', '孙悟空']
	</script>

数组中可以存储任意类型的数据，也可以存数组

        如果一个数组中的元素还是数组，则这个数组我们就称为是二维数组

使用循环可对二维数组进行遍历，同时也可对二维数组进行解构：

	<script>		
		const arr = [['孙悟空',18,'男'],['猪八戒',28,'男']]//二维数组
		
		console.log(arr);
		console.log(arr[1][0]);//猪八戒
		// 遍历二维数组
		for(let stu of arr){
			for(let v of stu){
				console.log(v);
			}
		}

		// 解构二维数组
		let [[name,age,gender]] = arr
		console.log(name,age,gender);//孙悟空 18 男
		;[[name,age,gender],arr1] = arr
		console.log(name,age,gender,arr1);//孙悟空 18 男 (3) ['猪八戒', 28, '男']
	</script>

二、对象的解构

数组解构用中括号即 [变量名 ]，对象解构用花括号即 {变量名}

注意：当先声明再解构时会报错，因为会将{  }认为是一个代码块，而对代码块赋值则是错误的，解决方法为整体套一个括号（ ）

对象解构时变量名要与属性名一致，

        解构时没有的属性返回Undefined

	<script>		
		const obj = {name:'孙悟空',age:18, gender:'男'}
		// let name = obj.name
		// let age = obj.age
		// let gender = obj.gender

		// 对象的解构
		// let {name,age,gender} = obj//声明变量同时解构对象
		let name, age, gender
		({name, age,gender} = obj)//整体加括号，不然会报错
		console.log(name,age,gender);//孙悟空 18 男

		let {address} = obj
		console.log(address);//undefined,没有的属性返回undefined
		
	</script>

对象解构时变量名要与对象的属性名一致，当不想与属性名一致时，可以为其起别名——使用{属性名：变量名}修改

        对象解构时，可以既起别名，也可以指定默认值

	<script>		
		const obj = {name:'孙悟空',age:18, gender:'男'}
		
		let {name:a, age:b='29', gender:c ,address = '花果山'} = obj
		console.log(a, b, c,address);//孙悟空 18 男 花果山
	</script>

三、对象的序列化

对象的序列化

        - JS中的对象使用时都是存在于计算机的内存中的

        - 序列化指将对象转换为一个可以存储的格式

                在JS中对象的序列化通常是将一个对象转换为字符串（JSON字符串）

        - 序列化的用途（对象转换为字符串有什么用）：

                - 对象转换为字符串后，可以将字符串在不同的语言之间进行传递

                        甚至人可以直接对字符串进行读写操作，使得JS对象可以在不同的语言之间传递

                - 用途：

                        1. 作为数据交换的格式

                        2. 用来编写配置文件（一般只有编写配置文件时才手动编写JSON字符串）

        - 如何进行序列化：

                - 在JS中有一个工具类 JSON (JavaScript Object Notation), JS对象表示法

                - JS对象序列化后会转换为一个字符串，这个字符串我们称其为JSON字符串

                - JSON.stringify( )可以将一个对象转换为JSON字符串

                - JSON.parse( )可以将一个JSON格式的字符串转换为JS对象

        - 也可以手动的编写JSON字符串，在很多程序的配置文件就是使用JSON编写的

        - 编写JSON的注意事项：
                1.JSON字符串有两种类型：

                        JSON对象  { }

                        JSON数组  [ ]

                2.JSON字符串的属性名必须使用双引号引起来，因为其他语言的字符串不一定可以用单引号，但所有语言的字符串都可用双引号引起来

                3.JSON中可以使用的属性值（元素），也就是其他语言都有的

                        - 数字（Number）

                        - 字符串（String）必须使用双引号

                        - 布尔值（Boolean）

                        - 空值（Null）

                        - 对象（Object { })

                        - 数组（Array  [ ])

                4.JSON的格式和JS对象的格式基本上一致的，

                        注意：JSON字符串如果属性是最后一个，则不要再加逗号，

	<script>		
		const obj = {
			name:'孙悟空',
			age:18
		}
		// 将obj转换为 JSON字符串
		const str = JSON.stringify(obj)//JSON.stringify()可以将一个对象转换为JSON字符串

		console.log(obj);//{name: '孙悟空', age: 18}
		console.log(str);//{"name":"孙悟空","age":18}
		console.log(typeof(str));//string
		
		const obj2 = JSON.parse(str)//JSON.parse()可以将一个JSON格式的字符串转换为JS对象
		console.log(obj2);//{name: '孙悟空', age: 18}
		console.log(obj === obj2);//false

		//手动编写JSON字符串
		const str2 = '{"name":"猪八戒","age":28}'
		const str3 = '{}'
		const str4 = '["hello",true,[]]'
		console.log(str2);//{"name":"猪八戒","age":28}
		const obj3 = JSON.parse(str2)//将JSON字符串转换为JS对象
		console.log(obj3);
	</script>

四、使用JSON进行深复制

使用JSON.stringify( )将其转化为JSON字符串，然后再使用JSON.parse( )转换为JS对象，从而完成深复制。

	<script>		
		const obj = {
			name:'孙悟空',
			friend:{
				name:'猪八戒'
			}
		}
		// 对obj 进行浅复制
		const obj2 = Object.assign({},obj)
		obj2.friend.name = '沙和尚'
		console.log(obj);//obj中的friend中的name也修改为"沙和尚",因为其进行的是浅复制
		console.log(obj.friend === obj2.friend);//true

		// 对obj 进行深复制
		const obj3 = structuredClone(obj)
		console.log(obj3 === obj);//false
		console.log(obj3.friend === obj.friend);//false
		obj3.friend.name = '唐僧'
		console.log(obj)//obj中friend中的name没有变为"唐僧"，因为其进行的是深复制

		// 利用JSON来完成深复制
		const str = JSON.stringify(obj)
		const obj4 = JSON.parse(str)
		console.log(obj === obj4);//farse
		console.log(obj.friend === obj4.friend);//farse

		const obj5 = JSON.parse(JSON.stringify(obj))//将其联合在一起写
	</script>

五、Map

Map 

        - Map用来存储键值对结构的数据（key - value）

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

        - Map 和Object的主要区别：

                - Object 中的属性名只能是字符串或符号，如果传递了一个其他类型的属性名，

                        JS解释器会自动将其转换为字符串

                - Map中任何类型的值都可以称为数据的key

创建一个Map:   xxx = new Map( )

属性和方法：

        xxx.size( )  获取xxx中键值对的数量

        xxx.set( key, value )  向xxx中添加键值对

        xxx.get( key) 根据key 获取值

        xxx.delete( key) 删除指定数据

        xxx.has( key) 检查xxx中是否包含指定键

        xxx.clear( ) 删除全部的键值对

	<script>		
		const obj = {
			name:'孙悟空',
			age:18,
			[Symbol()]:'哈哈'			
		}
		console.log(obj);
		const obj2 = {}

		// 创建一个Map
		const map = new Map()
		// 添加键值对
		map.set("name",'孙悟空')
		map.set(obj2,'嘻嘻')//key可以为任何值，如对象obj2
		map.set(NaN,'哈哈')//key可以为任何值，如NaN
		console.log(map);//Map(3) {'name' => '孙悟空', {…} => '嘻嘻', NaN => '哈哈'}
		console.log(map.size);//3
		console.log(typeof(map));//object

		// 根据key获取值
		console.log(map.get("name"));//孙悟空
		console.log(map.get(NaN));//哈哈
		console.log(map.get(obj2));//嘻嘻
		map.delete(NaN)
		console.log(map);//Map(2) {'name' => '孙悟空', {…} => '嘻嘻'}

		console.log(map.has(NaN));//false
		console.log(map.has(obj2));//true
	</script>

六、Map补充

Array.from( xxx )  根据xxx创建一个新数组

将Map转换为数组的方法：(转换为一个二维数组)

        1. Array.from(xxx)

        2.使用展开运算符,[ ...xxx]

还可以直接通过一个二维数组构建Map

遍历Map的方法：

        1.for - of

        2.xxx.forEach((value,key)=>{  })

	<script>		
		const map = new Map()
		map.set("name",'孙悟空')
		map.set("age",18)

		// 将map转换为数组
		const arr = Array.from(map)
		console.log(arr);//[["name",'孙悟空'],["age"，18]]，二维数组

		const arr1 = [...map]//使用展开运算符展开
		console.log(arr1);//[["name",'孙悟空'],["age"，18]]

		// 通过一个二维数组构建Map
		const map2 = new Map([["name","猪八戒"],["age",18],[{},()=>{}]])
		console.log(map2);//Map(3) {'name' => '猪八戒', 'age' => 18, {…} => ƒ}
		
		// 遍历Map方法一
		for(const entry of map){//entry就是map中相应的键值对组成的数组
			const [key,value] = entry//结构
			console.log(entry, key, value);
			// 输出(2) ['name', '孙悟空'] 'name' '孙悟空'
			//    (2) ['age', 18] 'age' 18
		}

		// 遍历Map方法二
		map.forEach((value,key)=>{
			console.log(value,key);
		})

		// 遍历Map所有的key
		for(const key of map.keys()){
			console.log(key);
		}
	</script>

xxx.keys( ) - 获取map 中所有的key

xxx.values( )  -获取map 中所有的value

xxx.entries( )  -获取map 中所有的键值对

七、Set

Set

        - Set 用来创建一个集合

        - 它的功能和数组类似，不同点在于Set 中不能存储重复的数据

        - 使用方式：

                创建:

                        - new Set( )

                        - new Set([...])   根据数组创建一个Set

                方法

                        size 获取数量

                        add( )  添加元素

                        has( )  检查元素

                        delete( ) 删除元素

遍历Set、将Set转换为数组

	<script>
		//创建一个Set 
		const set = new Set()
		// 向set中添加数据
		set.add(10)
		set.add('孙悟空')
		set.add(10)
		console.log(set);
		console.log(set.size);//2

		// 检查是否有指定数据
		console.log(set.has(10));//true
		
		// 遍历Set
		for(const item of set){
			console.log(item);
		}

		// 将Set转换为数组，与Map一样
		// 方法一
		const arr = Array.from(set)
		console.log(arr);//(2) [10, '孙悟空']

		// 方法二
		const arr1 = [...set]
		console.log(arr1);//(2) [10, '孙悟空']

		// 根据数组创建Set,会将数组中的重复元素去除
		const arr2 = [1,2,4,2,6,4,3,2,4,3]
		const set1 = new Set(arr2)
		console.log(set1);//Set(5) {1, 2, 4, 6, 3},为Set
		// 转换为数组
		console.log([...set1]);//(5) [1, 2, 4, 6, 3]
	</script>