JavaScript基礎-內置對象

2021-01-14 老周的開發札記
1 - 內置對象1.1 內置對象

JavaScript 中的對象分為3種:自定義對象 、內置對象、 瀏覽器對象

       前面兩種對象是JS 基礎 內容,屬於 ECMAScript; 第三個瀏覽器對象屬於 JS 獨有的, JS API 講解內置對象就是指 JS 語言自帶的一些對象,這些對象供開發者使用,並提供了一些常用的或是最基本而必要的功能(屬性和方法),內置對象最大的優點就是幫助我們快速開發

JavaScript 提供了多個內置對象:Math、 Date 、Array、String等

1.2 查文檔

查找文檔:學習一個內置對象的使用,只要學會其常用成員的使用即可,我們可以通過查文檔學習,可以通過MDN/W3C來查詢。

       Mozilla 開發者網絡(MDN)提供了有關開放網絡技術(Open Web)的信息,包括 HTML、CSS 和全球資訊網及 HTML5 應用的 API。

MDN:https://developer.mozilla.org/zh-CN/

1.3 Math對象

Math 對象不是構造函數,它具有數學常數和函數的屬性和方法。跟數學相關的運算(求絕對值,取整、最大值等)可以使用 Math 中的成員。

屬性、方法名
功能
Math.PI
圓周率
Math.floor()
向下取整
Math.ceil()
向上取整Math.round() 
四捨五入版就近取整 注意 -3.5結果是-3
Math.abs()
絕對值
Math.max()/Math.min()
求最大和最小值
Math.random()
獲取範圍在[0-1)之間的隨機數

注意:上面的方法使用時必須帶括號

獲取指定範圍內的隨機整數

function getRandom(min, max) {
 return Math.floor(Math.random() * (max - min + 1)) + min;
}

1.4 日期對象

Date 對象和 Math 對象不一樣,Date是一個構造函數,所以使用時需要實例化後才能使用其中具體方法和屬性。Date 實例用來處理日期和時間

通過Date實例獲取總毫秒數

1.5 字符串對象基本包裝類型

   為了方便操作基本數據類型,JavaScript 還提供了三個特殊的引用類型:String、Number和 Boolean。

    基本包裝類型就是把簡單數據類型包裝成為複雜數據類型,這樣基本數據類型就有了屬性和方法。

// 下面代碼有什麼問題?
var str = 'andy';
console.log(str.length);

按道理基本數據類型是沒有屬性和方法的,而對象才有屬性和方法,但上面代碼卻可以執行,這是因為

js 會把基本數據類型包裝為複雜數據類型,其執行過程如下 :

// 1. 生成臨時變量,把簡單類型包裝為複雜數據類型
var temp = new String('andy');
// 2. 賦值給我們聲明的字符變量
str = temp;
// 3. 銷毀臨時變量
temp = null;

字符串的不可變

指的是裡面的值不可變,雖然看上去可以改變內容,但其實是地址變了,內存中新開闢了一個內存空間。

當重新給字符串變量賦值的時候,變量之前保存的字符串不會被修改,依然在內存中重新給字符串賦值,會重新在內存中開闢空間,這個特點就是字符串的不可變。由於字符串的不可變,在大量拼接字符串的時候會有效率問題

根據字符返回位置

字符串通過基本包裝類型可以調用部分方法來操作字符串,以下是返回指定字符的位置的方法:

案例:查找字符串"abcoefoxyozzopp"中所有o出現的位置以及次數

先查找第一個o出現的位置

然後 只要indexOf 返回的結果不是 -1 就繼續往後查找

因為indexOf 只能查找到第一個,所以後面的查找,利用第二個參數,當前索引加1,從而繼續查找

根據位置返回字符

字符串通過基本包裝類型可以調用部分方法來操作字符串,以下是根據位置返回指定位置上的字符:

在上述方法中,charCodeAt方法返回的是指定位置上字符對應的ASCII碼,ASCII碼對照表如下:

案例:判斷一個字符串 'abcoefoxyozzopp' 中出現次數最多的字符,並統計其次數

核心算法:利用 charAt() 遍歷這個字符串

把每個字符都存儲給對象, 如果對象沒有該屬性,就為1,如果存在了就 +1

遍歷對象,得到最大值和該字符

注意:在遍歷的過程中,把字符串中的每個字符作為對象的屬性存儲在對象中,對應的屬性值是該字符出現的次數

字符串操作方法

字符串通過基本包裝類型可以調用部分方法來操作字符串,以下是部分操作方法:

replace()方法

replace() 方法用於在字符串中用一些字符替換另一些字符,其使用格式如下: 

字符串.replace(被替換的字符串, 要替換為的字符串);

split()方法

split()方法用於切分字符串,它可以將字符串切分為數組。在切分完畢之後,返回的是一個新數組。

