Js进阶15-对象方法

晴雪月乔

已于 2023-04-27 14:36:02 修改

阅读量41

点赞数

分类专栏： Js进阶文章标签： javascript 前端

于 2023-04-23 17:46:59 首次发布

本文链接：https://blog.csdn.net/m0_57521762/article/details/130325264

版权

Js进阶专栏收录该内容

31 篇文章 0 订阅

订阅专栏

速查表

编号	方法名	功能	是否改变原对象（内容）
1	Object.freeze(obj)	阻止修改现有属性的特性和值，并阻止添加新属性	n
2	Object.assign(target,source1,source2,...)	主要用于对象的合并，此方法只拷贝源对象的自身属性，不拷贝继承的属性	n
3	Object.create(obj[, propertiesObject])	创建一个新对象，并指定它的原型对象，返回创建的对象	n
4	Object.defineProperties(obj, props)	在一个对象上定义新的属性或修改现有属性，并返回该对象	y
5	hasOwnProperty(key)	判断对象自身属性中是否具有指定的属性	n
6	Object.getOwnPropertyDescriptor(obj, prop)	返回指定对象上一个自有属性对应的属性描述符	n
7	Object.getOwnPropertyDescriptors(obj)	获取一个对象的所有自身属性的描述符	n
8	Object.getOwnPropertyNames(obj)	返回一个由指定对象的所有自身属性的属性名组成的数组	n
9	Object.is(obj1, obj2)	判断两个值是否相同	n
10	Object.keys(obj)	返回一个由给定对象的自身可枚举属性组成的数组	n
11	Object.values(obj)	返回一个给定对象自己的所有可枚举属性值组成的数组	n
12	Object.entries(obj)	返回一个给定对象自己的所有可枚举属性的键值对数组	n

1. Object.freeze(obj)

阻止修改现有属性的特性和值，并阻止添加新属性。

两种用法：Object.freeze({}) 或 Object.freeze(obj)。

let a = {};
a.sex = '男';
console.log(a.sex, 111); //男 111
Object.freeze(a);
a.sex = '女';
console.log(a.sex, 222); //男 222 修改属性无效

let b = Object.freeze({
    name: "piter",
    age: 10
});
console.log(b.name, 333); //piter 333
b.name = "bob";
console.log(b.name, 444); //piter 444 修改属性无效

2. Object.assign(target,source1,source2,...)

该方法主要用于对象的合并，将源对象source的所有可枚举属性合并到目标对象target上,此方法只拷贝源对象的自身属性，不拷贝继承的属性。

Object.assign方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。同名属性会替换。

Object.assign只能进行值的复制，如果要复制的值是一个取值函数，那么将求值后再复制。

Object.assign可以用来处理数组，但是会把数组视为对象。

let target = {
  age: 10,
  page: 1
};
let objA = {
  age: 12,
  year: 20,
  newObj: {
    sex: '男'
  }
};
Object.assign(target, objA);
console.log(target, '拷贝之后');
// {
//   age: 12,
//   newObj: {
//     sex: '男'
//   },
//   page: 1,
//   year: 20
// }
// 拷贝之后
// 同名属性会被覆盖
target.newObj.sex = '女'; // 拷贝为对象引用
console.log(target.newObj.sex, '修改拷贝后对象里面的属性'); // 女  修改拷贝后对象里面的属性

function Person() {
  this.name = 'bob';
};
Person.prototype.age = 20;
let man = new Person();
man.age = 29;
let obj = {
  sex: '男'
};
Object.assign(obj, man);
console.log(obj, '构造函数拷贝后的属性===');
// {sex: "男", name: "bob", age: 29} "构造函数拷贝后的属性==="
// 只能拷贝自身的属性，不能拷贝prototype
console.log(Object.assign([1, 2, 3], [4, 5]), '数组使用该方法===');
// [4, 5, 3]
// 把数组当作对象来处理

3. Object.create(obj[, propertiesObject])

