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);         // trueObject.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}

欢迎访问我的个人博客

ES6学习笔记五(对象)相关推荐

es6学习笔记-顶层对象_v1.0_byKL
es6学习笔记-顶层对象_v1.0 (虽然是笔记,但是基本是抄了一次ruan大师的文章了) 顶层对象顶层对象,在浏览器环境指的是window对象,在Node指的是global对象. ES5之中,顶层 ...
ES6学习笔记（对象新增方法）
1.Object.is() ES5 比较两个值是否相等,只有两个运算符:相等运算符(==)和严格相等运算符(===).它们都有缺点,前者会自动转换数据类型,后者的NaN不等于自身,以及+0等于-0. ...
ES6学习笔记(五)
ES6允许直接写入变量和函数,作为对象的属性和方法.这样书写更为简洁,除了属性简写,方法也可以简写. ES6允许字面量定义对象时用表达式作为对象的属性,即把表达式放在方括号内,表达式还可以用于定义方法 ...
ES6学习笔记二arrow functions 箭头函数、template string、destructuring
接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...
ES6学习笔记（五）：轻松了解ES6的内置扩展对象
前面分享了四篇有关ES6相关的技术,如想了解更多,可以查看以下连接 <ES6学习笔记(一):轻松搞懂面向对象编程.类和对象> <ES6学习笔记(二):教你玩转类的继承和类的对象> ...
python函数是一段具有特定功能的语句组_Python学习笔记(五)函数和代码复用
本文将为您描述Python学习笔记(五)函数和代码复用,具体完成步骤: 函数能提高应用的模块性,和代码的重复利用率.在很多高级语言中,都可以使用函数实现多种功能.在之前的学习中,相信你已经知道Pyth ...
es6学习笔记-字符串的扩展_v1.0_byKL
es6学习笔记-字符串的扩展_v1.0 字符的Unicode表示法 JavaScript 允许使用uxxxx的形式表示一个字符,但在 ES6 之前,单个码点仅支持u0000到uFFFF,超出该范围的必 ...
ES6学习笔记（三）：教你用js面向对象思维来实现 tab栏增删改查功能
前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>, ...
好程序员教程分析Vue学习笔记五
好程序员教程分析Vue学习笔记五,上次我们学习了Vue的组件,这次我们来学习一下路由的使用.在Vue中,所谓的路由其实跟其他的框架中的路由的概念差不多,即指跳转的路径. 注意:在Vue中,要使用路由, ...
ES6学习笔记04：Set与Map
ES6学习笔记04:Set与Map JS原有两种数据结构:Array与Object,ES6新增两种数据结构:Set与Map 一.Set数据结构 Set类似于数组,但是成员值不允许重复,因此主要用于数据 ...

ES6学习笔记五(对象)

ES6学习笔记五(对象)相关推荐

最新文章

热门文章