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

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

主要內容:

對象的創建鍵名和鍵值對象的引用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 實例:圖書商城展示(數組和對象)

分析一下:

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

圖書商城展示(對象)

相關焦點

  • 如何在javascript中創建一個對象?
    javascript是一門基於對象而不是面向對象的語言,由於它的這個缺陷,在javascript中實現面向對象時十分彆扭,就比如創建對象,由於在ES6之前沒有class關鍵字,想要創建對象必須依賴以下幾種間接方式。
  • Javascript 生成器
    在 javascript 中,如果想要使用生成器,則需要: 定義特殊的生成器函數 調用該函數創建一個生成器對象 在循環中使用該生成器對象,或直接調用其 方法 我們以下面這個簡單的程序做為起點,並執行以下每個步驟:
  • javascript中那些奇怪的特性
    事實證明,這些額外的括號僅僅是為了告訴JavaScript解析器,即將到來的代碼是一個函數表達式,而不是一個函數。可以想像,知道了這一點,有很多方法可以跳過這些額外的括號,仍然可以生成一個有效的立即調用的函數表達式。void操作符告訴解析器代碼是函數表達式,因此,我們可以跳過函數定義的括號。你猜怎麼著?我們可以使用任何一元運算符(void, +, !
  • 很實用的JavaScript對象構造法
    面向對象創建對象var box = new Object(); // 創建一個對象box.name = 'Lee'; // 創建一個屬性並賦值box.age = 100;// box.run = function () { // 創建一個方法 return this.name + this.age+'運行中';}工廠模式function createObject
  • 深入總結Javascript原型及原型鏈
    本篇文章給大家詳細分析了javascript原型及原型鏈的相關知識點以及用法分享,具有一定的參考價值,對此有需要的朋友可以參考學習下。如有不足之處,歡迎批評指正。我們創建的每個函數都有一個 prototype (原型)屬性,這個屬性是一個指針,指向一個原型對象,而這個原型對象中擁有的屬性和方法可以被所以實例共享一、理解原型對象無論什麼時候,只要創建了一個新函數,就會根據一組特定的規則為該函數創建一個prototype屬性,這個屬性指向函數的原型對象。
  • 0基礎學習JavaScript一定要知道如何使用VS2019去編寫代碼
    這裡創建一個空白的Web應用程式項目,ASP.NET Web應用程式是完全支持JavaScript代碼編寫的。然後在此項目中再創建一個HTML頁面,用於編寫JavaScript代碼。圖1創建的是一個空的Web項目,項目中除了基本的引用、Properties、Web.config之外,沒有其他任何多餘的文件。
  • javascript這些特點你知道其中幾個?建議前端小白好好看看!
    JavaScript是一門屬於客戶端的腳本語言,你可以簡單理解為基於網站和網頁的程序語言(雖然這樣解釋不太嚴謹)。它是web開發中常用的腳本語言,特別是前端。 JavaScript主要功能是增強網頁互動性能,從而增加網站的用戶粘性。
  • JavaScript-window對象常用屬性及方法有哪些?
    >學習目標:一、BOM的概念1.1 什麼是BOM?對象,瀏覽器訪問歷史信息;在瀏覽器中,window對象有雙重角色,它既是通過javascript訪問瀏覽器窗口的一個接口,又是ECMAScript規定的Global對象。
  • 想提升JavaScript技能,你得掌握這5大關鍵概念
    const newArray = [ ...vegetables, ...fruits ];console.log(newArray);// ["carrot", "pumpkin", "apple","pear"]此外,還可以使用spread運算符創建具有完全相同內容但引用不同的對象副本
  • JavaScript中typeof和instanceof深入詳解
    使用原型 理解了原型的原理之後,如何使用原型呢?或者說原型有什麼作用呢? 一般的初學者,在剛剛學習了基本的javascript語法後,都是通過面向函數來編程的。這也是一般的js框架採用的方法。 原型還有一個作用就是用來實現繼承。
  • JavaScript和Java之間有什麼關係?
    感謝你的觀看,謝謝你。話不多說,開始今天的學習:一、JavaScript概述JavaScrip和Java到底有什麼關係呢?令我無比驚訝的是,就本質而言它們竟然半毛錢關係都沒有。簡直不敢相信,那你們為何長的那麼像?
  • JavaScript:對象都是這樣生成的!
    頭圖 | CSDN下載自視覺中國作者 | flydean 責編 | 張文來源 | 程序那些事(ID:flydean-tech)本文將會深入講解面向對象在 javascript 中的應用,並詳細介紹三種對象的生成方式:構造函數、原型鏈、類。
  • Java並發編程:對象的發布與逸出,夯實你的基礎
    而在某些情況下,我們又需要發布某個對象,但如果在發布時要確保線程安全性,則可能需要同步。發布內部狀態可能會破壞封裝性,並使得程序難以維持不變性條件。例如,如果在對象構造完成之前就發布該對象,就會破壞線程安全性。當某個不應該發布的對象被發布時,這種情況就被稱為逸出( Escape)。現在,我們首先來看看一個對象是如何逸出的。
  • 如何使用JavaScript實現前端導入和導出excel文件
    1.2 實現一鍵導入excel文件並生成table表格導入excel文件的功能我們可以用javascript原生的方式實現解析, 比如可以用fileReader這些原生api,但考慮到開發效率和後期的維護, 筆者這裡採用antd的Upload組件和XLSX來實現上傳文件並解析的功能.
  • JavaScript基礎關於對象相關的必看詳解
    什麼是對象在 JavaScript 中,對象是一組無序的相關屬性和方法的集合,所有的事物都是對象,例如字符串、數值、數組、函數等, 再比如一個人可以是一個對象 ,一本書 ,一個網頁都可以是一個對象 ,萬物皆對象JS中的對象是由屬性和方法組成的。
  • JavaScript瀏覽器對象,Location對象
    各位小夥伴們大家好,這次小編要介紹的JavaScript中的瀏覽器對象,Location對象。1.Location對象:window.location 對象用於獲得當前頁面的地址(URL),並把瀏覽器重定向到新的頁面。
  • 第41節 Document文檔節點-Javascript
    DOCTYPE html>如果存在文檔聲明,則將其作為document的第一個子節點,解析DOCUMENTTYPE_NODE類型,如果沒有聲明,則為null;註:DocumentType對象不能動態創建,它是只讀的;查找元素(選取文檔元素):在DOM中,取得特定的某個或某組元素,並執行一些操作,這是最重要的應用了;為了獲取文檔中的這些元素
  • 第五篇:JavaScript事件處理
    什麼是事件呢?事件就是網頁文檔或網頁元素對外發出的通知。當HTML元素與用戶發生交互行為時,該元素會觸發相關的交互事件,例如:當用戶用滑鼠單擊網頁中的按鈕時,按鈕會觸發滑鼠單擊事件(onclick)。元素自身也會觸發事件,例如:當圖片元素加載完成後,會觸發加載完成事件(onload)。
  • javascript自學記錄:使用構造函數模式和原型模式創建自定義類型
    5、給引用類型的原型添加屬性與方法原生對象.prototype.方寫 = function (參數) {return "abc";}6.2.4 使用構造函數模式和原型模式來創建自定義類型使用構造函數模式創建各自的屬性,而使用原型模式來定義公共的屬與方法。
  • 使用HTML5畫布實現的超棒javascript動畫儀錶板:gauge.js
    支持UI元素自定義你可以生成自己需要的顏色格式。6.支持主流瀏覽器支持瀏覽器:1.Chrome2.Safari 3.2+3.Firefox 3.5+4.IE 95.Opera 10.6+6.Mobile Safari (iOS 3.2+)7.Android 2.3+如何使用