★文章內容學習來源：拉勾教育大前端就業集訓營

本篇學習目標：
1.了解內置物件基本介紹；
2.掌握內置物件Math/Array/String的使用方法；
3.掌握內置物件對應的常用方法，

一、基本介紹

1. 復習

【64】JS(1)——語法簡介

• JavaScript 包含：ECMAscript、DOM（檔案物件模型）、BOM（瀏覽器物件模型）；
• ECMAScript是語言核心；
• ECMAscript 包含：變數、資料、運算子、條件分支陳述句、回圈陳述句、函式、陣列、物件……
• JavaScript 的物件包含三種：自定義物件、內置物件、瀏覽器物件；
• ECMAscript 的物件：自定義物件、內置物件；
• 使用一個內置物件，只需要知道物件中有哪些成員（屬性、方法），有什么功能，直接使用；
• 需要參考一些說明手冊 W3C或者MDN，后者更加詳細，

2. MDN

• Mozilla 開發者網路（MDN）提供有關開放網路技術（Open Web）的資訊，包括 HTML、CSS和萬維網及 HTML5 應用的 API，
• MDN：https://developer.mozilla.org/zh-CN/

比如：通過查詢MDN學習Math物件的random()方法的使用

3. 如何學習一個方法？

• 需要深究以下方面
  ①方法的功能（實作效果）；
  ①引數的意義和型別；（是否需要傳參；引數有何意義；型別有何限制）
  ③回傳值意義和型別；
  ④demo進行測驗（小測驗，比如如下測驗random()方法）

console.log(Math.random());

二、內置物件

1. Math物件

(1) 簡要介紹

• Math 物件它具有數學常數和函式的屬性和方法，我們可以直接進行使用；
• 根據數學相關的運算來找 Math 中的成員（求絕對值，取整…），

(2) 常用方法及舉例

//求一個半徑為10的圓的周長
console.log(2*10*Math.PI);//62.83185307179586

//亂數
console.log(Math.random());

//向下取整/向上取整
console.log(Math.floor(5.6)); //5
console.log(Math.ceil(5.6)); //6

//取整，四舍五入
console.log(Math.round(5.6));  //6
console.log(Math.round(7.2));   //7

//絕對值
console.log(Math.abs(-2)); //2
console.log(Math.abs(5));  //5
console.log(Math.abs("string"));  //NaN

//求最大和最小值
console.log(Math.max(45,67,34,90,123,35,78,96,520));//520
console.log(Math.min(45,67,34,90,123,35,78,96,520));//34

var arr = [1,2,3,4,5,6,7,8];
var max = Math.max(...arr);
console.log(max); //8

//求指數次冪/求平方根
console.log(Math.pow(2,3)); //2的3次方=8
console.log(Math.pow(4,0.5)); //4的0.5次方=2//這個其實就是開平方根的效果
console.log(Math.sqrt(9));  //9的平方根=3
console.log(Math.sqrt(-4)); //負數無法開平方根，回傳值NaN

(3) 案例

求 10-20 之間的亂數，

//案例：求10-20之間的亂數
function getRandomIntInclusive (min,max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor ( Math.random()* (max -min +1 )) + min;
    //包含最大值最小值
}
console.log(getRandomIntInclusive (10,20));

2. Array物件

(1) 創建陣列物件的兩種方式

• 字面量方式；

//字面量
var arr = [1,2,3,4,5]

• new Array() 建構式方法；

//建構式，陣列也是物件，可以通過建構式生成
var arr = new Array() ; //創建一個空陣列
//添加資料可傳引數
var arr2 = new Array(1,2,3);
var arr3 = new Array ("zs","ls","ww");
//輸出，檢測是否創建成功
console.log(arr);
console.log(arr2);
console.log(arr3);

(2) 檢測陣列型別

• 方法： instanceof檢測某個實體是否是某個物件型別，

//建構式方法創建陣列（因為陣列也是物件，可以通過建構式生成）
var arr = new Array() ;
var arr2 = new Array(1,2,3);
var arr3 = new Array ("zs","ls","ww");
//字面量方法創建陣列
var arr4 = [1,2,3,4,5];
//以前學習的檢測資料型別的方法：
console.log(typeof(arr));  //object
//但是以上的檢測陣列型別的方法檢測出的范圍較大，
//如果想知道此物件是否是具體的某個物件型別，可以用instanceof方法
console.log(arr instanceof Array);  //true-表示arr實體是Array物件型別的
console.log(arr instanceof String); //flase-表示arr實體不是String物件型別的
console.log(arr2 instanceof Array); //true-表示arr2實體是Array物件型別的
console.log(arr3 instanceof Array); //true-表示arr3實體是Array物件型別的
console.log(arr4 instanceof Array); //true-表示arr4實體是Array物件型別的

• 也可以用于其它物件型別檢測

