JavaScript服务器端开发技术(对象属性的枚举与查询)

既然对象是属性的集合,那么检测与枚举集合中的属性就是一项重要任务。对此,我们来分别看一下ES3ES5提供的解决方案。

wKioL1VcovzDvwUIAAFECUBZy3E663.jpg

1)     ES3枚举方案

示例代码:

var contacts={

    ID:[0,1,2,3,4,5],

    names:["Zero","One","Two","Three","Four","Five"],

    addresses:[

    {

        Street:"ABC",

        State: "0"

    },

    {

        Street:"ABC",

        State: "1"

    },

    {

        Street:"ABC",

        State: "2"

    },

    {

        Street:"ABC",

        State: "3"

    },

    {

        Street:"ABC",

        State: "4"

    },

    {

        Street:"ABC",

        State: "5"

    }

    ]

};

//ES3 solutions

console.log('"ID" in contacts: ',"ID" in contacts);

console.log("'toString' in contacts: ",'toString' in contacts );

for(var key in contacts){

    console.log("key: ",key);

    console.log("value: ",contacts[key]);

}

上面代码的输出结果如下:

"ID" in contacts:  true

'toString' in contacts:  true

key:  ID

value:  [ 0, 1, 2, 3, 4, 5 ]

key:  names

value:  [ 'Zero', 'One', 'Two', 'Three', 'Four', 'Five' ]

key:  addresses

value:  [ { Street: 'ABC', State: '0' },

  { Street: 'ABC', State: '1' },

  { Street: 'ABC', State: '2' },

  { Street: 'ABC', State: '3' },

  { Street: 'ABC', State: '4' },

  { Street: 'ABC', State: '5' } ]

注意:

  • 运算符in的左侧是属性名,是字符串类型,右侧是对象。无论是对象的自有属性还是继承属性中包含这个属性都会返回true

  • 对象的hasOwnProperty()方法用于检测给定的名字是否是对象的自有属性。对于继承属性则返回false。例如:

var  o={a:111,b:222};

o.hasOwnProperty("a");//true

o.hasOwnProperty("x");//false:不存在此属性

o.hasOwnProperty("toString");//falsetoString是继承属性

  • propertyIsEnumerable()hasOwnProperty()方法的增强版本,用于检测自有且可枚举的属性。通常JS创建的属性都是可枚举的,除非使用ES5中特殊方法改变了属性的可枚举性。例如:

var  o=inherit({a:111,b:222});

o.x=10000;

o. propertyIsEnumerable ("x");//true

o. propertyIsEnumerable ("a");//false:继承来的属性

Object.prototype. propertyIsEnumerable ("toString");//falsetoString是不可枚举的属性

 

2)     ES5枚举方案

除了使用ES3中的for...in循环方式来枚举对象中的属性外,对于前面定义的对象直接量,ES5还支持如下的枚举方案:

console.log(Object.keys(contacts));

console.log(Object.getOwnPropertyNames(contacts));

输出结果如下:

[ 'ID', 'names', 'addresses' ]

[ 'ID', 'names', 'addresses' ]

其中,静态方法Object.keys()返回一个数组,这个数组由对象中可枚举的自有属性的名称组成。

静态方法Object. getOwnPropertyNames ()也是返回一个数组,这个数组由对象中所有的自有属性的名称组成。注意:ES3中无法实现这样的方法,因为ES3中无法获取对象的不可枚举的属性。

3)     !==in运算符用于属性存在判断

前面介绍使用in运算符判断指定属性在否存在于某对象中。其实,有些简单情况下,也可以使用!==运算符来决断一个属性是否是undefined

var oo1=new Object({lan:"JavaScript",degree:"Difficult"});

console.log("使用!==运算符的例子");

console.log(oo1.lan!==undefined);  //true

console.log(oo1.language!==undefined); //false

console.log(oo1.toString!==undefined); //true

切记:只有in运算符能够区分不存在的属性和存在但值为undefined的属性。此时,!==已经无能为力。参考如下代码片断:

var ou={key1:undefined};

console.log("只能使用in运算符的例子");

