1. 程式人生 > >ES6 — 物件擴充套件

ES6 — 物件擴充套件

今天來總結一下es6的物件擴充套件,最近一直在看es6, 感覺es6真的很好用,不過也看到過網上一些反面語言,可能因人而異,es6 的發展前景讓我們拭目以待。

一、物件屬性和方法

1.簡寫

// 屬性簡寫
var a = "first";
var b = {a};
console.log(b)  // {a:"first"}

//方法簡寫
var obj = {
  method (){
    retrun "hello world";
  }
} 

//等同於
var obj = {
  method: function (){
    retrun "hello world";
  }
} 

2.屬性名錶達式

let propName = "value";
let obj = {
  [propName]:true,
  ["one"+"child"]:1323
}
obj[propName]  // true
obj[onechild]  // 1323

重點內容
① 如果屬性名錶達式不能與簡潔表示法同時使用。否則會報錯
② 屬性名錶達式如果是一個物件,預設情況下會自動將物件轉為字串,如果有多個屬性名物件會產生覆蓋。

二、Object.is()方法和 Object.assign() 方法

1.Object.is() 用於比較兩個值是否嚴格相等。

在ES5 中嚴格相等有比較運算子(===

),但是全等號有兩問題:
-0 === +0 // true
NaN === NaN // false

而Object.is() 解決了上邊兩個問題,其他的行為和=== 行為一致。

Object.is({},{}); // false
Object.is(+0,-0); // false
Object.is(NaN,NaN); // true

2.Object.assign() 方法用於合併物件
Object.assign() 用於合併物件,有利於我們去封裝函式。它的使用方法和jq 的 $.extend() 方法類似

  let objOne = {a:1};
  let objTwo = {b:2
}; let objThree = {b:4,c:5}; let obj = Object.assign(objOne,objTwo,objThree); console.log(obj) // {a:1,b:4,c:5}

由結果可以看出,合併後的物件,如果出現同名屬性,後邊的會覆蓋前邊的。

重點內容
①如果只有一個引數,Object.assign() 會直接返回該引數

Object.assign({a:"new"}) //{a:"new"}

②如果該引數不是物件,會將該引數轉化為物件,

typeof Object.assign(0) // "object"

③undefined 和 null 作為首引數會報錯,不為首參時也不會報錯

Object.assign(undefined) // 報錯 Cannot convert undefined or null to object
Object.assign({},undefined) // 空物件 {}

④字串會以陣列形式拷貝到目標物件,而數值和布林值等不會產生效果

   var one = 'one';
   var num = 10;
   var bool = true;
   var last = Object.assign({},bool,num,one)
   console.log(last) // {0: "o", 1: "n", 2: "e"}
   console.log(last[1]) // n

⑤Object.assign 只拷貝源物件的自身屬性(不會拷貝繼承屬性),也不會拷貝不可列舉的屬性。

var persion = {};
Object.defineProperties(persion,{
  name:{
    enumerable:true,
    value:"name"
  },
  age:{
    enumerable:false,
    value:"age"
  }
})

Object.assign({a:"a"},persion); // {a: "a", name: "name"}

⑥屬性為 Symbol 值得屬性,也會被其拷貝。

* 用途 *
①為物件新增屬性
②為物件新增方法
③克隆物件
④合併多個物件
⑤為屬性指定預設值

三、屬性的遍歷

(1)for…in

for…in迴圈遍歷物件自身的和繼承的可列舉屬性(不含 Symbol 屬性)。

(2)Object.keys(obj)

Object.keys返回一個數組,包括物件自身的(不含繼承的)所有可列舉屬性(不含 Symbol 屬性)的鍵名。

(3)Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames返回一個數組,包含物件自身的所有屬性(不含 Symbol 屬性,但是包括不可列舉屬性)。

(4)Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols返回一個數組,包含物件自身的所有 Symbol 屬性。

(5)Reflect.ownKeys(obj)

Reflect.ownKeys返回一個數組,包含物件自身的所有屬性,不管屬性名是 Symbol 或字串,也不管是否可列舉。

遍歷排序是這樣的:數字屬性>字串屬性>Symbol值屬性

四、__proto__ 屬性 和Object.setPrototypeOf(), Object.getPrototypeOf()

ES6 為我們提供了__proto__ 屬性。不過目前還是建議使用Object.setPrototypeOf(), Object.getPrototypeOf()

1.Object.setPrototypeOf()

Object.setPrototypeOf方法的作用與__proto__相同,用來設定一個物件的prototype物件,返回引數物件本身。它是 ES6 正式推薦的設定原型物件的方法。

 let objFirst = {a:"a"}
 let objLast = {b:"b",c:"c"}
 Object.setPrototypeOf(objFirst,objLast);
 console.log(objFirst.b) // b
 console.log(objFirst.b === objLast.b) // true

上邊的程式碼相當於:

function(objFirst,objLast){
  objFirst.__proto__ = objLast;
  return objFirst;
}

2.Object.getPrototypeOf()

該方法用於讀取一個物件的原型物件

function newOne(){

}

var newObj = new newOne();
console.log(Object.getPrototypeOf(newObj) === newOne.prototype);

相關推薦

es6 物件擴充套件運算子 res運算子