function fun () {
    console.log(1);
}
console.log(fun instanceof Function);  //true

(3) 陣列常用方法及舉例

①轉字串方法

舉例如下：

var arr = [1,2,3,4];
//輸出
console.log(arr);
//toString方法
//toString方法其實相對比較少用
console.log(arr.toString());
//join()方法
console.log(arr.join());//默認中間逗號連接
console.log(arr.join("*")) ;//讓中間*連接

②首尾資料操作

☆push()方法（“尾推”）舉例如下：

//push();方法
var arr1 = [1,2,3,4];
//輸出
console.log(arr1);
//尾推：push();在陣列末尾加一個或多個元素，并回傳陣列操作后的長度
console.log(arr1.push(5,6,7,8)); //8
console.log(arr1);
//推入一個陣列，當作一個資料長度
console.log(arr1.push([9,10,11,12])); //9
console.log(arr1);

☆pop()方法（“尾刪”）舉例如下：

// 尾刪：pop()方法，洗掉陣列最后一項，回傳洗掉項，不用傳參
var arr2 = [1,3,4,5,6,7];
console.log(arr2);
console.log(arr2.pop());//7
console.log(arr2);

☆ shift()方法（“首刪”）舉例如下：

//首刪:shift()方法，洗掉陣列首項，回傳洗掉項，不用傳參
var arr3 = [1,2,3,4,5];
console.log(arr3);
console.log(arr3.shift()); //1
console.log(arr3);

☆ unshift()方法（“首添”）舉例如下：

//首添：unshift()方法，在陣列開頭添加一個或多個元素，并回傳陣列的新長度
var arr4 = [1,2,3,4];
console.log(arr4);
console.log(arr4.unshift(0));//5
console.log(arr4);

☆ 特殊應用：如何實作將陣列第一項移到最后一項？
思路：將陣列第一項洗掉，將洗掉項添加到最后一項，
代碼如下：

//特殊應用：首刪→尾添
var arr5 =[1,2,3,4,5];
console.log(arr5.push(arr5.shift()));
console.log(arr5);

③合并和拆分

☆ concat()方法舉例1：

//concat(),將兩個陣列合并成一個新的陣列，原陣列不受影響，
//引數位置可以是一個陣列字面量、數 組變數、零散的值，
var arr = [1,2,3];
var arr1 = arr.concat([4,5,6]);
console.log(arr1);
console.log(arr);//原陣列不受影響

☆ concat()方法舉例2：

var arr = [4,5,6];   //不受影響
var arr1 = [1,2,3];
var arr1 = arr1.concat(arr);
console.log(arr1);
console.log(arr); //不受影響

☆slice(start,end)方法舉例：

//slice(start,end)
//從當前陣列中截取一個新的陣列，不影響原來的陣列，
//回傳一個新的陣列，包含從 start 到end （不包括該元素）的元素，
//引數區分正負，正值表示下標位置，負值表示從后面往前數第幾個位置；
//引數可以只傳遞一個，表示從開始位置截取到字串結尾，
var arr = [1,2,3,4,5,6,7,8,9,10];
console.log(arr.slice(1,5));
console.log(arr.slice(0,2));
console.log(arr.slice(-5,-2));
console.log(arr.slice(7));
console.log(arr.slice(-2));

④洗掉、插入、替換

☆實作洗掉功能：傳前兩個引數splice(index,howmany)，如下舉例：

//splice(index,howmany,element1,element2,……)
var arr = [1,2,3,4,5,6,7,8,9,10];
//實作洗掉功能：傳前兩個引數splice(index,howmany)
console.log(arr.splice(2,5));//從下標為2的數開始洗掉，刪掉5個數(3,4,5,6,7)//回傳刪掉的數(3,4,5,6,7)
console.log(arr); //輸出刪掉一部分數后的陣列

☆ 實作替換功能：傳前3個及以上引數splice(index,howmany,element1,element2,……)，如下舉例：

var arr = [1,2,3,4,5,6,7,8,9,10];
//實作替換功能：傳3個及以上引數splice(index,howmany,element1,element2,……)
console.log(arr.splice(2,5,"haha","hello"));;//從下標為2的數開始插入，且從第2個引數開始刪掉5個數(3,4,5,6,7)//回傳刪掉的數(3,4,5,6,7)
console.log(arr); //輸出替換一部分數后的陣列

☆ 實作插入功能：傳前3個及以上引數，且第2個引數必須為0，splice(index,0,element1,element2,……)，如下舉例：

var arr = [1,2,3,4,5,6,7,8,9,10];
//實作插入功能：傳3個及以上引數splice(index,0,element1,element2,……)，且第2個引數必須為0
console.log(arr.splice(2,0,"haha","HELLO")); //從下標為2的數開始插入//回傳刪掉的數（無）
console.log(arr); //輸出插入一部分數后的陣列

