JavaScript基礎(chǔ)

1 - 內(nèi)置對(duì)象

1.1 內(nèi)置對(duì)象

     JavaScript 中的對(duì)象分為3種：**自定義對(duì)象 、內(nèi)置對(duì)象、 瀏覽器對(duì)象**
    前面兩種對(duì)象是JS 基礎(chǔ) 內(nèi)容，屬于 ECMAScript；  第三個(gè)瀏覽器對(duì)象屬于 JS 獨(dú)有的， JS API 講解內(nèi)置對(duì)象就是指 JS 語言自帶的一些對(duì)象，這些對(duì)象供開發(fā)者使用，并提供了一些常用的或是**最基本而必要的功能**（屬性和方法），內(nèi)置對(duì)象最大的優(yōu)點(diǎn)就是幫助我們快速開發(fā)

    JavaScript 提供了多個(gè)內(nèi)置對(duì)象：Math、 Date 、Array、String等  

1.2 查文檔

    查找文檔：學(xué)習(xí)一個(gè)內(nèi)置對(duì)象的使用，只要學(xué)會(huì)其常用成員的使用即可，我們可以通過查文檔學(xué)習(xí)，可以通過MDN/W3C來查詢。
    Mozilla 開發(fā)者網(wǎng)絡(luò)（MDN）提供了有關(guān)開放網(wǎng)絡(luò)技術(shù)（Open Web）的信息，包括 HTML、CSS 和萬維網(wǎng)及 HTML5 應(yīng)用的 API。
    MDN:https://developer.mozilla.org/zh-CN/

1.3 Math對(duì)象

    Math 對(duì)象不是構(gòu)造函數(shù)，它具有數(shù)學(xué)常數(shù)和函數(shù)的屬性和方法。跟數(shù)學(xué)相關(guān)的運(yùn)算（求絕對(duì)值，取整、最大值等）可以使用 Math 中的成員。

注意：上面的方法使用時(shí)必須帶括號(hào)

**獲取指定范圍內(nèi)的隨機(jī)整數(shù)**：

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

1.4 日期對(duì)象

    Date 對(duì)象和 Math 對(duì)象不一樣，Date是一個(gè)構(gòu)造函數(shù)，所以使用時(shí)需要實(shí)例化后才能使用其中具體方法和屬性。Date 實(shí)例用來處理日期和時(shí)間.

• 使用Date實(shí)例化日期對(duì)象

  • 獲取當(dāng)前時(shí)間必須實(shí)例化：

  var now = new Date();
  

  • 獲取指定時(shí)間的日期對(duì)象

  var future = new Date('2019/5/1');
  

  注意：如果創(chuàng)建實(shí)例時(shí)并未傳入?yún)?shù)，則得到的日期對(duì)象是當(dāng)前時(shí)間對(duì)應(yīng)的日期對(duì)象

• 使用Date實(shí)例的方法和屬性

圖片1.png

• 通過Date實(shí)例獲取總毫米數(shù)

  • 總毫秒數(shù)的含義

    基于1970年1月1日（世界標(biāo)準(zhǔn)時(shí)間）起的毫秒數(shù)
    

  • 獲取總毫秒數(shù)

    // 實(shí)例化Date對(duì)象
    var now = new Date();
    // 1. 用于獲取對(duì)象的原始值
    console.log(date.valueOf()) 
    console.log(date.getTime()) 
    // 2. 簡(jiǎn)單寫可以這么做
    var now = + new Date();         
    // 3. HTML5中提供的方法，有兼容性問題
    var now = Date.now();
    

1.5 數(shù)組對(duì)象

創(chuàng)建數(shù)組的兩種方式

• 字面量方式

  • 示例代碼如下：

    var arr = [1,"test",true];
    

• new Array()

  • 示例代碼如下：

    var arr = new Array();
    

    注意：上面代碼中arr創(chuàng)建出的是一個(gè)空數(shù)組，如果需要使用構(gòu)造函數(shù)Array創(chuàng)建非空數(shù)組，可以在創(chuàng)建數(shù)組時(shí)傳入?yún)?shù)
    
    參數(shù)傳遞規(guī)則如下：
    

    • 如果只傳入一個(gè)參數(shù)，則參數(shù)規(guī)定了數(shù)組的長(zhǎng)度

    • 如果傳入了多個(gè)參數(shù)，則參數(shù)稱為數(shù)組的元素

