回到目錄

概要

屬性的簡潔表示

略

屬性名表達(dá)式

例如 react 中 這樣只要一個(gè)方法就可以完成三個(gè) 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 關(guān)鍵字

this 和 super

const proto = {
  foo: "hello"
};

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

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

對象的擴(kuò)展符 (...) 與 對象的解構(gòu)

對象的擴(kuò)展符和解構(gòu) 跟 數(shù)組的用法基本一樣

特別的

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() 補(bǔ)充

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

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

Object.assign() 補(bǔ)充

特點(diǎn)

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}

跟原型操作相關(guān)的 api 或?qū)傩?/h3>

api	作用	說明
__proto__	用來讀取或設(shè)置當(dāng)前對象的 prototype 對象。目前，所有瀏覽器（包括 IE11）都部署了這個(gè)屬性。	直接修改屬性就可以 (ES6 之后官方不推薦)
Object.setPrototypeOf(obj,proto)	給 obj 對象指定原型對象為 proto	官方推薦的方式
Object.getPrototypeOf(obj)	讀取 obj 對象的原型對象	官方推薦的方式

對象遍歷相關(guān)的 api

看到這里了是不是感覺數(shù)組也有這幾個(gè) api？那我們再來看看他們在數(shù)組和對象上有什么區(qū)別

數(shù)組 和 對象 上這 keys、 values、 entries 的區(qū)別

在實(shí)現(xiàn)對象的合并或者說復(fù)制的時(shí)候，我們有
更為詳細(xì)的對象知識

回到目錄