js中对Object对象的一些常用操作总结
前言我前面的文章,写过js中“类”与继承的一些文章。ES5我们可以通过 构造函数 或者 Object.create()等方式来模拟出js中的“类”,当然,对象呢是类的实例化,我们可以通过如下方式创建对象:var haorooms ={};或者var haorooms = new Object()今天主要总结一下Object的一些常用方法。Object.assign()1、可以用作对象的复制var obj = { a: 1 };var copy = Object.assign({}, obj);console.log(copy); // { a: 1 }2、可以用作对象的合并var o1 = { a: 1 };var o2 = { b: 2 };var o3 = { c: 3 };var obj = Object.assign(o1, o2, o3);console.log(obj); // { a: 1, b: 2, c: 3 }console.log(o1); // { a: 1, b: 2, c: 3 }, 注意目标对象自身也会改变。上面我们看到,目标对象o1自身也发生了改变。假如我们不想让o1改变,我们可以把三个对象合并到一个空的对象中,操作如下: var obj = Object.assign({},o1, o2, o3);console.log(obj); // { a: 1, b: 2, c: 3 }console.log(o1); // { a: 1 }注意:以下几个地方可能copy或者合并不成功,经常在面试中出现!1、继承属性和不可枚举属性是不能拷贝的var obj = Object.create({foo: 1}, { // foo 是个继承属性。 bar: { value: 2 // bar 是个不可枚举属性。 }, baz: { value: 3, enumerable: true // baz 是个自身可枚举属性。 }});var copy = Object.assign({}, obj);console.log(copy); // { baz: 3 }2、原始类型会被包装为 objectvar v1 = "abc";var v2 = true;var v3 = 10;var v4 = Symbol("foo")var obj = Object.assign({}, v1, null, v2, undefined, v3, v4); // 原始类型会被包装,null 和 undefined 会被忽略。// 注意,只有字符串的包装对象才可能有自身可枚举属性。console.log(obj); // { "0": "a", "1": "b", "2": "c" }3、异常会打断接下来的拷贝任务var target = Object.defineProperty({}, "foo", { value: 1, writable: false}); // target 的 foo 属性是个只读属性。Object.assign(target, {bar: 2}, {foo2: 3, foo: 3, foo3: 3}, {baz: 4});// TypeError: "foo" is read-only// 注意这个异常是在拷贝第二个源对象的第二个属性时发生的。console.log(target.bar); // 2,说明第一个源对象拷贝成功了。console.log(target.foo2); // 3,说明第二个源对象的第一个属性也拷贝成功了。console.log(target.foo); // 1,只读属性不能被覆盖,所以第二个源对象的第二个属性拷贝失败了。console.log(target.foo3); // undefined,异常之后 assign 方法就退出了,第三个属性是不会被拷贝到的。console.log(target.baz); // undefined,第三个源对象更是不会被拷贝到的。Object.create()这个我之前就提到过了,可以模拟出js中的“类”。具体可以看:http://www.haorooms.com/post/js_lei_jicheng注意!上文中我只应用了Object.create()的第一个参数,其实还有第二个参数!Object.create(proto, [ propertiesObject ])第二个参数是可选的,主要用于指定我们创建的对象的一些属性,(例如:是否可读、是否可写,是否可以枚举等等)可以通过下面案例来了解第二个参数!var o;o = Object.create(Object.prototype, { // foo会成为所创建对象的数据属性 foo: { writable:true, configurable:true, value: "hello" }, // bar会成为所创建对象的访问器属性 bar: { configurable: false, get: function() { return 10 }, set: function(value) { console.log("Setting `o.bar` to", value) }}})// 创建一个以另一个空对象为原型,且拥有一个属性p的对象o = Object.create({}, { p: { value: 42 } })// 省略了的属性特性默认为false,所以属性p是不可写,不可枚举,不可配置的:o.p = 24o.p//42o.q = 12for (var prop in o) { console.log(prop)}//"q"delete o.p//false//创建一个可写的,可枚举的,可配置的属性po2 = Object.create({}, { p: { value: 42, writable: true, enumerable: true, configurable: true } });Object.is()用来判断两个值是否是同一个值。下面是一些例子,面试中可能会提及Object.is('haorooms', 'haorooms'); // trueObject.is(window, window); // trueObject.is('foo', 'bar'); // falseObject.is([], []); // falsevar test = { a: 1 };Object.is(test, test); // trueObject.is(null, null); // true// 特例Object.is(0, -0); // falseObject.is(-0, -0); // trueObject.is(NaN, 0/0); // trueObject.keys()这个方法会返回一个由给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 (两者的主要区别是 一个 for-in 循环还会枚举其原型链上的属性)。例如:/* 类数组对象 */ var obj = { 0 : "a", 1 : "b", 2 : "c"};alert(Object.keys(obj)); // 弹出"0,1,2"/* 具有随机键排序的数组类对象 */var an_obj = { 100: 'a', 2: 'b', 7: 'c' };console.log(Object.keys(an_obj)); // console: ['2', '7', '100']常用其他操作1、删除对象中的某个值,前面案例中也谢了可以直接用deletedelete o.p2、对象循环,这个我之前单独写了一篇文章:http://www.haorooms.com/post/object_bjxh3、对象或者数组赋值js中对象和数组赋值,不和PHP等后端语言一样,只能赋值一层,例如:var haorooms={};//可以这么写haorooms["前端博客"]="Haorooms,Aaron个人博客。记录本人工作中遇到的问题,以及经验总结和分享!";//但是假如如下写就会报错!haorooms["前端博客"]["des"]="Haorooms,Aaron个人博客。记录本人工作中遇到的问题,以及经验总结和分享!"//Uncaught TypeError: Cannot set property 'des' of undefined我们在循环多层赋值的时候可以这么写:var haorooms={};haorooms["前端博客"] = haorooms["前端博客"] || {};haorooms["前端博客"]["des"]=haorooms["前端博客"]["des"] || "Haorooms,Aaron个人博客。记录本人工作中遇到的问题,以及经验总结和分享"这样就可以多层赋值了!此方法同样可以应用在数组上面!其他一些不是很常用的对象操作属性。如下:1、Object.freeze() 方法可以冻结一个对象,冻结指的是不能向这个对象添加新的属性,不能修改其已有属性的值,不能删除已有属性,以及不能修改该对象已有属性的可枚举性、可配置性、可写性。也就是说,这个对象永远是不可变的。该方法返回被冻结的对象。2、Object.isFrozen() 方法判断一个对象是否被冻结(frozen)。3、Object.isExtensible() 方法判断一个对象是否是可扩展的(是否可以在它上面添加新的属性)。4、Object.isSealed() 方法判断一个对象是否是密封的(sealed)。5、Object.seal() 方法可以让一个对象密封,并返回被密封后的对象。密封对象是指那些不能添加新的属性,不能删除已有属性,以及不能修改已有属性的可枚举性、可配置性、可写性,但可能可以修改已有属性的值的对象。
js中对Object对象的一些常用操作总结的更多相关文章
- JavaScript:对Object对象的一些常用操作总结
JavaScript对Object对象的一些常用操作总结. 一.Object.assign() 1.可以用作对象的复制 var obj = { a: 1 }; var copy = Object.as ...
- 详解JavaScript中的Object对象
Object是在javascript中一个被我们经常使用的类型,而且JS中的所有对象都是继承自Object对象的.虽说我们平时只是简单地使用了Object对象来存储数据,并没有使用到太多其他功能,但是 ...
- Javascript中的Object对象
Object是在javascript中一个被我们经常使用的类型,而且JS中的所有对象都是继承自Object对象的.虽说我们平时只是简单地使用了Object对象来存储数据,并没有使用到太多其他功能,但是 ...
- js中两个对象的比较
代码取自于underscore.js 1.8.3的isEqual函数. 做了一些小小的修改,主要是Function的比较修改. 自己也加了一些代码解读. <!DOCTYPE html> & ...
- js中的json对象详细介绍
JSON一种简单的数据格式,比xml更轻巧,在JavaScript中处理JSON数据不需要任何特殊的API或工具包,下面为大家详细介绍下js中的json对象, 1.JSON(JavaScript Ob ...
- js中如何访问对象和数组
js中如何访问对象和数组 一.总结 一句话总结:js访问对象点和中括号,访问数组的话就是中括号 对象 . [] 数组 [] 1.js访问对象的两种方式? . [] 可以使用下面两种方式访问对象的属性和 ...
- js进阶js中支持正则的四个常用字符串函数(search march replace split)
js进阶js中支持正则的四个常用字符串函数(search march replace split) 一.总结 代码中详细四个函数的用法 search march replace split 二.js进 ...
- JS中的event 对象详解
JS中的event 对象详解 JS的event对象 Event属性和方法:1. type:事件的类型,如onlick中的click:2. srcElement/target:事件源,就是发生事件的 ...
- MVC中处理Json和JS中处理Json对象
MVC中处理Json和JS中处理Json对象 ASP.NET MVC 很好的封装了Json,本文介绍MVC中处理Json和JS中处理Json对象,并提供详细的示例代码供参考. MVC中已经很好的封装了 ...
随机推荐
- aws ec2 安装Elastic search 7.2.0 kibana 并配置 hanlp 分词插件
文章大纲 Elastic search & kibana & 分词器 安装 版本控制 下载地址 Elastic search安装 kibana 安装 分词器配置 Elastic sea ...
- ZJNU 1542 - 三角形(续)--中高级
从小到大排序后 先固定一遍,另外两边递增查找 即固定 i,j=i+1,k=j+1 然后让k递增到 a[i]+a[j]<=a[k] 时 此时不能凑成一个三角形 答案增加 k-1-j 组 此时不需要 ...
- win10 编译好的CPU版本caffe 配置自己的图像分类C++DEMO
VC++目录 包含目录 F:\caffewindows\scripts\build\include F:\caffewindows\scripts\build F:\vs2015\VC\include ...
- python中的变量对象小结2
# .变量名和数据内容是分开存储的. # .数据保存在内存中的一个位置(地址). # .变量中保存着数据在内存中的地址. # 引用就是变量中记录数据的地址. #不可变变量,重新赋值时会重新开辟一个地址 ...
- Tooltips2
#include<windows.h> #include<Commctrl.h> #include"resource.h" #pragma comment( ...
- 二分查找(python)
#!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2018/4/29 9:11 # @Author : Jackendoff # @Sit ...
- 尝试brpc来升级rpc服务,测试应用过程
照着官方文档来,不过在mac下还是有些小坑 对熟悉c++的人来说很小儿科,但对c++相对比较外行 (只知道基本语法和部分数据结构)的人,还是作不到开箱即用 首先编译```If you need to ...
- Java中Arrays详解
一.Arrays类的定义 Arrays类位于 java.util 包中,主要包含了操纵数组的各种方法 使用时导包:import java.util.Arrays 二.Arrays常用函数(都是静态的) ...
- 2018-10-09-Pser
title date tags layout Pser 2018-10-09 杂谈 post ### 踏雪无痕![踏雪无痕](http://da1sy.github.io/assets/images/ ...
- iTOP-4418开发板_重实力_优势突出_有原理图源码开源
核心板参数 尺寸:50mm*60mm 高度:核心板连接器组合高度1.5mm PCB层数:6层PCB沉金设计 4418 CPU:ARM Cortex-A9 四核 S5P4418处理器 1.4GHz 68 ...