什麼是JavaScript對象?如何創建並引用?這就告訴你!

2020-12-23 尚學堂前端學院

主要內容:

對象的創建鍵名和鍵值對象的引用Math對象Date對象學習目標:

為什麼要使用對象?

因為對象能幫我們解決一些複雜的問題

一、對象概述

在JavaScript 中的所有事物都是對象:字符串(new String)、布爾(new Boolean())、數值(Number)、數組(Array)、函數(Function)等。

1.1 什麼是類

類:就是具有相同的屬性和方法的集合。人類,動物類,家電類等。

1.2 什麼是對象

對象:就類中的一個具體的實物。人類-具體某一個人(張三丰)。

動物類-(一個具體的動物-東北虎),家電類-(具體一個比如說電視。)

js 中我們包含哪些對象呢?

內置對象(本地對象):Math對象,Number對象,Date對象等,系統給我們提供好的,我們拿過來用就可以了。宿主對象:dom(文檔對象模型),bom(瀏覽器對象)。自定義對象:我們自己定義和開發的對象。二、對象的創建(重點)

2.1怎樣創建對象

語法:var obj = { key : value };

上面代碼定義了一個對象,它被賦值給變量obj。

key是「鍵名」

value是「鍵值」

ps:如果對象內部包含多個鍵值對,每個鍵值對之間用逗號分隔。最後一個鍵值對末尾不用加逗號

var obj = {key1:value1,key2:value2};

2.2 對象的構成

對象是JavaScript的核心概念,也是最重要的數據類型。JavaScript的所有數據都可以被視為對象。此外,JavaScript 允許自定義對象。

對象(object)是大括號定義的無序的數據集合,由鍵值對構成,鍵名,鍵名與鍵值之間用冒號分隔,大括號末尾要使用分號表示對象定義結束。

2.3 創建對象

a.直接使用大括號創建對象

b.使用new命令生成一個Object對象的實例

c.使用Object.create方法創建對象

var obj1 = {};

var obj2 = new Object();

var obj3 = Object.create(null);

Object是在javascript中一個被我們經常使用的類型,而且JS中的所有對象都是繼承自Object對象的

三、對象的鍵名和鍵值(重點)

3.1關於鍵名

鍵名也被稱為屬性(property),對象的所有屬性都是字符串,所以加不加引號都可以。

因此上面的代碼也可以寫成下面這樣:

var obj = { 'key': value };

但是,如果屬性不符合標識符的條件(比如第一個字符為數字,或者含有空格或運算符),則必須加上引號。

var obj = {

'1p': "Hello World",

'h w': "Hello World",

'p+q': "Hello World"

};

上面對象的三個屬性,都不符合標識名的條件,所以必須加上引號。

ps:JavaScript的保留字可以不加引號直接當作對象的屬性。

3.2關於鍵值

鍵值是屬性所對應的具體的值。javascript的對象的鍵值可以是任何數據類型。

var frank = {

name: "Frankenstein Add",

age: 18,

sex: "male"

ability: eat();//eat()表示函數

};

ps:如果一個屬性的值(ability)為函數,通常把這個屬性稱為「方法」。

四、對象的引用(重點)

4.1 對象屬性的讀取和設置

讀取對象的屬性,有兩種方法:

一種是使用點運算符(.),還有一種是使用方括號運算符([])。

需要注意的是,使用方括號讀取對象屬性的時候需要加引號

點運算符用來為對象的屬性寫入值。

[]的使用總結說明:

1.可以使用一個變量存儲對象的屬性,.是不能使用的

2.可以使用純數字的方式來訪問,.是不能使用的

.的使用的總結說明:

1.點(.)運算符可以將js的關鍵字(var,if等)作為屬性來訪問。

4.2 對象屬性的操作

【Object.keys()】獲取對象所有屬性

【Object.values()】獲取對象所有的值

【Object.entries()】獲取對象所有的鍵值對

【delete】刪除一個屬性

【in】檢查對象是否包含一個屬性(true,false)

【for in】遍歷對象所有屬性

【for of】遍歷對象所有屬性

4.3 對象的遍歷

4.3.1 for..in的遍歷

4.3.2 for...of的遍歷

4.4 實例:對象排序

回想一下,數組的排序用什麼方法。

sort(function(a,b){

return a - b;

});

按年齡進行排序:

如果年齡相等,按薪水進行排序

4.5 對象中求工資的最大值

五、Math對象

5.1 Math對象的介紹

Math對象是數學對象

5.2 Math對象的屬性和方法

Math對象的屬性:PI(圓周率)

Math對象的方法:

random():隨機函數(0-1)

floor():向下取整

ceil():向上取整

round():四省五入取整

pow():求一個數的冪數

max():求最大值

min():求最小值

abs():絕對值

sqrt():求平方根

5.3 實例:獲取一個範圍的隨機數

Math.random():返回0-1之間的隨機數

公式:求一個數的範圍

max:最大數

min:最小數

parseInt((max-min+1)*Math.random()+min)

5.4 實例:單擊隨機生成四位數字驗證碼

六、Date對象

6.1 Date對象的介紹

Date對象是JavaScript提供的日期和時間的操作接口。

在JavaScript內部,所有日期和時間都儲存為一個整數。

這個整數是當前時間距離1970年1月1日00:00:00的毫秒數,正負的範圍為基準時間前後各1億天

同Math對象一樣,javascript也為Date對象提供了很多內置的方法。

6.2 Date函數

Date對象是一個構造函數,對它使用new命令,會返回一個Date對象的實例。

一些其他合法的日期字符串寫法

new Date(datestring)

new Date("2013-2-15")

new Date('2013/2/15')

new Date("2013-FEB-15")

new Date("FEB, 15, 2013")

new Date("FEB 15, 2013")

new Date("Feberuary, 15, 2013")

new Date("Feberuary 15, 2013")

new Date("15, Feberuary, 2013")

Sun Jan 06 2013 00:00:00 GMT+0800 (中國標準時間)

6.3 Date的方法

getTime():獲取距離1970年1月1日的毫秒數

getYear():獲取年份(距離1900的年數)

getFullYear():獲取全年(4位數)

getMonth():獲取月份(0-11)

getDate():獲取日期

getDay():獲取星期幾(0-6),0:星期日,6:星期六

getHours():獲取小時(0-23)

getMinutes():獲取分鐘(0-59)

getSeconds():獲取秒數(0-59)

toLocaleString():獲取當地的日期和時間

toLocaleDateString():獲取當地的日期

toLocaleTimeString():獲取當地的時間

6.4顯示當前的日期時間和星期

6.5 顯示距離新中國成立多少年

6.6 實例:產品剩餘幾天幾小時幾分幾秒

3p理論:persist,practise,patient

分析一下:

setInterval(),Date(),innerHTML

Var date = new date();

Var fdate = new date(「2019-9-13」);

Time = fdate - date;//獲取的毫秒數

6.7 實例:圖書商城展示(數組和對象)

分析一下:

獲取相應的元素的值,通過添加按鈕的單擊事件,將文本框元素的值添加到數組中。

圖書商城展示(對象)

相關焦點

  • 說說那些經典的web前端面試題-JavaScript部分
    (3)、對於 Array,Null 等特殊對象使用 typeof 一律返回 object,這正是 typeof 的局限性。Instanceof定義和用法:instanceof 用於判斷一個變量是否屬於某個對象的實例。實例演示:a instanceof b?alert("true"):alert("false"); //a是b的實例?
  • 什麼是javascript?javascript需要學哪些內容?這篇文章告訴你!
    Javascript運算符(重點)學習目標:四、Javascript變量命名規則(重點)4.1 聲明變量變量是幹什麼的,是存儲數據的,那存儲什麼種類數據呢聲明變量使用關鍵字:var(variable)你給它賦什麼類型的值,那麼這個變量就是什麼數據類型。
  • 一切皆可對象:使用JavaScript創建對象的三種方法
    圖源:unsplashJavascript中的一切幾乎都是對象,無論是數組還是函數。本文將教你使用JavaScript創建對象的三種方法。JavaScript中創建對象。仔細想,其實它們本身已經是對象了,因此對象用於創建更多對象。通常,此方法優於對象構造函數。試想必須創建數百個具有相同屬性的對象,使用對象構造函數方法,必須手動將所有屬性添加到所有對象,但是使用構造函數可以預定義這些屬性。
  • 如何合理地創建對象實例以降低程序類之間關係的耦合度
    什麼時候應該創建類的對象實例?如何保證所創建出的類的對象實例能夠適時地被銷毀?其實上面的核心問題也就是軟體應用系統的開發人員如何能夠更高效地創建、並且松藕合、達到程序模塊的可擴展性?繼續採用如下的對象實例的創建形式嗎?
  • JavaScript組件模式深入淺出
    如果你已經對這個模式很熟悉了,那麼可以直接跳到「高級模式」一節。匿名閉包(Anonymous Closures)這是使得模式可以正常工作的語言基礎,也實在是javascript最為實用的特性之一。我們可以簡單的創建一個匿名函數,並且立刻執行它。
  • 0基礎學習JavaScript一定要知道如何使用VS2019去編寫代碼
    這裡創建一個空白的Web應用程式項目,ASP.NET Web應用程式是完全支持JavaScript代碼編寫的。然後在此項目中再創建一個HTML頁面,用於編寫JavaScript代碼。圖1創建的是一個空的Web項目,項目中除了基本的引用、Properties、Web.config之外,沒有其他任何多餘的文件。
  • 教你如何編寫一個彈出框
    彈出框顧名思義就是點擊按鈕或者其它地方就會彈出一個有內容的框,而它的運用也非常廣泛,而今天在這裡依舊是教大家如何用bootstrap編寫一個彈出框(Popover)。打開HBuilder新建好項目,我們這裡取名為demo,位置放在桌面。
  • java創建對象的過程詳解(從內存角度分析)
    先給出這篇文章的大致脈絡:首先,介紹一下java中對象的創建基本知識然後,介紹一下對象初始化的順序接下來,介紹一下創建對象的幾種方式最後,進行一個總結。在內存分配完成之後,Java虛擬機才會對新創建的對象賦予我們程式設計師給定的值。小結:創建一個對象包含下面兩個過程:1、類構造器完成類初始化(分配內存、賦予默認值)2、類實例化(賦予給定值)二、類初始化下面我們直接給出一個例子看一下java是如何初始化的。
  • JavaScript-window對象常用屬性及方法有哪些?
    >學習目標:一、BOM的概念1.1 什麼是BOM?對象,瀏覽器訪問歷史信息;在瀏覽器中,window對象有雙重角色,它既是通過javascript訪問瀏覽器窗口的一個接口,又是ECMAScript規定的Global對象。
  • 細品SpringBoot+Thymeleaf,你會有意外收穫
    HTML 模板中,有幾個變量,我們要將這個 HTML 模板渲染成一個 String 字符串,再把這個字符串通過郵件發送出去,那麼如何手動渲染呢?=/myapp引用路徑:<script type="text/javascript" th:src="@{/hello.js}"></script>等價於:<script type="text/javascript" src="/myapp/hello.js"></script&
  • 徹底理解引用在 Android 和 Java 中的工作原理
    然而,簡要地解釋不同類型的內存引用,它們具體是什麼,以及如何在 Android 中使用,這是個相對簡短的任務,這也是我想在本文中做的。首先:Java 中的引用是什麼?引用指向了一個對象,你能通過引用訪問對象。
  • 連引用都答不上,憑什麼說你是Java服務端開發
    【劃重點:給你三秒鐘時間思考,如果是你,該如何回答面試官的這個問題呢】引用是什麼【劃重點】在Java中引用包括:FinalReference 強引用SoftReference 軟引用WeakReference 弱引用PhantomReference 虛引用那麼為什麼會提供這四種引用呢,主要原因有:方便Jvm進行垃圾回收方便開發人員使用,開發人員可以靈活的決定某些對象的生命周期日常開發如何使用
  • JavaScript:對象都是這樣生成的!
    頭圖 | CSDN下載自視覺中國作者 | flydean 責編 | 張文來源 | 程序那些事(ID:flydean-tech)本文將會深入講解面向對象在 javascript 中的應用,並詳細介紹三種對象的生成方式:構造函數、原型鏈、類。
  • JavaScript和Java之間有什麼關係?
    感謝你的觀看,謝謝你。話不多說,開始今天的學習:一、JavaScript概述JavaScrip和Java到底有什麼關係呢?令我無比驚訝的是,就本質而言它們竟然半毛錢關係都沒有。前幾天學了HTML,如果說:HTML的作用主要是創建網頁的結構。CSS的作用主要是美化頁面。那麼JavaScript的作用主要是與用戶進行交互。JavaScript和Java又有什麼區別?
  • SAP ABAP和Java裡的弱引用(WeakReference)和軟引用(SoftReference)
    這就意味著,在ABAP垃圾回收器開始工作的時候,如果一個對象實例並未有任何強引用指向它,此時無論有無弱引用指向它,該對象實例都無法逃脫被回收的命運。看個具體的例子。這個30行的ABAP報表,實現了一個簡單的LCL_PERSON類。第17行創建了一個該類的實例,該實例的強引用存儲在引用變量lo_person裡。
  • 值傳遞和引用傳遞傳的到底是啥?
    這裡說的堆棧是指內存的兩種組織形式,堆是指動態分配內存的一塊區域,一般由程式設計師手動分配,比如 Java 中的 new、C/C++ 中的 malloc 等,都是將創建的對象或者內存塊放置在堆區。而棧是則是由編譯器自動分配釋放(大概就是你申明一個變量就分配一塊相應大小的內存),用於存放函數的參數值,局部變量等。
  • JavaScript小知識:String類型
    let lang="java";lang=lange+"scriot";console.log(lang);//javascript我們首先創建變量lang用來保存字符串java,然後我們將lang保存的字符串改為由原先保存字符串java和新的字符串
  • EffectiveJava-1-創建和銷毀對象
    可以不用在每次調用時都創建一個新的對象,可以使用預先構建好的對象,或將構建好的對象緩存起來,進行重複利用,適用於經常請求創建相同對象,並且創建對象的代價很高,如常見的單例模式寫法就是對這一點的應用;實例受控的類:能為重複的調用返回相同的類,有助於類控制某個時刻哪些實例應該存在,功能如下:1.確保它是一個Singleton或者是不可實例化的;2.使得不可變的類不會存在兩個相等的實例
  • 如何使用JavaScript實現前端導入和導出excel文件
    1.2 實現一鍵導入excel文件並生成table表格導入excel文件的功能我們可以用javascript原生的方式實現解析, 比如可以用fileReader這些原生api,但考慮到開發效率和後期的維護, 筆者這裡採用antd的Upload組件和XLSX來實現上傳文件並解析的功能.