JavaScript:对Object对象的一些常用操作总结
JavaScript对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 } 注意目标对象自身也会改变。
3.目标对象o1自身也发生了改变,假如不想让o1改变,可以把三个对象合并到一个空的对象中,操作如下:
var obj = Object.assign({},o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1); // { a: 1 }
注意:以下几个地方
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.原始类型会被包装为 object
var 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" }
二、Object.create()
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 = 24
o.p
//42
o.q = 12
for (var prop in o) {
console.log(prop)
}
//"q"
delete o.p
//false
//创建一个可写的,可枚举的,可配置的属性p
o2 = Object.create({}, { p: { value: 42, writable: true, enumerable: true, configurable: true } });
三、Object.is()
用来判断两个值是否是同一个值。
下面是一些例子,面试中可能会提及
Object.is('haorooms', 'haorooms'); // true
Object.is(window, window); // true
Object.is('foo', 'bar'); // false
Object.is([], []); // false
var test = { a: 1 };
Object.is(test, test); // true
Object.is(null, null); // true
// 特例
Object.is(0, -0); // false
Object.is(-0, -0); // true
Object.is(NaN, 0/0); // true
Object.keys(obj)
返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 (两者的主要区别是 一个 for-in 循环还会枚举其原型链上的属性)。
let arr = ["a", "b", "c"];
console.log(Object.keys(arr));
// ['0', '1', '2']
/* Object 对象 */
let obj = { foo: "bar", baz: 42 },
keys = Object.keys(obj);
console.log(keys);
// ["foo","baz"]
四、Object.keys()
Object.keys返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)的键名。
// simple array
var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']
// array like object
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']
// array like object with random key ordering
var anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(anObj)); // console: ['2', '7', '100']
// getFoo is a property which isn't enumerable
var myObj = Object.create({}, {
getFoo: {
value: function () { return this.foo; }
}
});
myObj.foo = 1;
console.log(Object.keys(myObj)); // console: ['foo']
方法返回一个给定对象自己的所有可枚举属性值的数组,值的顺序与使用for...in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )。 Object.values会过滤属性名为 Symbol 值的属性。
var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.values(an_obj)); // ['b', 'c', 'a']
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.values(obj)); // ['a', 'b', 'c']
五、Object.entries()
返回一个给定对象自身可枚举属性的键值对数组,其排列与使用 for...in 循环遍历该对象时返回的顺序一致(区别在于 for-in 循环也枚举原型链中的属性)。
const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]
const simuArray = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.entries(simuArray)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]
六、常用其他操作
1.删除对象中的某个值,前面案例中也谢了可以直接用delete
var obj = {b:123};
delete o.p // 或delete obj[b];
2.遍历对象
2.1for-in遍历
var obj = {a: 'ss', b: 'bb', c: 'cc'};
for (var i in obj){
console.log(i+':'+obj[i]);
}
2.2forEach遍历,先通过Object.keys()返回一个数组
Object.keys(obj).forEach((value, index)=>{
console.log(value, index,obj[value]);
});
//等同于
Object.keys(obj).forEach(function (value, index,c) {
console.log(value, index,obj[value]);
});
2.3jQuery的$.each()方法:它接受两个参数,分别指代属性名和属性值
$.each(obj,function(key,value){
console.log(key+": "+value)
其它一些不常用的对象操作属性:
1.Object.freeze() 方法可以冻结一个对象,冻结指的是不能向这个对象添加新的属性,不能修改其已有属性的值,不能删除已有属性,以及不能修改该对象已有属性的可枚举性、可配置性、可写性。也就是说,这个对象永远是不可变的。该方法返回被冻结的对象。
2.Object.isFrozen() 方法判断一个对象是否被冻结(frozen)。
3.Object.isExtensible() 方法判断一个对象是否是可扩展的(是否可以在它上面添加新的属性)。
4.Object.isSealed() 方法判断一个对象是否是密封的(sealed)。
5.Object.seal() 方法可以让一个对象密封,并返回被密封后的对象。密封对象是指那些不能添加新的属性,不能删除已有属性,以及不能修改已有属性的可枚举性、可配置性、可写性,但可能可以修改已有属性的值的对象。
6.Object.getOwnPropertyNames(obj)返回一个数组,包含对象自身的所有属性(不含 Symbol 属性,但是包括不可枚举属性)的键名。
7.Object.getOwnPropertySymbols(obj)返回一个数组,包含对象自身的所有 Symbol 属性的键名。
8.Reflect.ownKeys(obj)返回一个数组,包含对象自身的所有键名,不管键名是 Symbol 或字符串,也不管是否可枚举。
9.hasOwnProperty()判断对象自身属性中是否具有指定的属性。
原文地址:https://segmentfault.com/a/1190000016901888
JavaScript:对Object对象的一些常用操作总结的更多相关文章
- js中对Object对象的一些常用操作总结
前言我前面的文章,写过js中“类”与继承的一些文章.ES5我们可以通过 构造函数 或者 Object.create()等方式来模拟出js中的“类”,当然,对象呢是类的实例化,我们可以通过如下方式创建对 ...
- javascript ES5 Object对象
原文:http://javascript.ruanyifeng.com/stdlib/object.html 目录 概述 Object对象的方法 Object() Object.keys(),Obje ...
- JavaScript之Object对象常用属性与方法手册
MDN Object参考地址:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Obje ...
- javascript的Object对象的defineProperty和defineProperties
Object的属性 查看官网:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Obje ...
- Java 如何对文件进行多个Object对象流的读写操作
思路:把已经序列化的对象存入容器(如LinkedList<?>)中,然后用ObjectInputStream和ObjectOutputStream对这个实例化的LinkedList< ...
- javascript 遍历object对象
(function(){ var str = ''; for(var i in obj){ //遍历object str += '\n'+(i+' : '+obj[i]); // i+' : '+ob ...
- JavaScript笔记 - Object对象特性的应用
可以依据js对象中key是永远不会重复的原则,来模拟Map类型以及去除数组重复项. 1.模拟Map类型 (1)构造Map对象 function Map(){ //private var obj = { ...
- Javascript中的对象和原型(一)(转载)
面向对象的语言(如Java)中有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是,JavaScript 没有类的概念,因此它的对象也与基于类的语言中的对象有所不同. 要了解面向对象,首 ...
- 详解JavaScript中的Object对象
Object是在javascript中一个被我们经常使用的类型,而且JS中的所有对象都是继承自Object对象的.虽说我们平时只是简单地使用了Object对象来存储数据,并没有使用到太多其他功能,但是 ...
随机推荐
- bzoj 4753: [Jsoi2016]最佳团体【01分数规划+二分+树上背包】
01分数规划,二分答案然后把判别式变成Σp[i]-Σs[i]*mid>=0,然后树上背包判断,设f[i][j]为在i点子树里选j个的最大收益,随便背包一下就好 最丧病的是神卡常--转移的时候要另 ...
- 数组Reduce的应用
数组Reduce的应用 参考 简单应用 var arr = [1,2,3,4,5] var sum = arr.reduce(function (prev, cur, index, arr) { co ...
- 利用layui的load模块解决图片上传
首先肯定要参考layui官网的upload模块文档:http://www.layui.com/doc/modules/upload.html 讲讲思路:在一份添加表单中,我们有个图片上传的模块,然后我 ...
- scau 17967 大师姐唱K的固有结界 分类暴力 + RMQ
由于能放两次,那么分类, 1.连续使用,(这个直接O(n^2)暴力) 2.分开使用. 分开使用的话,首先暴力枚举,用T时间,能从第1个位置,唱到第几首歌,然后剩下的就是从pos + 1, n这个位置, ...
- C. Bear and Colors 区间枚举的技巧
http://codeforces.com/problemset/problem/673/C 先说一个枚举区间的技巧,枚举前缀,不要枚举后缀. 就是下面这个代码是不好的 ; i <= n; ++ ...
- 【转】在 26 岁时写给 18 岁的自己--Livid
原文:http://livid.v2ex.com/essays/2012/01/24/a-letter-from-26-to-18/ 我知道现在的自己是再也回不去的了.可是倘若有机会,我是多么希望能让 ...
- ionic之自定义图片
一个好的app,必须都有很好的ui设计师来设计界面,增强客户的体验,表现自己本身公司的特色,但是,在ionic中有些是无法用img标签直接引入图片,只能通过设定的css之后引入css. 页面: < ...
- mysql索引原理及创建与查询
索引介绍 一:为什么要有索引 索引是用来优化查询效率(速度)的 没有索引的话,对于大数据的表,就只能每次都遍历一遍,数据量越大,耗时越多有索引的话,可以提升好几个数量级的速度 一般的应用系统,读写比例 ...
- Array(数组)的基本方法
1.定义:var arr=new Array ("12" , "zhang") 2.简写:var arr=[ 12 , "zhang&quo ...
- IF-MIB::ifTable = No Such Object available on this agent at this OID
在server端口执行如下命令 [root@localhost ~]# snmpwalk -v2c -c public 客户端ip ifIF-MIB::ifTable = No Such Object ...