console.log(ou.key1!==undefined);//false

console.log(ou.key2!==undefined);//false

console.log("key1" in ou);//true

console.log("key2" in ou);//false

delete ou.key1; //delete property 'key1'

console.log("key1" in ou);//false

4)     与属性枚举相关的几个工具函数

 

在本节给出的工具函数中,我们把对象看作属性集合,所给的图示试图从集合论角度给出这些函数的功能示意。

求并集1

示意图:wKiom1VcocXx7J2NAACyhRseASg260.jpg

此工具函数并两个对象中属性的并集,但对于相同的属性,使用present对象的属性覆盖对象orig中同名属性。

function extend(orig,present){

    for(var prop in present){

        orig[prop]=present[prop];

    }

    return orig;

}

 

求并集2

示意图:wKioL1Vco2KAtKS7AACuW-Xxf6M913.jpg

此工具函数并两个对象中属性的并集,但对于相同的属性,使用保留对象orig中的属性而舍弃present中同名属性。

function merge(orig,present){

    for(var prop in present){

        if(orig.hasOwnProperty(prop)) continue;

        orig[prop]=present[prop];

    }

    return orig;

}

求交集1

wKiom1VcohCREjYhAACV0duhL2U821.jpg

此工具函数并两个对象中属性的交集,但对于相同的属性,使用保留对象orig中的属性而舍弃present中同名属性。

function restrict(orig,present) {

    for(var prop in orig){

        if(!(prop in present)){

            delete orig[prop];

        }

        return orig;

    }

}

求交集2

wKioL1Vco6vh3tlbAACW7zKu9Cs255.jpg

此工具函数并两个对象中属性的交集,但对于相同的属性,使用保留对象orig中的属性而舍弃present中同名属性。因此,交集结果同上面“求交集1”,但是返回新集合。

function intersection(o,p) {

    return restrict(extend({},o),p);

}

求集合减法
wKioL1Vco9OiCjMFAACfG8oI5mM147.jpg

function subtract(orig,present) {

    for (var prop in present) {

        delete  orig[prop];

    }

    return orig;

}

 

求并集3

实际上等同于“求并集1”,但是返回一个新对象。

function union(orig,present) {

    return extend(extend({},orig),present);

}

类似于ES5版本的Object.keys(o)

function keys(obj){

    if(typeof obj!=="object") throw TypeError("The parameter 'obj' must be an object!");

    var result=[];

    for(var prop in obj){

        if(obj.hasOwnProperty(prop)){

            result.push(prop);

        }

    }

    return result;

}

求多个集合并集的函数

下面这个工具函数在许多JS库中都有它的影子,来自于
Pomelo
示例工程中的文件
chatofpomelo-websocket\game-server\node_modules\pomelo\node_modules\cliff\node_modules\winston\lib\winston\config.js
,可以实现多个集合并集求解。

但对于相同属性,使用后面加入的集合中同名属性覆盖前面集合中属性。

function mixin (targetObj) {

    //下面代码把函数的参数转换成一个数组,并取得从第1个元素开始直到最后的参数组成的子数组

    var args = Array.prototype.slice.call(arguments, 1);

    args.forEach(function (a) {

        var keys = Object.keys(a);//ES5: 返回对象所有自有属性的名称

        for (var i = 0; i < keys.length; i++) {

            targetObj[keys[i]] = a[keys[i]];

        }

    });

    return targetObj;

};

 

以上属性操作工具函数还存在不同程度的缺点,仅供学习者参考。
















本文转自朱先忠老师51CTO博客,原文链接:http://blog.51cto.com/zhuxianzhong/1653360 ,如需转载请自行联系原作者


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/454172.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

treelistview 所有节点失去焦点_垃圾询盘过滤,焦点科技的 Milvus 实践

文章作者&#xff1a;黎阳&#xff0c;焦点科技软件开发工程师李成龙&#xff0c;Zilliz 数据工程师Milvus (https://milvus.io/) 向量搜索引擎开源半年以来&#xff0c;全球已经有数百家企业或组织用户。焦点科技是一家以 B2B 外贸交易为主营业务的科技公司&#xff0c;也是 M…

《操作系统》OS学习(四):计算机体系结构、内存层次和地址生成

计算机除了计算能力之外还有存储能力&#xff0c;存储能力即计算机拥有一系列的存储介质&#xff0c;我们可以在存储介质上存储我们的代码和数据。计算机体系结构中约定了哪些地方可以用来存储数据&#xff1a;CPU内的寄存器、内存和外存。不同的存储介质&#xff0c;容量、速度…

GCC中SIMD指令的应用方法

X86架构上的多媒体应用开发&#xff0c;如果能够使用SIMD指令进行优化&#xff0c; 性能将大大提高。目前&#xff0c;IA-32的SIMD指令包括MMX&#xff0c;SSE&#xff0c;SSE2等几级。 在GCC的开发环境中&#xff0c;有几种使用SIMD指令的方式&#xff0c;本文逐一介绍。X86的…

使用angular4和asp.net core 2 web api做个练习项目(二), 这部分都是angular

上一篇: http://www.cnblogs.com/cgzl/p/7755801.html 完成client.service.ts: import { Injectable } from angular/core; import { Http, Headers } from angular/http; import { Observable } from rxjs/Observable; import { ErrorHandler } from angular/core; import rxj…

leelen可视对讲怎么接线_楼宇对讲系统怎么布线 楼宇对讲系统布线方式【介绍】...

随着智能小区规模不断增加&#xff0c;楼宇可视对讲系统应用越来越广泛&#xff0c;因而视频信号的传输方式与布线设计显得越来越重要。视频信号与数据和音频信号不同&#xff0c;可行的一种传输方式为视频信号基带传输&#xff0c;下面小编就简要介绍一下这种传输方式和布线方…

路由汇总实例

5.2.2.2 路由汇总策略 之前提到过&#xff0c;在网络管理员计划好子网选择并进行预期地路由汇总时&#xff0c;手动路由汇总工作能取得最佳效果。例如&#xff0c;之前的例子设定好了一个考虑周全的计划&#xff0c;管理员只使用远离Yosemite路由器并以10.2开头的子网。这个规定…

《操作系统》OS学习(五):连续内存分配 内存碎片、动态分配、碎片整理、伙伴系统

内存碎片 在没有其他方式辅助的情况下&#xff0c;我们分配给一个进程的内存是连续的。在分配时候我们需要有动态分配与碎片处理。如何理解呢&#xff1f;就是每个进程需要一块内存&#xff0c;我们要选取合适的位置的内存分配给它。当有的进程先结束了内存还给操作系统&#…

世界之窗浏览器删除文本框信息_文本框——Excel里的便利贴

工作表里面的单元格应该是足够我们来记录数据和信息了。但是文本框这个功能在工作表中还是存在&#xff0c;可以理解为便利贴功能。插入文本框1.点击“插入”选项卡。2.然后点击“文本框”。3.在下拉菜单里面&#xff0c;有两种可供选择&#xff1a;横排文本框和垂直文本框。在…

RHEL 5服务篇—常用网络配置命令

常用网络配置命令 在“Linux系统管理”的文章中&#xff0c;大家已经学习了Linux系统的基本管理命令和技巧&#xff0c;为了进一步学习Linux网络服务打下了良好的基础。所以我作者以后将陆续推出Linux网络服务的相关文章。希望大家能给与我大大的支持。 今天我们就来学习一下…

清华大学《操作系统》(六):非连续内存分配 段式、页式、段页式存储管理

背景 连续内存分配给内存分配带来了很多不便&#xff0c;可能所有空闲片区大小都无法满足需求大小&#xff0c;这个分配就会失败。基于这种现状&#xff0c;就有了非连续内存分配的需求。非连续分配成功的几率更高&#xff0c;但也面对更多的问题&#xff0c;比如分配时是不是…

C语言第三次博客作业---单层循环结构

