JavaScript(5)-内置對象

一、JavaScript 對象分類

對象隻是一種特殊的資料。對象擁有屬性和方法。

JavaScript 中的所有事物都是對象：字元串、數值、數組、函數…

JavaScript 中的對象分類：

• 自定義對象
• 内置對象
• DOM對象
• BOM對象

二、自定義對象

JavaScript 自身提供的對象，不能滿足我們所有需求，當我們需要一種對象，可是javascript沒有提供的時候，我們就需要自己動手定義我們需要的對象，自己建立的對象就是自定義對象。

自定義對象有2種建立方式：

1. 使用 字面量{} 建立對象

使用對象字面量{}來建立對象，文法格式如下：

var 對象名稱{ 
    name1 : value1, 
    name2 : value2,
    ...
    nameN : valueN }
           

其實就是{ }花括号裡面以鍵值對的方式建立表達這個對象的屬性和方法，鍵值對之間用

逗号,

隔開。

通路對象的屬性 有2種方式：

• 對象名稱.屬性名稱
• 對象名稱[‘屬性名稱’]——注意方括号[ ]裡面的屬性必須加引号

通路對象的方法 隻有1種方式：

• 對象名稱.對象方法()

注意：通路對象的方法隻能使用第一種.的方式通路，第二種[]的方式不能通路方法，會傳回undefined

是以：通路對象的屬性和方法，建議統一采用第一種.的方式

// 案例1：使用字面量{}建立對象
var stu = {
  name: '張三',
  age: 25,
  address: '西安',
  getStuInfo: function () {
    return this.name + ',' + this.age + ',' + this.address;  // this指向stu對象
  }
}
// 通路對象的屬性
console.log(stu.name);  // 張三
console.log(stu['address']);  // 西安
// 通路對象的方法
var info = stu.getStuInfo();
console.log(info);  // 張三,25,西安
           

2. 利用 new Object 建立對象

利用 new Object 建立對象，文法案例如下：

var person = new Object();  // 建立一個空的對象
person.uname = '李四';  // 為空對象添加屬性和方法
person.age = 20;
person.sex = '男';
person.sayHi = function () {
  console.log('你好!');
}
console.log(person.uname + ',' + person.age + ',' + person.sex);  // 通路屬性，傳回：李四,20,男
person.sayHi();  // 調用方法，傳回：你好!
           

注意：

• Object() ：第一個字母大寫
• new Object() ：需要 new 關鍵字
• 添加屬性和方法的格式：對象.屬性 = 值;（後面用

  分号;

  隔開）

3. 利用構造函數建立對象

因為一次建立一個對象，裡面很多的屬性和方法是大量相同的，比較繁瑣；此時可以利用函數的方法，重複這些相同的代碼，我們就把這個函數稱為構造函數。

這個函數不一樣,裡面封裝的不是普通代碼，而是對象。

構造函數

是一種特殊的函數，主要用來初始化對象，即為對象成員變量賦初始值，它總與 new 運算符一起使用。

我們可以把對象中一些公共的屬性和方法抽取出來，然後封裝到這個函數裡面。

// 聲明構造函數：
function 構造函數名(形參1,形參2,形參3) {
     this.屬性名1 = 值1;  // 逗号分隔
     this.屬性名2 = 值2;
     this.屬性名3 = 值3;
     this.方法名 = function(){};
}
// 調用構造函數--建立對象
var obj = new 構造函數名(實參1，實參2，實參3)
           

案例：

// 聲明構造函數：
function Stars(uname, age, sex) {
  this.name = uname;
  this.age = age;
  this.sex = sex;
  this.sing = function (sang) {
    console.log(sang);
  }
}
// 調用構造函數--建立對象1
var ldh = new Star('劉德華', 50, '男');
console.log(typeof ldh);  // 傳回：object
console.log(ldh.name);  // 通路屬性 傳回：劉德華
ldh.sing('冰雨'); // 調用方法并給方法傳實參 傳回：冰雨
// 調用構造函數--建立對象2
var zxy = new Star('張學友', 51, '男');
console.log(zxy.sex);
zxy.sing('李香蘭');
           

注意：

1. 構造函數名需要首字母大寫。
2. 函數内的屬性和方法前面需要添加 this ，表示目前對象的屬性和方法。
3. 構造函數中不需要 return 傳回結果。
4. 當我們建立對象的時候，必須用 new 來調用構造函數。

// 聲明構造函數：(沒有參數)
function stu() {
  this.name = '王五';
  this.age = 28;
  this.address = '上海';
  this.getInfo = function () {
    return this.name + ',' + this.age + ',' + this.address;
  }
}
// 建立對象
var stuobj = new stu();
console.log(stu.name);  // 通路屬性
var info = stuobj.getInfo();
console.log(info);  // 通路方法
           

三、内置對象

内置對象是JavaScript 語言本身提供的對象。

JavaScript 提供多個内建對象，比如 String、Date、Array 等等

1. Number 數字對象

1）建立對象 new Number()

注意： 如果一個參數值不能轉換為一個數字将傳回 NaN (非數字值)。

2）常見的屬性和方法

① 屬性

Number.MAX_VALUE 最大值