⑤位置方法

☆舉例：

//⑤位置方法——indexOf()——查找資料在陣列中最先出現的下標（如果沒找到回傳-1）
var arr = [4,1,5,3,1,6,7,8,9,3,2,10];
console.log(arr.indexOf(1));  //1
console.log(arr.indexOf(2));  //10
console.log(arr.indexOf(3));   //3
console.log(arr.indexOf(11));   //-1
//⑤位置方法——lastIndexOf()——查找資料在陣列中最后一次出現的下標（如果沒找到回傳-1）
console.log(arr.lastIndexOf(1)); //4
console.log(arr.lastIndexOf(2)); //10
console.log(arr.lastIndexOf(3)); //9
console.log(arr.lastIndexOf(12)); //-1

⑥順序相關

如果想要根據數值大小進行排序，必須添加sort的比較函式引數，
該函式要比較兩個值然后回傳一個用于說明這兩個值的相對順序的數字，
比較函式應該具有兩個引數a 和b，根據a和b的關系作為判斷條件;
回傳值根據條件分為三個分支，正數、 負數、0：
回傳值是負數-1：a排在b前面，
回傳值是正數1：a排在b后面，
回傳值是0：a和b的順序保持不變，
人為能控制的是判斷條件，

☆舉例：reverse()倒序

var arr = [1,2,3,4,5,6,7,8,9,10];
console.log(arr); //原陣列
console.log(arr.reverse());//顛倒順序后陣列

☆舉例：sort()排序：默認根據字符編碼順序，從小到大排序，

var arr = [1,2,3,4,5,6,7,8,9,10];
console.log(arr);
console.log(arr.sort());

如果想要根據數值大小進行排序，必須添加sort的比較函式引數，
可人為控制判斷條件，以下的判斷條件使得從大往小排序

var arr = [1,2,3,4,5,6,7,8,9,10];
console.log(arr);
//如果想要按照數值大小排序，需要添加sort比較函式
//可人為控制判斷條件，以下的判斷條件使得從大往小排序
arr.sort(
    function(a,b) {
        if (a > b) {
            return -1;//a在b前
        } else if (a < b) {
            return 1; //a在b后
        } else {
            return 0;//a和b保持原來位置
        }
    }
);
console.log(arr);

可人為控制判斷條件，以下的判斷條件使得從小往大排序：

var arr = [2,6,8,1,5,3];
console.log(arr);
//從小往大排序
arr.sort(
    function(a,b) {
        if (a < b) {
            return -1; //a在b前
        } else if (a > b) {
            return 1; //a在b后
        } else {
            return 0;//a和b保持原來位置
        }
    }
);
console.log(arr);

⑦清空陣列

☆舉例如下：

arr = [1,2,3,4,5,6,7,8,9];
console.log(arr);
//推薦使用這種方法，簡單
arr = [];
console.log(arr);

arr1 = [6,7,8,9];
console.log(arr1);
arr1.length = 0;
console.log(arr1);


arr2 = [7,8,9,10,11];
console.log(arr2);
arr2.splice(0,arr2.length);
console.log(arr2);

2. String物件

(1) 基本包裝型別

• 為了方便操作簡單資料型別，JavaScript 還提供了特殊的簡單型別物件：String物件，
• 簡單型別是沒有屬性、方法的，復雜資料型別才有，但是String比較特殊，它是基本包裝型別：
• 當呼叫str.substring() 等方法的時候，先把 str 包裝成 String 型別的臨時物件，再呼叫substring 方法，最后銷毀臨時物件，

var str1 = "這是一個字串";
var str2 = str1.slice(3,5);
console.log(str2); //個字

//String可以使用方法的原因：基本包裝型別，以下模仿計算機作業
var str1 = "這是一個字符串";
//進行臨時包裝，包裝在str中
var str = new String(str1);
//在使用方法時，相當于在對str操作
var str2 = str.slice(3,5);
//使用完銷毀
str = null;

• 可以使用new String() 建構式方法創建字串物件，

//String
//字面量方式創建
var str1 = "這是一個字串";
console.log(str1);
//建構式方法創建
var str2 = new String("這也是一個字串");
console.log(str2);

(2) 字串的特點

①字串是不可變的

• 由于字串的不可變，在大量拼接字串的時候會有效率問題，
  

②注意

• 字串所有的方法，都不會修改字串本身（字串是不可變的），操作完成會回傳一個新的字串，

(以下將要介紹的字串物件的常用方法都是這樣，不會修改字串本身)

(3) 字串物件的常用屬性及舉例

//字串常用屬性舉例
//length屬性
var str = "1234567"；
console.log(str.length); //7
var str1 = "這是一個字串";
console.log(str1.length); //7
var str2 = "這 是 字串";
console.log(str2.length);  //7
var str3 = "1 2 3 4"; //7
console.log(str3.length); 