檢測(cè)是否為數(shù)組

• instanceof 運(yùn)算符

  • instanceof 可以判斷一個(gè)對(duì)象是否是某個(gè)構(gòu)造函數(shù)的實(shí)例

    var arr = [1, 23];
    var obj = {};
    console.log(arr instanceof Array); // true
    console.log(obj instanceof Array); // false
    

• Array.isArray()

  • Array.isArray()用于判斷一個(gè)對(duì)象是否為數(shù)組，isArray() 是 HTML5 中提供的方法

    var arr = [1, 23];
    var obj = {};
    console.log(Array.isArray(arr));   // true
    console.log(Array.isArray(obj));   // false
    

添加刪除數(shù)組元素的方法

• 數(shù)組中有進(jìn)行增加、刪除元素的方法，部分方法如下表

  圖片2.png

注意：push、unshift為增加元素方法；pop、shift為刪除元素的方法

數(shù)組排序

• 數(shù)組中有對(duì)數(shù)組本身排序的方法，部分方法如下表

圖片3.png

注意：sort方法需要傳入?yún)?shù)來設(shè)置升序、降序排序

• 如果傳入“function(a,b){ return a-b;}”，則為升序
• 如果傳入“function(a,b){ return b-a;}”，則為降序

數(shù)組索引方法

• 數(shù)組中有獲取數(shù)組指定元素索引值的方法，部分方法如下表

  圖片4.png

數(shù)組轉(zhuǎn)換為字符串

• 數(shù)組中有把數(shù)組轉(zhuǎn)化為字符串的方法，部分方法如下表

圖片5.png

注意：join方法如果不傳入?yún)?shù)，則按照 “ , ”拼接元素

其他方法

• 數(shù)組中還有其他操作方法，同學(xué)們可以在課下自行查閱學(xué)習(xí)

圖片6.png

1.6 字符串對(duì)象

基本包裝類型

    為了方便操作基本數(shù)據(jù)類型，JavaScript 還提供了三個(gè)特殊的引用類型：String、Number和 Boolean。

    基本包裝類型就是把簡(jiǎn)單數(shù)據(jù)類型包裝成為復(fù)雜數(shù)據(jù)類型，這樣基本數(shù)據(jù)類型就有了屬性和方法。

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

    按道理基本數(shù)據(jù)類型是沒有屬性和方法的，而對(duì)象才有屬性和方法，但上面代碼卻可以執(zhí)行，這是因?yàn)?
    js 會(huì)把基本數(shù)據(jù)類型包裝為復(fù)雜數(shù)據(jù)類型，其執(zhí)行過程如下 ：

// 1. 生成臨時(shí)變量，把簡(jiǎn)單類型包裝為復(fù)雜數(shù)據(jù)類型
var temp = new String('andy');
// 2. 賦值給我們聲明的字符變量
str = temp;
// 3. 銷毀臨時(shí)變量
temp = null;

字符串的不可變

    指的是里面的值不可變，雖然看上去可以改變內(nèi)容，但其實(shí)是地址變了，內(nèi)存中新開辟了一個(gè)內(nèi)存空間。

    當(dāng)重新給字符串變量賦值的時(shí)候，變量之前保存的字符串不會(huì)被修改，依然在內(nèi)存中重新給字符串賦值，會(huì)重新在內(nèi)存中開辟空間，這個(gè)特點(diǎn)就是字符串的不可變。
    由于字符串的不可變，在**大量拼接字符串**的時(shí)候會(huì)有效率問題

根據(jù)字符返回位置

    字符串通過基本包裝類型可以調(diào)用部分方法來操作字符串，以下是返回指定字符的位置的方法：

圖片7.png

    案例：查找字符串"abcoefoxyozzopp"中所有o出現(xiàn)的位置以及次數(shù)

1. 先查找第一個(gè)o出現(xiàn)的位置
2. 然后 只要indexOf 返回的結(jié)果不是 -1 就繼續(xù)往后查找
3. 因?yàn)閕ndexOf 只能查找到第一個(gè)，所以后面的查找，利用第二個(gè)參數(shù)，當(dāng)前索引加1，從而繼續(xù)查找

根據(jù)位置返回字符

    字符串通過基本包裝類型可以調(diào)用部分方法來操作字符串，以下是根據(jù)位置返回指定位置上的字符：