• MAX_VALUE 是 Javascript Number對象的靜态屬性，隻能通過 Number.> MAX_VALUE 調用
• 使用自定義的Number x（x.MAX_VALUE ） 将無法擷取 MAX_VALUE 屬性

Number.MIN_VALUE 最小值

• 是 JavaScript 中可表示的最小的數，該數值接近 0 ，但不是負數，近似> 值為 5 x 10-324
• 與最大值同理，MIN_VALUE屬性也隻能通過Number.MAX_VALUE 調用

// Number.MAX_VALUE	最大值
console.log(Number.MAX_VALUE); // 1.7976931348623157e+308
var a = 100;
console.log(a.MAX_VALUE);  // 傳回undefined

// Number.MIN_VALUE	最小值
console.log(Number.MIN_VALUE); // 5e-324 (接近 0 ，但不是負數)
           

② 方法

toString()

把數字轉換為字元串

文法：

number.toString(基數)

• 基數一般不填
• 基數若填，填寫2、8、16：表示把數字轉換為字元串，并以二進制、八進> 制、十六進制顯示

var num1 = 20;
console.log(num1.toString()); // 20 (字元串型)
console.log(num1.toString(2));  // 10100  (字元串型 二進制)
console.log(num1.toString(8));  // 24  (字元串型 八進制)
console.log(num1.toString(16));  // 14  (字元串型 十六進制)
           

Number.parseInt(‘字元串’)

将字元串轉換成整數。和全局方法

parseInt('字元串')

作用一緻。

Number.parseFloat(‘字元串’)

将字元串轉換成浮點數。和全局方法

parseFloat('字元串')

作用一緻。

給字元串，傳回整數

// 去掉小數，隻取整數，不四舍五入
var str1 = '99.9';
console.log(Number.parseInt(str1));  // 99
console.log(parseInt(str1));  // 99
console.log(typeof parseInt(str1));  // number
console.log(parseInt('99.1'));  // 99

console.log(Number.parseFloat(str1)); // 99.9
console.log(parseFloat(str1));  // 99.9
console.log(parseFloat('3.1415'));  // 3.1415
console.log(parseFloat('120px')); // 120 會去掉這個px機關
           

toFixed(保留小數的位數)

把 Number 四舍五入為指定小數位數的數字。

給數字，傳回指定小數位數的數字

var pi = 3.1415926;
console.log(pi.toFixed(2)); // 3.14
console.log(pi.toFixed(3)); // 3.142
console.log(pi.toFixed(4)); // 3.1416
           

isNaN()

是全局函數。判斷其參數是否是非數字值。

給任意類型參數，傳回布爾值

需要注意的是，isNaN() 函數其實并不能像它的描述中所寫的那樣，數字值傳回 false，其他傳回 true。

實際上，它是判斷一個值能否被 Number() 合法地轉化成數字。

• 數字形式的字元串。例如 “123”、"-3.14"，雖然是字元串型，但被 isNaN() 判為數，傳回 false。（“12,345,678”，“1.2.3” 這些傳回 true）
• 空值。null、空字元串""、空數組[]，都可被Number()合法的轉為0，于是被isNaN認為是數，傳回false。（undefined、空對象{}、空函數等無法轉數字，傳回true）

console.log(isNaN(123));  // false
console.log(isNaN('123'));  // false 能被Number()合法地轉化成數字
console.log(isNaN(5 - 2));  // false
console.log(isNaN(0));  // false
console.log(isNaN(null));  // false  能被Number()合法的轉為0
console.log(isNaN(undefined));  // true
           

3）注意事項

1. 數字預設顯示為十進制；

   “0” 開頭的是八進制，“0x” 開頭的是十六進制；

   可以使用 toString(2/8/16) 方法輸出2進制、8進制、16進制

2. 沒有具體區分整數和小數
3. 所有 JavaScript 數字均為 64 位
4. 整數（不使用小數點或指數計數法）最多為 15 位
5. 小數的最大位數是 17，浮點數運算有精度問題
6. 極大或極小的數字可通過科學計數法來表示
7. 無窮大Infinity、無窮小**-Infinity**；（基于它們的加減乘除運算結果還是無窮大/小）

8. NaN——不是一個數字。

   可以使用 isNaN() 全局函數來判斷一個值是否是 NaN 值

4）與基本類型的差别【變量就是對象，注意類型】

有 new 是對象，沒有new 是基本類型的數字型。

var x = new Number(50);
var y = 50;
console.log(typeof x); // object  x是對象類型
console.log(typeof y); // number  y是數字類型
           

2. String 字元串對象

1）建立對象

var str1=new String('hello');
var str2 = 'hello';
var str3='hello，world';
           

2）常見的屬性和方法

① 屬性

length

傳回字元串的長度(字元數)。

console.log(str1.length);  // 5
console.log(str3.length);  // 11
           

② 方法

includes()

查找字元串中是否包含指定的子字元串。

給字元串，傳回布爾值（有：true；沒有：false）

console.log(str1.includes("ell")); // true
console.log(str1.includes("wel")); // false
           

match()

查找字元串中特定的字元，并且如果找到的話，則傳回這個字元；找不到傳回null。

給字元串，傳回字元串 / null

console.log(str2.match('hello')); // ["hello", index: 0, input"hello", groups: undefined]
alert(str2.match('hello')); // hello
alert(str2.match('helle')); // null
           

