08月07, 2022

JS进阶(1)--对象(4)--对象与原型的相关方法

对象与原型的相关方法

Object的API

1、Object.is

用于判断两个数据是否相等,基本上跟严格相等(===)是一致的,除了以下两点:

1) NaN和NaN相等 2) +0和-0不相等

2. Object.assign

用于混合对象

let a = {
  x: 1,
  obj: {
    aa: 11,
    bb:22,
  }
}
let b = {
  y:1
}

let oo = Object.assign({},a, b);
console.log(oo);

注意这里第一个参数为什么要用空对象,因为Object.assign会将源对象的所有属性复制到目标对象上,并且返回目标对象,如果,你像这样做的话:

let oo = Object.assign(a, b);

就会改变a对象的内容,并返回了a对象

其实在ES7中,我们有更棒的写法:

let oo = {
    ...a,
    ...b
}

3、Object.getOwnPropertyNames 的枚举顺序

Object.getOwnPropertyNames方法之前就存在,只不过,官方没有明确要求,对属性的顺序如何排序,如何排序,完全由浏览器厂商决定。

ES6规定了该方法返回的数组的排序方式如下:

  • 先排数字,并按照升序排序
  • 再排其他,按照书写顺序排序
const obj = {
  d: 1,
  b: 2,
  a: 3,
  11: 6,
  5: 2,
  4: 1
}
const props = Object.getOwnPropertyNames(obj)
console.log(props)

注意:有一些面试题,可以灵活的使用该函数

4、Object.setPrototypeOf

该函数用于设置某个对象的隐式原型

比如: Object.setPrototypeOf(obj1, obj2), 相当于: obj1.__proto__ = obj2

let o1 = {
  name: "张三",
  age:18
}
let o2 = {
  sex:"男"
}
Object.setPrototypeOf(o2, o1);
for (let k in o2) { 
  console.log(k);
}

5、Object.getPrototypeOf()

查找一个对象的原型对象

let o1 = {
  name: "张三",
  age:18
}
let o2 = {
  sex:"男"
}

Object.setPrototypeOf(o2, o1);

console.log(Object.getPrototypeOf(o2));

6、Object.fromEntries

将键值对类型转换为Object

let authors = [[0,"天蚕土豆"], [1,"唐三"], [2,"辰东"], [3,"火星引力"], [4,"月关"]];
let obj = Object.fromEntries(authors);
console.log(obj);

let map = new Map();
map.set("name", "斗破苍穹");
map.set("author", "天蚕土豆");
map.set("price", 100);

let obj2 = Object.fromEntries(map);
console.log(obj2);

7、Object.entries

返回一个给定对象自身可枚举属性的键值对数组

let obj = {
  name: "张三",
  age: 18,
  score: 90,
}
let arr = Object.entries(obj);
console.log(arr);
// 将下面对象的值翻倍
let obj = {
  x: 1,
  y: 2,
  z: 3,
}
let obj2 = Object
  .fromEntries(
    Object
      .entries(obj)
      .map(([k, v]) => [k, v * 2]));
console.log(obj2);

8、Object.defineProperty

给对象添加或修改一个属性

let obj = {
  name: "张三",
  age: 18,
  score: 90,
}
Object.defineProperty(obj, "sex", {
  value: "男", // 值
  writable: true, // writable 是否可以修改该属性的值,默认 false
  configurable: true,// configurable 是否可以修改该属性的描述,,默认 false
  enumerable: true,// 该属性是否出现在对象的枚举属性中,默认 false
});
obj.sex = "女";
console.log(obj.sex);

Object.defineProperty(obj, "tel", {
  get(val) { // 获取该属性的值时调用 get 函数
    console.log("get--->" + val);
  },
  set(val) { // 设置该属性的值时调用 set 函数
    console.log("set--->" + val);
  }
});

obj.tel = "12232434";

9、Object.defineProperties

给对象添加或修改多个属性

let obj = {
  name: "张三",
  age: 18,
  score: 90,
}

Object.defineProperties(obj, {
  tel: {
    value: "13800000000",
    enumerable: true
  },
  sex: {
    value: "男"
  }
});

for (let k in obj) { 
  console.log(k + "---" + obj[k]);
}

console.log(obj.sex);

10、keys、values、entries

var obj = {name:'xxx',age:24}
Object.keys(obj) // 返回一个数组 ['name','age']
Object.values(obj) // 返回一个数组 ['xxx',24]
Object.entries (obj) // 返回一个二维数组 [['name','age'],['xxx',24]]

原型相关属性和方法

1、prototype 和proto

prototype 是构造函数上面的一个属性,指向一个对象,这个对象是该构造函数实例化出来的对象的原型对象。实例化出来的对象可以通过proto来找到自己的原型对象。如下:

// let arr = [1, 2, 3, 4];
let arr = new Array(1, 2, 3, 4); //和上面其实是一个意思
console.log(arr);
console.log(arr.__proto__); //Object(0) []
console.log(Array.prototype); //Object(0) []
console.log(arr.__proto__ === Array.prototype);//true
console.log(arr.__proto__.constructor === Array);//true

这是使用JS自带的Array构造函数,其实使用我们自己的构造函数是一样的道理

function add() { }
let a = new add();
let b = new add();
console.log(a.__proto__ === add.prototype);
console.log(b.__proto__ === add.prototype);
console.log(a.__proto__ === b.__proto__);

隐式原型的指向

2、constructor

通过 constructor 属性,我们可以查看到一个对象的构造函数是什么,constructor属性其实是原型对象的属性,注意观察上面的图

function add() { }
let a = new add();
let b = new add();

console.log(add.prototype.constructor);//[Function: add]
console.log(a.__proto__.constructor);//[Function: add]
console.log(a.constructor);//[Function: add]
console.log(a.constructor === add);//true

3、instanceof 操作符

判断一个对象是否是一个构造函数的实例。如果是返回 true,否则就返回 false

const arr = [1,2,3,4,5];
console.log(arr instanceof Array); // true
console.log(arr instanceof Number); // false

function add() { }
let a = new add();
let b = new add();
console.log(a instanceof add); //true
console.log(a instanceof Object); //false

4、isPrototypeOf()

该方法将会返回一个布尔值,主要用于检测一个对象是否是一个实例对象的原型对象

let obj = {
  name: "张三",
  age: 18,
}
let a = Object.create(obj);
console.log(obj.isPrototypeOf(a)); //true

const arr = [1,2,3,4];
console.log(Array.prototype.isPrototypeOf(arr)); // true
console.log(arr.__proto__.isPrototypeOf(arr)); // true

5、hasOwnProperty()

判断一个属性是定义在对象本身上面的,还是从原型对象上面继承而来的。如果是本身的,则返回 true,如果是继承而来的或者根本没有这个属性,则返回 false

let obj = {
  name: "张三",
  age: 18,
}
let a = Object.create(obj, {
  sex: {
    value: "男",
    enumerable: true,
    writable:true
  }
});

console.log(a.hasOwnProperty("name"));
console.log(a.hasOwnProperty("name"));
console.log(a.hasOwnProperty("sex"));
console.log(a.hasOwnProperty("aaa"));

本文链接:http://www.yanhongzhi.com/post/js_ap_4.html

-- EOF --

Comments