ES6-对象的新增特性

╰+哭是因爲堅強的太久メ 2022-05-15 04:07 192阅读 0赞

**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>

发表评论取消回复

表情：

评论列表（有 0 条评论，192人围观）

还没有评论，来说两句吧...

相关阅读

相关 ES6/ES7/ES8新特性之新增处理字符串的方法

我主要提常用方法 includes() // let str = 'happy'; 是否包括以下字符，返回true or false // c

快来打我*/ 2023年08月17日 15:42/ 0 赞/ 67 阅读

相关 ES6新增特性小结

ES6新增特性 1. 变量 var :可重复声明；函数级作用域； const ：不可重复声明；块级作用域；常量 le

桃扇骨/ 2022年12月19日 08:56/ 0 赞/ 92 阅读

相关 ES6新增特性

-------------------- let和const命令 let和var的区别 var a = []; for (var i = 0; i

我就是我/ 2022年11月27日 10:15/ 0 赞/ 169 阅读

相关 ES6-对象的新增特性

1.属性的简介表示法例子： <script> let username = "Mark"; let userage = 100;

╰+哭是因爲堅強的太久メ/ 2022年05月15日 04:07/ 0 赞/ 193 阅读

相关 ES6-数组的新增特性-数组对象方法

数组对象新增的方法 4.find()和findIndex()方法（1）find() 返回数组中第一个满足条件的元素，参数是回调函数例子： <script>

电玩女神/ 2022年05月15日 04:07/ 0 赞/ 236 阅读

相关 ES6-数组的新增特性-扩展运动符

构造函数的新增方法Array.form()和Array.of() 2.Array.form() 可以把类数组对象、实现了迭代器接口的数据类型转换成真正的对象；例子：

Bertha 。/ 2022年05月15日 04:07/ 0 赞/ 196 阅读

相关 ES6-数组的新增特性-扩展运动符

1.扩展运算符（...） (1)定义：扩展运算符相当于rest参数的逆运算，把数组转换为用逗号分割的参数列表，例子： <script> // rest

ゝ一纸荒年。/ 2022年05月15日 04:07/ 0 赞/ 169 阅读

相关 ES6-函数新增特性

1.函数参数的默认值 <script> function fn(a='小丁',b){ console.log(a+"和"+b+""写代码);

雨点打透心脏的1/2处/ 2022年05月15日 04:06/ 0 赞/ 329 阅读

相关 ES6-字符串新增特性

1.模板字符串（1）定义比较长，复杂的字符串，如html代码模板字符串中写 \` 需要转义，例子： <script> let html

怼烎@/ 2022年05月15日 04:06/ 0 赞/ 300 阅读

相关 ES6对象的扩展及新增方法

1.属性的简洁表示法 ES6允许直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。 const foo = 'bar'; const baz

悠悠/ 2022年04月10日 14:17/ 0 赞/ 249 阅读