startsWith()

檢視字元串是否以指定的子字元串開頭。

如果是以指定的子字元串開頭傳回 true，否則 false。

endsWith()

判斷目前字元串是否是以指定的子字元串結尾的（區分大小寫）。

如果傳入的子字元串在搜尋字元串的末尾則傳回 true，否則将傳回 false。

console.log(str1.startsWith('he'));  // true
console.log(str1.startsWith('wel'));  // false

console.log(str2.endsWith('lo'));  // true
console.log(str2.endsWith('el'));  // false

var names = ["張三", "李四", "王五", "李思思", "趙佳樂", "王樂"];
for (var i = 0; i < names.length; i++) {
  var name = names[i];
  if (name.startsWith("李")) {
    console.log(name);  // 李四  李思思
  }
  if (name.endsWith('樂')) {
    console.log(name);  // 趙佳樂 王樂
  }
}
           

indexOf()

定位字元串中某一個指定的字元首次出現的位置，沒有出現就是-1

lastIndexOf()

定位字元串中某一個指定的字元最後一次出現的位置，沒有出現就是-1

給字元串，傳回下标 /-1

console.log(str3.indexOf('l'));  // 2 下标為2，即第3個
console.log(str3.lastIndexOf('l')); // 9
           

charAt()

傳回在指定位置的字元。

給下标，傳回字元

console.log(str2.charAt(1)); // e 
console.log(str2.charAt(str2.length - 1)); //o  傳回字元串中的最後一個字元
           

replace(‘被替換的字元串’,‘要替換為的字元串’)

在字元串中用某些字元替換另一些字元。

給字元串，傳回替換後字元串

split()

把字元串分割為字元串數組。

給字元串，傳回數組

console.log(str3.split(',')); // ["hello，world"]
console.log(str3.split('o')); // ["hell", "，w", "rld"]
           

substr(起始索引号,指定數目)

從起始索引号提取字元串中指定數目的字元。

substring(起始索引号,結束索引号)

提取字元串中兩個指定的索引号之間的字元。（含頭不含尾）

給下标首尾，傳回字元串

console.log(str2.substr(2, 3)); // llo 從下标為2開始往後取3個字元
console.log(str2.substr(1)); // ello 不給指定數目 傳回從下标為1開始到結尾的字元

console.log(str2.substring(2, 3)); // l  下标2和3之間的字元
console.log(str2.substring(1)); // ello 不給結束下标 傳回從下标為1開始到結尾的字元
console.log(str2.substring(1, str2.length)); // ello  下标1到字元串總長度之間的字元
console.log(str2.substring(1, str2.length - 1)); // ell （含頭不含尾）

           

toUpperCase() 小寫轉換成大寫

toLowerCase() 大寫轉換成小寫

不給參數，直接用字元串 點 . 傳回大寫/小寫字母的字元串

console.log(str1.toUpperCase()); // HELLO
console.log(str1.toLowerCase()); // hello
           

trim()

去除字元串兩邊的空白

不給參數，直接用字元串點. 傳回字元串

var username = "   zhangsan   ";
console.log(username.length); // 14
console.log(username.trim()); // zhangsan
console.log(username.trim().length);  // 8
           

toString()

把數字轉換為字元串

文法：

number.toString(基數)

• 基數一般不填
• 基數若填，填寫2、8、16：表示把數字轉換為字元串，并以二進制、八進> 制、十六進制顯示

var str201 = new String("hello"); // str201是對象型
var str201 = str201.toString();
console.log(typeof str201);  // string  對象轉換為字元串

var num202 = new Number(202); //202是數字型
console.log(typeof num202.toString()); // string  數字轉換為字元串

console.log(num202.toString(2)); // 11001010 用二進制表示
console.log(num202.toString(8)); // 312 用八進制表示
console.log(num202.toString(16)); // ca 用十六進制表示

           

3）注意事項

字元串中的轉義字元【特殊字元】

Javascript 中可以使用反斜線（\）插入特殊符号:

代碼	輸出
\'	單引号
\"	雙引号
\\	斜杆
\n	換行
\r	回車
\t	tab
\b	空格
\f	換頁

4）與基本類型的差别【變量就是對象，注意類型】

valueOf()

傳回某個字元串對象的原始值。

不給參數，直接用對象點 . 傳回原始類型（對象的原始值）

var str11 = new String("hello");
console.log(typeof str11);  // object
var str111 = str11.valueOf();
console.log(str111); // hello 
console.log(typeof str111);  // string
           

3. Date 日期對象

1）建立對象

// 建立對象--4種方式
// 1. new Date()
var date1 = new Date();
console.log(date1); // Sat Sep 04 2021 12:20:51 GMT+0800 (中國标準時間)

// 2. new Date(milliseconds)  從1970年1月1日0時0點0分開始向後推進指定參數的毫秒數
var date2 = new Date(1000); // 1000毫秒，即1秒
console.log(date2); // Thu Jan 01 1970 08:00:01 GMT+0800 (中國标準時間)

