【重溫基礎(chǔ)】12.使用對(duì)象

garfileo 發(fā)布于2019-08-23 14:27 / 3172人閱讀

摘要：本文是重溫基礎(chǔ)系列文章的第十二篇。注意對(duì)象的名稱，對(duì)大小寫敏感?；A(chǔ)用法第一個(gè)參數(shù)是目標(biāo)對(duì)象，后面參數(shù)都是源對(duì)象。用途遍歷對(duì)象屬性。用途將對(duì)象轉(zhuǎn)為真正的結(jié)構(gòu)。使用場(chǎng)景取出參數(shù)對(duì)象所有可遍歷屬性，拷貝到當(dāng)前對(duì)象中。類似方法合并兩個(gè)對(duì)象。

本文是 重溫基礎(chǔ) 系列文章的第十二篇。
今日感受：需要總結(jié)下2018。

這幾天，重重的感冒發(fā)燒，在家休息好幾天，傷···。

系列目錄：

【復(fù)習(xí)資料】ES6/ES7/ES8/ES9資料整理(個(gè)人整理)

【重溫基礎(chǔ)】1.語法和數(shù)據(jù)類型

【重溫基礎(chǔ)】2.流程控制和錯(cuò)誤處理

【重溫基礎(chǔ)】3.循環(huán)和迭代

【重溫基礎(chǔ)】4.函數(shù)

【重溫基礎(chǔ)】5.表達(dá)式和運(yùn)算符

【重溫基礎(chǔ)】6.數(shù)字

【重溫基礎(chǔ)】7.時(shí)間對(duì)象

【重溫基礎(chǔ)】8.字符串

【重溫基礎(chǔ)】9.正則表達(dá)式

【重溫基礎(chǔ)】10.數(shù)組

【重溫基礎(chǔ)】11.Map和Set對(duì)象

本章節(jié)復(fù)習(xí)的是JS中對(duì)象的使用，這是重點(diǎn)。

前置知識(shí)：
JavaScrip的設(shè)計(jì)是一個(gè)簡(jiǎn)單的基于對(duì)象的范式。
對(duì)象是一系列屬性的集合，一個(gè)屬性包含一個(gè)鍵和一個(gè)值，也叫鍵值對(duì)。
若一個(gè)屬性的值，是一個(gè)函數(shù)，則稱這個(gè)屬性為方法。

一個(gè)對(duì)象，可以有很多方法，就像一個(gè)杯子，可以有顏色，重量，形狀等屬性。

注意：
對(duì)象的名稱，對(duì)大小寫敏感。

1.創(chuàng)建對(duì)象

本文主要是復(fù)習(xí)對(duì)象的使用，至于對(duì)象的創(chuàng)建，下面這里簡(jiǎn)單介紹一下常見的創(chuàng)建對(duì)象的方法：

創(chuàng)建方法1：

let obj = new Object();  // 聲明一個(gè)空對(duì)象

創(chuàng)建方法2：

let obj = {};            // 聲明一個(gè)空對(duì)象

上面的name是對(duì)象obj中的一個(gè)屬性，對(duì)應(yīng)的值為"leo"。

2.設(shè)置對(duì)象屬性和訪問屬性

設(shè)置對(duì)象屬性，也有兩種方法：
直接設(shè)置：

let obj = {};
obj.name = "leo";        // 為對(duì)象添加屬性和值

創(chuàng)建時(shí)設(shè)置：

let obj = {name : "leo"};
obj.name = "leo";        // 為對(duì)象添加屬性和值

當(dāng)一個(gè)對(duì)象定義了一個(gè)屬性，我們可以用點(diǎn)符號(hào)（.）來訪問它。

obj.name; // "leo"

注意：

屬性的另外一種寫法：

let obj = {};
let n = "name";
obj[n] = "leo";   // 屬性名使用變量
obj["height"] = 188;     // 字符串
obj["age" + "Is"] = 15;  // 字符串拼接
console.log(obj);
/*
obj = {
    ageIs: 15
    height: 188
    name: "leo"
}
*/

屬性的值也可以是個(gè)方法：

let obj = {};
obj.getTime = function(){
    return new Date();
}
obj.getTime();  // 訪問屬性的方法
//Wed Jan 02 2019 21:07:59 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)

