前言

這篇文章主要對我們日常開發程序中使用頻率比較高的原生Js方法，進行一次簡單的整理歸納，方便再開發使用的時候進行快速查找，比對，為此文章中每一個使用到的方法、函式都會有對應的實體、源代碼，做簡單的說明，希望對大家有所幫助，

一、Array物件

這部分主要對原生JS陣列方法進行歸納

1. indexOf()
   搜索陣列中的元素，并回傳它所在的位置，

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
//輸出
2

2. includes()
   判斷一個陣列是否包含一個指定的值，

let site = ['runoob', 'google', 'taobao'];
site.includes('runoob'); 
// true 
site.includes('baidu'); 
// false
arr.includes(searchElement, fromIndex)
//searchElement 必須，需要查找的元素值，
//fromIndex 可選，從該索引處開始查找 searchElement，如果為負值，則按升序從 array.length + fromIndex 的索引開始搜索，默認為 0，
//如果 fromIndex 為負值，計算出的索引將作為開始搜索searchElement的位置，如果計算出的索引小于 0，則整個陣列都會被搜索，
var arr = ['a', 'b', 'c'];
arr.includes('a', -100); // true
arr.includes('b', -100); // true
arr.includes('c', -100); // true

3. concat()
   連接兩個或更多的陣列，并回傳結果，

var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var kai = ["Robin"];
var children = hege.concat(stale,kai);
//children 輸出結果：
Cecilie,Lone,Emil,Tobias,Linus,Robin

4. reduce()
   將陣列元素計算為一個值（從左到右），

計算陣列元素相加后的總和：

var numbers = [65, 44, 12, 4];
function getSum(total, num) {
    return total + num;
}
function myFunction(item) {
    document.getElementById("demo").innerHTML = numbers.reduce(getSum);
}
//輸出結果：
125
//reduce() 方法接收一個函式作為累加器，陣列中的每個值（從左到右）開始縮減，最終計算為一個值，
//reduce() 可以作為一個高階函式，用于函式的 compose，

5. some()
   檢測陣列元素中是否有元素符合指定條件，

//some() 方法用于檢測陣列中的元素是否滿足指定條件（函式提供），
//some() 方法會依次執行陣列的每個元素：
//如果有一個元素滿足條件，則運算式回傳true , 剩余的元素不會再執行檢測，
//如果沒有滿足條件的元素，則回傳false，
//注意： some() 不會對空陣列進行檢測，
//注意： some() 不會改變原始陣列，
var ages = [3, 10, 18, 20];
function checkAdult(age) {
    return age >= 18;
}
function myFunction() {
    document.getElementById("demo").innerHTML = ages.some(checkAdult);
}
//輸出結果為:
true

6. find()
   回傳符合傳入測驗（函式）條件的陣列元素，

//find() 方法回傳通過測驗（函式內判斷）的陣列的第一個元素的值，
//find() 方法為陣列中的每個元素都呼叫一次函式執行：
//當陣列中的元素在測驗條件時回傳 true 時, find() 回傳符合條件的元素，之后的值不會再呼叫執行函式，
//如果沒有符合條件的元素回傳 undefined
//注意: find() 對于空陣列，函式是不會執行的，
//注意: find() 并沒有改變陣列的原始值，
var ages = [3, 10, 18, 20];
function checkAdult(age) {
    return age >= 18;
}
function myFunction() {
    document.getElementById("demo").innerHTML = ages.find(checkAdult);
}
//輸出結果：
18

7. filter()
   檢測數值元素，并回傳符合條件所有元素的陣列，

//filter() 方法創建一個新的陣列，新陣列中的元素是通過檢查指定陣列中符合條件的所有元素，
//注意： filter() 不會對空陣列進行檢測，
//注意： filter() 不會改變原始陣列，
var ages = [32, 33, 16, 40];
function checkAdult(age) {
    return age >= 18;
}
function myFunction() {
    document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}
//輸出結果為:
32,33,40

8. every()
   檢測數值元素的每個元素是否都符合條件，

//every() 方法用于檢測陣列所有元素是否都符合指定條件（通過函式提供），
//every() 方法使用指定函式檢測陣列中的所有元素：
//如果陣列中檢測到有一個元素不滿足，則整個運算式回傳 false ，且剩余的元素不會再進行檢測，
//如果所有元素都滿足條件，則回傳 true，
//注意： every() 不會對空陣列進行檢測，
//注意： every() 不會改變原始陣列，
var ages = [32, 33, 16, 40];
function checkAdult(age) {
    return age >= 18;
}
function myFunction() {
    document.getElementById("demo").innerHTML = ages.every(checkAdult);
}
//輸出結果為:
false

9. unshift()
   向陣列的開頭添加一個或更多元素，并回傳新的長度，

//unshift() 方法可向陣列的開頭添加一個或更多元素，并回傳新的長度，
//注意： 該方法將改變陣列的數目，
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");
//輸出：
Lemon,Pineapple,Banana,Orange,Apple,Mango

