es6 对象的扩展

对象的扩展

      • 传统对象属性写法
      • es6对象属性写法
      • 属性名表达式
      • 属性的可枚举性和遍历
        • 可枚举性
          • 四个操作会忽略enumerable为false的属性:
        • 属性的遍历
          • 以上属性遍历的次序规则
      • Object.is()
      • Object.assign()
      • Object.setPrototypeOf()
      • Object.getPrototypeOf()
      • Object.keys()
      • Object.values()
      • Object.entries()
      • Object.fromEntries()

传统对象属性写法

	var a = "aaa";
	var b = "130";

	//传统属性写法
	var c = {
		"a":a,
		"b":b
	}
	console.log(c); // { a:"aaa",b:"130"}

es6对象属性写法

	var a = "aaa";
	var b = "130";

	//es6属性写法
	var c = {a,b};
	console.log(c); // { a:"aaa",b:"130"}	
	//传统表示法
	var obj = {
		fn:function(){
			console.log('传统表示法')
		}
	}

	//es6表示法
	var obj = {
		fn(){
			console.log('es6表示法')
		}
	}

属性名表达式

	var a = "a";
	var b = "b";
	var c = "c";
	var d = "d";

	var E = {
		[ a+b ] : "啦啦啦啦",
		[ c+d ](){
			return "hello!!!"
		}
	}

	console.log(E.ab); // "啦啦啦啦"
	console.log(E.cd()); // "hello!!!"

注意: 属性名表达式简洁表示法,不能同时使用,会报错。

	//报错写法
	var a = "b";
	var b = "c";
	var c = { [b] }

	//正确写法
	var a = "b"
	var c = { [a]:"c" }

注意: 属性名表达式如果是一个对象,默认情况下会自动将对象转为字符串[object Object],这一点要特别小心。

	var A = {a: 1};
	var B = {b: 2};
	
	var Object = {
	  [A]: 'valueA',
	  [B]: 'valueB'
	};
	
	Object // Object {[object Object]: "valueB"}

属性的可枚举性和遍历

可枚举性

对象的每个属性都有一个描述对象(Descriptor),用来控制该属性的行为。Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象。

	let obj = { foo: 123 };
	Object.getOwnPropertyDescriptor(obj, 'foo')
	//  {
	//    value: 123,
	//    writable: true,
	//    enumerable: true,
	//    configurable: true
	//  }
  • 描述对象的enumerable属性,称为“可枚举性”,如果该属性为false,就表示某些操作会忽略当前属性。
四个操作会忽略enumerable为false的属性:

for...in循环:只遍历对象自身的和继承的可枚举的属性。
Object.keys():返回对象自身的所有可枚举的属性的键名。
JSON.stringify():只串行化对象自身的可枚举的属性。
Object.assign(): 忽略enumerable为false的属性,只拷贝对象自身的可枚举的属性

属性的遍历

  • for...in for…in循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)。
  • Object.keys(obj) Object.keys返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)的键名。
  • Object.getOwnPropertyNames(obj) Object.getOwnPropertyNames返回一个数组,包含对象自身的所有属性(不含 Symbol 属性,但是包括不可枚举属性)的键名。
  • Object.getOwnPropertySymbols(obj) Object.getOwnPropertySymbols返回一个数组,包含对象自身的所有 Symbol 属性的键名。
  • Reflect.ownKeys(obj) Reflect.ownKeys返回一个数组,包含对象自身的所有键名,不管键名是 Symbol 或字符串,也不管是否可枚举。
以上属性遍历的次序规则
  • 首先遍历所有数值键,按照数值升序排列。
  • 其次遍历所有字符串键,按照加入时间升序排列。
  • 最后遍历所有 Symbol 键,按照加入时间升序排列

Object.is()

Object.is() 比较两个值是否严格相等,或者说全等(===)

	var a = '10';
	var b = 10;
	var c = 10;

	Object.is(a,b); // false
	Object.is(b,c); // true

