回到目录

概要

属性的简洁表示

略

属性名表达式

例如 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

const proto = {
  foo: "hello"
};

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

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

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

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

特别的

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

Object.is() 补充

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

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

Object.assign() 补充

特点

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 }

对象的其他方法

例子 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

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

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

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

回到目录