1、对象
1、对象的书写形式
let name = '小陈同学';
let age = 23;
let obj = {
name:name,
age:age,
fn:function(){
return this.name
}
}
//ES写法
let obj = {
name,
age,
fn(){
return this.name
}
}
1.2、属性名表达式
定义对象的属性，有两种方式
// 写法一
obj.name = '小陈同学';
// 写法二
obj['name'] = '小陈同学'
在ES6中拓展了ES5的缺陷，在使用字面量定义对象时，ES5只允许第一种方式去定义，比如：
let obj = {
name:'小陈同学',
age:22
}
而ES6中拓展了它的定义方式，允许第二种方式去字面量的方式去定义对象
let obj = {
['name'] : '小陈同学',
['age']: 22
}
其次还允许这种方式去定义对象内部的方法名
let obj = {
['name']:'小陈同学',
['fn'](){
return 1;
}
}
但是需要注意的是，这种写法不支持简写，比如：
//第一种方式
let name = '小陈同学';
let age = 23;
//ES简写的写法
let obj = {
name,
age,
fn(){
return this.name
}
}
console.log(obj.fn()); // 打印结果 小陈同学
// 第二种方式
let username = '小yu同学';
let userage = 22;
let obje = {
//切记不支持简写！！！！
[username]:[username],
[userage]:[userage],
['fn'](){
return obje[username];
}
}
console.log(obje.fn())
第二种写法一定不要去简写，会报错！！！
2、对象新增
2.1、Object.is() 用来比较两个值是否相等
ES5比较两个值是否相等，只有两个运算符：相等运算符（==）以及严格相等运算符（===）。它们都有自身的缺点，前者会自动转换数据类型，比如：123 == '123' 相等运算符会自动处理为true值，隐形的进行了数据类型的转换，而后者严格相等运算符的NaN不等于自身，以及+0等于-0。
ES6提出同值相等算法，Object.is()就是部署这个算法的新方法，它用来比较两个值是否严格相等，类似于严格相等运算符（===）的提升。
let obj1 = Object.is(123,'123');
console.log(obj1);// false
let obj2 = Object.is(NaN,NaN);
console.log(obj2);// true
let obj3 = Object.is(+0,-0);
console.log(obj3);// false
执行结果.png
2.2、Object.assign()用来合并对象的
使用方法：let 新对象 = Object.assign(目标对象，需要合上的对象)
使用示例
let json = {
name:'小陈同学',
age:22,
addr:'湖南省长沙市'
}
let newjson = {
score:100,
isShow:true
}
let jsons = Object.assign(json,newjson);
console.log(jsons);
打印结果.png
2.2.1、如果属性名有重复的
如果在合并对象的时候属性名有重复的，那么后面的就会去覆盖前面的
let json = {
name:'小陈同学',
age:22,
addr:'湖南省长沙市'
}
let newjson = {
name:'小yu同学',
addr:'安徽省芜湖市',
score:100,
isShow:true
}
let jsons = Object.assign(json,newjson);
console.log(jsons);
执行结果.png
2.2.2、如果Object.assign()中只有一个参数，Object.assign()会直接返回该参数
let json = {
name:'小陈同学'
}
let jsons = Object.assign(json);
console.log(jsons);
执行结果.png
2.2.3、由于undefined和null无法转成对象，所以如果它们作为参数，就会报错。
Object.assign(undefined)//报错
Object.assign(null)//报错
2.2.4、利用Object.assign()这个方法来拷贝数组
let arr = [1,2,3];
let array = new Set(Object.assign([],arr)); //为了能链式的去添加元素，偷个懒...
array.add(4).add(5).add(6).add(7).add(8);
console.log('新数组：',array);
console.log('旧数组：',arr)
执行结果.png
3、Object.keys()、Object.entries()以及Object.values()
用于循环json和对象
3.1、Object.keys()
遍历json的属性
let json = {
name: "小yu同学",
addr: "安徽省芜湖市",
score: 100,
isShow: true,
};
for(let item of Object.keys(json)){
console.log(item);
}
执行结果.png
3.2、Object.values()
遍历json的属性值
let json = {
name: "小yu同学",
addr: "安徽省芜湖市",
score: 100,
isShow: true,
};
for(let item of Object.values(json)){
console.log(item);
}
执行结果.png
3.3、Object.entries()
遍历键值对
let json = {
name: "小yu同学",
addr: "安徽省芜湖市",
score: 100,
isShow: true,
};
for(let item of Object.entries(json)){
console.log(item);
}
执行结果.png
也可以使用解构去做
let {keys,values,entries} =Object
let json = {
name: "小yu同学",
addr: "安徽省芜湖市",
score: 100,
isShow: true,
};
for(let item of keys(json)){
console.log(item); //name addr score isShow
}
for(let item of values(json)){
console.log(item);//小yu同学 安徽省芜湖市 100 true
}
for(let item of entries(json)){
console.log(item);//[name: "小yu同学"] [addr: "安徽省芜湖市"] [score: 100] [isShow: true],
}
4、对象的扩展运算符
4.1、解构赋值与...（扩展运算符）
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }
由于解构需要等号两边匹配一致，因此，左边是对象，而右边不是一个对象，那么就会出现报错。
4.1.1、解构赋值必须要放到最后一个参数，否则报错
let {...x,y,z} = obj //报错
let {x,...y,...z} = obj //报错
let {x,y,...z} = obj //正确
注意：解构赋值的拷贝是浅拷贝，即如果一个键的值是复合类型的值（数组、对象或是函数），那么解构赋值拷贝的是这个值的引用，而不是这个值的副本。比如：
let obj = {
name:'小陈',
age:22,
x:{
addr:'安徽省芜湖市'
}
}
console.log(obj.x.addr);
let {x,...b} = obj;
console.log(x.addr);
打印结果.png
指向的是同一个引用对象
4.1.2、扩展运算符可以拷贝对象
扩展运算符可以拷贝对象用于取出参数对象的所有可遍历的属性，拷贝到当前对象之中。
let a = {x:1,y:2,z:3}
let c = {...a};
console.log(c)
执行结果.png
网友评论