Object.assign()

Object.assign() 将源对象的属性赋值到目标对象上。用于对象的合并,参数至少两个或者更多。

	//目标对象
	var obj = {"a":1};

	//源对象
	var newObj = {"b":2,"c":3};

	Object.assign(obj,newObj); //{ a:1,b:2,c:3 }

注意 若赋值过程中,对象属性出现重复,后面的属性值就会覆盖前面的属性值

	//目标对象
	var obj = {"a":1};

	//源对象
	var newObj = {"b":2,"c":3};

	var newObj2 = {"b":4}

	Object.assign(obj,newObj,newObj2); //{ a:1,b:4,c:3 }

注意 如果该参数不是对象,则会先转成对象,然后返回。
由于undefinednull无法转成对象,所以如果它们作为参数,就会报错

	let obj = {a: 1};
	Object.assign(obj) === obj; // true

	Object.assign(undefined) // 报错
	Object.assign(null) // 报错

Object.setPrototypeOf()

Object.setPrototypeOf() 设置一个对象的prototype属性

	//自定义一个Person类(函数)
    function Person(){

    }
    //函数都有一个预属性prototype对象
    Person.prototype = {
        //给prototype对象添加一个say方法
        say(){
            console.log('hello');
        }
    };


    //实例化Person对象,赋值给变量allen
    let allen = new Person();
    //调用类的say方法
    allen.say();
    //结果:打印出hello


    //使用Object.setPrototypeOf
    Object.setPrototypeOf(
            allen,
            {say(){console.log('hi')}
    });

    //再次调用类的say方法
    allen.say();
    //结果:打印出hi

Object.getPrototypeOf()

Object.getPrototypeOf() 获取一个对象的prototype属性

	//自定义一个Person类(函数)
    function Person(){

    }
    //函数都有一个预属性prototype对象
    Person.prototype = {
        //给prototype对象添加一个say方法
        say(){
            console.log('hello');
        }
    };


    //实例化Person对象,赋值给变量allen
    let allen = new Person();
    //调用类的say方法
    allen.say();
    //结果:打印出hello

    //获取allen对象的prototype属性
    Object.getPrototypeOf(allen);
    //结果:打印{say:function(){.....}}

Object.keys()

Object.keys()方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名。

	var obj = { a: 'aaa', b: 123 };
	Object.keys(obj)
	// ["a", "b"]

Object.values()

Object.values()方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值

	var obj = { a: 'aaa', b: 123 };
	Object.keys(obj)
	// ["aaa", 123]

Object.values只返回对象自身的可遍历属性

	let obj = Object.create({}, {p: {value: 42}});
	Object.values(obj) // []

Object.values会过滤属性名为 Symbol 值的属性。

	Object.values({ [Symbol()]: 123, foo: 'abc' });
	// ['abc']

如果Object.values方法的参数是一个字符串,会返回各个字符组成的一个数组。

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

Object.entries()

Object.entries()方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值对数组。

	let obj = { a: 'aaa', b: 111 };
	Object.entries(obj)
	// [ ["a", "aaa"], ["b", 111] ]

Object.entries的基本用途是遍历对象的属性。

	let obj = { one: 1, two: 2 };
	for (let [k, v] of Object.entries(obj)) {
	  console.log(
	    `${JSON.stringify(k)}: ${JSON.stringify(v)}`
	  );
	}
	// "one": 1
	// "two": 2

Object.entries方法的另一个用处是,将对象转为真正的Map结构。

	const obj = { foo: 'bar', baz: 42 };
	const map = new Map(Object.entries(obj));
	map // Map { foo: "bar", baz: 42 }

Object.fromEntries()

Object.fromEntries()方法是Object.entries()的逆操作,用于将一个键值对数组转为对象。

	Object.fromEntries([
	  ['a', 'aaa'],
	  ['b', 12]
	])
	// { a: "aaa", b: 12 }

你可能感兴趣的:(ES6)