// 3. new Date(dateString) 通過指定格式的字元串建立日期對象
// var date3=new Date('2021年9月3日 16點47分') // 傳回Invalid Date 表示無效日期 此種格式不支援
var date3 = new Date("2021/9/3 16:47");
console.log(date3); //Fri Sep 03 2021 16:47:00 GMT+0800 (中國标準時間)
var date32 = new Date("2021-9-3 16:47");
console.log(date3); //Fri Sep 03 2021 16:47:00 GMT+0800 (中國标準時間)

// 4. new Date(year, month, day, hours, minutes, seconds, milliseconds)  通過指定年月日時分秒的數字值建立日期對象
var date4 = new Date(2021, 9, 3, 16, 47);
console.log(date4); // Sun Oct 03 2021 16:47:00 GMT+0800 (中國标準時間)
// 注意月份為0-11，需要減1
var date42 = new Date(2021, 8, 3, 16, 47);
console.log(date42); // Fri Sep 03 2021 16:47:00 GMT+0800 (中國标準時間)
           

2）常見的屬性和方法

① 屬性

無

② 方法

得到get具體時間

getFullYear()

從 Date 對象以四位數字傳回年份。

getMonth()

從 Date 對象傳回月份 (0 ~ 11)。

getDate()

從 Date 對象傳回一個月中的某一天 (1 ~ 31)。

getHours()

傳回 Date 對象的小時 (0 ~ 23)。

getMinutes()

傳回 Date 對象的分鐘 (0 ~ 59)。

getSeconds()

傳回 Date 對象的秒數 (0 ~ 59)。

getDay()

從 Date 對象傳回一周中的某一天 (0 ~ 6)。

getTime()

傳回 1970 年 1 月 1 日至今的毫秒數。

var date1 = new Date();
var fullYear = date1.getFullYear();
var month = date1.getMonth();
var date = date1.getDate();
var hours = date1.getHours();
var minutes = date1.getMinutes();
var seconds = date1.getSeconds();
var day = date1.getDay();
console.log(fullYear + "年" + (month + 1) + "月" + date + "日 " + hours + "時" + minutes + "分" + seconds + "秒 星期" + day);

var totalms = date1.getTime(); 
console.log(totalms); // 1630731776952  1970年1月1日至今的總毫秒數
           

設定set具體時間

setFullYear()

設定 Date 對象中的年份（四位數字）。

setMonth()

設定 Date 對象中月份 (0 ~ 11)。

setDate()

設定 Date 對象中月的某一天 (1 ~ 31)。

setHours()

設定 Date 對象中的小時 (0 ~ 23)。

setMinutes()

設定 Date 對象中的分鐘 (0 ~ 59)。

setSeconds()

設定 Date 對象中的秒鐘 (0 ~ 59)。

setMilliseconds()

設定 Date 對象中的毫秒 (0 ~ 999)。

var date2 = new Date();
var myYear = date2.setFullYear('1999');
console.log(date2);  // Sat Sep 04 1999 12:58:42 GMT+0800 (中國标準時間)
           

4. Array 數組對象

數組對象是使用單獨的變量名來存儲一系列的值，并且可以用變量名通路任何一個值。

1）建立對象

建立數組對象有3種方式：

1. new Array() 先建立 後指派
2. new Array(元素1，元素2,···) 建立并指派
3. [元素1，元素2,···] 字面量方式建立并指派

① new Array() 先建立 後指派

此種建立方式又根據 new Array() 括号中是否有初始參數，分為以下2種情況：

a 建立沒有指定存儲空間的空數組（括号中無參數）

var myCars = new Array();
// 指派。指派多少個，則該數組的元素個數就是多少個
myCars[0] = '寶馬';
myCars[1] = '奔馳';
myCars[2] = '沃爾沃';
console.log(myCars.length);  // 3
           

b 建立指定存儲空間的空數組（括号中隻有1個參數，且為數字）

括号裡若隻有一個參數，且該參數為數字，則表示這個空數組指定的空間大小是多少。

如下案例 new Array(4) 表示該空數組指定了4個存儲空間：

指派的個數可以不等于指定的資料空間大小，哪個大，則 length = 哪個。

• 若指派的個數 <= 指定大小，則該數組的 length = 指定大小；

// 指派個數 < 指定大小
myColors[0] = 'red';
myColors[1] = 'pink';
myColors[2] = 'green';
console.log(myColors.length);  // 4
console.log(myColors[4]); // undefined  未被指派的數組元素為undefined

           

• 若指派的個數 > 指定大小，則該數組的 length = 指派的個數。

// 指派個數 > 指定大小：
myColors[0] = 'red';
myColors[1] = 'pink';
myColors[2] = 'green';
myColors[3] = 'yellow';
myColors[4] = 'orange';
console.log(myColors.length);  // 5

           

② new Array(元素1，元素2,···) 建立并指派

③ [元素1，元素2,···] 字面量方式建立并指派

注意：

1. 在一個數組中可以有不同的對象

所有的JavaScript變量都是對象。數組元素是對象，函數是對象···

是以，你可以在數組中有不同的變量類型。在一個數組中包含對象元素、函數、數組···

2. 多元數組

如果數組的某個元素又是一個數組，則可以形成多元數組。

var arr = [[1, 2, 3], [400, 500, 600], myFunction];
// 上述Array包含3個元素，其中頭兩個元素本身也是Array
// 如何通過索引取到500這個值呢？
var x = arr[1][1];  // 取arr裡面索引1數組裡面的索引1
console.log(x);  // 500

           

2）數組取值

① 取單個數組元素值：數組名稱 [索引下标]

console.log(person[0]); // 趙六
console.log(person[1]); // 25
console.log(person[2]); // 男

           

② 利用循環周遊數組

for 循環

var person = ['趙六', 25, '男'];
for (var i = 0; i < person.length; i++) {
  console.log(person[i]);  // 趙六  25  男
}

           

for in 循環

for (var k in person) {
  // console.log(k);  // 0 1 2  k是數組的下标
  console.log(person[k]);  // 趙六  25  男
}

           

forEach循環

forEach() 數組每個元素都執行一次回調函數。

person.forEach(function (element) {
  console.log(element);  // 趙六  25  男
});

           

3）常見的屬性和方法

① 屬性

length屬性——傳回數組元素的個數

• length屬性是可讀寫的
• 可以通過修改length長度，新增（在末尾追加）數組元素 / 減少（從末尾删除）數組元素

var arr = ['red', 'green', 'blue'];
console.log(arr.length);  // 3  裡面有3個數組元素
arr.length = 5;  // 把數組的長度修改成了5，裡面應該有5個元素
console.log(arr);  // ["red", "green", "blue", empty × 2]
console.log(arr[3]);  // undefined
console.log(arr[4]);  // undefined
arr.length = 2;
console.log(arr); //  ['red', 'green']

           

補充： 還可以通過 修改索引号值來 追加 / 修改 數組元素

var arr = ['red', 'green', 'blue'];
arr[3] = 'pink';
console.log(arr);  // ["red", "green", "blue", "pink"]
arr[0] = 'yellow'; // 替換原來的數組元素
console.log(arr);  //  ['yellow', 'green', 'blue',  'pink']

           

② 方法

1. 查找數組元素索引

indexOf() 搜尋數組中的元素，并傳回它所在的位置。如果沒找到則傳回 -1。

lastIndexOf() 搜尋數組中的元素，并傳回它最後出現的位置。如果沒找到則傳回 -1。

var arr = [10, 20, '30', 'xyz', '30', 20];

console.log(arr.indexOf(20));   // 1 
console.log(arr.indexOf('30'));  // 2 

console.log(arr.lastIndexOf(20));  // 5
console.log(arr.lastIndexOf('30'));  // 4

           

2. 添加數組元素

unshift() 向數組的開頭添加一個或更多元素，并傳回新的長度。

push() 向數組的末尾添加一個或更多元素，并傳回新的長度。

var arr = [1, 2];

console.log(arr.unshift('A', 'B'));  // 傳回arr新的長度: 4
console.log(arr);  // ["A", "B", 1, 2]

console.log(arr.push('C', 'D'));  // 傳回arr新的長度：6
console.log(arr);  // ['A', 'B', 1, 2, 'C', 'D']

           

3. 删除數組元素

shift() 删除并傳回數組的第一個元素。

pop() 删除并傳回數組的最後一個元素。

var arr = ["A", "B", 1, 2];

console.log(arr.shift());  // A 傳回被删除的第一個元素
console.log(arr);  // ["B", 1, 2]

console.log(arr.pop());  // 2 傳回被删除的最後一個元素
console.log(arr);  // ['B', 1]

           

4. splice() 從指定的索引開始删除若幹元素，然後再從該位置添加若幹元素

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G']
// 1）從索引2開始（包含索引2）删除3個元素,然後再添加兩個元素
var arr1 = arr.splice(2, 3, 'Google', 'Facebook');
console.log(arr1);  //  ['C', 'D', 'E'] 傳回删除的元素
console.log(arr);   //  ['A', 'B', 'Google', 'Facebook', 'F', 'G']
// 2）隻删除,不添加
console.log(arr.splice(2, 3));  // 從索引2開始删除2個元素 傳回被删除的元素  ['Google', 'Facebook', 'F']
console.log(arr);  //  ['A', 'B', 'G']
// 3）隻添加,不删除
console.log(arr.splice(2, 0, 'Google', 'Facebook'));  // 從索引2開始不删除元素，添加進去2個元素 傳回值是删除的元素 因為未删除元素 則傳回[]
console.log(arr);  // ['A', 'B', 'Google', 'Facebook', 'G']

           

5. slice() 截取數組的一部分元素，并傳回一個新數組。

文法：arr.slice(start, end);

注意：slice()的起止參數包括開始索引，不包括結束索引（含頭不含尾）

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G']
// 從索引号為0的元素開始， 到3結束，含0不含3
console.log(arr.slice(0, 3));  //  ['A', 'B', 'C'] 
// 截取arr數組 從索引3開始到結束
var newarr = arr.slice(3);
console.log(newarr); // ['D', 'E', 'F', 'G']

           

6. 數組轉換為字元串

toString() 把數組轉換為字元串，并傳回結果。

join() 把目前Array的每個元素都用指定的字元串連接配接起來，然後傳回連接配接後的字元串

var arr = ['A', 'B', 'C', 1, 2, 3];
console.log(arr.toString());  // A,B,C,1,2,3
console.log(arr.join('-'));  // A-B-C-1-2-3

           

