這篇文章帶給大家的內容是關於ES6物件的擴展及新增方法的內容總結(附範例),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。
1、屬性的簡潔表示法
ES6允許直接寫入變數和函數,作為物件的屬性和方法。這樣的書寫更簡潔。
const foo = 'bar'; const baz = {foo}; baz//{foo:'bar'} //等同于 const baz = {foo:foo}
上面程式碼表明,ES6允許在物件之中,直接寫變數。這時,屬性名為變數名,屬性值為變數的值。下面是另一個例子。
function f(x,y){ return {x,y} } //等同于 function f(x,y){ return {x:x,y:y}; } f(1,2)//{x:1,y:2}
除了屬性簡寫,方法也可以簡寫。
const o ={ method(){ return 'Hello!' } } //等同于 const o = { method:function(){ return 'Hellow'; } }
下面是一個實際的例子。
let birth = '2000/01/01'; const Person ={ name:'张三', //等同于birth:birth birth, //等同于hello :function().... hello(){ console.log('我的名字是',this.name) } }
這種寫法用於函數的回傳值,將會非常方便。
function getPoint(){ const x =1; const y = 10; return {x,y} } getPoint()//{x:1,y:10}
CommonJS模組輸出一組變量,就非常適合使用簡潔寫法。
let ms = {}; function getItem(key){ return key in ms ?ms[key]:null; } function setItem(key,value){ ms[key] = value; } function clear(){ ms={} } module.exports = {getItem,setItem,clear}; //等同于 module.exports = { getItem:getItem, setItem:setItem, clearLclear }
屬性的賦值器(setter)和取值器(getter),事實上也是採用這種寫法。
const cart = { _wheels:4, get wheels(){ return this._wheels; }, set wheels (value){ if(value<this._wheels){ throw new Error('数值太小了!'); } this._whells = value; } }
2.屬性名稱表達式
JavaScript定義物件的屬性,有兩種方法。
//方法一 obj.foo = true; //方法二 obj['a'+'bc'] = 123;
上面程式碼的方法一是直接用識別符當屬性名,方法二是用表達式當屬性名,這時將表達式放在方括號之內。
但是,如果使用字面量定義物件(使用大括號),在ES5中只能使用方法一(標識符)定義屬性。
var obj ={ foo:true, abc:123 }
ES6允許字面量定義物件時,用方法二作為物件的屬性名,即把表達式放在括號內。
let propKey = 'foo'; let obj ={ [propKey]:true, ['a'+'bc']:123 }
下面是另一個範例:
let lastWord = 'last word'; const a = { 'first word':'hello', [lastWord]:'world' }; a['first word']//hello a[lastWord]//world a['last word']//world
表達式也可以用來定義方法名稱。
let obj = { ['h'+'ello'](){ return 'hi' } } obj.hello()//hi;
注意:
属性名表达式与简洁表示法,不能同时使用,会报错。 属性名表达式如果是一个对象,默认情况下会自动将对象转为字符串[object object],这一点要特别小心。
const keyA = {a:1}; const keyB = {b:2}; const myObject = { [keyA]:'valueA', [keyB]:'valueB' }; myObject;// Object {[object Object]: "valueB"}
上面程式碼中,[keyA]和[keyB]得到的都是[object object],所以[keyB]會把[keyA]覆蓋掉,而myObject最後只有一個[object object]屬性。
方法的name屬性
函數的name屬性,傳回函數名稱。物件方法也是函數,因此也有name屬性。
const person = { sayName() { console.log('hello!'); }, }; person.sayName.name // "sayName"
屬性的可枚舉型和遍歷
對象的每個屬性都有一個描述對象,用來控制改屬性的行為。 Object.getOwnPropertyDescriptor(obj,'foo')方法可以取得該屬性的描述物件。
描述物件的enumerable屬性,稱為可枚舉性,如果該屬性為false,就表示某些操作會忽略目前的屬性。
目前,有四個操作會忽略enumerable為false的屬性。
for...in循环:只遍历对象自身的和继承的可枚举的属性。(不包含Symbol属性) Object.keys():返回对象自身的所有可枚举的属性的键名,返回一个数组。(不包含Symbol) JSON.stringify():只串行化对象自身的可枚举的属性。 object.assign():忽略enumrable为false的属性,只拷贝对象自身的可枚举的属性。
ES6一共有5種方法可以遍歷物件的屬性。
(1)for...in
for...in循环遍历对象自身的和继承的可枚举属性(不包含Symbol属性)。
(2)Object.keys(obj)
object.keys返回一个数组,包含对象自身的(不含继承的)所有可枚举属性(不包含Symbol属性)的键名。
(3)Object.getOwnPropertyNames(obj)
返回一个数组,包含对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性)的键名。
(4)Object.getOwnPropertySymbols(obj)
返回一个数组,包含对象自身的所有Symbol属性的键名。
(5)Reflect.ownKeys(obj)
Reflect.ownKeys返回一个数组,包含对象自身的所有键名,不管键名是Symbol或字符串,也不管是否可枚举。
#我們知道,this關鍵字總是指向函數所在的目前對象,ES6又新增了另一個類似的關鍵字super,指向目前對象的原型對象。
const proto = { foo:'hello' }; const obj = { foo:'world', find(){ return super.foo; } }; Object.setPrototypeOf(obj,proto); obj.find();//hello
上面程式碼中,物件obj.find()方法之中,透過super.foo引用了原型物件proto的foo屬性。
注意:super關鍵字表示原型物件時,只能用在物件的方法之中,用在其他地方都會報錯。目前,只有物件方法的簡寫法可以讓Javascript引擎確認,定義的是物件的方法。
JavaScript引擎內部,super.foo等同於Object.getPrototypeOf(this).foo或Object.getPrototypeOf(this).foo.call(this)。
解構賦值
物件的解構賦值用於從一個物件取值,相當於將目標物件本身的所有可遍歷、但尚未被讀取的屬性,分配到指定的物件上面。所有的鍵和它們的值,都會拷貝到新物件上面。
let{x,y,...z} = {x:1,y:2,a:3,b;4}; x//1, y//2, z//{a:3,b:4}
上面程式碼中,變數z是解構賦值所在的物件。它取得等號右邊的所有尚未讀取的鍵(a和b),將它們連同值一起拷貝過來。
#以上是ES6物件的擴充及新增方法的內容總結(附範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!