3.枚舉對(duì)象的所有屬性

從 ECMAScript 5 開始，有三種原生的方法用于列出或枚舉對(duì)象的屬性：

3.1 for...in 循環(huán)

該方法依次訪問一個(gè)對(duì)象及其原型鏈中所有可枚舉的屬性。

let obj = {a:1, b:2, c:3};
for (let i in obj) {
  console.log("obj." + i + " = " + obj[i]);
}
/*
"obj.a = 1"
"obj.b = 2"
"obj.c = 3"
*/

3.2 Object.keys(o)

該方法返回一個(gè)對(duì)象 o 自身包含（不包括原型中）的所有屬性的名稱的數(shù)組。

let obj = {a:1, b:2, c:3};
let arr = Object.keys(obj);
console.log(arr);
/*
["a", "b", "c"]
*/
arr.forEach(function(val,index,array){
    console.log("key:" + val+",val:"+obj[val])
})
/*
key:a,val:1
key:b,val:2
key:c,val:3
*/

3.3 Object.getOwnPropertyNames(o)

該方法返回一個(gè)數(shù)組，它包含了對(duì)象 o 所有擁有的屬性（無論是否可枚舉）的名稱。

let obj = {a:1, b:2, c:3};
let arr = Object.getOwnPropertyNames(obj);
console.log(arr);
/*
["a", "b", "c"]
*/
arr.forEach(function(val,index,array){
    console.log("key:" + val+",val:"+obj[val])
})
/*
key:a,val:1
key:b,val:2
key:c,val:3
*/

4.ES6新增：對(duì)象的拓展 4.1 屬性的簡(jiǎn)潔表示

let a = "a1";
let b = { a };  // b => { a : "a1" }
// 等同于
let b = { a : a };

function f(a, b){
    return {a, b}; 
}
// 等同于
function f (a, b){
    return {a:a ,b:b};
}

let a = {
    fun () {
        return "leo";
    }
}
// 等同于
let a = {
    fun : function(){
        return "leo";
    }
}

4.2 屬性名表達(dá)式

JavaScript提供2種方法定義對(duì)象的屬性。

// 方法1 標(biāo)識(shí)符作為屬性名
a.f = true;

// 方法2 字符串作為屬性名
a["f" + "un"] = true;

延伸出來的還有：

let a = "hi leo";
let b = {
    [a]: true,
    ["a"+"bc"]: 123,
    ["my" + "fun"] (){
        return "hi";
    }
};
// b.a => undefined ; b.abc => 123 ; b.myfun() => "hi"
// b[a] => true ; b["abc"] => 123 ; b["myfun"] => ? ["my" + "fun"] (){ return "hi"; }

注意：
屬性名表達(dá)式不能與簡(jiǎn)潔表示法同時(shí)使用，否則報(bào)錯(cuò)。

// 報(bào)錯(cuò)
let a1 = "aa";
let a2 = "bb";
let b1 = {[a1]};

// 正確
let a1 = "aa";
let b1 = { [a1] : "bb"};

4.3 Object.is()

Object.is() 用于比較兩個(gè)值是否嚴(yán)格相等，在ES5時(shí)候只要使用相等運(yùn)算符(==)和嚴(yán)格相等運(yùn)算符(===)就可以做比較，但是它們都有缺點(diǎn)，前者會(huì)自動(dòng)轉(zhuǎn)換數(shù)據(jù)類型，后者的NaN不等于自身，以及+0等于-0。

Object.is("a","a");   // true
Object.is({}, {});    // false

// ES5
+0 === -0 ;           // true
NaN === NaN;          // false

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

4.4 Object.assign()

Object.assign()方法用于對(duì)象的合并，將原對(duì)象的所有可枚舉屬性復(fù)制到目標(biāo)對(duì)象。
基礎(chǔ)用法：
第一個(gè)參數(shù)是目標(biāo)對(duì)象，后面參數(shù)都是源對(duì)象。

let a = {a:1};
let b = {b:2};
Object.assign(a,b);  // a=> {a:1,b:2}

注意：

若目標(biāo)對(duì)象與源對(duì)象有同名屬性，則后面屬性會(huì)覆蓋前面屬性。