7. 連接配接多個數組

concat() 連接配接兩個或更多的數組，并傳回一個新的數組

var arr = ['A', 'B', 'C'];
var add = arr.concat([1, 2, 3]);
console.log(add);  // ['A', 'B', 'C', 1, 2, 3]

           

8. 數組排序

sort() 對數組的元素進行排序。排序順序可以是字母或數字，并按升序或降序。（冒泡排序）

• 數字類型數組–使用數字排序，必須通過一個函數作為參數來調用
• 字母類型數組–直接調用，預設升序，無降序方法，可結合reverse()方法使用達到降序排列

reverse() 反轉數組的元素順序。

var arr = [5, 9, 20, 36, 6, 4, 50, 101];
// 數字類型數組-直接調用該方法，元素隻會按照首個數字來排序
console.log(arr.sort()); //  [101, 20, 36, 4, 5, 50, 6, 9]
// 使用數字排序，必須通過一個函數作為參數來調用
// 1. 升序排序
arr.sort(function (a, b) {
  return a - b;
})
console.log(arr);  // [4, 5, 6, 9, 20, 36, 50, 101]
// 2. 降序排序
arr.sort(function (a, b) {
  return b - a;
})
console.log(arr);  // [101, 50, 36, 20, 9, 6, 5, 4]
// 字母類型數組--直接調用，預設升序，無降序方法，可結合reverse()方法使用達到降序排列
var arr = ['Bob', 'color', 'A', 'zero'];
console.log(arr.sort());  // ['A', 'Bob', 'color', 'zero']
console.log(arr.reverse()); // ['zero', 'color', 'Bob', 'A']

           

方法	描述
concat()	連接配接兩個或更多的數組，并傳回結果。
copyWithin()	從數組的指定位置拷貝元素到數組的另一個指定位置中。
entries()	傳回數組的可疊代對象。
every()	檢測數值元素的每個元素是否都符合條件。
fill()	使用一個固定值來填充數組。
filter()	檢測數值元素，并傳回符合條件所有元素的數組。
find()	傳回符合傳入測試（函數）條件的數組元素。
findIndex()	傳回符合傳入測試（函數）條件的數組元素索引。
forEach()	數組每個元素都執行一次回調函數。
from()	通過給定的對象中建立一個數組。
includes()	判斷一個數組是否包含一個指定的值。
indexOf()	搜尋數組中的元素，并傳回它所在的位置。
isArray()	判斷對象是否為數組。
join()	把數組的所有元素放入一個字元串。
keys()	傳回數組的可疊代對象，包含原始數組的鍵(key)。
lastIndexOf()	搜尋數組中的元素，并傳回它最後出現的位置。
map()	通過指定函數處理數組的每個元素，并傳回處理後的數組。
pop()	删除數組的最後一個元素并傳回删除的元素。
push()	向數組的末尾添加一個或更多元素，并傳回新的長度。
reduce()	将數組元素計算為一個值（從左到右）。
reduceRight()	将數組元素計算為一個值（從右到左）。
reverse()	反轉數組的元素順序。
shift()	删除并傳回數組的第一個元素。
slice()	選取數組的一部分，并傳回一個新數組。
some()	檢測數組元素中是否有元素符合指定條件。
sort()	對數組的元素進行排序。
splice()	從數組中添加或删除元素。
toString()	把數組轉換為字元串，并傳回結果。
unshift()	向數組的開頭添加一個或更多元素，并傳回新的長度。
valueOf()	傳回數組對象的原始值。

5. Boolean 布爾對象

Boolean 對象代表兩個值:“true” 或者 “false”

1）建立對象

var boo1 = new Boolean(true);
var boo2 = false;

           

2）常見的屬性和方法

① 屬性 無

② 方法

toString()

把布爾值轉換為字元串，并傳回結果。傳回值：true / false

var boo1 = new Boolean(true);
console.log(boo1.toString());  // true
console.log(typeof boo1.toString());  // string

           

valueOf()

傳回 Boolean 對象的原始值。傳回值：true 或者false

var boo1 = new Boolean(true);
console.log(typeof boo1);  // object
console.log(boo1.valueOf()); // true
console.log(typeof boo1.valueOf());  // boolean

           

3）注意事項

如果布爾對象 無初始值，或者其值為: 0 / -0 / null / “” / false / undefined / NaN ，那麼對象的值為 false，

否則，其值為 true。

6. Math 算數對象

Math 算數對象 調用一些數學運算相關的屬性和方法，用于執行數學任務。

Math 對象并不像 Date 和 String 那樣是對象的類，是以沒有構造函數 Math()。

不需要建立對象 Math就是對象

2）常見的屬性和方法

① 屬性

E

傳回算術常量 e，即自然對數的底數（約等于2.718）。

PI

傳回圓周率（約等于3.14159）。

② 方法

max(x,y,z,…,n)

傳回 x,y,z,…,n 中的最高值。

min(x,y,z,…,n)

傳回 x,y,z,…,n中的最低值。

round(x)

四舍五入。把一個數字舍入為最接近的整數。

• 當x為正數時，正常四舍五入。

console.log(Math.round(12.5));   // 13
console.log(Math.round(12.8));   // 13
           

