首頁  >  文章  >  web前端  >  ES6物件的擴充及新增方法的內容總結(附範例)

ES6物件的擴充及新增方法的內容總結(附範例)

不言
不言轉載
2019-01-11 11:02:233458瀏覽

這篇文章帶給大家的內容是關於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或字符串,也不管是否可枚举。

super關鍵字

#我們知道,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中文網其他相關文章!

陳述:
本文轉載於:segmentfault.com。如有侵權,請聯絡admin@php.cn刪除

相關文章

看更多