let a = {a:1, b:2};
let b = {b:3, c:4};
Object.assign(a, b); // a => {a:1, b:3, c:4}

若只有一個(gè)參數(shù)，則返回該參數(shù)。

let a = {a:1};
Object.assign(a) === a;  // true

若參數(shù)不是對(duì)象，則先轉(zhuǎn)成對(duì)象后返回。

typeof Object.assign(2); // "object"

由于undefined或NaN無法轉(zhuǎn)成對(duì)象，所以做為參數(shù)會(huì)報(bào)錯(cuò)。

Object.assign(undefined) // 報(bào)錯(cuò)
Object.assign(NaN);      // 報(bào)錯(cuò)

Object.assign()實(shí)現(xiàn)的是淺拷貝。

Object.assign()拷貝得到的是這個(gè)對(duì)象的引用。這個(gè)對(duì)象的任何變化，都會(huì)反映到目標(biāo)對(duì)象上面。

let a = {a: {b:1}};
let b = Object.assign({},a);
a.a.b = 2;
console.log(b.a.b);  // 2

將數(shù)組當(dāng)做對(duì)象處理，鍵名為數(shù)組下標(biāo)，鍵值為數(shù)組下標(biāo)對(duì)應(yīng)的值。

Object.assign([1, 2, 3], [4, 5]); // [4, 5, 3]

5.ES8新增：Object.values()，Object.entries()

ES7中新增加的 Object.values()和Object.entries()與之前的Object.keys()類似，返回?cái)?shù)組類型。
回顧下Object.keys()：

var a = { f1: "hi", f2: "leo"};
Object.keys(a); // ["f1", "f2"]

5.1 Object.values()

返回一個(gè)數(shù)組，成員是參數(shù)對(duì)象自身的（不含繼承的）所有可遍歷屬性的鍵值。

let a = { f1: "hi", f2: "leo"};
Object.values(a); // ["hi", "leo"]

如果參數(shù)不是對(duì)象，則返回空數(shù)組：

Object.values(10);   // []
Object.values(true); // []

5.2 Object.entries()

返回一個(gè)數(shù)組，成員是參數(shù)對(duì)象自身的（不含繼承的）所有可遍歷屬性的鍵值對(duì)數(shù)組。

let a = { f1: "hi", f2: "leo"};
Object.entries(a); // [["f1","hi"], ["f2", "leo"]]

用途1：

遍歷對(duì)象屬性。

let a = { f1: "hi", f2: "leo"};
for (let [k, v] of Object.entries(a)){
    console.log(
        `${JSON.stringfy(k)}:${JSON.stringfy(v)}`
    )
}
// "f1":"hi"
// "f2":"leo"

用途2：

將對(duì)象轉(zhuǎn)為真正的Map結(jié)構(gòu)。

let a = { f1: "hi", f2: "leo"};
let map = new Map(Object.entries(a));

手動(dòng)實(shí)現(xiàn)Object.entries()方法：

// Generator函數(shù)實(shí)現(xiàn)：  
function* entries(obj){
    for (let k of Object.keys(obj)){
        yield [k ,obj[k]];
    }
}

// 非Generator函數(shù)實(shí)現(xiàn)：
function entries (obj){
    let arr = [];
    for(let k of Object.keys(obj)){
        arr.push([k, obj[k]]);
    }
    return arr;
}

6.ES8新增：Object.getOwnPropertyDescriptors()

之前有Object.getOwnPropertyDescriptor方法會(huì)返回某個(gè)對(duì)象屬性的描述對(duì)象，新增的Object.getOwnPropertyDescriptors()方法，返回指定對(duì)象所有自身屬性（非繼承屬性）的描述對(duì)象，所有原對(duì)象的屬性名都是該對(duì)象的屬性名，對(duì)應(yīng)的屬性值就是該屬性的描述對(duì)象

let a = {
    a1:1,
    get f1(){ return 100}
}
Object.getOwnPropetyDescriptors(a);
/*
{ 
    a:{ configurable:true, enumerable:true, value:1, writeable:true}
    f1:{ configurable:true, enumerable:true, get:f, set:undefined}
}
*/

實(shí)現(xiàn)原理：

function getOwnPropertyDescriptors(obj) {
  const result = {};
  for (let key of Reflect.ownKeys(obj)) {
    result[key] = Object.getOwnPropertyDescriptor(obj, key);
  }
  return result;
}

