JavaScript巧用对象的引用解决三级联动

在开发过程中，我们经常会有操作需要进行三级联动操作，比较典型的如：省市区的选择，菜单栏的选择等。当我们遇到这个问题的时候，为了便于开发，我们都是通常使用第三方的插件来实现数据的联动效果。这时候按照联动数据，后端往往会给我们一段数据数据格式如图所示：

但当数据到了前端以后，为了方便，前端往往又需要将数据再次遍历一遍，以便将参数的属性名，或者添加额外字段，而后台为了生成这么一种数据格式，也是已经经过一次遍历的。

因此，从方案上来说，最好是一遍解决问题的。而这个遍历由前端完成更为合适一点。

这时候后端给我们的数据格式是这样的。（另外接口）

此时我们需要做的就是根据code 拼接成合适的含有父子关系的数组。根据后端定义，code 长度为 3 时，是第一级，为 6 时为第二级，以此类推。001 的子元素为 001001， 001 的兄弟元素为 002。

遍历的代码比较简单，只是在我没有想到在这个地方，根据 对象变量存储的数据是真实对象所在地址字节时 这个概念来进行遍历的时候。对于如何编写这一函数，我无法进行。

          const arr = [{"code": "001"},{"code": "001001"},{"code": "002"},{"code": "002001"},{"code": "002002"},{"code": "002003"},{"code": "002004"},{"code": "002005"}]//因为是值的引用，所以根据这一存储的原理，每次遍历以后都可以将之前的数据补充完整，所以遍历以便以后，// obj[001]就是code 为001 且包括其所有子元素的一个对象，// obj[001001]就是code 为001001 且包括其所有子元素的一个对象（不包括父元素）// 而我们obj[001]也早已经将数据保存到了resultArr中。这时候resultArr就是最终结果。// （数组也是存储的每个元素的真实所在位置的地址的一个数组）let obj =  new Map()  //以 key :value 的形式，根据code存放每个valuelet resultArr = []arr.map((currentValue, index, array) => {let code = currentValue.codeobj[code] = currentValue//  当code长度为3时，代表为一级目录if (currentValue.code.length === 3) {resultArr.push(obj[code])} else {let auth = currentValue.authlet parentid = currentValue.code.substring(0, currentValue.code.length - 3)  // 获取当前currentValue的父元素的pidif (obj[parentid].list) {obj[parentid].list.push(currentValue)}else {obj[parentid].list = []obj[parentid].list.push(currentValue)}}})console.log(resultArr)

说回原理，代码的原理在于对于对象类数据，值的存储不是存放在栈中，而是存储在堆中，let obj = {} 实际上obj 的真实信息是这个存在与堆中的，而obj实际存储的是这个对象的地址，而使用obj时我们是根据在obj所获取的地址，找到对应的堆数据进行修改。同样的，在上述代码中，我们虽然没有直接修改 resultArr ，但我们通过修改 obj[code] 的值，对于引用obj[code] 的resultArr而言，其内值已经发生变化。简单代码如下

let obj1 = {name:'张三',
}
let obj2 = obj1obj2.name = '李四'
console.log(obj1.name)  // 李四

详细内容可以百度或者谷歌搜索 js对象的赋值的引用

参考资料：JavaScript高级程序设计第四章 4.1.2 复制变量值

转载于:https://www.cnblogs.com/h246802/p/8797070.html

JavaScript巧用对象的引用解决三级联动相关推荐

纯JS省市区三级联动
效果如图所示: HTML Code: [html] view plain copy <html> <head> <script type="text/javas ...
name optimize is not defined 怎么解决_Web前端：怎么在JavaScript中比较对象？
大家好,我来了,本期为大家带来的前端开发知识是"Web前端:怎么在JavaScript中比较对象?",有兴趣做前端的朋友,一起来看看吧! 比较JavaScript中的原始值很简单. ...
JavaScript强化教程——对象的值传递和引用传递
2019独角兽企业重金招聘Python工程师标准>>> 本文为 H5EDU 机构官方 HTML5培训教程,主要介绍:JavaScript强化教程--对象的值传递和引用传递 func ...
JavaScript省市县三级联动-含源代码
目录一.省市县三级联动 1.实现思路 2.实现步骤二.源代码管理 1.HTML显示页面 2.JavaScript核心代码 3.省市县三级地址一.省市县三级联动 1.实现思路 1.创建省市县三级地 ...
创建健壮的isArray()函数（JavaScript中判断对象类型的种种方法）
我们知道,JavaScript中检测对象类型的运算符有:typeof.instanceof,还有对象的constructor属性: 1) typeof 运算符 typeof 是一元运算符,返回结果是一 ...
javascript 数组和对象的浅复制和深度复制 assign/slice/concat/JSON.parse(JSON.stringify())...
javascript 数组和对象的浅度复制和深度复制在平常我们用 '='来用一个变量引用一个数组或对象,这里是'引用'而不是复制下面我们看一个例子引用和复制是什么概念 var arr=[1,2,3, ...
JavaScript 中的对象拷贝(深拷贝、浅拷贝)
对象是 JavaScript 的基本块.对象是属性的集合,属性是键值对.JavaScript 中的几乎所有对象都是位于原型链顶部 Object 的实例. 介绍如你所知,赋值运算符不会创建一个对象的副 ...
对JavaScript内置对象arguments的一些见解
深入理解JavaScript内置对象arguments 这两天有伙伴问到我关于arguments的问题,使我产生了一种arguments对象容易被学习者忽略的想法,想分享一下自己对于JavaScrip ...
回归本源：JavaScript 之中的值和引用
阅读花费时间:2分钟这是一个非常简短的值和引用的解释. 首先,对于每一个JavaScript开发者来说,值(value)和引用(reference)的定义,一般是从一些bug被引出的,而且在面试中也 ...

JavaScript巧用对象的引用解决三级联动

JavaScript巧用对象的引用解决三级联动相关推荐

最新文章

热门文章