Object.create 方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。它允许你创建一个新对象，并指定它的原型对象。

Object.create(null) 创建的对象是一个空对象，在该对象上没有继承 Object.prototype 原型链上的属性或者方法，例如：toString(), hasOwnProperty()等方法。

Object.create 方法接受两个参数:Object.create(obj, propertiesObject) 。

propertiesObject：可选。该参数对象是一组属性与值，该对象的属性名称将是新创建的对象的属性名称，值是属性描述符（这些属性描述符的结构与 Object.defineProperties 的第二个参数一样）。

注意：该参数对象不能是 undefined，另外只有该对象中自身拥有的可枚举的属性才有效，也就是说该对象的原型链上属性是无效的。属性描述符具体字段如下：

(1) enumerable 对象属性是否可通过for-in循环，flase为不可循环，默认值为true

(2) writable 对象属性是否可修改，flase为不可修改，默认值为true

(3) configurable 能否使用delete、能否修改属性特性、或能否修改访问器属性，false为不可重新定义，默认值为true

(4) value 属性值

Object.create 和 new Object()的区别

比较	New	Object.create
构造函数	保留原构造函数属性	丢失原构造函数属性
原型链	原构造函数prototype属性	原构造函数
作用对象	function	function 和 object

var o = Object.create(Object.prototype, {
  // foo会成为所创建对象的数据属性
  foo: {
    enumerable: false, //对象属性是否可通过for-in循环，flase为不可循环，默认值为true
    writable: true, //对象属性是否可修改,flase为不可修改，默认值为true
    configurable: true, //能否使用delete、能否修改属性特性、或能否修改访问器属性，false为不可重新定义，默认值为true
    value: "goodnice" // 属性值
  },
  // bar会成为所创建对象的访问器属性
  bar: {
    configurable: false,
    get: function() {
      return 10
    },
    set: function(value) {
      console.log("Setting `o.bar` to", value);
    }
  }
});
console.log(o);
// {foo:'goodnice'}
var test = Object.create(null);
console.log(test);
// {} No Properties
// 也就是在对象本身不存在属性跟方法，原型链上也不存在属性和方法

4. Object.defineProperties(obj, props)

直接在一个对象上定义新的属性或修改现有属性，并返回该对象。

var obj = {};
Object.defineProperties(obj, {
  'property1': {
    value: true,
    writable: true
  },
  'property2': {
    value: 'Hello,word',
    writable: false
  }
});
console.log(obj); // {property1: true, property2: "Hello,word"}

Object.defineProperty(obj,prop,descriptor)

在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。

obj---需要定义属性的对象；

prop---需要定义或修改的属性的名字；

descriptor---将被定义或修改的属性的描述符。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>test</title>
  </head>
  <body>
    <div id="test">这是一个测试</div>
    <script>
      var test = document.getElementById("test");
      var data = {};
      var i = 0;
      Object.defineProperty(data, "b", {
        set: function(newValue) {
          // 当data.b的值改变的时候更新＃test的视图 
          test.textContent = newValue;
        },
        get: function() {}
      });
      setInterval(function() {
        i++;
        data["b"] = "data.b的值更新了，视图更新" + i;
      }, 1000);
    </script>
  </body>
</html>

5. hasOwnProperty(key)

判断对象自身属性中是否具有指定的属性。

用来检测一个对象是否包含指定的属性，而且这个属性存在于对象本身中，而不是在原型链上。

let person = {
  name: "Alice",
  age: 25
};
console.log(person.hasOwnProperty('name')); // true
console.log(person.hasOwnProperty('gender')); // false
// 添加一个继承自 Object 原型链的属性
Object.prototype.address = 'Beijing';
console.log(person.hasOwnProperty('address')); // false
console.log(person.address); // Beijing

6. Object.getOwnPropertyDescriptor(obj, prop)

返回指定对象上一个自有属性对应的属性描述符（自有属性指的是直接赋予该对象的属性，不需要从原型链上进行查找的属性）。

