ES6对象语法详解：简洁表示法与扩展运算符

作者：代码拾荒时间：2026-10-25 09:50:21浏览：634

本文介绍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支持在对象字面量中直接定义方法，无需使用function关键字。

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

作者最新文章

JavaScript异步发送HTTP请求时怎么优雅地处理错误

2026-11-05 17:10:44

5款主流JS在线运行工具对比：CodePen、JSFiddle与StackBlitz怎么选

2026-11-05 17:04:04

JavaScript入门书籍避坑：这些书不适合初学者

2026-11-05 16:31:15

JS使用Math.round实现保留两位小数的原理与代码

2026-11-05 15:35:55

JavaScript 原生 Date 对象怎么实现日期加减

2026-11-05 14:30:00