ES6基礎(chǔ)語法之對象介紹

更新時間：2022年05月02日 13:29:41 作者：農(nóng)碼一生

這篇文章介紹了ES6中對象的用法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

一、對象和屬性和方法

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允許用表達(dá)式作為屬性名，但是一定要將表達(dá)式放在方括號內(nèi)：

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

或

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

注意點：屬性的簡潔表示法和屬性名表達(dá)式不能同時使用，否則會報錯：

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

二、對象的擴展運算符...

取出參數(shù)對象所有可遍歷屬性然后拷貝到當(dāng)前對象：

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"}

添加的屬性在拓展運算度前面，取擴展運算符內(nèi)容：

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

到此這篇關(guān)于ES6基礎(chǔ)語法之對象的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: