ES6學習筆記(8)----對象的擴展

来源:https://www.cnblogs.com/carolddz/archive/2018/03/26/8651704.html
-Advertisement-
Play Games

參考書《ECMAScript 6入門》http://es6.ruanyifeng.com/對象的擴展1.屬性名的簡潔表示法 : ES6允許在代碼中直接寫變數，變數名是屬性名，變數值是屬性值。 let key = "value"; let obj = {key};//obj {key : "value ...


參考書《ECMAScript 6入門》
http://es6.ruanyifeng.com/

對象的擴展

1.屬性名的簡潔表示法 : ES6允許在代碼中直接寫變數，變數名是屬性名，變數值是屬性值。
  let key = "value";
  let obj = {key};//obj {key : "value"}
2.方法的簡寫表示法
  let obj = {
        method : function(x,y){
          return {x,y};//{x:x,y:y} 屬性簡寫法在方法中的使用
         }
      }
  同
  let obj = {
        method(x,y){
          return {x,y};
        }
      }
3.屬性表達式: obj[表達式]="value"
  a.用{}定義對象時定義屬性的兩種方式
  var obj = {
        length : 3,
        name : "test"
     }//ES5的方式
  let obj = {
        ["leng" + "th"] : 3,
        ["na"+"me"] : "test"
     }//ES6的方式
  function test2(){
     return true;
  }
  function ["test" + 2](){
     return true;
  }報錯
  let ["test" + 4] = function(){}//報錯
  let ["test" + 4] = new Function(){}//報錯
  let obj = {
        ["test" + 4](){
            return true;
        }
     }正確
  obj //{test4: ƒ}
  b.讀取對象中屬性的方式
    obj.name
    obj['name']
  c.使用表達式定義屬性的方式不可以與屬性簡寫法混用
    let a = 1;
    let obj = {
          ["name"+1] : {[a]}//報錯
    }
    let a = 1;
    let obj = {
          ["name"+1] : {a}//正確
    }
  d.當表達式定義的屬性名是一個對象時，表達式運行結果是[Object object],不是對象對應的屬性名
    let size = 3;
    let clothes = {size};
    let obj2 = {
          ["test" + obj] : "testagain"
    }
    obj2//{test[object Object]: "testagain"}
4.對象的name屬性：對象里的方法的name屬性返回方法所對應的方法名
  a.如果是對象里的get方法或者set方法，則對象方法的name屬性返回get/set + 函數名
    let cat = {
           age:1,
           set mini(a){
             this.age = age;
           }
           get mini(){
             return this.age;
           }
        }
    cat.mini.name //undefined
    Object.getOwnPropertyDescriptor(cat,'mini').get.name //'get mini'
    Object.getOwnPropertyDescriptor(cat,'mini').set.name//'set mini'
  b.bind方法創造的對象的函數，name屬性返回的是"bound" + 方法名
    let obj = {
        test(){}
    }
    obj.test.bind().name //"bound test"
  c.使用new Function方法創建的函數，name屬性返回的是"anonymous" + 方法名
    (new Function()).name //"anonymous"
    (new Function()).bind().name // "bound anonymous"
5.Object.is() //嚴格相等判斷
  相等判斷
  "==" //ES5
  1 == '1' //true 即使1與'1'類型並不相同還是會判斷它們相等，這是因為==引起了數據轉換
  "==="//ES5
  1 === '1' //false 類型不同判斷為false，比==規則更嚴格
  undefined === undefined //true
  null === null //true
  NaN === NaN //false ===漏洞
  +0 === -0 //true ===漏洞
 
  Object.is(a,b) //ES6 判斷a,b是否相等
  Object.is(1,2) //false
  Object.is(1,2) //false
  Object.is(1,'1') //false
  Object.is(undefined,undefined)//true
  Object.is(null,null)//true
  在NaN與+0,-0的判斷上比===更準確，其他與 === 一致
  Object.is(NaN,NaN) //true
  Object.is(+0,-0) //false