圖片8.png

    在上述方法中，charCodeAt方法返回的是指定位置上字符對(duì)應(yīng)的ASCII碼，ASCII碼對(duì)照表如下：

圖片9.png

    案例：判斷一個(gè)字符串 'abcoefoxyozzopp' 中出現(xiàn)次數(shù)最多的字符，并統(tǒng)計(jì)其次數(shù)

1. 核心算法：利用 charAt(） 遍歷這個(gè)字符串

2. 把每個(gè)字符都存儲(chǔ)給對(duì)象， 如果對(duì)象沒有該屬性，就為1，如果存在了就 +1

3. 遍歷對(duì)象，得到最大值和該字符

   注意：在遍歷的過程中，把字符串中的每個(gè)字符作為對(duì)象的屬性存儲(chǔ)在對(duì)象總，對(duì)應(yīng)的屬性值是該字符出現(xiàn)的次數(shù)

字符串操作方法

    字符串通過基本包裝類型可以調(diào)用部分方法來操作字符串，以下是部分操作方法：

圖片10.png

replace()方法

    replace() 方法用于在字符串中用一些字符替換另一些字符，其使用格式如下：  

字符串.replace(被替換的字符串， 要替換為的字符串)；

split()方法

    split()方法用于切分字符串，它可以將字符串切分為數(shù)組。在切分完畢之后，返回的是一個(gè)新數(shù)組。

    其使用格式如下：

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

2 - 簡(jiǎn)單數(shù)據(jù)類型和復(fù)雜數(shù)據(jù)類型

2.1 簡(jiǎn)單數(shù)據(jù)類型

    **簡(jiǎn)單類型**（**基本數(shù)據(jù)類型**、**值類型**）：在存儲(chǔ)時(shí)變量中存儲(chǔ)的是值本身，包括string ，number，boolean，undefined，null

2.2 復(fù)雜數(shù)據(jù)類型

    **復(fù)雜數(shù)據(jù)類型（引用類型）**：在存儲(chǔ)時(shí)變量中存儲(chǔ)的僅僅是地址（引用），通過 new 關(guān)鍵字創(chuàng)建的對(duì)象（系統(tǒng)對(duì)象、自定義對(duì)象），如 Object、Array、Date等；

2.3 堆棧

• 堆棧空間分配區(qū)別：

1、棧（操作系統(tǒng)）：由操作系統(tǒng)自動(dòng)分配釋放存放函數(shù)的參數(shù)值、局部變量的值等。其操作方式類似于數(shù)據(jù)結(jié)構(gòu)中的棧；

簡(jiǎn)單數(shù)據(jù)類型存放到棧里面

2、堆（操作系統(tǒng)）：存儲(chǔ)復(fù)雜類型(對(duì)象)，一般由程序員分配釋放，若程序員不釋放，由垃圾回收機(jī)制回收。

圖片11.png

• 簡(jiǎn)單數(shù)據(jù)類型的存儲(chǔ)方式

    值類型變量的數(shù)據(jù)直接存放在變量（棧空間）中
  

圖片12.png

• 復(fù)雜數(shù)據(jù)類型的存儲(chǔ)方式

    引用類型變量（?？臻g）里存放的是地址，真正的對(duì)象實(shí)例存放在堆空間中
  

圖片13.png

2.4 簡(jiǎn)單類型傳參

    函數(shù)的形參也可以看做是一個(gè)變量，當(dāng)我們把一個(gè)值類型變量作為參數(shù)傳給函數(shù)的形參時(shí)，其實(shí)是把變量在棧空間里的值復(fù)制了一份給形參，那么在方法內(nèi)部對(duì)形參做任何修改，都不會(huì)影響到的外部變量。

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

    運(yùn)行結(jié)果如下：

圖片14.png

2.5 復(fù)雜數(shù)據(jù)類型傳參

    函數(shù)的形參也可以看做是一個(gè)變量，當(dāng)我們把引用類型變量傳給形參時(shí)，其實(shí)是把變量在?？臻g里保存的堆地址復(fù)制給了形參，形參和實(shí)參其實(shí)保存的是同一個(gè)堆地址，所以操作的是同一個(gè)對(duì)象。

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

    運(yùn)行結(jié)果如下：

圖片15.png