实用代码-JavaScript实用小函数一枚(深入对象取值)

简介: 适用场合描述 做web开发时使用JSON作为数据传输格式时,如果服务器端传回的JSON数据对象层次嵌套过深。比如下面这段: 服务器端返回的数据 1 var data = { 2 a: { 3 b: { 4 c: [123, 456, ...

适用场合描述

做web开发时使用JSON作为数据传输格式时,如果服务器端传回的JSON数据对象层次嵌套过深。比如下面这段:

服务器端返回的数据
1 var data = {
2     a: {
3         b: {
4             c: [123, 456, { 
5                 d: [789, "想要的数据"]
6             }]
7         }
8     }
9 };

我如果想取出最内部d的第二个元素,通常会这么些写:
data.a.b.c[2].d[1];
面对这么多"."心里总是胆战心惊怦怦直跳的说。如果碰巧c里面没有第二个元素,那等着吧,浏览器会毫不犹豫的给你个大红X

异常

此小函数或许会让你恢复内心些许平静

我的解决办法

因为JavaScript中的对象字段存取可以像数组一样用[]来做,那为何不把"data.a.b.c[2].d[1]"分割开来,一个一个遍历用数组方式去取呢,取一个判断一个,防止用空对象去去读数据,所以萌生此法,请看代码:

Object.prototype.TryGetValue
 1 Object.prototype.TryGetValue = function (filedOrIndexExpression, 
 2                                                             defaultValue) {
 3     //解析得到的字段或数组下标数组
 4     var filedOrIndexs = [];
 5     //返回值
 6     var currentValue = this;
 7     //如果不是Object或者数组则直接返回
 8     if (this.constructor != Object
 9         && this.constructor != Array) {
10         return currentValue;
11     }
12     //判断属性路径参数
13     if (typeof filedOrIndexExpression != "string") {
14         throw new Error("路径表达式必须是字符串!");
15     }
16     //分割出字段或数组下标
17     filedOrIndexs = filedOrIndexExpression.split(".") || [];
18     //遍历字段或数组下标
19     for (var i = 0; i < filedOrIndexs.length; i++) {
20         var currentFiledOrIndex = filedOrIndexs[i];
21         //如果等于默认值了,说明替换时已经无值可替换,已被设置为默认值
22         //故返回默认值,退出函数
23         if (currentValue === defaultValue) {
24             return defaultValue;
25         }
26         //替换当前值
27         currentValue = currentValue[currentFiledOrIndex] || defaultValue;
28     }
29     return currentValue;
30 };

此方法接受两个参数,第一个是字段和数组下标的混合表达式,说白了就是用来"."分割的字符串,第二个参数是如果去不到数据时返回的默认值,如果不写则为undefined。一开始的想法是字段和数组下标分开处理,被正则折磨了半天也没有个结果来(分割[和]时)。突然觉得自己犯2了,,,都准备用数组方式取字段了,还区分个毛线。。。

DEMO和说明

DEMO
1 //使用是不关你是数组还是字段,一律用"."表示
2 var mydata = data.TryGetValue("a.b.c.2.d.1", "");
3 alert(mydata); //弹出"想要的数据";
4 
5 //由于最内部的数组没有以2为下标的元素,故会返回默认值
6 mydata = data.TryGetValue("a.b.c.3.d.1", false);
7 alert(mydata); //弹出"false";

哈哈,大功搞成,再也不用怕某个对象为null而引起的异常了。有点遗憾的是[和]处理不好,使得第一个参数"a.b.c.2.d.1"看起来没有"a.b.c[2].d[1]"更明了。会这个的指点下小弟。先谢谢了!

作者: Blackheart
目录
相关文章
|
9天前
|
JavaScript
短小精悍的js代码
【10月更文挑战第17天】
111 58
|
1天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
11 4
|
3天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
31 6
|
9天前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
11天前
|
存储 JavaScript 前端开发
JS函数提升 变量提升
【10月更文挑战第6天】函数提升和变量提升是 JavaScript 语言的重要特性,但它们也可能带来一些困惑和潜在的问题。通过深入理解和掌握它们的原理和表现,开发者可以更好地编写和维护 JavaScript 代码,避免因不了解这些机制而导致的错误和不一致。同时,不断提高对执行上下文等相关概念的认识,将有助于提升对 JavaScript 语言的整体理解和运用能力。
|
17天前
|
JavaScript 前端开发 开发者
如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。
【10月更文挑战第9天】随着前端开发技术的发展,代码规范和格式化工具变得至关重要。本文介绍如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。通过安装插件、配置 ESLint 和 Prettier,以及设置 VSCode,实现代码实时检查和格式化,确保代码风格一致。
12 2
|
18天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升代码质量和团队协作效率。
【10月更文挑战第8天】本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升代码质量和团队协作效率。通过安装 VSCode 插件、配置 ESLint 和 Prettier,实现代码规范检查和自动格式化,确保代码风格一致,提高可读性和维护性。
25 2
|
18天前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
24 1
|
19天前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
14 2
|
14天前
|
存储 JavaScript 前端开发
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
12 0