ES6学习笔记五(对象)

1、可选链操作符使用 ?. 来表示

/*
 * 如果对象链上的引用是 null 或者 undefined 时， 
 * 操作符则会按照短路计算的方式进行处理，返回 undefined。
 * 函数不存在，也将会返回 undefined，不会抛异常。
 */

	let user = {
               name: 'xiaoming',
               ['haohao']:'好好',
               address: {
                  city: 'beijing',
                  other: {}
               },
               arr:[1,2,3,4,5],
               getname(string){
               	 return this.name+string
               }
  
            }
//获取属性
console.log(user?.name);	// xiaoming
console.log(user?.address?.city);		// beijing
console.log(user?.address?.other?.a?.b);	// undefined
//对象属性是表达式
console.log(user?.['haohao'])    //好好

//调用对象方法
console.log(user?.getname?.('好好'))  //xiaoming好好
console.log(user?.getName?.('好好'))	// undefined

//调用对象中数组
console.log(user?.arr?.[1])		//2

//可选链不能用于赋值
user?.name='xiaohong' Uncaught SyntaxError: Invalid left-hand side in assignment

//属性名不是函数也会报错，可选链只会判断属性是否有效，而不能判断属性的类型。
let person = {getName: ''}
let name = person.getName?.();	
console.log(name)// Uncaught TypeError: person.getName is not a function

2、Object.is()

//判断两个值是否相同

var foo = { a: 1 };
var bar = { a: 1 };
var obj = foo;
Object.is(foo, foo);         // true
Object.is(foo, bar);         // false
Object.is(foo, obj);         // true

Object.is(null, null);       // true

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

//当操作值都没有被定义时，这时它们的值是 undefined
let a
let b
Object.is(a,b) // true

//严格区分大小写的。
Object.is('China', 'China') // true
Object.is('China', 'china') // false

//操作值的类型必须相同，无论是什么值，只要类型不一样就会返回 false
Object.is(null, 'null') // false
Object.is(undefined, 'undefined') // false

//判断引用类型的值时，引用类型的地址相同时，则相等
let a = {"name": "china"}
let b = a
Object.is(a, b) // true
Object.is({"name": "china"}, {"name": "china"}) // false(地址不一样)

3、assign()

//把一个对象复制到另一个对象

let target = {};
let source = {a: 1, b: 2, c: 3};
Object.assign(target, source);
target.d = 4;//修改复制对象中的属性
console.log(target)   // {a: 1, b: 2, c: 3, d: 4} 被修改
console.log(source)   // {a: 1, b: 2, c: 3} 未修改

//合并对象
let target = {a: 1};
let source1 = {b: 2};
let source2 = {c: 3};
Object.assign(target, source1, source2);
console.log(target);  // {a: 1, b: 2, c: 3}

// 覆盖前面的值
let target = {a: 1, b: 1};
let source1 = {b: 2, c: 2};
let source2 = {c: 3};
Object.assign(target, source1, source2);
console.log(target);  // {a: 1, b: 2, c: 3}

//共有对象
 /*
  * Object.assign() 的拷贝属于浅拷贝。
  * 如果这个值是一个对象类型，拷贝后的对象下的这个对象类型是源对象和拷贝后的对象共有的，
  */
let target = {};
let source = {a: 1, b: {c: 2, d: 3}};
Object.assign(target, source);
target.a = 5;
target.b.c = 9;
console.log(target)   // {a: 5, b: {c: 9, d: 3}}
console.log(source)   // {a: 1, b: {c: 9, d: 3}}


/*
 * 当合并的源对象是基本类型时，这些基本类型会作为最后对象上的值，
 * 而键则以数字递增，其中如果值是 null 和 undefined 时会被忽略。
 */
var s1 = "abc";
var s2 = true;
var s3 = 10;
var s4 = Symbol("foo")
var obj = Object.assign({}, s1, null, s2, undefined, s3, s4);
console.log(obj); // { "0": "a", "1": "b", "2": "c" }

4、keys()

/*
 * 返回一个由一个给定对象的自身可枚举属性组成的数组，
 * 数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。
 */

//用于对象
let obj =  {
	name:  'xiaoming',
	sex:  'nan'
}
console.log(Object.keys(obj));//{"name","sex"}

//用于数组
var arr = ['a',  'b',  'c'];
console.log(Object.keys(arr));// ['0', '1', '2']

//用于类数组
var obj =  {  0:  'a',  1:  'b',  2:  'c'  };
console.log(Object.keys(obj));  // ['0', '1', '2']

//键值是数字和字符串混合时，会先进行数值的排序，然后再按添加的顺序排列字符串
var obj =  {  name:  'china',  10:  'a',  3:  'b',  age:  7  };
console.log(Object.keys(obj));// ["3", "10", "name", "age"]



/*在 Object.keys() 调用时会根据传入的参数进行类型转换，转换为 Object 类型的值
 * 
 * Undefined	抛出 TypeError
 * Null	        抛出 TypeError
 * Boolean	    返回一个新的 Boolean 对象
 * Number	    返回一个新的 Number 对象
 * String	    返回一个新的 String 对象
 * Symbol	    返回一个新的 Symbol 对象
 * Object	    直接将 Object 返回
 */
 
// 参数是undefined或null
Object.keys(undefined) // Uncaught TypeError: Cannot convert undefined or null to object
// 参数是数值
Object.keys(123) // [](数值对象是没有可遍历的对象)
// 参数是字符串
Object.keys('imooc') // ["0", "1", "2", "3", "4"]

5、values()

//获取可枚举对象上属性的值作为一个数组

let obj = {a: 1, b: 2, c: 3};
Object.values(obj)     // [1, 2, 3]

//参数是数值或布尔值
//Object.values() 和 Object.keys() 一样都会进行类型转换
console.log(Object.values(123));	// []
Object.values(false)    // []

//参数为字符串
Object.values('abc')    // ['a', 'b', 'c']

//键排序跟keys()一致

6、entries()

//获取可枚举对象上的属性和值的数组。

let obj = {a: 1, b: 2, c: 3};
console.log(Object.entries(obj))// [['a', 1], ['b', 3], ['c', 3]]

//参数是数字或布尔值
Object.entries(50)       // []
Object.entries(false)    // []

//遍历对象
let obj = { name: '小明', age: 7, sex: '男' };
for (let [key, value] of Object.entries(obj)) {
  console.log(`${key}: ${value}`);
}
//name: 小明
//age: 7
//sex: 男

7、把对象转为 Map 结构

let obj = { name: '小明', age: 7 };
let map = new Map(Object.entries(obj));
console.log(map)            // Map(2) {"name" => "小明", "age" => 7}
console.log(map.get("name"))  // 小明

8、fromEntries()

//Object.fromEntries() 是 Object.entries() 的反转函数

//数组转化为对象
var arr = [ ['a', '0'], ['b', '1'], ['c', '2'] ];
var obj = Object.fromEntries(arr);
console.log(obj); // {a: "0", b: "1", c: "2"}

//Map 转化为对象
var map = new Map();
map.set('name', '小明');
map.set('age', 7);
console.log(map);     // Map(2) {"name" => "小明", "age" => 7}
var obj = Object.fromEntries(map);
console.log(obj);     // {name: "小明", age: 7}

欢迎访问我的个人博客