言

這篇文章主要對我們?nèi)粘ｉ_發(fā)過程中使用頻率比較高的原生Js方法，進(jìn)行一次簡單的整理歸納，方便再開發(fā)使用的時候進(jìn)行快速查找，比對。為此文章中每一個使用到的方法、函數(shù)都會有對應(yīng)的實例、源代碼，做簡單的說明，希望對大家有所幫助。

一、Array對象

這部分主要對原生JS數(shù)組方法進(jìn)行歸納

1. indexOf()
   搜索數(shù)組中的元素，并返回它所在的位置。

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

2.includes()
判斷一個數(shù)組是否包含一個指定的值。

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

3.concat()

連接兩個或更多的數(shù)組，并返回結(jié)果。

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

4.reduce()
將數(shù)組元素計算為一個值（從左到右）。

計算數(shù)組元素相加后的總和：

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

5.some()
檢測數(shù)組元素中是否有元素符合指定條件。

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

6.find()
返回符合傳入測試（函數(shù)）條件的數(shù)組元素。

//find() 方法返回通過測試（函數(shù)內(nèi)判斷）的數(shù)組的第一個元素的值。
//find() 方法為數(shù)組中的每個元素都調(diào)用一次函數(shù)執(zhí)行：
//當(dāng)數(shù)組中的元素在測試條件時返回 true 時, find() 返回符合條件的元素，之后的值不會再調(diào)用執(zhí)行函數(shù)。
//如果沒有符合條件的元素返回 undefined
//注意: find() 對于空數(shù)組，函數(shù)是不會執(zhí)行的。
//注意: find() 并沒有改變數(shù)組的原始值。
var ages=[3, 10, 18, 20];
function checkAdult(age) {
    return age >=18;
}
function myFunction() {
    document.getElementById("demo").innerHTML=ages.find(checkAdult);
}
//輸出結(jié)果：
18

7.filter()
檢測數(shù)值元素，并返回符合條件所有元素的數(shù)組。

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

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

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

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

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

10.slice()
選取數(shù)組的一部分，并返回一個新數(shù)組。

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

11.forEach()
數(shù)組每個元素都執(zhí)行一次回調(diào)函數(shù)。

//forEach() 方法用于調(diào)用數(shù)組的每個元素，并將元素傳遞給回調(diào)函數(shù)。
//注意: forEach() 不會改變原數(shù)組
//注意: forEach() 對于空數(shù)組是不會執(zhí)行回調(diào)函數(shù)的。
var arr=[1, 2, 3, 4, 5];
arr.forEach(function (item) {
    if (item===3) {
        return;
    }
    console.log(item);
});

12.isArray()
判斷對象是否為數(shù)組,isArray() 方法用于判斷一個對象是否為數(shù)組。
如果對象是數(shù)組返回 true，否則返回 false。

二、String對象

這部分主要對原生JS字符串方法進(jìn)行歸納

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

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

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

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

3.indexOf()
返回某個指定的字符串值在字符串中首次出現(xiàn)的位置。

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

4.replace()
在字符串中查找匹配的子串， 并替換與正則表達(dá)式匹配的子串。

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

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

在這里插入代碼片

6.split()
把字符串分割為字符串?dāng)?shù)組。

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

How,are,you,doing,today?

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

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

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

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

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

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

10.toString()
返回一個字符串。

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

這里有我自己整理了一套最新的python系統(tǒng)學(xué)習(xí)教程，包括從基礎(chǔ)的python腳本到web開發(fā)、爬蟲、數(shù)據(jù)分析、數(shù)據(jù)可視化、機器學(xué)習(xí)等。想要這些資料的可以關(guān)注小編，并在后臺私信小編：“01”即可領(lǐng)取。