JS6-对象

Posted YC小杨

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS6-对象相关的知识,希望对你有一定的参考价值。

 

====对象

属性的简洁表示法

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基本一致。

 

以上是关于JS6-对象的主要内容,如果未能解决你的问题,请参考以下文章

js6类和对象

js6:history和navigator对象的学习

JS6-Class

ES2015 / JS6 中的自定义元素 [重复]

笔记:Node.js 的 Buffer 缓冲区

JS6-函数1