10. slice()
    選取陣列的一部分，并回傳一個新陣列，

//slice() 方法可從已有的陣列中回傳選定的元素，
//slice()方法可提取字串的某個部分，并以新的字串回傳被提取的部分，
//注意： slice() 方法不會改變原始陣列，
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);
//輸出:
Orange,Lemon

11. forEach()
    陣列每個元素都執行一次回呼函式，

//forEach() 方法用于呼叫陣列的每個元素，并將元素傳遞給回呼函式，
//注意: forEach() 不會改變原陣列
//注意: forEach() 對于空陣列是不會執行回呼函式的，
var arr = [1, 2, 3, 4, 5];
arr.forEach(function (item) {
    if (item === 3) {
        return;
    }
    console.log(item);
});

12. isArray()
    判斷物件是否為陣列,isArray() 方法用于判斷一個物件是否為陣列，
    如果物件是陣列回傳 true，否則回傳 false，

二、String物件

這部分主要對原生JS字串方法進行歸納

1. includes()
   查找字串中是否包含指定的子字串，

//includes() 方法用于判斷字串是否包含指定的子字串，
//如果找到匹配的字串則回傳 true，否則回傳 false，
//注意： includes() 方法區分大小寫，
var str = "Hello world, welcome to the Runoob，";
var n = str.includes("world");
//輸出結果
true

2. concat()
   連接兩個或更多字串，并回傳新的字串，

var str1 = "Hello ";
var str2 = "world!";
var n = str1.concat(str2);
//輸出結果:
Hello world!

3. indexOf()
   回傳某個指定的字串值在字串中首次出現的位置，

var str="Hello world, welcome to the universe.";
var n=str.indexOf("welcome");
//輸出結果:
13

4. replace()
   在字串中查找匹配的子串， 并替換與正則運算式匹配的子串，

//replace() 方法用于在字串中用一些字符替換另一些字符，或替換一個與正則運算式匹配的子串，
//如果想了解更多正則運算式教程請查看本站的：RegExp 教程 和 our RegExp 物件參考手冊.
//該方法不會改變原始字串，
var str="Visit Microsoft! Visit Microsoft!";
var n=str.replace("Microsoft","Runoob");
// 輸出結果:
Visit Runoob!Visit Microsoft!

5. slice()
   提取字串的片斷，并在新的字串中回傳被提取的部分，

在這里插入代碼片

6. split()
   把字串分割為字串陣列，

//split() 方法用于把一個字串分割成字串陣列，
//提示： 如果把空字串 ("") 用作 separator，那么 stringObject 中的每個字符之間都會被分割，
//注意： split() 方法不改變原始字串，
var str="How are you doing today?";
var n=str.split(" ");
//輸出一個陣列的值:

How,are,you,doing,today?

7. substr()
   從起始索引號提取字串中指定數目的字符，

var str="Hello world!";
var n=str.substr(2,3)
// 輸出結果:
llo

8. substring()
   提取字串中兩個指定的索引號之間的字符，

//substring() 方法用于提取字串中介于兩個指定下標之間的字符，
//substring() 方法回傳的子串包括 開始 處的字符，但不包括 結束 處的字符，

9. trim()
   去除字串兩邊的空白

var str = "       Runoob        ";
alert(str.trim());
//輸出結果:
Runoob

11. toString()
    回傳一個字串，

var str = "Runoob";
var res = str.toString();
//輸出結果:
Runoob

三、Number 物件

這部分主要對原生Number物件常用的一些方法進行整理

1. toString()
   把數字轉換為字串，使用指定的基數，

var num = 15;
var n = num.toString();
// 輸出結果:

15

2. valueOf()
   回傳一個 Number 物件的基本數字值，

//回傳一個 Number 物件的基本數字值：
var num = 15;
var n = num.valueOf();
//輸出結果:

15

3. toFixed()
   把數字轉換為字串，結果的小數點后有指定位數的數字，

//把數字轉換為字串，結果的小數點后有指定位數的數字：
var num = 5.56789;
var n=num.toFixed(2);
//輸出結果:

5.57

四、Math物件

這部分主要對原生JS Math物件常用的方法進行整理

1. random()
   回傳 0 ~ 1 之間的亂數，

//回傳介于 0（包含） ~ 1（不包含） 之間的一個亂數：
Math.random();
//輸出結果：
0.13704677732303505

2. round(x)
   四舍五入，

//round() 方法可把一個數字舍入為最接近的整數：
Math.round(2.5);
//輸出結果：
3

3. floor(x)
   對 x 進行下舍入，

//回傳小于等于x的最大整數:
Math.floor(1.6);
//以上實體將輸出：
1

4. ceil(x)
   對數進行上舍入，

//對一個數進行上舍入:
Math.ceil(1.4)
//輸出結果:
2

五、Date 物件

這部分主要對原生Date物件的方法進行整理

