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 ,如需转载请自行联系原作者


相关文章
|
2天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
16 3
|
15天前
|
JavaScript
JS 获取对象数据类型的键值对的键与值
JS 获取对象数据类型的键值对的键与值
|
25天前
|
JavaScript 前端开发
Math对象:JavaScript中的数学工具
Math对象:JavaScript中的数学工具
27 1
|
18天前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
|
4天前
|
JavaScript 前端开发 UED
深入解析JavaScript原生操作DOM技术
【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术,包括使用`getElement*`方法和CSS选择器获取元素,借助`createElement`与`appendChild`动态创建及插入元素,修改元素内容、属性和样式,以及删除元素。通过掌握这些技术,开发者能实现页面动态交互,但应注意避免过度操作DOM以优化性能和用户体验。
|
4天前
|
JavaScript 前端开发 开发者
JavaScript中的错误处理:try-catch语句与错误对象
【4月更文挑战第22天】JavaScript中的错误处理通过try-catch语句和错误对象实现。try块包含可能抛出异常的代码,catch块捕获并处理错误,finally块则无论是否出错都会执行。错误对象提供关于错误的详细信息,如类型、消息和堆栈。常见的错误类型包括RangeError、ReferenceError等。最佳实践包括及时捕获错误、提供有用信息、不忽略错误、利用堆栈信息和避免在finally块中抛错。
|
8天前
|
JavaScript 前端开发 UED
Vue工具和生态系统: Vue.js和服务器端渲染(SSR)有关系吗?请解释。
Vue.js是一个渐进式JavaScript框架,常用于开发单页面应用,但其首屏加载较慢影响用户体验和SEO。为解决此问题,Vue.js支持服务器端渲染(SSR),在服务器预生成HTML,加快首屏速度。Vue.js的SSR可手动实现或借助如Nuxt.js的第三方库简化流程。Nuxt.js是基于Vue.js的服务器端渲染框架,整合核心库并提供额外功能,帮助构建高效的应用,改善用户体验。
12 0
|
10天前
|
JavaScript
【Js】检查Date对象是否为Invalid Date
【Js】检查Date对象是否为Invalid Date
14 0
|
11天前
|
存储 JavaScript 前端开发
JavaScript的引用数据类型主要包括对象
【4月更文挑战第16天】JavaScript的引用数据类型主要包括对象
16 4
|
15天前
|
JavaScript
js 字符串String转对象Object
该代码示例展示了如何将一个以逗号分隔的字符串(`&#39;1.2,2,3,4,5&#39;`)转换为对象数组。通过使用`split(&#39;,&#39;)`分割字符串并`map(parseFloat)`处理每个元素,将字符串转换成浮点数数组,最终得到一个对象数组,其类型为`object`。