引入這個(gè)方法，主要是為了解決Object.assign()無法正確拷貝get屬性和set屬性的問題。

let a = {
    set f(v){
        console.log(v)
    }
}
let b = {};
Object.assign(b, a);
Object.a(b, "f");
/*
f = {
    configurable: true,
    enumable: true,
    value: undefined,
    writeable: true
}
*/

value為undefined是因?yàn)?b>Object.assign方法不會(huì)拷貝其中的get和set方法，使用getOwnPropertyDescriptors配合Object.defineProperties方法來實(shí)現(xiàn)正確的拷貝：

let a = {
    set f(v){
        console.log(v)
    }
}
let b = {};
Object.defineProperties(b, Object.getOwnPropertyDescriptors(a));
Object.getOwnPropertyDescriptor(b, "f")
/*
    configurable: true,
    enumable: true,
    get: undefined,
    set: function(){...}
*/

Object.getOwnPropertyDescriptors方法的配合Object.create方法，將對(duì)象屬性克隆到一個(gè)新對(duì)象，實(shí)現(xiàn)淺拷貝。

const clone = Object.create(Object.getPrototypeOf(obj),
  Object.getOwnPropertyDescriptors(obj));

// 或者
const shallowClone = (obj) => Object.create(
  Object.getPrototypeOf(obj),
  Object.getOwnPropertyDescriptors(obj)
);

7.ES9新增：對(duì)象的拓展運(yùn)算符 7.1 介紹

對(duì)象的拓展運(yùn)算符，即對(duì)象的Rest/Spread屬性，可將對(duì)象解構(gòu)賦值用于從一個(gè)對(duì)象取值，搜鍵值對(duì)分配到指定對(duì)象上，與數(shù)組的拓展運(yùn)算符類似：

let  {x, y, ...z} = {x:1, y:2, a:3, b:4};
x;  // 1
y;  // 2
z;  // {a:3, b:4}

對(duì)象的解構(gòu)賦值要求等號(hào)右邊必須是個(gè)對(duì)象，所以如果等號(hào)右邊是undefined或null就會(huì)報(bào)錯(cuò)無法轉(zhuǎn)成對(duì)象。

let {a, ...b} = null;      // 運(yùn)行時(shí)報(bào)錯(cuò)
let {a, ...b} = undefined; // 運(yùn)行時(shí)報(bào)錯(cuò)

解構(gòu)賦值必須是最后一個(gè)參數(shù)，否則報(bào)錯(cuò)。

let {...a, b, c} = obj;     // 語法錯(cuò)誤
let {a, ...b, c} = obj;     // 語法錯(cuò)誤

注意：

1.解構(gòu)賦值是淺拷貝。

let a = {a1: {a2: "leo"}};
let {...b} = a;
a.a1.a2 = "leo";
b.a1.a2 = "leo";

2.拓展運(yùn)算符的解構(gòu)賦值，不能復(fù)制繼承自原型對(duì)象的屬性。

let o1 = { a: 1 };
let o2 = { b: 2 };
o2.__proto__ = o1;
let { ...o3 } = o2;
o3;    // { b: 2 }
o3.a;  // undefined

7.2 使用場(chǎng)景

1.取出參數(shù)對(duì)象所有可遍歷屬性，拷貝到當(dāng)前對(duì)象中。

let a = { a1:1, a2:2 };
let b = { ...a };
b;   // { a1:1, a2:2 }

// 類似Object.assign方法

2.合并兩個(gè)對(duì)象。

let a = { a1:1, a2:2 };
let b = { b1:11, b2:22 };
let ab = { ...a, ...b }; // {a1: 1, a2: 2, b1: 11, b2: 22}
// 等同于
let ab = Object.assign({}, a, b);

3.將自定義屬性放在拓展運(yùn)算符后面，覆蓋對(duì)象原有的同名屬性。

let a = { a1:1, a2:2, a3:3 };
let r = { ...a, a3:666 };   
// r {a1: 1, a2: 2, a3: 666}

// 等同于
let r = { ...a, ...{ a3:666 }};
// r {a1: 1, a2: 2, a3: 666}

