JS6-对象

Posted 2020-10-03 YC小杨

 

====对象

属性的简洁表示法

ES6 允许直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。

var foo = ‘bar‘;

var baz = {foo};

baz // {foo: "bar"}

// 等同于

var baz = {foo: foo};

 

上面代码表明，ES6 允许在对象之中，直接写变量。这时，属性名为变量名, 属性值为变量的值。

function f(x, y) {

  return {x, y};

}

// 等同于

function f(x, y) {

  return {x: x, y: y};

}

f(1, 2) // Object {x: 1, y: 2}

除了属性简写，方法也可以简写。

//---------

var o = {

  method() {

    return "Hello!";

  }

};

// 等同于

var o = {

  method: function() {

    return "Hello!";

  }

};

 

//----------

var birth = ‘2017/01/01‘;

var Person = {

    name: ‘张三‘,

birth, //等同于birth: birth

hello() { console.log(‘我的名字是‘, this.name); } // 等同于hello: function ()...

};

这种写法用于函数的返回值，将会非常方便。

function getPoint() {

  var x = 1;

  var y = 10;

  return {x, y};

}

getPoint()// {x:1, y:10}

 

 

====Object.assign()

Object.assign方法用于对象的合并，将源对象（source）的所有属性，复制到目标对象（target）。

var target = { a: 1 };

var source1 = { b: 2 };

var source2 = { c: 3 };

Object.assign(target, source1, source2);

target // {a:1, b:2, c:3}

Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。

 

注意，如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。

var target = { a: 1, b: 1 };

var source1 = { b: 2, c: 2 };

var source2 = { c: 3 };

Object.assign(target, source1, source2);

target // {a:1, b:2, c:3}

 

如果只有一个参数，Object.assign会直接返回该参数。

var obj = {a: 1};

Object.assign(obj) === obj // true

 

如果该参数不是对象，则会先转成对象，然后返回。

typeof Object.assign(2) // "object"

 

由于undefined和null无法转成对象，所以如果它们作为参数，就会报错。

Object.assign(undefined) // 报错

Object.assign(null) // 报错

 

如果非对象参数出现在源对象的位置（即非首参数），那么处理规则有所不同。首先，这些参数都会转成对象，如果无法转成对象，就会跳过。这意味着，如果undefined和null不在首参数，就不会报错。

let obj = {a: 1};

Object.assign(obj, undefined) === obj // true

Object.assign(obj, null) === obj // true

 

 

 

====Object.keys()，Object.values()，Object.entries()

----Object.keys()

ES5 引入了Object.keys方法，返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键名。

var obj = { foo: ‘bar‘, baz: 42 };

Object.keys(obj)// ["foo", "baz"]

 

ES2017 引入了跟Object.keys配套的Object.values和Object.entries，作为遍历一个对象的补充手段

let {keys, values, entries} = Object;

let obj = { a: 1, b: 2, c: 3 };

for (let key of keys(obj)) {

  console.log(key); // ‘a‘, ‘b‘, ‘c‘

}

for (let value of values(obj)) {

  console.log(value); // 1, 2, 3

}

for (let [key, value] of entries(obj)) {

  console.log([key, value]); // [‘a‘, 1], [‘b‘, 2], [‘c‘, 3]

}

 

-----Object.values()

Object.values方法返回一个数组，成员是参数对象自身的所有属性的键值。

var obj = { foo: ‘bar‘, baz: 42 };

Object.values(obj)// ["bar", 42]

 

var obj = { 100: ‘a‘, 2: ‘b‘, 7: ‘c‘ };

Object.values(obj)// ["b", "c", "a"]

上面代码中，属性名为数值的属性，是按照数值大小，从小到大遍历的，因此返回的顺序是b、c、a。

 

操作字符串

Object.values(‘foo‘)// [‘f‘, ‘o‘, ‘o‘]

上面代码中，字符串会先转成一个类似数组的对象。字符串的每个字符，就是该对象的一个属性。因此，Object.values返回每个属性的键值，就是各个字符组成的一个数组。

 

------Object.entries

Object.entries方法返回一个数组，成员是参数对象自身的所有属性的键值对数组。

var obj = { foo: ‘bar‘, baz: 42 };

Object.entries(obj)// [ ["foo", "bar"], ["baz", 42] ]

除了返回值不一样，该方法的行为与Object.values基本一致。