ES6基础语法之对象介绍

更新时间：2022年05月02日 13:29:41 作者：農碼一生

这篇文章介绍了ES6中对象的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

一、对象和属性和方法

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基础语法之对象的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

ES6
对象

javascript类型转换使用方法
这篇文章主要介绍了javascript类型转换的使用方法,包括转换为字符串、转换为数字、转换为布尔值、转换为对象使用方法，大家参考使用吧
2014-02-02
JavaScript中OnLoad几种使用方法
在前几个项目的开发中遇到onload使用的几种情形,接下来详细介绍下
2012-12-12
JavaScript中的this关键字使用详解
这篇文章主要介绍了JavaScript中的this关键字使用,是JavaScript入门学习中的基础知识,需要的朋友可以参考下
2015-08-08
javascript内置对象arguments详解
这篇文章主要介绍了javascript内置对象arguments,实例讲解arguments是什么怎么用,需要的朋友可以参考下
2014-03-03
详解JavaScript 的变量
这篇文章主要JavaScript 的变量，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03
深入解读JavaScript中的Iterator和for-of循环
这篇文章主要介绍了JavaScript中的Iterator和for-of循环,是JS入门学习中的基础知识,需要的朋友可以参考下
2015-07-07
javascript学习笔记_浅谈基础语法,类型,变量
下面小编就为大家带来一篇javascript学习笔记_浅谈基础语法,类型,变量。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-09-09
深入剖析JavaScript:Object类型
下面小编就为大家带来一篇深入剖析JavaScript:Object类型。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05
深入理解JavaScript 闭包究竟是什么
本篇文章，小编一起和大家探讨JavaScript 闭包究竟是什么，有需要的朋友可以参考一下
2013-04-04
Javascript学习笔记6 prototype的提出
所以你还会再说是否用prototype都是一样的么？其实我以前也是这么理解的，在这次偶然的试验中看到了这个问题。
2010-01-01