6.Object.assign() : 用於將源對象的所有可枚舉屬性複製到目標對象上
  a.此方法可以有多個參數，首參數一定是目標對象，不可以為null或者undefined,會報錯;其餘參數是源對象，當其餘參數不是對象時，只有字元串類型會生效，其他數值，布爾類型都不會生效，遇到不能轉化成對象的null或者undefined,則會跳過，不出錯。
 
  Object.assign(null,{name : "test"}) //報錯 Cannot convert undefined or null to object
  Object.assign(null,{name : "test"})//報錯 Cannot convert undefined or null to object
  Object.assign(1,{name : "test"}); //Number {1, name: "test"} 首參數不是對象時，會先轉成對象
 
  Object.assign({},undefined); //{}
  Object.assign({},null);//{}
 
  b.當其餘參數不是對象時，只有字元串類型會以數組形式生效，其他數值，函數以及布爾類型都不會生效，
 
  Object.assign({},'abc');//{0: "a", 1: "b", 2: "c"}
  Object.assign({},100);// {}
  Object.assign({},true);//{}
  let f = function(){}
  Object.assign({},f);//{}
 
  d.用途
    (1)可以用來複制對象（淺拷貝）
        let target = {name: "target"}
        let source = {size: 13}
        let newobj = Object.assign(target,source);//得到新的target {name: "target", size: 13}
        newobj //{name: "target", size: 13}
        target //{name: "target", size: 13}
        target.size = 0;
        newobj.size // {name: "target", size: 0}
        newobj.size = 1;
        target //{name: "target", size: 1}  newobj與target是一個對象，任何一方的改動都會影響到另一方
        
        //淺拷貝
        let target = {name:"target"}
        let source = {cat:{name: "nn",age: "3"}}
        Object.assign(target,source); //{name:"target",cat:{name: "nn",age: "3"}}
        source.cat.name = "big";
        target.cat.name;// "big"
    (2)如果源對象中有和目標對象同名的屬性，則源對象中的此屬性會全部覆蓋目標對象中的此屬性
         let target = {
               cat:{
                  name: "nn",
                  age: "3",
                  color: "black"
              }
            }
        let source = {
               cat: {
                 name:"bigdeck"
               }
            }
        Object.assign(target,source);//{cat: cat: {name: "bigdeck"}} /source覆蓋target的整個cat屬性值，並不會只覆蓋cat.name
    (3)如果目標對象和源對象都是數組，則會將數組當做對象來處理
       Object.assign(['a','b','c'],[1,3]); //[1,3,'c']
       這是因為處理時視為對象處理Object.assign({1:'a',2:'b',3:'c'},{1:1,2:3});
    (4)如果要複製的值是一個取值就、函數，則會先執行取值函數後賦值
       let obj = {
           cat : "nn",
           get cat(){
             return "cat";
           },
           set cat(a){
             this.cat = "a";
           }
       }
      Object.assign({},obj);//{cat: "cat"}
    (5)可以為對象添加屬性
    Object.assign({},{name:"test"});//{name:"test"}
    class Cat{
       constructor(age,color){
          return Object.assign(this,{age,color});
       }
    }
    var c1 = new Cat(13,"white")
    c1 //cat {age: 13, color: "white"}
    (6)可以為對象添加函數
    Object.assign(c1,{run(){return "run fast";}});
    c1//Cat {age: 13, color: "white", run: ƒ}
    Object.assign(c1.__proto__,{run2(){return "run fast";}});
    c1.__proto__ //{run2: ƒ, constructor: ƒ}
    c1 //Cat {age: 13, color: "white", run: ƒ}
    (7)克隆對象
    Object.assign({},c1);//Cat {age: 13, color: "white", run: ƒ}
    Object.assign(Object.create(Object.getPrototypeOf(c1)),c1);//Cat {age: 13, color: "white", run: ƒ}
    (8)合併多個對象
     Object.assign({},{name:"test"},{age:13},{size:10});//{name: "test", age: 13, size: 10}
     let merge = (target,...sources) => Object.assign(target,sources);
     merge({},{name:"test"},{age:13},{size:10});//{name: "test", age: 13, size: 10}
     merge({},[{name:"test"},{age:13},{size:10}]);//{0: {name: "test"}, 1: {age: 13}, 2: {size: 10}}
    (9)為屬性指定預設值
     const DEFAULT = {
        name : "test"
     }
     function init(){
        var c = Object.assign({},DEFAULT,options);
        return c;
     }
     init({name:"test2"});//利用了Object.assign同名屬性後面的會全覆蓋前面的同名屬性的特點實現了給屬性指定預設值（如果後面的對象沒有與預設對象同名的屬性，則使用預設對象中的屬性）
    
7.屬性的可枚舉性與遍歷
(1)可枚舉性
Object.getOwnPropertyDescriptor()可以拿到對象的某個屬性的描述對象
Object.getOwnPropertyDescriptor(c1,'age')
{
  configurable:true,
  enumerable:true,//此屬性為true,表示被此對象描述的的屬性是可枚舉屬性；false則為不可枚舉屬性
  value:13,
  writable:true
}
有四個操作會忽略enumerable為false的屬性
for...in迴圈:只遍歷對象自身的和繼承的可枚舉屬性
Object.keys():返回對象自身的所有可枚舉屬性的鍵名
JSON.stringify():只串列化對象自身的可枚舉的屬性
Object.assign():忽略enumerable為false的屬性，只拷貝對象自身的可枚舉的屬性

