ES6-对象的新增特性

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u012054869/article/details/82015816

1.属性的简介表示法

例子：

<script>
    let username = "Mark";
    let userage = 100;

    //对象赋值

    //ES5
    let userInfo = {
    	username: username,//属性：变量
    	userage: userage
    };
    console.log(userInfo);//直接将上面的变量传给userInfo，输出Object { username: "Mark", userage: 100 }

    //ES6
    let userInfo2 = {
    	username,//简写，属性名和变量名一致时
    	userage
    };
    console.log(userInfo2);//输出Object { username: "Mark", userage: 100 }

    //类似以上这种，解构赋值
    let {foo:foo,bar:bar} = {foo:100,bar:200};
    console.log(foo,bar);

    //简写
   let {foo2,bar2} = {foo2:100,bar2:200};
    console.log(foo2,bar2);

    //假如属性名和变量名不同
    let {foo:a,bar:b} = {foo:100,bar:200};
    console.log(a,b);

</script>

方法的简介表示法：例子：

<script>
    let username = "Mark";
    let userage = 100;

    //同样方法也可以简写
    let user = {
    	userage,
    	username,
    	// 传统形式
    	fn:function(){
    		console.log('fn');
    	},//加上逗号

    	//简写形式
    	demo(){
    		console.log('demo');
    	}
    }

    // 调用方法
    user.demo();//输出demo
    user.fn();//输出fn

</script>

2.Object.is()全等

用于比较，类似于全等===

注意：

0和-0 使用Object.is()判断 不相等

NaN和NaN使用Object.is()判断相等

<script>
    //Object.is()
    console.log(Object.is(10,100));//返回false
    console.log(Object.is(10,'10'));//返回false
    console.log(Object.is(10,10));//true

    console.log(0 === -0);//返回true
    console.log(Object.is(0,-0));//返回false

    console.log(NaN === NaN);//返回false
    console.log(Object.is(NaN,NaN));//返回true
</script>

3.Object.assign()复制对象

合并对象：例子：

<script>
    //Object.assign()合并对象
    let obj1 = {
    	name :"Jim",
    	age:20,
    	fn(){
    	}
    };
    let obj2 = {
    	name:"Bob",
    	grade:"H5",
    	demo(){
    	}
    };
    //进行合并,将obj2中合并到obj1中
    Object.assign(obj1,obj2);
    console.log(obj1);//输出Object { name: "Bob", age: 20, fn: fn(), grade: "H5", demo: demo() }

    // 方法二，合并到一个空对象中
    let res = Object.assign({},obj1,obj2);
    console.log(res);//输出Object { name: "Bob", age: 20, fn: fn(), grade: "H5", demo: demo() }
</script>

4.Object.keys()，Object.values()，Object.entries()

<script>
    //声明对象
    let obj = {
    	username:"Jim",
    	userage:20,
    	usergrade:"H5",
    	getInfo(){
    		console.log("getInfo");
    	},
    	demo(){
    	}
    };
    console.log(Object.keys(obj));//输出数组Array [ "username", "userage", "usergrade", "getInfo", "demo" ]

    console.log(Object.values(obj));//输出数组 Array [ "Jim", 20, "H5", getInfo(), demo() ]

    //输出第几个值[]
    console.log(Object.values(obj)[2]);//输出H5

    // 调用方法
    console.log(Object.values(obj)[3]);//输出function getInfo()

    //entries()
    console.log(Object.entries(obj));
    //输出以下0: Array [ "username", "Jim" ],1: Array [ "userage", 20 ], 2: Array [ "usergrade", "H5" ], 3: Array [ "getInfo", getInfo() ],4: Array [ "demo", demo() ],length: 5


    // 遍历对象中的属性和方法
    Object.entries(obj).forEach(function(item){
    	console.log(item);//输出还是数组Array [ "username", "Jim" ],Array [ "userage", 20 ],Array [ "usergrade", "H5" ],Array [ "getInfo", getInfo() ],Array [ "demo", demo() ]

	console.log(item[0]+":"+item[1]);//username:Jim,userage:20,usergrade:H5,getInfo:getInfo(){console.log("getInfo");},demo:demo(){}
    })

</script>