1. getDate()
   從 Date 物件回傳一個月中的某一天 (1 ~ 31)，

var d = new Date();
var n = d.getDate();
//輸出結果：
6

2. getDay()
   從 Date 物件回傳一周中的某一天 (0 ~ 6)，

//回傳周幾的名稱
var d=new Date();
var weekday=new Array(7);
weekday[0]="Sunday";
weekday[1]="Monday";
weekday[2]="Tuesday";
weekday[3]="Wednesday";
weekday[4]="Thursday";
weekday[5]="Friday";
weekday[6]="Saturday";
var n = weekday[d.getDay()];
//輸出:
Tuesday

3. getFullYear()
   從 Date 物件以四位數字回傳年份，

var d = new Date();
var n = d.getFullYear();
//輸出結果：
2021

4. getHours()
   回傳 Date 物件的小時 (0 ~ 23)，

var d = new Date();
var n = d.getHours();
// 輸出結果:
11

5. getMinutes()
   回傳 Date 物件的分鐘 (0 ~ 59)，

var d = new Date();
var n = d.getMinutes();
//輸出結果：
27

6. getMonth()
   從 Date 物件回傳月份 (0 ~ 11)，

var d = new Date();
var n = d.getMonth()+1;
// 輸出結果:
4

7. getSeconds()
   回傳 Date 物件的秒數 (0 ~ 59)，

var d = new Date();
var n = d.getSeconds();
//輸出結果：
39

8. setDate()
   設定 Date 物件中月的某一天 (1 ~ 31)，

var d = new Date();
d.setDate(15);
//輸出結果:
Thu Apr 15 2021 11:27:56 GMT+0800 (中國標準時間)

9. setFullYear()
   設定 Date 物件中的年份（四位數字），

var d = new Date();
d.setFullYear(2020);
//輸出結果:

Mon Apr 06 2020 11:28:14 GMT+0800 (中國標準時間

11. setHours()
    設定 Date 物件中的小時 (0 ~ 23)，

var d = new Date();
d.setHours(15);
// 輸出結果:

Tue Apr 06 2021 15:28:28 GMT+0800 (中國標準時間)

12. setMinutes()
    設定 Date 物件中的分鐘 (0 ~ 59)，

var d = new Date();
d.setMinutes(17);
//輸出結果：

Tue Apr 06 2021 11:17:21 GMT+0800 (中國標準時間)

13. setMonth()
    設定 Date 物件中月份 (0 ~ 11)，

var d = new Date();
d.setMonth(4);
//輸出結果：
Thu May 06 2021 11:28:44 GMT+0800 (中國標準時間)

六、RegExp物件

這部分主要對常用原生RegExp字串方法進行整理

1. exec()
   檢索字串中指定的值，回傳找到的值，并確定其位置，

var str="Hello world!";
//查找"Hello"
var patt=/Hello/g;
var result=patt.exec(str);
//輸出
Hello

2. test()
   檢索字串中指定的值，回傳 true 或 false，

var str="Hello world!";
//查找"Hello"
var patt=/Hello/g;
var result=patt.test(str);
//輸出
true

3. toString()
   回傳正則運算式的字串，

var patt = new RegExp("RUNOOB", "g");
var res = patt.toString();
//輸出
/RUNOOB/g

七、全域屬性

這部分主要對常用的全域屬性進行整理

1. Infinity()
   代表正的無窮大的數值，

//Infinity 屬性用于存放表示正無窮大的數值，
//負無窮大是表示負無窮大一個數字值，
//在Javascript中，超出 1.7976931348623157E+103088 的數值即為Infinity，小于 -1.7976931348623157E+103088 的數值為無窮小，

2. NaN()
   指示某個值是不是數字值，

//NaN 即非數值（Not a Number），NaN 屬性用于參考特殊的非數字值，該屬性指定的并不是不合法的數字，
//NaN 屬性 與 Number.Nan 屬性相同，
//使用 isNaN() 來判斷一個值是否是數字，原因是 NaN 與所有值都不相等，包括它自己，

3. undefined()
   指示未定義的值，

八、全域方法

這部分主要對常用的全域方法進行整理

1. decodeURI()
   解碼某個編碼的 URI，

2. encodeURI()
   把字串編碼為 URI，

3. escape()
   對字串進行編碼，

4. parseFloat()
   parseFloat() 函式可決議一個字串，并回傳一個浮點數，
   該函式指定字串中的首個字符是否是數字，如果是，則對字串進行決議，直到到達數字的末端為止，然后以數字回傳該數字，而不是作為字串，

5. parseInt()
   parseInt() 函式可決議一個字串，并回傳一個整數

6. String()
   把物件的值轉換為字串，

7. unescape()
   對由 escape() 編碼的字串進行解碼，

總結

以上就是這篇文章的主要內容、看完感覺對自己有幫助的同學、可以給博主點個關注、如果那一塊有不同的意見大家可以再評論區互相討論學習，