//父類
function Animal(){
  this.name = 'Animal';
  this.age = 13;
  this.size = 100;
}
Object.defineProperties(Animal,{'gender':{value:"boy",enumerable:false},'color':{value:"red",enumerable:true}});
//原型鏈繼承
function Cat(){
}
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;
Cat.prototype.name = 'cat';
Cat.ownSize = 10;
//new一個實例
var cat = new Cat();
Object.defineProperties(cat,{'sizecat':{value:1,enumerable:false},'colorcat':{value:"black",enumerable:true}});
for(var i in cat){
  console.log(i+" : "+cat[i]);
}
//colorcat : black自身的可枚舉屬性
//name : 繼承自Cat的可枚舉屬性
//age : 13 繼承字Animal的可枚舉的屬性
//size : 100繼承自Animal的可枚舉的屬性
//constructor : function Cat(){}構造器
Object.keys(cat)//['colorcat'] cat自身可枚舉的屬性
JSON.stringify(cat)//'{"colorcat":"black"}' cat自身可枚舉的屬性
Object.assign({},cat);//{colorcat: "black"} cat自身可枚舉的屬性
(2)屬性的遍歷
for...in：只遍歷對象自身的和繼承的可枚舉屬性
Object.keys(obj):返回對象自身的所有可枚舉屬性的鍵名
Object.getOwnPropertyNames(obj):返回一個數組，包含對象自身的所有屬性的鍵名，這個所有屬性包含不可枚舉屬性但是不包含symbol屬性的鍵名
Object.getOwnPropertyNames(cat);
// ["sizecat", "colorcat"] 'sizecat'對象自身的不可枚舉屬性,'colorcat'對象自身的可枚舉屬性
Object.getOwnPropertySymbols(obj):返回一個數組，包含對象自身的所有Symbol屬性的鍵名
Object.getOwnPropertySymbols(cat);
//[] cat沒有Symbol屬性
Reflect.ownKeys(obj):返回一個數組，包含對象自身的所有屬性的鍵名，不管這個屬性是Symbol還是字元串，也不管是否可枚舉
Reflect.ownKeys(cat);
//["sizecat", "colorcat"] 'sizecat'對象自身的不可枚舉屬性,'colorcat'對象自身的可枚舉屬性
屬性的遍歷順序
首先遍歷所有數值鍵，按照數值升序排列
其次遍歷所有的字元串鍵，按照時間加入順序升序排列
最後遍歷所有的Symbol鍵，按照時間加入順序升序排列
var obj = {1:2,"test":"again","a":"testing",2:3}
obj["objSymbol"] = Symbol()
Reflect.ownKeys(obj);//["1", "2", "test", "a", "objSymbol"]

8.Object.getOwnPropertyDescriptor()與Object.getOwnPropertyDescriptors()

Object.getOwnPropertyDescriptor()返回某個對象屬性的描述對象(此屬性非繼承屬性)
Object.getOwnPropertyDescriptor(cat,'name')//undefined 因為name是繼承屬性
Object.getOwnPropertyDescriptor(cat,'colorcat')// {value: "black", writable: false, enumerable: true, configurable: false} 因為colorcat是自身屬性

Object.getOwnPropertyDescriptors() 返回指定對象所有的自身屬性(非繼承屬性)的描述對象。
Object.getOwnPropertyDescriptors(cat);
//
{
  catSymbol:{value: Symbol(), writable: true, enumerable: true, configurable: true}
  colorcat:{value: "black", writable: false, enumerable: true, configurable: false}
  sizecat:{value: 1, writable: false, enumerable: false, configurable: false}
}
9._proto_屬性,getPrototypeOf()與setPrototypeOf()
(1)_proto_屬性:用於讀取或設置當前對象的prototype對象
var d = {name:"test"}
//讀取對象的__proto__
d.__proto__ //{constructor: ƒ Object(), __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
//設置對象的__proto__
var c = {1:0};
d.__proto__ = c //返回的是c  {1: 0}
(2)Object.getPrototypeOf(param)：用於讀取一個對象的原型對象。如果參數不是對象,則轉化成對象;如果不能轉化成對象,如undefined或者null,則會報錯。
Object.getPrototypeOf(d) //{1: 0}
Object.getPrototypeOf(1)//Number {0, constructor: ƒ, toExponential: ƒ, toFixed: ƒ, toPrecision: ƒ, toString: ƒ, …}
Object.getPrototypeof(undefined)//報錯 Uncaught TypeError: Object.getPrototypeof is not a function
(3)Object.setPrototypeOf(obj1,obj2)：用來設置當前對象的prototype對象，返回參數對象本身。
//將obj2設置為obj1的原型對象。如果第一個參數不是對象，則轉化為對象，但因為返回的是第一個參數，所以沒有變化;如果第一個參數不能轉化成對象，如undefined或者null,則會報錯。
Object.setPrototypeOf(d,Number); //Function {name: "test"}   
Object.getPrototypeOf(d);//ƒ Number() { [native code] }
10.super關鍵字:指向當前對象的原型對象
//super關鍵字在表示對象的原型時，只能用在對象的方法中，用在其他方法中都會報錯。
let obj = {
    name:super.name//報錯 super用在屬性中
}
let obj = {
    method:function(){
      return super.name;//報錯 super用在方法中，然後賦值給屬性
    }
}
let obj = {
    method = ()=> super.name;//報錯 super用在方法中，然後賦值給屬性
}

