在
之前的文章《深入解析JavaScript中物件拷貝方法(附程式碼)》中,給大家了解了JS中物件拷貝方法。以下這篇文章給大家了解JS中Object物件一些操作方法,夥伴們來看看。
javascript
中Object
一些高效率的操作方法
方法用於將所有可枚舉屬性的值從一個或多個來源物件複製到目標物件。它將傳回目標物件。
const object1 = { a: 1, b: 2, c: 3 }; const object2 = Object.assign({ c: 4, d: 5 }, object1); console.log(object2); // { a: 1, b: 2, c: 3 ,c: 4, d: 5 }
方法建立一個新對象,使用現有的對象來提供新建立的對象的proto
。
const person = { color: "red", sayName: function () { console.log(this.name); }, }; const m = Object.create(person); m.name = "chuchur"; m.sayName(); // chuchur
方法直接在一個物件上定義新的屬性或修改現有屬性,並傳回該物件。
var obj = {}; Object.defineProperties(obj, { property1: { value: 1, writable: true, }, property2: { value: "Hello", writable: false, }, }); obj.property1 = 1; obj.property2 = 2; console.log(obj); // {property1: 1, property2: "Hello"}
方法會直接在一個物件上定義一個新屬性,或修改一個物件的現有屬性,並傳回這個物件。
var o = {}; // 创建一个新对象 // 在对象中添加一个属性与数据描述符的示例 Object.defineProperty(o, "a", { value: 37, writable: true, enumerable: true, configurable: true, }); // 对象o拥有了属性a,值为37 // 在对象中添加一个属性与存取描述符的示例 var bValue; Object.defineProperty(o, "b", { get: function () { return bValue; }, set: function (newValue) { bValue = newValue; }, enumerable: true, configurable: true, }); o.b = 38; // 对象o拥有了属性b,值为38 // o.b的值现在总是与bValue相同,除非重新定义o.b
方法傳回一個給定物件本身可枚舉屬性的鍵值對數組,其排列與使用for...in
循環遍歷該物件時傳回的順序一致(差異在於for-in
循環也列舉原型鏈中的屬性)。
const obj = { foo: "bar", baz: 42 }; console.log(Object.entries(obj)); //[['foo','bar'],['baz',42]]
方法會傳回由一個給定物件的自身可枚舉屬性組成的數組,數組中屬性名的排列順序和使用for ...in
循環遍歷該物件時傳回的順序一致。
// 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
循環列舉原型鏈中的屬性)。
var obj = { foo: "bar", baz: 42 }; console.log(Object.values(obj)); // ['bar', 42] // array like object var obj = { 0: "a", 1: "b", 2: "c" }; console.log(Object.values(obj)); // ['a', 'b', 'c'] // array like object with random key ordering // when we use numeric keys, the value returned in a numerical order according to the keys var an_obj = { 100: "a", 2: "b", 7: "c" }; console.log(Object.values(an_obj)); // ['b', 'c', 'a'] // getFoo is property which isn't enumerable var my_obj = Object.create( {}, { getFoo: { value: function () { return this.foo; }, }, } ); my_obj.foo = "bar"; console.log(Object.values(my_obj)); // ['bar'] // non-object argument will be coerced to an object console.log(Object.values("foo")); // ['f', 'o', 'o'] ==Array.from('foo') //ES5 if (!Object.values) Object.values = function (obj) { if (obj !== Object(obj)) throw new TypeError("Object.values called on a non-object"); var val = [], key; for (key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { val.push(obj[key]); } } return val; };
方法會傳回布林值,指示物件自身屬性中是否具有指定的屬性。
o = new Object(); o.prop = "exists"; function changeO() { o.newprop = o.prop; delete o.prop; } o.hasOwnProperty("prop"); // 返回 true changeO(); o.hasOwnProperty("prop"); // 返回 false o.hasOwnProperty("toString"); // 返回 false o.hasOwnProperty("hasOwnProperty"); // 返回 false
方法傳回指定物件上一個自有屬性對應的屬性描述子。 (自有屬性指的是直接賦予該物件的屬性,不需要從原型鏈上進行尋找的屬性)
o = { bar: 42 }; d = Object.getOwnPropertyDescriptor(o, "bar"); // d { // configurable: true, // enumerable: true, // value: 42, // writable: true // }
方法用來取得一個物件的所有自身屬性的描述符。
Object.assign()方法只能拷貝來源物件的可列舉的自身屬性,同時拷貝時無法拷貝屬性的特性們,而且存取器屬性會被轉換成資料屬性,也無法拷貝來源物件的原型,該方法配合Object.create() 方法可以實作上面所說的這些。
Object.create( Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj) );
方法傳回一個由指定物件的所有自身屬性的屬性名稱(包括不可枚舉屬性但不包括Symbol
值作為名稱的屬性)所組成的陣列。
var arr = ["a", "b", "c"]; console.log(Object.getOwnPropertyNames(arr).sort()); // ["0", "1", "2", "length"] // 类数组对象 var obj = { 0: "a", 1: "b", 2: "c" }; console.log(Object.getOwnPropertyNames(obj).sort()); // ["0", "1", "2"] // 使用Array.forEach输出属性名和属性值 Object.getOwnPropertyNames(obj).forEach(function (val, idx, array) { console.log(val + " -> " + obj[val]); }); // 输出 // 0 -> a // 1 -> b // 2 -> c //不可枚举属性 var my_obj = Object.create( {}, { getFoo: { value: function () { return this.foo; }, enumerable: false, }, } ); my_obj.foo = 1; console.log(Object.getOwnPropertyNames(my_obj).sort()); // ["foo", "getFoo"]
方法傳回一個給定物件本身的所有Symbol
屬性的陣列。
var obj = {}; var a = Symbol("a"); var b = Symbol.for("b"); obj[a] = "localSymbol"; obj[b] = "globalSymbol"; var objectSymbols = Object.getOwnPropertySymbols(obj); console.log(objectSymbols.length); // 2 console.log(objectSymbols); // [Symbol(a), Symbol(b)] console.log(objectSymbols[0]); // Symbol(a)
方法用來測試一個物件是否存在於另一個物件的原型鏈上。
function Foo() {} function Bar() {} function Baz() {} Bar.prototype = Object.create(Foo.prototype); Baz.prototype = Object.create(Bar.prototype); var baz = new Baz(); console.log(Baz.prototype.isPrototypeOf(baz)); // true console.log(Bar.prototype.isPrototypeOf(baz)); // true console.log(Foo.prototype.isPrototypeOf(baz)); // true console.log(Object.prototype.isPrototypeOf(baz)); // true
方法傳回一個布林值,表示指定的屬性是否可列舉。
var o = {}; var a = []; o.prop = "is enumerable"; a[0] = "is enumerable"; o.propertyIsEnumerable("prop"); // 返回 true a.propertyIsEnumerable(0); // 返回 true //用户自定义对象和引擎内置对象 var a = ["is enumerable"]; a.propertyIsEnumerable(0); // 返回 true a.propertyIsEnumerable("length"); // 返回 false Math.propertyIsEnumerable("random"); // 返回 false this.propertyIsEnumerable("Math"); // 返回 false //自身属性和继承属性 var a = []; a.propertyIsEnumerable("constructor"); // 返回 false function firstConstructor() { this.property = "is not enumerable"; } firstConstructor.prototype.firstMethod = function () {}; function secondConstructor() { this.method = function method() { return "is enumerable"; }; } secondConstructor.prototype = new firstConstructor(); secondConstructor.prototype.constructor = secondConstructor; var o = new secondConstructor(); o.arbitraryProperty = "is enumerable"; o.propertyIsEnumerable("arbitraryProperty"); // 返回 true o.propertyIsEnumerable("method"); // 返回 true o.propertyIsEnumerable("property"); // 返回 false o.property = "is enumerable"; o.propertyIsEnumerable("property"); // 返回 true // 这些返回fasle,是因为,在原型链上propertyIsEnumerable不被考虑 // (尽管最后两个在for-in循环中可以被循环出来)。 o.propertyIsEnumerable("prototype"); // 返回 false (根据 JS 1.8.1/FF3.6) o.propertyIsEnumerable("constructor"); // 返回 false o.propertyIsEnumerable("firstMethod"); // 返回 false
方法傳回指定物件的原型(內部[[Prototype]]
)屬性的
const prototype1 = {}; const object1 = Object.create(prototype1); console.log(Object.getPrototypeOf(object1) === prototype1); // expected output: true
方法判斷兩個值是否為相同的值。
Object.is("foo", "foo"); // 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 // ES5 if (!Object.is) { Object.is = function (x, y) { // SameValue algorithm if (x === y) { // Steps 1-5, 7-10 // Steps 6.b-6.e: +0 != -0 return x !== 0 || 1 / x === 1 / y; } else { // Step 6.a: NaN == NaN return x !== x && y !== y; } }; }
方法讓一個物件變的不可擴展,也就是永遠無法再增加新的屬性。
// Object.preventExtensions将原对象变的不可扩展,并且返回原对象. var obj = {}; var obj2 = Object.preventExtensions(obj); obj === obj2; // true // 字面量方式定义的对象默认是可扩展的. var empty = {}; Object.isExtensible(empty); //=== true // ...但可以改变. Object.preventExtensions(empty); Object.isExtensible(empty); //=== false // 使用Object.defineProperty方法为一个不可扩展的对象添加新属性会抛出异常. var nonExtensible = { removable: true }; Object.preventExtensions(nonExtensible); Object.defineProperty(nonExtensible, "new", { value: 8675309 }); // 抛出TypeError异常 // 在严格模式中,为一个不可扩展对象的新属性赋值会抛出TypeError异常. function fail() { "use strict"; nonExtensible.newProperty = "FAIL"; // throws a TypeError } fail(); // 一个不可扩展对象的原型是不可更改的,__proto__是个非标准魔法属性,可以更改一个对象的原型. var fixed = Object.preventExtensions({}); fixed.__proto__ = { oh: "hai" }; // 抛出TypeError异常
方法判斷一個物件是否是可擴展的(是否可以在它上面新增新的屬性)。
// 新对象默认是可扩展的. var empty = {}; Object.isExtensible(empty); // === true // ...可以变的不可扩展. Object.preventExtensions(empty); Object.isExtensible(empty); // === false // 密封对象是不可扩展的. var sealed = Object.seal({}); Object.isExtensible(sealed); // === false // 冻结对象也是不可扩展. var frozen = Object.freeze({}); Object.isExtensible(frozen); // === false
方法可以凍結一個對象,凍結指的是不能向這個對象添加新的屬性,不能修改其已有屬性的值,不能刪除已有屬性,以及不能修改該物件已有屬性的可枚舉性、可配置性、可寫性。此方法傳回被凍結的物件。
const object1 = { property1: 42, }; const object2 = Object.freeze(object1); object2.property1 = 33; // 严格模式会报错,非严格模式不报错,但是不执行 console.log(object2.property1); // 输出: 42
方法判斷一個物件是否被凍結。
// 使用Object.freeze是冻结一个对象最方便的方法. var frozen = { 1: 81 }; Object.isFrozen(frozen); //=== false Object.freeze(frozen); Object.isFrozen(frozen); //=== true // 一个冻结对象也是一个密封对象. Object.isSealed(frozen); //=== true // 当然,更是一个不可扩展的对象. Object.isExtensible(frozen); //=== false // 一个对象默认是可扩展的,所以它也是非冻结的. Object.isFrozen({}); // === false // 一个不可扩展的空对象同时也是一个冻结对象. var vacuouslyFrozen = Object.preventExtensions({}); Object.isFrozen(vacuouslyFrozen); //=== true; // 一个非空对象默认也是非冻结的. var oneProp = { p: 42 }; Object.isFrozen(oneProp); //=== false // 让这个对象变的不可扩展,并不意味着这个对象变成了冻结对象, // 因为p属性仍然是可以配置的(而且可写的). Object.preventExtensions(oneProp); Object.isFrozen(oneProp); //=== false // ...如果删除了这个属性,则它会成为一个冻结对象. delete oneProp.p; Object.isFrozen(oneProp); //=== true // 一个不可扩展的对象,拥有一个不可写但可配置的属性,则它仍然是非冻结的. var nonWritable = { e: "plep" }; Object.preventExtensions(nonWritable); Object.defineProperty(nonWritable, "e", { writable: false }); // 变得不可写 Object.isFrozen(nonWritable); //=== false // 把这个属性改为不可配置,会让这个对象成为冻结对象. Object.defineProperty(nonWritable, "e", { configurable: false }); // 变得不可配置 Object.isFrozen(nonWritable); //=== true // 一个不可扩展的对象,拥有一个不可配置但可写的属性,则它仍然是非冻结的. var nonConfigurable = { release: "the kraken!" }; Object.preventExtensions(nonConfigurable); Object.defineProperty(nonConfigurable, "release", { configurable: false }); Object.isFrozen(nonConfigurable); //=== false // 把这个属性改为不可写,会让这个对象成为冻结对象. Object.defineProperty(nonConfigurable, "release", { writable: false }); Object.isFrozen(nonConfigurable); //=== true // 一个不可扩展的对象,值拥有一个访问器属性,则它仍然是非冻结的. var accessor = { get food() { return "yum"; }, }; Object.preventExtensions(accessor); Object.isFrozen(accessor); //=== false // ...但把这个属性改为不可配置,会让这个对象成为冻结对象. Object.defineProperty(accessor, "food", { configurable: false }); Object.isFrozen(accessor); //=== true
方法封閉一個對象,阻止新增屬性並將所有現有屬性標記為不可配置。目前屬性的值只要可寫就可以改變。
const object1 = { property1: 42, }; Object.seal(object1); object1.property1 = 33; console.log(object1.property1); // expected output: 33 delete object1.property1; // cannot delete when sealed console.log(object1.property1); // expected output: 33
方法判斷一個物件是否被密封。
// 新建的对象默认不是密封的. var empty = {}; Object.isSealed(empty); // === false // 如果你把一个空对象变的不可扩展,则它同时也会变成个密封对象. Object.preventExtensions(empty); Object.isSealed(empty); // === true // 但如果这个对象不是空对象,则它不会变成密封对象,因为密封对象的所有自身属性必须是不可配置的. var hasProp = { fee: "fie foe fum" }; Object.preventExtensions(hasProp); Object.isSealed(hasProp); // === false // 如果把这个属性变的不可配置,则这个对象也就成了密封对象. Object.defineProperty(hasProp, "fee", { configurable: false }); Object.isSealed(hasProp); // === true // 最简单的方法来生成一个密封对象,当然是使用Object.seal. var sealed = {}; Object.seal(sealed); Object.isSealed(sealed); // === true // 一个密封对象同时也是不可扩展的. Object.isExtensible(sealed); // === false // 一个密封对象也可以是一个冻结对象,但不是必须的. Object.isFrozen(sealed); // === true ,所有的属性都是不可写的 var s2 = Object.seal({ p: 3 }); Object.isFrozen(s2); // === false, 属性"p"可写 var s3 = Object.seal({ get p() { return 0; }, }); Object.isFrozen(s3); // === true ,访问器属性不考虑可写不可写,只考虑是否可配置
方法傳回指定物件的原始值。
// Array:返回数组对象本身 var array = ["ABC", true, 12, -5]; console.log(array.valueOf() === array); // true // Date:当前时间距1970年1月1日午夜的毫秒数 var date = new Date(2013, 7, 18, 23, 11, 59, 230); console.log(date.valueOf()); // 1376838719230 // Number:返回数字值 var num = 15.2654; console.log(num.valueOf()); // 15.2654 // 布尔:返回布尔值true或false var bool = true; console.log(bool.valueOf() === bool); // true // new一个Boolean对象 var newBool = new Boolean(true); // valueOf()返回的是true,两者的值相等 console.log(newBool.valueOf() == newBool); // true // 但是不全等,两者类型不相等,前者是boolean类型,后者是object类型 console.log(newBool.valueOf() === newBool); // false // Function:返回函数本身 function foo() {} console.log(foo.valueOf() === foo); // true var foo2 = new Function("x", "y", "return x + y;"); console.log(foo2.valueOf()); /* ƒ anonymous(x,y ) { return x + y; } */ // Object:返回对象本身 var obj = { name: "张三", age: 18 }; console.log(obj.valueOf() === obj); // true // String:返回字符串值 var str = "http://www.xyz.com"; console.log(str.valueOf() === str); // true // new一个字符串对象 var str2 = new String("http://www.xyz.com"); // 两者的值相等,但不全等,因为类型不同,前者为string类型,后者为object类型 console.log(str2.valueOf() === str2); // false
推薦學習:JavaScript影片教學
#以上是一文講解JS中Object物件一些操作方法(分享)的詳細內容。更多資訊請關注PHP中文網其他相關文章!