8.对象的扩展

回到目录

概要

属性的简洁表示

略

属性名表达式

例如 react 中 这样只要一个方法就可以完成三个 state 的修改

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  onChange = (name, value) => {
    this.setState({ [name]: value });
  };
  render() {
    return (
      <div>
        <input
          onChange={({ target: { value } }) => this.onChange("input1", value)}
        />
        <input
          onChange={({ target: { value } }) => this.onChange("input2", value)}
        />
        <input
          onChange={({ target: { value } }) => this.onChange("input3", value)}
        />
      </div>
    );
  }
}

对象的描述对象

let obj = { foo: 123 };
Object.getOwnPropertyDescriptor(obj, "foo");
//  {
//    value: 123,   // 值
//    writable: true, // 是否可写入
//    enumerable: true, // 是否可枚举
//    configurable: true // 是否可以被删除
//  }

Object.getOwnPropertyDescriptors(obj);
// {
//   a:{
//      value: 123,   // 值
//      writable: true, // 是否可写入
//      enumerable: true, // 是否可枚举
//      configurable: true // 是否可以被删除
//    }
// }

super 关键字

this 和 super

type	target
this	指向函数所在的当前对象
super	指向当前对象的原型对象。由于这个原因只能用在对象的方法中

const proto = {
  foo: "hello"
};

const obj = {
  foo: "world",
  find() {
    return super.foo;
  }
};

Object.setPrototypeOf(obj, proto);
obj.find(); // "hello"

对象的扩展符 (...) 与 对象的解构

扩展符	区别
数组	根据数组的遍历器 Iterator 依次展开
对象	按照键名一一匹配

对象的扩展符和解构 跟 数组的用法基本一样

特别的

let arr1 = [1, 2];
let arr2 = [2, 3];
let arr3 = [...arr1, ...arr2]; // [1, 2, 2, 3]

var obj1 = { a: 12, b: 13 };
var obj2 = { b: 10, c: 15 };
var obj3 = {
  ...obj1,
  ...obj2
}; // {a: 12, b: 10, c: 15}

对象的 api

api	作用	补充说明
Object.is()	用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致。	Object.is() 补充
Object.assign(target,obj1,obj2...)	用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）	Object.assign() 补充

Object.is() 补充

+0 === -0; //true
NaN === NaN; // false

Object.is(+0, -0); // false
Object.is(NaN, NaN); // true

Object.assign() 补充

特点

type	说明
浅拷贝	Object.assign 方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。
同名属性的替换	嵌套的对象，一旦遇到同名属性，Object.assign 的处理方法是替换，而不是添加。
数组的处理	可以用来处理数组，但是会把数组视为对象。即 按照键值对来展开，并执行上面两个特性
取值函数的处理	Object.assign 只能进行值的复制，如果要复制的值是一个取值函数 getter，那么将求值后再复制。(下方例子 getter)

let a = {a:15};
let b = 12;
let c = 13
{...a,...b,...c} // {a:15}

// 等同于
let obj = {}
Object.assign(obj,a,b,c) // {a:15}

getter

const source = {
  get foo() {
    return 1;
  }
};
const target = {};

Object.assign(target, source);
// { foo: 1 }

对象的其他方法

api	作用	补充说明
Object.getOwnPropertyDescriptor(obj,name)	返回某个对象指定属性的描述对象	例子 1
Object.getOwnPropertyDescriptors(obj)	返回指定对象所有自身属性（非继承属性）的描述对象。该方法的引入目的，主要是为了解决 Object.assign()无法正确拷贝 get 属性和 set 属性的问题。	例子 1
Object.create(obj)	以指定的对象为原型，生成一个新对象	例子 2

例子 1

const obj = {
  foo: 123,
  get bar() {
    return "abc";
  }
};

Object.getOwnPropertyDescriptor(obj, "bar");
// {
//    get: [Function: get bar],
//    set: undefined,
//    enumerable: true,
//    configurable: true }
// }

Object.getOwnPropertyDescriptors(obj);
// { foo:
//    { value: 123,
//      writable: true,
//      enumerable: true,
//      configurable: true },
//   bar:
//    { get: [Function: get bar],
//      set: undefined,
//      enumerable: true,
//      configurable: true } }

例子 2

const obj1 = { a: 15 };
const obj2 = Object.create(obj1); // {}
obj2.a; // 15
obj2.__proto__; // {a: 15}
Object.getPrototypeOf(obj); // {a: 15}

跟原型操作相关的 api 或属性

api	作用	说明
__proto__	用来读取或设置当前对象的 prototype 对象。目前，所有浏览器（包括 IE11）都部署了这个属性。	直接修改属性就可以 (ES6 之后官方不推荐)
Object.setPrototypeOf(obj,proto)	给 obj 对象指定原型对象为 proto	官方推荐的方式
Object.getPrototypeOf(obj)	读取 obj 对象的原型对象	官方推荐的方式

对象遍历相关的 api

api	作用	返回
Object.keys(obj)	获取所有可遍历（enumerable）属性的键名	键名组成的数组
Object.values(obj)	获取所有可遍历（enumerable）属性的键值	键值组成的数组
Object.entries(obj)	获取所有可遍历（enumerable）属性的键值对	键值对组成的数组
Object.fromEntries(arr)	Object.entries()的逆操作，根据键值对数组，生成一个对象	返回一个对象

看到这里了是不是感觉数组也有这几个 api？那我们再来看看他们在数组和对象上有什么区别

数组 和 对象 上这 keys、 values、 entries 的区别

项目	keys	values	entries
数组上挂载对象	Array.prototype	Array.prototype	Array.prototype
数组上使用方式	[1].keys()	[1].values()	[1].entries()
数组上返回值	遍历器（Iterator）	遍历器（Iterator）	遍历器（Iterator）
对象上挂载对象	Object	Object	Object
对象上使用方式	Object.keys(obj)	Object.values(obj)	Object.entries(obj)
对象上返回值	数组	数组	数组

在实现对象的合并或者说复制的时候，我们有
更为详细的对象知识

回到目录