• 當x為負數時，傳回無限接近的整數

console.log(Math.round(-12.5));   //-12
console.log(Math.round(-12.8));   //-13
           

random()

傳回介于 0（包含） ~ 1（不包含） 之間的一個随機數。

console.log(Math.random());

// 随機得到1-100之間的整數
var random = parseInt(Math.random() * 100 + 1); 
           

7. RegExp 正規表達式對象

1）什麼是正規表達式

正規表達式（ Regular Expression ）是用于比對字元串中字元組合的模式。在JavaScript中，正規表達式也是對象。

正則表通常被用來檢索、替換那些符合某個模式（規則）的文本，例如驗證表單：使用者名表單隻能輸入英文字母、數字或者下劃線， 昵稱輸入框中可以輸入中文(比對)。此外，正規表達式還常用于過濾掉頁面内容中的一些敏感詞(替換)，或從字元串中擷取我們想要的特定部分(提取)等 。

其他語言也會使用正規表達式，本階段我們主要是利用JavaScript 正規表達式完成表單驗證。

2）建立正規表達式

在 JavaScript 中，可以通過兩種方式建立一個正規表達式。

方式一：通過調用RegExp對象的構造函數建立

var regexp = new RegExp(/123/);
console.log(regexp);
           

方式二：利用字面量建立 正規表達式

3）測試正規表達式

test() 正則對象方法，用于檢測字元串是否符合該規則，該對象會傳回 true 或 false，其參數是測試字元串。

// 文法格式：
regexObj.test(str);
// regexObj是寫的正規表達式，str是要測試的文本
var rg = /123/;
console.log(rg.test(123));//比對字元中是否出現123  出現結果為true
console.log(rg.test('abc'));//比對字元中是否出現123 未出現結果為false
           

4）正規表達式中的特殊字元

一個正規表達式可以由簡單的字元構成，比如 /abc/，

也可以是簡單和特殊字元的組合，比如 /ab*c/ 。

其中特殊字元也被稱為元字元，在正規表達式中是具有特殊意義的專用符号，如 ^ 、$ 、+ 等。

① 邊界符

正規表達式中的邊界符（位置符）用來提示字元所處的位置，主要有兩個字元

邊界符	說明
^	表示比對行首的文本（以誰開始）
$	表示比對行尾的文本（以誰結束）

如果 ^和 $ 在一起，表示必須是精确比對。

//  /abc/ 表示隻要包含有abc這個字元串，傳回的都是true
var rg1 = /abc/; // 正規表達式裡面不需要加引号，不管是數字型還是字元串型
console.log(rg1.test('abc'));  // true
console.log(rg1.test('abcd'));  // true
console.log(rg1.test('eeabcdd'));  // true

//  /^abc/ 表示必須要以abc這個字元串開頭
var reg = /^abc/
console.log(reg.test('abc'));  // true
console.log(reg.test('abcd'));  // true
console.log(reg.test('eeabcdd'));  // false

//  /^abc$/ 精确比對 要求必須是abc字元串才符合規範
var reg1 = /^abc$/
console.log(reg1.test('abc'));  // true
console.log(reg1.test('abcd'));  // false
console.log(reg1.test('eeabcdd'));  // false
console.log(reg1.test('abcabc'));  // false
           

② 字元類

[] 方括号

表示有一系列字元可供選擇，隻要比對其中一個就可以了

var rg2 = /[abc]/;  // 表示包含有a或者b或者c，都傳回true
console.log(rg2.test('andy'));  // true
console.log(rg2.test('baby'));  // true
console.log(rg2.test('color'));  // true
console.log(rg2.test('red'));  // false

var reg2 = /^[abc]$/;  // 三選一 隻有是a或者b或者c這三個字母，才傳回true
console.log(reg2.test('a')); // true
console.log(reg2.test('b')); // true
console.log(reg2.test('c')); // true
console.log(reg2.test('aa')); // false
console.log(reg2.test('abc')); // false

// -短橫線表示的是a到z的範圍
var reg3 = /^[a-z]$/;  // 26個英文字母（小寫）任何一個字母傳回 true  
console.log(reg3.test('a')); // true
console.log(reg3.test('z')); // true
console.log(reg3.test('g')); // true
console.log(reg3.test(1));  // false
console.log(reg3.test('A'));  // false

// 字元組合
var reg4 = /^[a-zA-Z]$/;  // 26個英文字母（大寫和小寫都可以）任何一個字母傳回 true  
var reg5 = /^[a-zA-Z0-9]$/;  // 大小寫英文字母和數字任何一個字元 都傳回 true  
var reg6 = /^[a-zA-Z0-9_-]$/;  // 可以輸入大小寫英文字母、數字、下劃線、短橫線任意一個字元
console.log(reg6.test('a')); // true
console.log(reg6.test('B')); // true
console.log(reg6.test(5)); // true
console.log(reg6.test('_')); // true
console.log(reg6.test('-')); // true
console.log(reg6.test('!')); // false