當我們對引數的個數不確定時,可以用物件拓展運算子 funtion lala(...arg){   console.log(arg[0]); 1    console.log(arg[1]); 2   console.log(arg[2]); 3   console.log(arg[3]);

ES6物件擴充套件

今天來總結一下es6的物件擴充套件,最近一直在看es6, 感覺es6真的很好用,不過也看到過網上一些反面語言,可能因人而異,es6 的發展前景讓我們拭目以待。 一、物件屬性和方法 1.簡寫 // 屬性簡寫 var a = "first"; var

web前端之es6物件擴充套件

1.屬性的簡潔表示法 2.屬性名錶達式 表示式作為物件的屬性名 3.方法的 name 屬性 例如:函式的name 屬性,返回函式名。 4.Object.is() ES 比較兩個值是否相等,只有兩個運算子,相等運算子,相等運算子(==) 和嚴格相等運算子(

es6 -- 物件擴充套件(常用)

目錄   1.屬性的簡寫 2.Object API 3.擴充套件運算子 1.屬性的簡寫 如果物件中只寫屬性名,不寫屬性值。這時,屬性值等於屬性名所代表的變數。  //es5寫法 var name='cc'; var obj={ name

ES6 物件擴充套件

1、Object.assign() 方法用於將所有可列舉屬性的值從一個或多個源物件複製到目標物件。它將返回目標物件。 注意該方法實行的是淺拷貝,而不是深拷貝。 const object1 = { a: 1, b: 2, c: 3 }; const object2 = Ob

es6——內建物件擴充套件 陣列擴充套件(Array.form和Array.of) 物件擴充套件

1.內建物件擴充套件 顯示一行 不方便觀看 { let html='<body>' + '<p>good l

es6 物件擴充套件物件的解構和深拷貝

物件的擴充套件 屬性的簡潔表示法 ES6 允許直接寫入變數和函式,作為物件的屬性和方法。這樣的書寫更加簡潔。 const foo = 'bar'; const baz = {foo}; baz // {foo: "bar"} // 等同於 con

[ ES6 ](二)函式陣列物件擴充套件

函式的擴充套件 函式引數的預設值 ES5: function log(x, y) { y = y || 'World'; console.log(x, y); } log('Hello') // Hello World log('Hello', 'C

ES6物件的相關擴充套件

屬性簡潔表示 ES6 允許直接寫入變數和函式,作為物件的屬性和方法。 在物件之中,直接寫變數。這時,屬性名為變數名, 屬性值為變數的值。 用於函式返回值,將會非常方便。 屬性的賦值器(setter)和取值器(getter)也是採用改寫法 let birth = '200

ES6擴充套件物件的功能性

目錄 一、物件類別 二、物件字面量的語法擴充套件 2.1、屬性初始值的簡寫 2.2、物件方法的簡寫語法 2.3、可計算屬性名 三、新增方法 3.1、Object.is()方法 3.2、Object.assign()方法 四、重複的物件字面量屬性 五、自有屬性列

ES6物件擴充套件及新增方法

1.屬性的簡潔表示法 ES6允許直接寫入變數和函式,作為物件的屬性和方法。這樣的書寫更加簡潔。 const foo = 'bar'; const baz = {foo}; baz//{foo:'bar'} //等同於 const baz = {foo:foo} 上面程式碼表

ES6-物件擴充套件-屬性的可列舉性和遍歷

可列舉 物件的每一個屬性都有一個描述物件,用來控制該屬性的行為。Object.getOwnpropertyDescriptor 方法可以獲取該屬性的描述物件。 let obj = { foo: 123 }; Object.getOwnPropertyDescriptor(

ES6-物件擴充套件-super關鍵字

this關鍵字總是指向函式躲在的當前物件,ES6 又新增了另一個類似的關鍵字 super,指向當前物件的原型物件。 const proto = { foo: 'hello' }; const obj = { find() { return super.fo

從Object.assign()到ES6物件擴充套件

背景 在上一個專案開發中,看到專案記憶體在很多Object.assign()寫法的程式碼,由於之前沒有接觸過,感覺比較疑惑。通過網上查詢發現,這是ES6對物件進行的擴充套件之一,於是系統的瞭解

ES6字串擴充套件(模板字串)

es5中的多行字串和變數拼接: let num = 10, price = 100; let str = "我們現在有"+num+"個人\ 來買蘋果,一斤蘋果10元錢,\ 他們每人買一斤,那麼總價是"+price+"元。" //let

ES6字串擴充套件(新增的方法)

1、includes(): 返回布林值,表示是否找到了引數字串。 2、startsWith(): 返回布林值,表示引數字串是否在查詢字串的頭部。 3、endsWith(): 返回布林值,表示引數字串是否在查詢字串的尾部。 let str = "string"; con

es6 物件的拓展

1、屬性的簡寫法 1.1 var a = '1'; var b = '2'; var obj = {a,b}; console.log(obj) //{a: "1", b: "2"} 在這裡,{a,b}這樣的寫法等價於{a:‘1’, b:‘2’},可以發現,簡寫法會將變數名作

javascript es6 引數擴充套件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>es6</title> </head> <body&g

es6——函式擴充套件

1.形參設定預設值 es5 { function sum1(num1, num2) { num1 = num1 || 10;

es6 函式擴充套件,引數作用域和箭頭函式

函式的擴充套件 函式引數的預設值 基本用法 ES6 之前,不能直接為函式的引數指定預設值,只能採用變通的方法。 function log(x, y = 'World') { console.log(x, y); } log('Hello