// 等同于
let r = Object.assign({}, a, { a3:666 });
// r {a1: 1, a2: 2, a3: 666}

4.將自定義屬性放在拓展運(yùn)算符前面，就會(huì)成為設(shè)置新對(duì)象的默認(rèn)值。

let a = { a1:1, a2:2 };
let r = { a3:666, ...a };
// r {a3: 666, a1: 1, a2: 2}

// 等同于
let r = Object.assign({}, {a3:666}, a);
// r {a3: 666, a1: 1, a2: 2}

// 等同于
let r = Object.assign({a3:666}, a);
// r {a3: 666, a1: 1, a2: 2}

5.拓展運(yùn)算符后面可以使用表達(dá)式。

let a = {
    ...(x>1? {a:!:{}),
    b:2
}

6.拓展運(yùn)算符后面如果是個(gè)空對(duì)象，則沒有任何效果。

{...{}, a:1};  // {a:1}

7.若參數(shù)是null或undefined則忽略且不報(bào)錯(cuò)。

let a = { ...null, ...undefined }; // 不報(bào)錯(cuò)

8.若有取值函數(shù)get則會(huì)執(zhí)行。

// 不會(huì)打印 因?yàn)閒屬性只是定義 而不沒執(zhí)行
let a = {
    ...a1,
    get f(){console.log(1)}
}

// 會(huì)打印 因?yàn)閒執(zhí)行了
let a = {
    ...a1,
    ...{
        get f(){console.log(1)}
    }
}

參考資料

1.MDN 使用對(duì)象
2.W3school JavaScript 對(duì)象

本部分內(nèi)容到這結(jié)束

Author	王平安
E-mail	[email protected]
博客	www.pingan8787.com
微信	pingan8787
每日文章推薦	https://github.com/pingan8787...
JS小冊(cè)	js.pingan8787.com

歡迎關(guān)注微信公眾號(hào)【前端自習(xí)課】每天早晨，與您一起學(xué)習(xí)一篇優(yōu)秀的前端技術(shù)博文 .

云服務(wù)器 GPU云服務(wù)器 java面向?qū)ο蠡A(chǔ) 使用基礎(chǔ) 對(duì)象存儲(chǔ)怎么使用 jsp 對(duì)象使用

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/100632.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

garfileo

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

esp32-cam拍照上傳，app inventor 制作安卓app實(shí)時(shí)顯示

閱讀 2816·2021-10-14 09:42
【C++】初識(shí)類和對(duì)象

閱讀 3623·2021-10-11 10:59
CSS 常用布局在小程序中的應(yīng)用

閱讀 2956·2019-08-30 11:25
微信小程序input標(biāo)簽正則初體驗(yàn)

閱讀 3090·2019-08-29 16:25
關(guān)于使用別人給的已安裝好create-react-app的webstorm空項(xiàng)目

閱讀 3238·2019-08-26 17:40
原生js利用時(shí)間戳計(jì)算出具體的年齡

閱讀 1246·2019-08-26 13:30
XSS攻擊原理分析與防御技術(shù)

閱讀 1160·2019-08-26 11:46
代碼片段

閱讀 1341·2019-08-23 15:22

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

【重溫基礎(chǔ)】12.使用對(duì)象

相關(guān)文章

【重溫基礎(chǔ)】7.時(shí)間對(duì)象

**【重溫基礎(chǔ)】15.JS對(duì)象介紹**

**【重溫基礎(chǔ)】14.元編程**

**【重溫基礎(chǔ)】5.表達(dá)式和運(yùn)算符**

**【重溫基礎(chǔ)】13.迭代器和生成器**

發(fā)表評(píng)論

0條評(píng)論

garfileo

男|高級(jí)講師

TA的文章

esp32-cam拍照上傳，app inventor 制作安卓app實(shí)時(shí)顯示

【C++】初識(shí)類和對(duì)象

CSS 常用布局在小程序中的應(yīng)用

微信小程序input標(biāo)簽正則初體驗(yàn)

關(guān)于使用別人給的已安裝好create-react-app的webstorm空項(xiàng)目

原生js利用時(shí)間戳計(jì)算出具體的年齡

XSS攻擊原理分析與防御技術(shù)

代碼片段

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

【重溫基礎(chǔ)】12.使用對(duì)象

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！