(4) 字串物件的常用方法及舉例

//charAt()_回傳指定的下標位置的字符_引數是index 字串的下標_下標也是從0開始
var str = "123";
console.log(str.charAt(0)); //1
console.log(str.charAt(1)); //2
console.log(str.charAt(2));  //3

//indexOf()_回傳某個指定的字串值在字串中首次出現的位置_如果子字串在原字串中沒有，回傳值是-1
var str = "這是一個字串123，還有123456，還有123456789";
console.log(str.indexOf("1")); //7
console.log(str.indexOf("有")); //12
console.log(str.indexOf("4")); //16
console.log(str.indexOf("，"));//-1

//concat(),連接兩個或多個字串
//引數比較靈活，可以是字串、或者字串變數、多個字串，
//生成的是一個新的字串，原字串不發生變化
var str = "這是原字串";
//字串連接
console.log(str.concat("&另一個字串"));
console.log(str);//原字串不受影響

//字串變數連接
var str1 = "+定義給變數str1的字串";
var str2 = str.concat(str1);
console.log(str2);
console.log(str1);//原字串不受影響
console.log(str);//原字串不受影響

//多個字串連接
var str3 = str.concat("&&&這是另幾個字串","hahaha","連起來了");
console.log(str3);
console.log(str);//原字串不受影響

//split()_把一個字串分割成字串陣列
//引數部分是分割符，利用分割符將字串分割成多個部分，多個部分作為陣列的每一項組成陣列
var str ="213141516171819";
//分割符"1"將字串分割成8個部分
console.log(str.split("1"));

//如果分割符是空字串，相當于將每個字符拆分成陣列中的每一項
var str2 ="123456";
//利用分隔符是空字串，分成6項
console.log(str2.split(""));

小思考：如何實作字串內容倒置？
思路：可以先把字串轉換為陣列，陣列中有reverse()方法，然后再把陣列轉回字串，如下所示：

//小思考：如何實作字串內容倒置？
//思路：可以先把字串轉換為陣列，陣列中有reverse()方法，然后再把陣列轉回字串，如下所示：
var str ="123456";
console.log(str);
var arr = str.split("");
console.log(arr);
var rarr = arr.reverse(arr);
console.log(rarr);
var str = rarr.join("");
console.log(str);

//toLowerCase()_換為小寫_生成的是新的字串，原字串不發生變化
var str = "ABcdeFG";
console.log(str.toLowerCase());//abcedfg
//toUpperCase()_換為大寫_生成的是新的字串，原字串不發生變化
console.log(str.toUpperCase()); //ABCDEFG

//slice(start,end)_提取字串的某個部分，并以新的字串回傳被提取的部分
//引數區分正負，正值表示下標位置，負值表示從后面往前數第幾個位置
//引數可以只傳遞一個，表示從開始位置截取到字串結尾
//從開始位置截取到結束位置（不包括結束位置）的字串
var str = "ABcdeFG";
console.log(str.slice(2,4));//cd//提取從下標2到下標4部分(不包括結束4位置)
console.log(str.slice(2,-1));//cdeF)//提取從下標2到倒數第1個位置(不包括倒數第1個位置)
console.log(str.slice(2));//cdeFG//提取從下標2到字串結尾(包括結尾)
console.log(str.slice(5));//FG//提取從下標5到字串結尾(包括結尾)

//substr(start,howmany)_在字串中抽取從start下標開始的指定數目的字符
//start引數區分正負，正值表示下標位置，負值表示從后往前數第幾個位置
//howmany 引數必須為正數，也可以不寫，不寫表示從start位置截取到最后
var str = "ABcdeFGhijklmn";
console.log(str.substr(2,4));//cdeF//提取從下標2開始，4個字符
console.log(str.substr(-5,2));//jk//提取從倒數第5個開始，2個字符
console.log(str.substr(2));//cdeFGhijklmn//提取從下標2開始到最后
console.log(str.substr(-5));//jklmn//提取從倒數第5個開始到最后

//substring(start,end)_提取字串中介于兩個指定下標之間的字符
//兩個引數都是指代下標，兩個數字大小不限制，執行方法之前會比較一下兩個引數的大小
//會用小當做開始位置，大的當做結束位置
//注意
//①從開始位置截取到結束位置但是不包含結束位置，
//②如果不寫第二個引數，從開始截取到字串結尾，
//③引數只能為正數，
var str = "123456789";
console.log(str.substring(6,9));//789//從開始位置截取到結束位置但是不包含結束位置
console.log(str.substring(8,4));//5678//會比較一下兩個引數的大小,小的開始，從開始位置截取到結束位置但是不包含結束位置
console.log(str.substring(7));//89//不寫第二個引數，從開始截取到字串結尾

下篇繼續：
【77】JS(8)——待定