资讯专栏INFORMATION COLUMN

JavaScript:对Object对象的一些常用操作总结

马龙驹 / 1909人阅读

摘要:一可以用作对象的复制可以用作对象的合并注意目标对象自身也会改变。对象四返回一个数组,包括对象自身的不含继承的所有可枚举属性不含属性的键名。该方法返回被冻结的对象。方法判断一个对象是否被冻结。

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()判断对象自身属性中是否具有指定的属性。

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

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/98993.html

相关文章

  • JavaScript」Array方法详细总结常用数组操作(附完整示例)

    摘要:数组索引只是具有整数名称的枚举属性,并且与通用对象属性相同。利用的解构赋值解构赋值尾递归优化递归非常耗内存,因为需要同时保存成千上百个调用帧,很容易发生栈溢出。而尾递归的实现,往往需要改写递归函数,确保最后一步只调用自身。 一.前言 因为在工作当中,经常使用到js的数组,而其中对数组方法的使用也是很频繁的,所以总是会有弄混或者概念不够清晰的状况,所以,写下这篇文章整理一番,本文有对几乎...

    Alfred 评论0 收藏0
  • JavaScript面向象程序设计

    摘要:构造函数模式这种方法创建自定义的构造函数,从而自定义对象类型的属性和方法。借用构造函数在子类型构造函数的内部调用超类型构造函数,通过和方法来实现。 JavaScript中没有类的概念,它不是严格意义上的面向对象语言,而是基于对象(Object-based)的编程语言。下面是读《JavaScript高级程序设计(第三版)》的学习笔记,总结一些常用的创建对象和继承的方法。 一、创建对象 1...

    wfc_666 评论0 收藏0
  • 深入理解JavaScript

    摘要:深入之继承的多种方式和优缺点深入系列第十五篇,讲解各种继承方式和优缺点。对于解释型语言例如来说,通过词法分析语法分析语法树,就可以开始解释执行了。 JavaScript深入之继承的多种方式和优缺点 JavaScript深入系列第十五篇,讲解JavaScript各种继承方式和优缺点。 写在前面 本文讲解JavaScript各种继承方式和优缺点。 但是注意: 这篇文章更像是笔记,哎,再让我...

    myeveryheart 评论0 收藏0
  • JavaScript-总结常用代码书写规范

    摘要:函数声明应该在作用域的顶层。数组和对象字面量用数组和对象字面量来代替数组和对象构造器。数组构造器很容易让人在它的参数上犯错。推荐对象构造器不会有类似的问题,但是为了可读性和统一性,我们应该使用对象字面量。 javascript 代码规范 代码规范我们应该遵循古老的原则:能做并不意味着应该做。 全局命名空间污染 总是将代码包裹在一个立即的函数表达式里面,形成一个独立的模块。 不推荐 va...

    Berwin 评论0 收藏0
  • 一篇文章带你理解原型和原型链

    摘要:上面的代码,运行以后,我们可以看到因为的原型是指向的实例上的,所以可以访问他的属性值,那如果我不想让访问的构造函数里声明的属性值,那怎么办呢只需要将指向的原型而不是实例就行了。 走在前端的大道上 本篇将自己读过的相关 javascript原型和原型链 文章中,对自己有启发的章节片段总结在这(会对原文进行删改),会不断丰富提炼总结更新。 文章——深入理解javascript之原型 一般的...

    yintaolaowanzi 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<