// 取反 方括号内部加上^表示取反，隻要包含方括号内的字元，都傳回 false 。
// 注意：與邊界符^差別，邊界符^寫在開頭，表示以什麼開始
var reg7 = /^[^a-zA-Z0-9_-]$/;  // 可以輸入大小寫英文字母、數字、下劃線、短橫線
console.log(reg7.test('a')); // false
console.log(reg7.test('B')); // false
console.log(reg7.test(5)); // false
console.log(reg7.test('_')); // false
console.log(reg7.test('-')); // false
console.log(reg7.test('!')); // true
           

量詞符

量詞符用來設定某個模式出現的次數。

量詞	說明
n*	n重複0次或更多次
n+	n重複1次或更多次
n?	n重複0次或1次
n{n}	n重複n次
n{n,}	n重複n次或更多次
n{n,m}	n重複n到m次

//  * 相當于 >=0 可以出現0次或者很多次
var r1 = /^a*$/;
console.log(r1.test('')); // true
console.log(r1.test('a')); // true
console.log(r1.test('aaaa')); // true

//  + 相當于 >=1 可以出現1次或者很多次
var r2 = /^a+$/;
console.log(r2.test('')); // false
console.log(r2.test('a')); // true
console.log(r2.test('aaaa')); // true

//  ? 相當于 0 || 1 可以出現0次或者1次
var r3 = /^a?$/;
console.log(r3.test('')); // true
console.log(r3.test('a')); // true
console.log(r3.test('aaaa')); // false

//  {3} 重複3次
var r4 = /^a{3}$/;
console.log(r4.test('')); // false
console.log(r4.test('a')); // false
console.log(r4.test('aaaa')); // false
console.log(r4.test('aaa')); // false

//  {3,} 相當于 >=3 重複3次或者更多次
var r5 = /^a{3,}$/;
console.log(r5.test('')); // false
console.log(r5.test('a')); // false
console.log(r5.test('aaaa')); // true
console.log(r5.test('aaa')); // true

//  {3,16} 相當于 >=3并且<=16
var r6 = /^a{3,6}$/; // >=3 并且 <=6
console.log(r6.test('')); // false
console.log(r6.test('a')); // false
console.log(r6.test('aaaa')); // true
console.log(r6.test('aaa')); // true
console.log(r6.test('aaaaaaa')); // false
           

// 案例分析

var reg = /^[a-zA-Z0-9_-]$/;
// 這個模式下，使用者隻能輸入字母、數字、下劃線、短橫線，但是因為有邊界符[]，這就限定了隻能多選1，隻能輸入一個字元
console.log(reg.test('a')); // true
console.log(reg.test('D')); // true
console.log(reg.test('aD')); // false
console.log(reg.test('6')); // true
console.log(reg.test('10')); // false

var reg = /^[a-zA-Z0-9_-]{6,16}$/;  // {6,16}中間不能有空格
// 這個模式下，使用者隻能輸入字母、數字、下劃線、短橫線；但是因為有邊界符[]，這就限定了隻能多選1，隻能輸入一個字元；又因為有量詞{6,16}，表示前面的模式可以重複6-16次
console.log(reg.test('a')); // false  長度不符合要求
console.log(reg.test('D')); // false 長度不符合要求
console.log(reg.test('aD')); // false 長度不符合要求
console.log(reg.test('6')); // false 長度不符合要求
console.log(reg.test('10')); // false 長度不符合要求
console.log(reg.test('andy-red05')); // true
console.log(reg.test('my_name')); // true
console.log(reg.test('my!name')); // false 字元内容!不符合要求
           

括号總結

中括号 字元集合 比對方括号中的任意字元

// a可以 b也可以 c也可以  
var reg = /^[abc]$/;
           

大括号 量詞符 裡面表示重複次數

ar reg = /^abc{3}$/; // 它隻是讓c重複三次   abccc
console.log(reg.test('abc'));  // false
console.log(reg.test('abcabcabc'));  // false
console.log(reg.test('abccc'));  // true
console.log(reg.test('abcccc'));  // false
           

小括号 表示優先級

var reg = /^(abc){3}$/; // 它是讓abc重複三次
console.log(reg.test('abc'));  // false
console.log(reg.test('abcabcabc'));  // true
console.log(reg.test('abccc'));  // false
           

預定義類

預定義類指的是某些常見模式的簡寫方式。

元字元	描述
\w	查找數字、字母及下劃線。 [a-zA-Z0-9]
\W	查找非單詞字元。 [^a-zA-Z0-9]
\d	查找數字。 [0-9]
\D	查找非數字字元。 [^0-9]
\s	查找空白字元。 [\t\r\n\v\f]
\S	查找非空白字元。 [^\t\r\n\v\f]

replace 正則替換

replace() 方法可以實作替換字元串操作，用來替換的參數可以是一個字元串或是一個正規表達式。

var str = 'andy和red';
var newStr2 = str.replace(/andy/, 'baby');  // 第一個參數寫被替換的字元或者也可以寫正規表達式
console.log(newStr2);  // baby和red
           

修飾符

/表達式/[switch]

switch(也稱修飾符)，按照什麼樣的模式來比對，有三種值：

修飾符	描述
i
g	全局比對（查找所有比對而非在找到第一個比對後停止）。
gi	全局比對+忽略大小寫。

var str = 'andy和lucy和andy2和red';
var newStr = str.replace(/andy|lucy/g, 'baby');
console.log(newStr);  // baby和baby和baby2和red