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
//42o.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);   // trueObject.is('foo', 'bar');     // false
Object.is([], []);           // falsevar test = { a: 1 };
Object.is(test, test);       // trueObject.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()判断对象自身属性中是否具有指定的属性。

JavaScript字符串操作方法大全,包含ES6方法

JavaScript常用数组操作方法,包含ES6方法

JavaScript:对Object对象的一些常用操作总结相关推荐

  1. JavaScript中Object对象方法超详细讲解举例说明仅此一篇

    JavaScript中Object对象方法超详细讲解举例说明仅此一篇 Object.assign() Object.create() Object.values() Object.entries() ...

  2. JavaScript中Object对象深度遍历

    Object对象深度遍历 支持Object和Array混合型对象遍历.其中用到的对象类型判断方法,详见<JavaScript中Object对象类型判断> // 递归实现 // obj 为父 ...

  3. javascript range 转为 html,javascript Range对象跨浏览器常用操作

    开发的功能主要涉及即时代码着色(CodeColoring)和语法提示(CodeHints)功能,稍后会总结功能开发中问题或提供源码. 以下是个人对Range对象的了解和常用操作的实例和总结: Rang ...

  4. python pandas series想赋予新的值_pandas Series对象创建及常用操作

    pandas 的核心是 Series 和 DataFrame 两大数据结构,数据分析相关的所有事务都是围绕着这两种结构进行的.其中,Series 数据结构用于存储一个序列的一维数组,而 DataFra ...

  5. 前端JavaScript——js声明定义数组及常用操作

    数组的声明: 1.在js中,数组的声明不需要指定其长度 2.在js中,数组可以存放不同类型的数据(一般要求数据中采访同类型的数据) js定义数组: 空数组 一般常用这种形式,数组元素的定义使用[] v ...

  6. Javascript中的对象和原型(一)(转载)

    面向对象的语言(如Java)中有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是,JavaScript 没有类的概念,因此它的对象也与基于类的语言中的对象有所不同. 要了解面向对象,首 ...

  7. Lambda 表达式的常用操作示例

    文章目录 一.示例对象 二.常用操作 一.示例对象 User 对象 @AllArgsConstructor @Data @ToString public class User implements S ...

  8. JavaScript之基础-9 JavaScript String(内置对象、String概述、字符串常用操作、模式匹配)...

    一.JavaScript 内置对象 内置对象 - 什么是内置对象? 内置对象就是ECMAScript标准中已经定义好的,由浏览器厂商已经实现的标准对象 - 内置对象中封装了专门的数据和操作数据常用的A ...

  9. 详解Javascript中的Object对象

    本文地址:http://luopq.com/2016/02/28/Object-in-Javascript/,转载请注明 Object是在javascript中一个被我们经常使用的类型,而且JS中的所 ...

最新文章

  1. 通过域名,直接访问到网站主页
  2. JavaWeb学习总结(五十二)——使用JavaMail创建邮件和发送邮件
  3. nginx 如何实现读写限流的方法
  4. 双绞线直连法如何才能使两台电脑实现共享
  5. Teams的Incoming Webhook
  6. 一个实时收集MySql变更记录的组件CanalSharp.AspNetCore
  7. php sql好处,关于php:使用Doctrine与SQL相比,使用DQL有什么好处?
  8. impala的substr从第几位截到最后一位_天赋不输乔丹,麦迪选秀为何只排第9?看前面几位,第1让老詹吃瘪...
  9. Java 代理访问http
  10. Microsoft 补丁下载
  11. 使用Axios请求出现Provisional headers are shown
  12. 阿里巴巴Mysql规范
  13. winxp+win7蓝屏代码
  14. python招聘杭州拉勾网_Python爬取拉勾网招聘信息
  15. dfuse Labs——展示 dfuse 的力量
  16. python发送arp报文_python发送arp欺骗攻击代码分析
  17. 5-1 决策树的模型
  18. 零售门店促销创新的八个思路
  19. 论文笔记:《Object-Aware Guidance for Autonomous Scene Reconstruction》
  20. UVM学习笔记—快速入门篇

热门文章

  1. 上海交大开源训练框架,支持大规模基于种群多智能体强化学习训练
  2. DeepMind强化学习新研究:更快的知识学习,更强的环境适应
  3. AI时代,人与机器的沟通方式
  4. SAP项目里的关键用户,兼职还是专职?
  5. 一个模型击溃12种AI造假,各种GAN与Deepfake都阵亡
  6. NeurIPS 2019 | 一种对噪音标注鲁棒的基于信息论的损失函数
  7. 神经科学家发现神经元网络可以拉伸或压缩其活动以控制时间
  8. 业界丨全球AI人才排行榜:美国第一,中国仅排名第7
  9. AI就是“大数据+机器学习”?答案是否定的
  10. Python 之 Pandas (一)介绍