【react】有关对象的使用方法（详细）

link之家
链接快照平台
输入网页链接，自动生成快照
标签化管理网页链接
1. Object.assign(目标对象,源对象) 浅复制、合并、拷贝

注意 ：继承属性和不可枚举的属性是不能被拷贝的；不能复制不可枚举属性
// 将所有源对象的所有属性复制到目标对象上,并且返回目标对象
const obj=Object.assign({},obj,obj1);
const obj ={...obj,...obj1} // 复制，重新变成1个新对象
2. Object.keys(obj) 获取obj对象的所有key组成的数组
 
const obj={"a":1,"b":2}
console.log(Object.keys(obj))
// 打印结果: ['a', 'b']
3. Object.values(obj) 获取o对象的所有value组成的数组
 
const obj={"a":1,"b":2}
console.log(Object.values(obj))
// 打印结果: [1, 2]
4. Object.entries(obj) 返回一个给定对象自身可枚举属性的键值对数组
 
const obj={"a":1,"b":2}
console.log(Object.entries(obj))
// 打印结果: 
(2) [Array(2), Array(2)]
0: (2) ['a', 1]
1: (2) ['b', 2]
5. Object.is() 判断两个值是否相同
 
const obj={"a":1,"b":2}
console.log(Object.is(obj)) //false
Object.is({}, {}) // false
+0 === -0  //true
NaN === NaN // false
Object.is(+0, -0) // false
Object.is(NaN, NaN) // true
注意 下列任何一项成立，则两个值相同：
 都是 undefined
 都是 null
 都是 true 或者都是 false
 由相同个数的字符按照相同的顺序组成的字符串
 指向同一个对象
 都是数字并且都是正零 +0 或者 都是负零 -0
 都是 NaN
 都是除零和 NaN 外的其它同一个数字 
6. Object.fromEntries() 把array转换为object
 
const obj={"a":1,"b":2}
console.log(Object.fromEntries(obj)) //false
注意 Object.entries的反向操作，把array转换为object 。方法可以把键值对列表转化为一个对象，入参可以是一个Map、Set、Array类型，或者其他实现了可迭代协议的可迭代对象。 
7. delete 删除对象的属性
 
const obj={"a":1,"b":2}
console.log(delete obj) // true
8. Object.defineProperty(对象,属性名,属性描述对象)
 
注意 定义属性，也可以定义Symbol
 属性描述对象：writable/value，set/get这两对不能同时出现，默认为false 
 Object.defineProperty(obj,"aaa",{
   configurable:true,
   enumerable:true,
   writable:false,
   value(a,b){
       console.log(a+b)
obj.aaa(1,2); //3
9. Object.defineProperties（）定义属性
 
注意 可定义多个，默认为false，可定义Symbol 
Object.defineProperties(obj,{
   c:{
        writable:true,
        value:30
    d:{
        configurable:true,
        value:4
    e:{
        enumerable:true,
        value:5
const sym=Symbol();
obj[sym]=10;
console.log(obj);
10. Object.getOwnPropertyNames(obj) 获取对象的所有属性名,返回属性名组成的数组，Symbol不能获取
 
11. Object.getOwnPropertySymbols(obj) 获取对象的所有Symbol属性名,返回属性名组成的数组
 
const arr=Object.getOwnPropertyNames(obj).concat(Object.getOwnPropertySymbols(obj));
console.log(arr);
const arr=[...Object.getOwnPropertyNames(obj),...Object.getOwnPropertySymbols(obj)];
console.log(arr)
12. Object.getOwnPropertyDescriptor(obj,“d”); 获取属性的描述对象
 
const obj={"a":1,"b":2}
Object.getOwnPropertyDescriptor(obj,"d")
// 打印输出: {value: 1, writable: true, enumerable: true, configurable: true}
13. Reflect.ownKeys(obj); 获取到对象所有属性和方法名，包括Symbol属性
 
const obj={"a":1,"b":2}
Reflect.ownKeys(obj)
// 打印输出: (2) ['a', 'b']
14. Reflect.defineProperty 定义属性，默认为false，可定义Symbol,与Object.defineProperty相同
 
15. Reflect.deleteProperty(obj,“c”); 删除
 
const obj={"a":1,"b":2}
Reflect.deleteProperty(obj,"b")
16. Object.freeze(obj);冻结 不能修改属性，不能删除属性，不能添加属性
 
const obj={"a":1,"b":2}
Object.freeze(obj)  
17. Object.isFrozen(obj) 判断对象是否被冻结
 
const obj={"a":1,"b":2}
Object.isFrozen(obj)
18. Object.seal(obj); 可以修改，不能删除，不能添加属性
 
const obj={"a":1,"b":2}
Object.seal(obj)
19. Object.isSealed(obj) 判断是否使用seal
 
const obj={"a":1,"b":2}
Object.isSealed(obj)
20. Object.preventExtensions(obj); 可以修改，可以删除，但是不能添加新属性，不能扩展
 
const obj={"a":1,"b":2}
Object.preventExtensions(obj)
21. Object.isExtensible(obj) 判断是否可以扩展
 
const obj={"a":1,"b":2}
Object.isExtensible(obj)
22. Object.getOwnPropertyDescriptors(obj) 获取对象中所有属性的描述对象列表对象
 
const obj={"a":1,"b":2}
Object.getOwnPropertyDescriptors(obj)
23. Object.getPrototypeOf(obj) 获取obj对象的原型链
 
const obj={"a":1,"b":2}
Object.getPrototypeOf(obj)
24. Object.setPrototypeOf(o1,o) 设置对象的原型链
 
// 将a的原型链设置为b
Object.setPrototypeOf(a,b) 
25. 判断对象的对象属性是否包含这个属性名
 
console.log(o1.hasOwnProperty("b"))
console.log(Object.hasOwn(o1,"b"))
				首先，在 react 中，通过类来构建 react 组件时，可以在类的构造函数 constructor 中可以使用 react 的属性 state，属性 state 是一个对象，在对象中可以定义组件需要的属性和属性值，比如下面的例子:
import React from "react";
import reactDom from "react-dom";
class App extends Rea...