一、PTA实验作业。 题目1 1.实验代码 int n,i; double height1,height2;//1为输入身高&#xff0c;2为输出身高。 char sex; //1<height1<3; //N<1; scanf("%d",&n); while(n--){getchar();scanf("%c%lf",&sex,&height1);switch(sex)…

清华大学《操作系统》(七):虚拟存储、覆盖、交换

接下来几节都是对虚拟存储的讲解。虚拟存储是非连续存储管理的扩展。通过将内存中的数据暂存到外存的方式&#xff0c;为进程提供更大的内存空间。虚拟存储出现的主要原因是因为程序规模的增长速度远远大于存储器容量的增长速度&#xff0c;导致内存空间不够用。其实针对内存空…

遵义大数据中心项目工程概况_市委书记张新文到曹州云都大数据中心等项目现场调研建设情况...

4月25日&#xff0c;市委书记张新文到曹县调研重点项目建设情况&#xff0c;研究推进措施。市委常委、秘书长任仲义参加活动。张新文首先来到曹州云都大数据中心项目建设现场&#xff0c;查看项目推进情况。曹州云都大数据中心&#xff0c;是涵盖云计算区、研发办公区、公寓生活…

linux 可执行文件的分析(gcc GUN BUILEIN)

1、GCC The History of GCC 1984年&#xff0c;Richard Stallman发起了自由软件运动&#xff0c;GNU (Gnus Not Unix)项目应运而生&#xff0c;3年后&#xff0c;最初版的GCC横空出世&#xff0c;成为第一款可移植、可优化、支持ANSI C的开源C编译器。GCC最初的全名是GNU C Com…

Cassandra 的数据存储结构——本质是SortedMapRowKey, SortedMapColumnKey, ColumnValue

Cassandra 的数据存储结构 Cassandra 的数据模型是基于列族&#xff08;Column Family&#xff09;的四维或五维模型。它借鉴了 Amazon 的 Dynamo 和 Googles BigTable 的数据结构和功能特点&#xff0c;采用 Memtable 和 SSTable 的方式进行存储。在 Cassandra 写入数据之前&a…

清华大学《操作系统》(八):置换算法

功能&#xff1a;置换算法是指当出现缺页异常时&#xff0c;需要调入新页面而内存已满时&#xff0c;置换算法选择被置换的物理页面。 设计目标&#xff1a; 尽可能减少页面的调入调出次数&#xff1b;把未来不再访问或短期内不访问的页面调出。 页面锁定&#xff1a; 了解具…

烂泥:通过vsphere给esxi添加本地硬盘

公司ESXi服务器的硬盘空间不够使用&#xff0c;现在新加了一块硬盘在ESxi服务器上。在服务器上添加完硬盘后&#xff0c;在Vsphere上是看不到新加硬盘的。 下面我们来通过虚拟机模拟该情况&#xff0c;先添加一块硬盘。如下图&#xff1a; 在Esxi添加完硬盘后&#xff0c;现在通…

清华大学《操作系统》(九):进程和线程

进程 定义&#xff1a; 进程是指一个具有一定独立功能的程序在一个数据集合上的一次动态执行的过程。 组成&#xff1a; 代码数据状态寄存器&#xff08;正在运行的一个程序的所有状态信息&#xff09;&#xff1a;CPU状态CP0、指令指针IP通用寄存器&#xff1a;AX、BX、CX…

开始Flask项目

1.新建Flask项目。2.设置调试模式。3.理解Flask项目主程序。4.使用装饰器&#xff0c;设置路径与函数之间的关系。5.使用Flask中render_template&#xff0c;用不同的路径&#xff0c;返回首页、登录员、注册页。6.用视图函数反转得到URL&#xff0c;{{url_for(‘login’)}}&am…

烂泥:mysql数据库使用的基本命令

1、连接数据库的格式 mysql -h IP -u用户名 -p密码; 1.1连接远程数据库 mysql -h 192.168.1.214 -uroot -p123456 也可写成&#xff1a; mysql -h 192.168.1.214 -u root -p 123456 1.2连接本地数据库 mysql -uroot -p123456 也可写成&#xff1a; mysql -u root -p 123456 2、…