如果指定的属性存在于对象上，则返回其属性描述符对象（property descriptor），否则返回 undefined。

const obj = {
  name: 'John',
  age: 30
};
const descriptor = Object.getOwnPropertyDescriptor(obj, 'name');
console.log(descriptor.value); // 'John'
console.log(descriptor.writable); // true
console.log(descriptor.enumerable); // true
console.log(descriptor.configurable); // true

7. Object.getOwnPropertyDescriptors(obj)

获取一个对象的所有自身属性的描述符。

var obj = {
  name: 'bob',
  age: 18
};
console.log(Object.getOwnPropertyDescriptors(obj));
// 运行结果
// {
//   "name": {
//     "value": "bob",
//     "writable": true,
//     "enumerable": true,
//     "configurable": true
//   },
//   "age": {
//     "value": 18,
//     "writable": true,
//     "enumerable": true,
//     "configurable": true
//   }
// }

8. Object.getOwnPropertyNames(obj)

返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括 Symbol 值作为名称的属性）组成的数组。

var obj1 = {
  age: 10,
  sex: "男",
  name: "bob"
};
Object.getOwnPropertyNames(obj1).forEach(function(val) {
  console.log(val, '遍历的值'); // age sex name 拿到的是实际是对象的键（key）
});
var obj2 = {
  x: 1,
  y: 2
};
Object.defineProperty(obj2, 'z', {
  enumerable: false
});
console.log(Object.getOwnPropertyNames(obj2)); // ["x", "y", "z"] 包含不可枚举属性
console.log(Object.keys(obj2)); // ["x", "y"] 只包含可枚举属性

9. Object.is(obj1, obj2)

判断两个值是否相同。

如果下列任何一项成立，则两个值相同：

(1) 两个值都是 undefined；

(2) 两个值都是 null；

(3) 两个值都是 true 或者都是 false；

(4) 两个值是由相同个数的字符按照相同的顺序组成的字符串；

(5) 两个值指向同一个对象；

(6) 两个值都是数字并且都是 0 或者都是正零 +0 或负零 -0；

(7) 都是 NaN；

(8) 都是除零和 NaN 外的其它同一个数字。

console.log(Object.is('foo', 'foo')); // true
console.log(Object.is(window, window)); // true
console.log(Object.is('foo', 'bar')); // false
console.log(Object.is([], [])); // false
var test = {
  a: 1
};
console.log(Object.is(test, test)); // true
console.log(Object.is(null, null)); // true
// 特例
console.log(Object.is(0, -0)); // false
console.log(Object.is(-0, -0)); // true
console.log(Object.is(NaN, 0 / 0)); // true

10. Object.keys(obj)

返回一个由给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for…in 循环遍历该对象时返回的顺序一致（两者的主要区别是 for…in 循环还会枚举其原型链上的属性）。

let arr = ["a", "b", "c"];
console.log(Object.keys(arr)); //["0", "1", "2"]
let obj = {
  age: 20,
  sex: '男'
};
console.log(Object.keys(obj)); //["age", "sex"]

11. Object.values(obj)

返回一个给定对象自己的所有可枚举属性值组成的数组，值的顺序和使用 for…in 循环遍历该对象时的顺序相同（区别在于 for-in 循环枚举原型链中的属性）。

var obj = {
  10: 'a',
  1: 'b',
  2: 'c'
};
console.log(Object.values(obj)); // ['b', 'c', 'a']
var obj1 = {
 0: 'a',
 1: 'b',
 2: 'c'
};
console.log(Object.values(obj1)); // ['a', 'b', 'c']

12. Object.entries(obj)

返回一个给定对象自身可枚举属性的键值对数组，顺序和使用 for…in 循环遍历该对象时的顺序相同（区别在于 for-in 循环枚举原型链中的属性）。

var obj = {
  name: "zhangsan",
  age: 18
};
console.log(Object.entries(obj)); // [ ['name', 'zhangsan'], ['age', 18] ]