其使用格式如下:

字符串.split("分割字符")

2 - 簡單數據類型和複雜數據類型2.1 簡單數據類型

簡單類型基本數據類型值類型):在存儲時變量中存儲的是值本身,包括string ,number,boolean,undefined,null

2.2 複雜數據類型

複雜數據類型(引用類型):在存儲時變量中存儲的僅僅是地址(引用),通過 new 關鍵字創建的對象(系統對象、自定義對象),如 Object、Array、Date等;

2.3 堆棧

  1、棧(作業系統):由作業系統自動分配釋放存放函數的參數值、局部變量的值等。其操作方式類似於數據結構中的棧;

簡單數據類型存放到棧裡面

  2、堆(作業系統):存儲複雜類型(對象),一般由程式設計師分配釋放,若程式設計師不釋放,由垃圾回收機制回收。

簡單數據類型的存儲方式

值類型變量的數據直接存放在變量(棧空間)中

2.4 簡單類型傳參

       函數的形參也可以看做是一個變量,當我們把一個值類型變量作為參數傳給函數的形參時,其實是把變量在棧空間裡的值複製了一份給形參,那麼在方法內部對形參做任何修改,都不會影響到的外部變量。

function fn(a) {
   a++;
   console.log(a);
}
var x = 10;
fn(x);
console.log(x);

運行結果如下:

2.5 複雜數據類型傳參

函數的形參也可以看做是一個變量,當我們把引用類型變量傳給形參時,其實是把變量在棧空間裡保存的堆地址複製給了形參,形參和實參其實保存的是同一個堆地址,所以操作的是同一個對象。

function Person(name) {
   this.name = name;
}
function f1(x) { // x = p
   console.log(x.name); // 2. 這個輸出什麼 ?    
   x.name = "張學友";
   console.log(x.name); // 3. 這個輸出什麼 ?    
}
var p = new Person("劉德華");
console.log(p.name);    // 1. 這個輸出什麼 ?  
f1(p);
console.log(p.name);    // 4. 這個輸出什麼 ?  

運行結果如下:



相關焦點

  • JavaScript的內置對象Math
    各位小夥伴們大家好,這次小編要介紹的是JavaScript的一個內置對象Math。Math對象:執行常見的算數任務常用方法:round():四捨五入random():返回0-1之間的隨機數max():返回最高值min():返回最低值abs():返回絕對值js代碼如下:四捨五入:document.write(Math.round(2.5));(輸出的結果是三)隨機數:document.write(Math.random
  • JavaScript - Math對象
    Math對象在我們js中其實是有很多數學計算的需求的,不過不必擔心系統給我們提供了大量的數學運算的方法供我們使用而這些方法全都存在於我們的Math對象中Math常用的屬性:Math.PI 相當於π 3.14159Math對象常用的函數
  • 什麼是JavaScript對象?如何創建並引用?這就告訴你!
    主要內容:對象的創建鍵名和鍵值對象的引用Math對象Date對象學習目標:為什麼要使用對象?1.2 什麼是對象對象:就類中的一個具體的實物。人類-具體某一個人(張三丰)。動物類-(一個具體的動物-東北虎),家電類-(具體一個比如說電視。)js 中我們包含哪些對象呢?內置對象(本地對象):Math對象,Number對象,Date對象等,系統給我們提供好的,我們拿過來用就可以了。
  • 七天學會javascript第一天javascript介紹
    javascript介紹javascript數據類型javascript運算符javascript對象javascript Date對象javascript String對象JavaScript常用於實現一些前端效果。前些年流行的flash已經慢慢的被淘汰,js盛行起來。javascript :客戶端編程。javascript是由客戶端去解釋運行的。
  • JavaScript入門教程
    起源javascript前身叫做livescript,sun公司推出java,netspace公司引進java的概念,重新設計livescript,並更名javascript。發明者,布蘭登.艾克,表單驗證原先要經過伺服器,伺服器壓力大,等待時間長,js僅在客戶端就可完成。是什麼是一種腳本語言,是一種輕量級的程式語言。
  • 一天一點JavaScript編程知識:Animation動畫
    前言總算是寫完了基礎類型篇的內容。這次咱們來聊一聊動畫。閒話就不多扯了,直接開始正文。正文一、基礎概念JavaScript中,我們可以依賴內部提供的動畫函數,去移動DOM元素(<img />,<div>或任何其他HTML元素)。JavaScript提供了以下兩個在動畫中經常使用的函數。
  • JavaScript:對象都是這樣生成的!
    頭圖 | CSDN下載自視覺中國作者 | flydean 責編 | 張文來源 | 程序那些事(ID:flydean-tech)本文將會深入講解面向對象在 javascript 中的應用,並詳細介紹三種對象的生成方式:構造函數、原型鏈、類。
  • JavaScript中的「黑話」
    在ES3中,獲取到的type為內部屬性[[Class]]屬性,它可以用來判斷一個原生屬性屬於哪一種內置的值;在ES5中新增了兩條規則:若this值為null、undefined分別返回:[object Null]、[object Undefined];在ES6中不存在[[Class]]了,取而代之的是一種內部屬性:[[NativeBrand]],它是一種標記值,用於區分原生對象的屬性,
  • 第五篇:JavaScript事件處理
    庫的網頁代碼(案例代碼見unit12\case1.html):<html><head><title>JavaScript開發案例</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript
  • 在JavaScript中,使用replace()、test()和exec()方法匹配字符串
    JavaScript核心代碼如下:<script type="text/javascript">var str = "Hello Microsoft!"使用字符串替換的核心JavaScript代碼如下:<script type="text/javascript">var str = "一都編程,每個知識就是一個案例。"
  • 50個實用的JavaScript工具
    SAJAX  是一款被封裝的ajax工具,非常方便與後臺的交互,對XMLHttpRequest對象進行了封裝,可以實現對伺服器的異步請求,簡化操作qooxdoo具有客戶端瀏覽器檢測功能,具有瀏覽器抽象層,可以無差別的創建跨瀏覽器的Web應用程式,它提供方便的調試接口,具有事件管理、聚焦管理、定時器、邊框和對象屬性等特徵。它提供一組窗體組件並擴展了布局,它還提供跨平臺的png圖形透明支持功能。此外,qooxdoo提供一個原子組件,你可以在其基礎上開發你自己的組件。
  • 來一輪帶注釋的demo,徹底搞懂javascript中的replace函數
    javascript這門語言一直就像一位帶著面紗的美女,總是看不清,摸不透,一直專注伺服器端,也從來沒有特別重視過,直到最近幾年,javascript越來越重要,越來越通用。最近和前端走的比較近,藉此機會,好好鞏固一下相關知識點。
  • JavaScript-Date對象及Math對象
    創建一個Date對象,如果直接使用構造函數創建一個Date對象,則會封裝為當前代碼執行的時間var
  • 在JavaScript字符串的search()方法中,如何匹配正則表達式?
    基本含義search()方法是字符串對象的方法,可與正則表達式對接,用於將當前字符串在正則表達式中搜索並匹配。Search()方法返回的類型是一個整數值:返回第一次匹配到的字符串的開始索引值,索引值是從0開始的。如果字符串沒有在正則表達式中匹配到,則返回-1。4.2.
  • javascript在自動化測試項目中的應用「軟體測試開發入門教程」
    比如說我今天分享的主題是javascript在自動化測試中的應用有些朋友說我之前講的自動化測試的東西,需要消化很久,有一定的難度,意思就是說我動不動就講測試框架,測試開發是不是會有這樣的感覺?比如今天分享的javascript,大家做軟體測試有沒有用過?
  • 很實用的JavaScript對象構造法
    面向對象創建對象var box = new Object(); // 創建一個對象box.name = 'Lee'; // 創建一個屬性並賦值box.age = 100;boj.name = name;obj.age = age;obj.run = function(){return this.name+this.age+'運行中';}return obj; // 返回對象引用
  • 和大家分享JS編程知識之JS內置對象實例詳解
    大家好,本次和給大家分享JS的內置對象。本次主要是通過實例來和大家一起分享學習,分享學習什麼是對象,以及String字符串對象,Data日期對象,Array數組對象,Math對象的常用方法的使用。JS內置對象實例詳解什麼是對象1、對象的概念其實對象是比較好理解的,JS中的所有事物都是對象,比如字符串、數值、數組、函數等等都是對象。
  • 程式設計師必須掌握的 12 個 JavaScript 技能!
    無論你的開發水平如何,理解 JavaScript 的基礎概念都尤為重要。本文將與大家分享 12 個實用的 JavaScript 技能,未來我也將在 Github 的 JS Tips&Tidbits 倉庫(https://github.com/nas5w/javascript-tips-and-tidbits)中持續更新此概念列表。
  • 打基礎一定要吃透這12類 Python 內置函數
    內置函數就是python給你提供的, 拿來直接用的函數,比如print.,input等。截止到python版本3.6.2 python一共提供了68個內置函數,我將它們分成 12 類,方便你學習。1. 和數字相關1.
  • 學會 Math 對象這 10 個方法,能讓你事半功倍!
    在今天的文章中將介紹 Math對象的一些有用方法。1. Math.min()Math.min()是 JS 數學庫中的函數,用於將所有傳遞的值中的最小值返回給該方法。Math.min(0, 150, 30, 20, -8, -200) // -2002.