大家好，很高兴又见面了，我是"高级前端进阶

JSON

JSON的key具有唯一性

关注我，知码前端 获取更多知识~~，公众号: 知码前端

前言

上节说了json的一些基本知识，现在说一下在js中处理json的两个重要方法JSON.stringify()和JSON.parse()方法。上节也简单说了下这两个方法的基本用法，现在开始说一下这两个方法比较高级的地方，在一些情况下，还是挺有用的。

如果对json还不熟悉的小伙伴，建议先去阅读一下前面的文章。

一、前言

在我们面试过程中，面试官经常会提及到深浅拷贝的问题。想必大多数小伙伴会说到JSON.parse(JSON.stringify(obj))。正好今天我就和大家好好唠一唠这个JSON.stringify。

二、概念

本文最初发布于 jesuisundev.com 网站，经原作者授权由 InfoQ 中文站翻译并分享。

每次用vite创建项目秒建好，前几天用vue-cli创建了一个项目，足足等了我一分钟，那为什么用 vite 比 webpack 要快呢，这篇文章带你梳理清楚它们的原理及不同之处！文章有一点长，看完绝对有收获！

正文

在前端面试当中，经常会被问到浅拷贝与深拷贝的问题，这主要是考察面试者对基本数据类型和引用数据类型的理解，今天我们就通过本篇帮助大家详细理解浅拷贝和深拷贝的概念以及实现的几种方式。

为什么需要深拷贝？

首先我们看看浅拷贝，point指向的是同一个地址，这时我们修改obj2.point的属性时，obj1的point属性也会被修改

再看看深拷贝，point指向的是不同地址，这时我们修改obj2.point的属性时，obj1的point属性不受影响

总结一下

A、安装

npm install ace-builds

B、在uniapp中使用

<template>
	<view class="content">
	   <div id="editor">ssss</div>
	   <button v-on:click="bb">格式</button>
	   <button v-on:click="aa">压缩</button>
	</view>
</template>

<script>
	 import ace from 'ace-builds/src-noconflict/ace';
   import 'ace-builds/src-noconflict/mode-javascript';
	 import 'ace-builds/src-noconflict/mode-golang';
	 import 'ace-builds/src-noconflict/mode-json';
	 import 'ace-builds/src-noconflict/mode-html';
    import 'ace-builds/src-noconflict/theme-monokai';
	 import 'ace-builds/src-noconflict/theme-dracula';
   import 'ace-builds/src-noconflict/ext-language_tools';
	 import 'ace-builds/src-noconflict/ext-beautify';
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		  mounted() {
		    this.initEditor();
		  },
		onLoad() {

		},
		methods: {
			initEditor() {
				    const editor = ace.edit('editor'); // 初始化Ace Editor
             //editor.setTheme("ace/theme/dracula");
				    editor.setTheme("ace/theme/monokai");    //主题
					  editor.session.setMode("ace/mode/json"); //语言类型
				    //editor.session.setMode("ace/mode/golang");
				    //editor.session.setMode("ace/mode/javascript");
				    editor.setValue('{}'); // 设置初始代码值
			},
			bb(){
				const editor = ace.edit('editor'); // 初始化Ace Editor
				editor.session.setMode("ace/mode/json");
				var code =editor.getValue();				
				JSON.stringify(JSON.parse(code), null, 2)
				editor.setValue(JSON.stringify(JSON.parse(code), null, 2));
			},
			aa(){
				const editor = ace.edit('editor'); // 初始化Ace Editor
				editor.session.setMode("ace/mode/json");
				var code =editor.getValue();
				let ss = JSON.stringify(JSON.parse(code))
				editor.setValue(ss);
			}
		}
	}
</script>
<style>
  #editor { width: 100%; height: 700px; font-size: 14px;line-height: 20px;}
</style>

在现代 Web 开发中，数据序列化和反序列化是常见的任务。虽然 JSON.parse()