您的位置：首页 > 编程技术 > 基础知识  >  ES6基础语法之对象介绍

ES6基础语法之对象介绍

 更新时间：2022年5月2日 21:35  点击：390 作者：農碼一生

一、对象和属性和方法

JavaScript中对象：

var person={name:"Jack",age:20};

或：

var name = "jack";
var age = 20;
var person = {name:name,age:age};
console.log(person.age); //20

ES6中的简洁表示：

let [name,age]=["jack",20];
let person = {name,age}; //等同person = {name: name,age: age}
console.log(person.age); //20

JavaScript中对象方法：

var person = {
    SayHi:function()
    {
    	console.log("hi");
    }
}
person.SayHi();  //hi

ES6中简洁表示：

let person = {
    SayHi()
    {
    	console.log("hi");
    }
}
person.SayHi();

ES6允许用表达式作为属性名，但是一定要将表达式放在方括号内：

var person = {["na"+"me"]:"jack",["a"+"ge"]:20};
console.log(person.age);

或

let str = "Hi";
let person = {
    ["Say"+str](){
    	console.log("hi");
    }
}
person.SayHi();

注意点：属性的简洁表示法和属性名表达式不能同时使用，否则会报错：

let [name,age]=["jack",20];
let person = {["na"+"me"],["a"+"ge"]}; //报错

二、对象的扩展运算符...

取出参数对象所有可遍历属性然后拷贝到当前对象：

let stu1 = {name:"Jack",age:20,sex:"男"};
let stu2 = {...stu1};
console.log(stu2); //{name: "Jack", age: 20,sex:"男"}

合并两个对象：

let stu1BasicInfo = {name:"Jack",age:20,sex:"男"};
let stu1DetailInfo = {phone:"13524521457",mail:"ldh@163.com"};
let stu = {...stu1BasicInfo,...stu1DetailInfo};
console.log(stu);
//{name:"Jack",age:20,sex:"男",phone:"13524521457",mail:"ldh@163.com"}

拷贝对象时支持添加属性：

let stu1 = {name:"Jack",age:20,sex:"男"};
let stu2 = {...stu1,phone:"13554785452"};
console.log(stu2); //{name:"Jack",age:20,sex:"男",phone:"13554785452"}

添加的属性在拓展运算符后面，取添加的属性：

let stu1 = {name:"Jack",age:20,sex:"男"};
let stu2 = {...stu1,name:"rose",phone:"13554785452"};
console.log(stu2);
//{name:"rose",age:20,sex:"男",phone:"13554785452"}

添加的属性在拓展运算度前面，取扩展运算符内容：

let stu1 = {name:"Jack",age:20,sex:"男"};
let stu2 = {name:"rose",phone:"13554785452",...stu1};
console.log(stu2);
//{name:"Jack",phone:"13554785452"，age:20,sex:"男"}

到此这篇关于ES6基础语法之对象的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持猪先飞。

原文出处：https://www.cnblogs.com/wml-it/p/15967789.html

[!--infotagslink--]

相关文章

  • java8如何用Stream查List对象某属性是否有重复

    这篇文章主要介绍了java8如何用Stream查List对象某属性是否有重复的操作，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2021-09-11

  • R语言 如何删除指定变量或对象

    这篇文章主要介绍了R语言删除指定变量或对象的操作方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-05-06

  • 如何在Spring WebFlux的任何地方获取Request对象

    这篇文章主要介绍了如何在Spring WebFlux的任何地方获取Request对象，帮助大家更好的理解和使用springboot框架，感兴趣的朋友可以了解下...2021-01-26

  • 牛叉的Jquery――Jquery与DOM对象的互相转换及DOM的三种操作

    只有jQuery对象才能调用jQuery类库的各种函数，同样有些dom对象的属性和方法在jQuery上也是无法调用的，不过基本上jQuery类库提供的函数包含了所有的dom操作。这就需要我们知道如何将jQuery对象和DOM的相互转换的方法。1...2015-10-30

  • JavaScript预解析,对象详解

    这篇文章主要介绍了JavaScript预解析,对象的的相关资料，小编觉得这篇文章写的还不错，需要的朋友可以参考下，希望能够给你带来帮助...2021-11-10

  • js如何打印object对象

    js调试中经常会碰到输出的内容是对象而无法打印的时候，光靠alert只能打印出object标示，却不能打印出来里面的内容，甚是不方便，于是各方面整理总结了如下一个函数，能够将数组或者对象这类的结果一一打印出来，具体代码如下： fu...2015-10-21

  • 替换json对象中的key最佳方案

    本文给大家介绍如何替换json对象中的key，通过实例代码给大家介绍key的替换方法，代码也很简单，需要的朋友参考下吧...2021-06-02

  • javascript self对象使用详解

    这篇文章主要介绍了javascript self对象使用详解的相关资料,需要的朋友可以参考下...2016-10-20

  • 详解ES6实现类的私有变量的几种写法

    这篇文章主要介绍了详解ES6实现类的私有变量的几种写法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-02-10

  • ActiveX部件不能创建对象：dm.dmsoft代码：800A01AD

    vbs调用插件报：ActiveX部件不能创建对象，代码：800A01AD，一般是因为病毒导致dll文件丢失或者64系统问题导致,需要的朋友可以参考下...2020-06-30

  • ES5和ES6中类的区别总结

    这篇文章主要给大家介绍了ES5和ES6中类的区别的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-12-21

  • JS实现简单面向对象的颜色选择器实例

    这篇文章主要介绍了JS实现简单面向对象的颜色选择器,以完整实例形式分析了JavaScript基于面向对象实现颜色选择器的具体步骤与实现技巧,需要的朋友可以参考下...2016-04-23

  • 解决SpringCloud Feign传对象参数调用失败的问题

    这篇文章主要介绍了解决SpringCloud Feign传对象参数调用失败的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2021-06-24

  • 对象题目的一个坑 理解Javascript对象

    这篇文章主要介绍了Javascript对象，特别为大家分享了对象题目的一个坑，提供了解题思路，感兴趣的小伙伴们可以参考一下...2015-12-24

  • 理解JavaScript事件对象

    这篇文章主要为大家介绍了JavaScript事件对象，了解JavaScript事件...2016-01-26

  • Xml中使用foreach遍历对象实现代码

    这篇文章主要介绍了Xml中使用foreach遍历对象实现代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-12-04

  • HTML5 FileReader对象的具体使用方法

    这篇文章主要介绍了HTML5 FileReader对象的具体使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-30

  • 详解JS ES6编码规范

    本章节讨论使用ES6编码风格到代码中需要注意的点。通过记住这些关键点，可以让我们写出更优美的、可读性更强的JavaScript ES6风格的代码。...2021-05-08

  • Bootstrap媒体对象的实现

    在web页面中，图片居左，内容居右排列，是非常常见的效果，它也就是媒体对象，它是一种抽象的样式，可以用来构建不同类型的组件。本文给大家介绍Bootstrap媒体对象的实现，感兴趣的朋友一起学习吧...2016-05-04

  • vue - props 声明数组和对象操作

    这篇文章主要介绍了vue - props 声明数组和对象操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-30