let obj1 = {
    name:"obj1"
}

let obj2 = {
    name:"obj2",
    method(){
      return super.name;//正確 obj1
    }
}
Object.setPrototypeOf(obj2, obj1);
obj2.method //"obj1"
11.Object.keys(),Object.values()與Object.entries()
Object.keys():返回一個數組，數組成員是對象自身（不包含可繼承）所有可遍歷屬性的鍵名
Object.values():返回一個數組，數組成員是對象自身所有可遍歷屬性的鍵值
Object.entries():返回一個數組，數組成員是對象自身所有可遍歷的鍵值對
12.對象的擴展運算符
對象的擴展運算符...可以用於對象的解構賦值
(1)擴展運算符
可用於賦值對象
let obj = {name : "test",age : 13}
let obj3 = {...obj}
obj3 // {name: "test", age: 13}
如果參數是null或者undefined，將會忽略不報錯
{...null}//{}
{...undefined}//{}
(2)解構賦值：解構賦值時，使用擴展運算符的參數必須是最後一個參數
 let {x,y,...z} = {x : "test",y : 13,size:23,color:"black"}
 x = "test"
 y = 13
 z = {size:23,color:"black"}
 let {...x,y,z} = {x : "test",y : 13,size:23,color:"black"} //報錯


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 前端面試整理筆記一
    一、常見的web安全及防護原理 1.sql註入原理 就是通過把sql命令插入到web表單遞交或輸入功能變數名稱或頁面請求的查詢字元串，最終達到欺騙伺服器執行惡意的SQL命令。 防護，總的來說有以下幾點： 1、永遠不要信任用戶的輸入，要對用戶的輸入進行校驗，可以通過正則表達式，或限制長度，對單引號雙“--”進 ...
  • Angular開發實踐（五）：深入解析變化監測
    在使用 Angular 進行開發中，我們常用到 Angular 中的綁定——模型到視圖的輸入綁定、視圖到模型的輸出綁定以及視圖與模型的雙向綁定。而這些綁定的值之所以能在視圖與模型之間保持同步，正是得益於Angular中的變化檢測。 ...
  • 正則表達式小記
    什麼是正則表達式 正則表達式是用於匹配字元串中字元組合的模式。在 JavaScript中，正則表達式也是對象。這些模式被用於 RegExp 的 exec 和 test 方法, 以及 String 的 match、replace、search 和 split 方法。 正則表達式存在於大部分的編程語言， ...
  • href="#"的誤區與作用
    href=”javascript:void(0);”這個的含義是，讓超鏈接去執行一個js函數，而不是去跳轉到一個地址，而void(0)表示一個空的方法，也就是不執行js函數。 為什麼要使用href=”javascript:void(0);” javascript:是偽協議，表示url的內容通過jav ...
  • 毫秒或者秒轉換為日期格式
    function timeToMillion(startStr, endStr) { var times; if(endStr){ var startT = new Date(startStr).getTime() var endT = new Date(endStr).getTime() time... ...
  • React簡明學習
    [1]JSX [2]樣式設置 [3]組件 [4]State [5]事件處理 [6]列表 [7]表單 [8]propTypes [9]返回多個元素 [10]context ...
  • conso.log占位符
    %d占位符表示number %s占位符表示string %f占位符表示浮點數 %o占位符表示對象 ...
  • 阿裡圖標庫iconfont入門使用
    目前大多數的互聯網公司，前端開發和UI設計師配合中，通常前端er不再像往常一樣對於頁面圖標的圖標進行切圖，取而代之的是引用阿裡圖標庫（http://iconfont.cn/）；簡單的臨時開發或者活動頁，直接下載使用即可（場景1），對於周期性的項目開發，以及後期需要長期運營的大中型項目（場景2），還是 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類