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

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

一、对象和属性和方法

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

实用工具推荐