五、ES6之物件
阿新 • • 發佈:2022-03-06
一、物件和屬性和方法
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:"[email protected]"}; let stu = {...stu1BasicInfo,...stu1DetailInfo}; console.log(stu); //{name:"Jack",age:20,sex:"男",phone:"13524521457",mail:"[email protected]"}
拷貝物件時支援新增屬性:
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:"男"}
本文來自部落格園,作者:農碼一生,轉載請註明原文連結:https://www.cnblogs.com/wml-it/p/15967789.html
技術的發展日新月異,隨著時間推移,無法保證本部落格所有內容的正確性。如有誤導,請大家見諒,歡迎評論區指正!
個人開原始碼連結,歡迎點亮:
GitHub:https://github.com/ITMingliang
Gitee:https://gitee.com/mingliang_it
GitLab:https://gitlab.com/ITMingliang
進開發學習交流群: