JavaScript一些常用 API整理匯總

Array

new Set（）

數組去重

const arr = [3,4,4,5,4,6,5,7]; console.log(new Set(arr)); // {3,4,5,6,7} const a = Array.from(new Set(arr)) // [3, 4, 5, 6, 7] //或者 const a = [...new Set(arr)]//推薦

sort（）

對數組元素進行排序（改變原數組）。

const arr = [1,2,3,4,5,6]; console.log(arr.sort((a,b)=>a-b)) // [1,2,3,4,5,6] 大小正序 cosole.log(arr.sort((a,b)=>b-a))// [6,5,4,3,2,1] 大小倒序 //不可以進行運算的則比較編碼大小 'b' > 'a' => true

reverse（）

反轉數組中的元素（改變原數組）。

const arr = [3,4,4,5,4,6,5,7]; conosle.log(arr.reverse()); // [7, 6, 5, 5, 4, 4, 4, 3]

delete

刪除一個數組成員，會形成空位，并不會影響 length 屬性（改變原數組）, 同樣適用于對象。

//數組 const arr = [0,1,2]; delete arr[1]; conosle.log(arr); // [0, empty, 2]//對象 const obj = {name: '謝大腳',age: '18',sex: '女'}; delete obj.sex; console.log(obj); // {name: "謝大腳", age: "18"}

shift（）

把數組的第一個元素從其中刪除，并返回第一個元素的值（改變原數組）。

const arr = [0,1,2]; const a = arr.shift(); // 0 console.log(arr); // [1, 2]

unshift（）

向數組的起始處添加一個或多個元素，并返回新的長度（改變原數組）。

const arr = [3,4,4,5,4,6,5,7]; const a = arr.unshift(8); console.log(a); // 9(a為返回的數組的新長度) console.log(arr); // [8, 3, 4, 4, 5, 4, 6, 5, 7]

push（）

在數組的末端添加一個或多個元素，并返回添加新元素后的數組長度（改變原數組）。

const arr = [3,4,4,5,4,6,5,7]; const a = arr.push(8,9); console.log(a); // 10(a為返回的數組的新長度) console.log(arr); // [3, 4, 4, 5, 4, 6, 5, 7, 8, 9]

toString（）

可把值轉換成字符串。

const arr = [3,4,4,5,4,6,5,7]; console.log(arr.toString()); // 3,4,4,5,4,6,5,7

concat（）

在原始數據尾部添加另外數據組成新數據（字符串也適用）。

不過一般沒什么人用了 不考慮 ie 的話 直接用擴展運算… 就可以了

//數組 const a = [1,2,3]; const b = [4,5]; const c = a.concat(b); // [1, 2, 3, 4, 5]//字符串 const x = 'abc'; const y = 'def'; const z = x.concat(y); // abcdef

join（）

以參數作為分隔符，將所有參數組成一個字符串返回（默認逗號分隔）。

const arr = [3,4,4,5,4,6,5,7]; console.log(arr.join('-')); // 3-4-4-5-4-6-5-7

slice（start, end）

用于提取原來數組的一部分，會返回一個提取的新數組，原數組不變（字符串適用，不包括 end)。

//數組 const arr = [3,4,4,5,4,6,5,7]; const a = arr.slice(2, 5); // [4, 5, 4]//字符串 const x = 'abcdefgh'; const y = x.slice(3, 6); // def

splice（）

用于刪除原數組的一部分，并且可以在刪除的位置添加新的數組成員，返回值是被刪除的數組元素。（改變原數組）

splice（t, v, s）t: 被刪除元素的起始位置；v：被刪除元素個數；s:s 以及后面的元素為被插入的新元素。

const arr = [3,4,4,5,4,6,5,7]; const a = arr.splice(3, 2, 12); // [5, 4] console.log(arr); // [3, 4, 4, 12, 6, 5, 7]

map（）

依次遍歷數組成員，根據遍歷結果返回一個新數組。（不會改變原始數組）。

const arr = [3,4,4,5,4,6,5,7]; const a = arr.map(item => item*2;) // [6, 8, 8, 10, 8, 12, 10, 14]

forEach（）

跟 map 方法類似，遍歷數組，區別是無返回值。

const arr = [3,4,4,5,4,6,5,7]; arr.forEach(function(item,index,arr){console.log(value)}))34454657

for in（）

跟 map 方法類似，遍歷對象或者數組。

但值得注意的是 for in 循環返回的值都是數據結構的鍵值名。遍歷對象返回的對象的 key 值，遍歷數組返回的數組的下標 (key)。

// 對象 const obj = {a: 123, b: 12, c: 2 }; for (let a in obj) {console.log(a) } // abc //數組 const arr = [3,4,4,5]; for(let a in arr) {console.log(a) } // 0123

filter（）

一個過濾方法，參數是一個函數，所有的數組成員依次執行該函數，返回結果為 true 的成員組成一個新數組返回。（不會改變原始數組）。

const arr = [3,4,4,5,4,6,5,7]; const a = arr.filter(item => item % 3 > 1); console.log(a); // [5, 5]

some（）& every（）

這兩個方法類似于 “斷言”（assert），用來判斷數組成員是否符合某種條件。

const arr = [3,4,4,5,4,6,5,7];console.log( arr.some( function( item, index, array ){ console.log( 'item=' + item + ',index='+index+',array='+array ); return item > 3; })); // item=3,index=0,array=3,4,4,5,4,6,5,7 // item=4,index=1,array=3,4,4,5,4,6,5,7 // trueconsole.log( arr.every( function( item, index, array ){ console.log( 'item=' + item + ',index='+index+',array='+array ); return item > 3; })); // item=3,index=0,array=3,4,4,5,4,6,5,7 //false

some

some 方法是只要有一個數組成員的返回值為 true，則返回 true，否則 false；

every

every 方法是需要每一個返回值為 true，才能返回 true，否則為 false;

reduce（）

依次處理數組的每個成員，最終累計成一個值。

格式：

reduce（() => (pre, cur, curIndex, arr), initialValue）

pre: 必填，累計變量；cur：必填，當前變量；curIndex: 可選，當前位置；arr: 可選，原數組；initialValue: 傳遞給函數的初始值。

indexOf（）

返回給定元素在數組中的第一次出現的位置，如果沒有則返回 - 1 (同樣適用于字符串)。

//數組 const arr = [3,4,4,5,4,6,5,7]; console.log(arr.indexOf(4)) // 1 console.log(arr.indexOf('4')) // -1//字符串 const string = 'asdfghj'; console.log(string.indexOf('a')) // 0 lastIndexOf（）

返回給定元素在數組中最后一次出現的位置，沒有返回 - 1 (同樣適用于字符串)。

const arr = [3,4,4,5,4,6,5,7]; console.log(arr.lastIndexOf(4)) // 4(從左到右數最后出現的位置，字符串同理)

flatten（）

簡寫為 flat（），接收一個數組，無論這個數組里嵌套了多少個數組，flatten 最后都會把其變成一個一維數組 (扁平化)。

const arr = [[1,2,3],[4,5,[6,7]]]; const a = arr.flatten(3); console.log(a); // [1, 2, 3, 4, 5, 6, 7]

Array.isArray（）

用來判斷是不是數據是不是一個數組，返回值為 true 或 false。

const arr = [3,4,4,5,4,6,5,7]; console.log(Array.isArray(arr)) // true

find（）

返回符合傳入測試（函數）條件的數組元素。

const arr = [3,4,4,5,4,6,5,7]; const a = test.find(item => item > 3); console.log(a); //4(find() 方法返回通過測試（函數內判斷）的數組的第一個元素的值。)const b = test.find(item => item == 0); console.log(b); //undefined(如果沒有符合條件的元素返回 undefined)

String

charAt（）

用于返回指定位置的字符。

const str = 'hello guys'; console.log(str.charAt(3)) // 1

charCodeAt（）

用于返回指定位置的字符的 Unicode 編碼。

const str = 'hello guys'; console.log(str.charCodeAt(3)) // 111

match（）

用于在字符串內檢索指定的值或找到一個或多個正則表達式的匹配，返回的是值而不是值的位置。

const str = 'hello guys'; console.log(str.match('guys')) // ["guys"]// 使用正則匹配字符串 const strs = '1.hello guys, 2.are you ok?'; console.log(strs.match(/\d+/g)) // ["1", "2"]

replace（）

替換匹配的字符串。

const str = 'hello guys'; console.log(str.replace('guys', 'man')) // hello man

抽出字符串中的某一項指定字符。

const str = 'AA_BB_CC.bin'; console.log(str.replace(/[^\_]/g),'') // __(兩個下劃線)

search（）

用于檢索與字符串匹配的子串，返回的是地址，與 indexOf() 的區別是 search 是強制正則的，而 indexOf 只是按字符串匹配的。

const str = 'hello guys'; console.log(str.search('guys')) // 6 console.log(str.indexOf('guys')) // 6 // 區別 const string = 'abcdefg.1234'; console.log(string.search(/\./)) // 7（轉譯之后可以匹配到 . 的位置） console.log(string.indexOf(/\./)) // -1 （相當于匹配/\./，找不到則返回-1,只能匹配字符串）

split（）

將字符串切割成數組。

const str = 'hello guys'; console.log(str.split('')) // ["h", "e", "l", "l", "o", " ", "g", "u", "y", "s"] console.log(str.split('', 3)) // ["h", "e", "l"]

toLocaleLowerCase（）& toLowerCase（）

將字符串轉換成小寫。

const str = 'hello guys'; console.log(str.toLocaleLowerCase()) // hello guys console.log(str.toLowerCase()) // hello guys

toLocaleUpperCase（） & toUpperCase（）

將字符串轉換成大寫。

const str = 'hello guys'; console.log(str.toLocaleUpperCase()) // HELLO GUYS console.log(str.toUpperCase()) // HELLO GUYS

substr（）

用于從起始索引號提取字符串中指定數目的字符。

const str = 'hello guys'; console.log(str.substr(2)) // llo guys console.log(str.substr(2, 7)) // llo guy

substring（）

用于提取字符串中兩個指定索引號之間的字符。(與 slice() 和 substr() 方法不同的是，substring() 不接受負的參數。)

const str = 'hello guys'; console.log(str.substring(2)) // llo guys console.log(str.substring(2, 7)) // llo g

.trim（）

去掉字符串兩端的空格。

const str = ' hello guys '; console.log(str.trim()) // hello guys(不會改變原數組)

JSON

JSON.parse（）

用于把字符串轉化為對象。

const str = '{"name": "phoebe", "age": 20}'; const obj = JSON.parse(str) // {name: "phoebe", age: 20}（object類型）

JSON.stringify（）

用于把對象轉化為字符串。

const obj = {"name": "Tins", "age": 22}; const str = JSON.stringify(obj) // {"name":"Tins","age":22}(string類型)

Object

Object.Prototype.valueOf（）

返回當前對象對應的值。（Object.valueOf（）相當于 Object.Prototype.ValueOf（））

我們創建一個取代 valueOf() 方法的函數，但是需要注意的是方法必須不能傳入參數 。假設我們有個對象叫 ObjectrType 而我想為它創建一個 valueOf() 方法。下面的代碼為 valueOf() 方法賦予了一個自定義函數:

ObjectrType.prototype.valueOf = function() { return customValue; };

有了這樣的一個方法，下一次每當 ObjectrType 要被轉換為原始類型值時，JavaScript 在此之前會自動調用自定義的 valueOf() 方法。valueOf() 方法一般都會被 JavaScript 自動調用，但我們也可以像下面代碼那樣自己調用：

ObjectrType.valueOf()

valueOf 同樣適用于 string，number， symbol，boolean，date。

Object.Prototype.toString（）

返回當前對象對應的字符串形式。

function Dog(name) {this.name = name; }const dog1 = new Dog('Gabby');Dog.prototype.toString = function dogToString() {return '' + this.name; }console.log(dog1.toString()); // Gabby

Object.Prototype.toLocaleString（）

返回當前對象對應的模塊字符串。

語法：obj.toLocaleString();

let foo = {}; foo.toLocaleString(); // "[object Object]"

Object.Prototype.isPrototypeOf（）

判斷當前對象是否為另一個對象的原型。語法：Object.prototype.isPrototypeOf(targetObj)

const arr = [];Array.prototype.isPrototypeOf(arr); // true// 修改obj的原型 Object.setPrototypeOf(arr, String.prototype); Array.prototype.isPrototypeOf(arr); // false String.prototype.isPrototypeOf(arr); // true

Object.Prototype.hasOwnProperty（）

判斷某個屬性是否為當前對象自身的屬性，還是繼承自原型對象的屬性，并返回一個布爾值。

語法：Object.prototype.hasOwnProperty(prop)

let obj = {};// 定義一個object實例 obj.prop1 = 'value1'; // prop1是一個自有屬性 obj.constructor.prototype.prop2 = 'value2'; // prop2是一個原型鏈屬性 // 無論自有屬性還是原型鏈屬性，我們都可以訪問到 console.info(obj.prop1); // value1 console.info(obj.prop2); // value2 // 使用`hasOwnProperty()`方法判斷屬性是否為自有屬性 obj.hasOwnProperty('prop1'); // true obj.hasOwnProperty('prop2'); // false

Object.Prototype.PropertyIsEnumerable（）

判斷某個屬性是否可枚舉。

語法：Object.prototype.propertyIsEnumerable(prop)

const obj = { name: 'ecmaer'};Object.getOwnPropertyDescriptor(obj, 'name').enumerable; // true obj.propertyIsEnumerable('name'); // true// 將屬性name設置成不可枚舉 Object.defineProperty(obj, 'name', {enumerable: false}); obj.propertyIsEnumerable('name'); // falsefor(let i in obj){console.info(obj[i]); // 沒有遍歷出'ecmaer' }

判斷一個值的類型的辦法

typeOf（）

typeof 可用來檢測數據類型：需要注意的是 typeof 無法區分 null、Array 和 通常意義上的 object。

typeof 123 //number typeof '123' //string typeof true // boolean typeof false //boolean typeof undefined // undefined typeof Math.abs // function typeof function () {} // function// 當遇上`null`、`Array`和通常意義上的`object`,都會返回 object typeof null // object typeof [] // object（所以判斷數組時可以使用Array.isArray(arr)） typeof {} // object// 當數據使用了new關鍵字和包裝對象以后，數據都會變成Object類型，不加new關鍵字時會被當作普通的函數處理。 typeof new Number(123); //'object' typeof Number(123); // 'number'typeof new Boolean(true); //'object' typeof Boolean(true); // 'boolean'typeof new String(123); // 'object' typeof String(123); // 'string'

instanceOf（）

instanceOf（）運算符用于檢測構造函數的 prototype 屬性是否出現在某個實例對象的原型鏈。

function Car(make, model, year) {this.make = make;this.model = model;this.year = year; } const auto = new Car('Honda', 'Accord', 1998);console.log(auto instanceof Car); // true console.log(auto instanceof Object); // true

Object.Prototype.toString（）（推薦）

可以精準的判斷對象類型。

對于 array、null、object 來說，其關系錯綜復雜，使用 typeof 都會統一返回 object 字符串，要想區別對象、數組、函數單純使用 typeof 是不行的，想要準確的判斷對象類型，推薦使用 Object.Prototype.toString（）, 它可以判斷某個對象值屬于哪種內置類型。

const arrs = [1,2,3]; console.log(typeof arrs) // object console.log(Object.Prototype.toString.call(arrs)) // [object Array]

call，apply 以及 bind 的用法，區別及相似住處

用法

call

直接調用該執行函數，在執行的時候，將函數內部的作用域綁定到指定的作用域。（call() 方法接受若干個參數的列表）

const arr = [2,5,4,7,6] const a = Function.prototype.apply.call(Math.max, null,arr) console.log(a) // 7

apply

直接調用該執行函數，在執行的時候，將函數內部的作用域綁定到指定的作用域。

call() 是 apply() 的一顆語法糖，作用和 apply() 一樣，同樣可實現繼承，唯一的區別就在于 call() 接收的是參數列表，而 apply() 則接收參數數組。

const arr = [2,5,4,7,6] const a = Function.prototype.call.apply(Math.max, arr) console.log(a) // 7//如果apply的第二個參數是個null，會返回-Infinity const b = Function.prototype.call.apply(Math.max, null, arr) console.log(b) // -Infinity

bind

創建一個新的函數的引用，并綁定到一個作用域特定作用域上，同時支持傳參。

bind 則和 call 的用法差不多，唯一區別是，call 和 apply 會立刻調用函數，bind 只是綁定 this。

格式為：bind(作用域參數，參數 1，參數 2)

const fruits = {"name": "apple",getOtherFriut: function() {return this.name;} }const color = {"name": " is red" }const fruitColor = fruits.getOtherFriut.bind(this, color) console.log(fruitColor()) //is red

相似之處

1、都是用來改變函數的 this 對象；

2、第一個參數都是 this 要指向的對象；

3、都可利用后繼參數傳參；

區別

1、都可以用來代替另一個對象調用一個方法，將一個函數的對象上下文從初始的上下文改變為由 thisObj 指定的新對象。

2、bind() 是返回一個新函數，供以后調用，而 apply() 和 call() 是立即調用。

3、call() 和 apply() 唯一區別是參數不一樣，call() 是 apply() 的語法糖；

選擇使用

1、如果不需要關心具體有多少參數被傳入函數，選用 apply()；

2、如果確定函數可接收多少個參數，并且想一目了然表達形參和實參的對應關系，用 call()；

3、如果想要將來再調用方法，不需立即得到函數返回結果，則使用 bind();

Date 對象的用法

首先需要定義一個變量：

const date = new Date();

接下來就可以直接使用常見的 Date 對象方法。

Date (): 返回當日的日期和時間；

getDate (): 從 Date 對象返回一個月中的某一天（1～31）console.log(date.getDate())；

getDay (): 從 Date 對象返回一周中的某一天（0～6）；

getMonth (): 從 Date 對象返回月份（0～11）；

getFullYear (): 從 Date 對象以四位數字返回年份；

getYear ()：可以使用 getFullYear () 代替；

getHours (): 返回 Date () 對象的小時（0～23）;

getMinutes (): 返回 Date () 對象的分鐘（0～59）;

getSeconds (): 返回 Date () 對象的分鐘（0～59）;

getMillseconds (): 返回 Date () 對象的毫秒（0～999）;

getTime (): 返回 1970 年 1 月 1 日至今的時間；

getTimezoneOffset (): 返回本地時間與格林威治標準時間（GMT）的分鐘差；

getUTCDate (): 根據世界時從 Date 對象返回月中的一天（1～31）；

getUTCDay (): 根據世界時從 Date 對象返回周中的一天（1～6）；

getUTCMonth (): 根據世界時從 Date 對象返回月份（0～11）；

getUTCFullYear (): 根據世界時從 Date 對象返回四位數的年份；

getUTCHours (): 根據世界時從 Date 對象返回對象的小時（0～23）；

getUTCMinutes (): 根據世界時從 Date 對象返回對象的分鐘（0～59）；

getUTCSeconds (): 根據世界時從 Date 對象返回對象的秒鐘（0～59）；

getUTCMillseconds (): 根據世界時從 Date 對象返回對象的毫秒（0～999）；

parse (): 返回 1970 年 1 月 1 日午夜到指定日期（字符串）的毫秒數；

setDate (): 設置 Date 對象中月的某一天（1～31）；

setMonth (): 設置 Date 對象中月份（0～11）；

setFullYear (): 設置 Date 對象中的年份（四位數字）；

Math.xx 開頭的方法

Math.ceil (): 對數進行上舍入（天花板函數）
大于等于 x，并且與它最接近的整數。

Math.floor (): 對數進行下舍入（地板函數）。

Math.max (x,y): 返回 x,y 中的最大值。

Math.min (x,y): 返回 x,y 中的最小值。

Math.pow (x,y): 返回 x 的 y 次方。

Math.random () : 返回 0-1 之間的隨機數。

Math.round (x): 四舍五入。

Math.abs (x): 返回數的絕對值。

Math.acos (x): 返回數的反余弦值。

Math.asin (x): 返回數的反正弦值。

Math.atan (x): 返回數的反正切值。

Math.atan2 (y,x): 返回由 x 軸到點（x，y）的角度（以弧度為單位）。

Math.cos (x): 返回數的余弦值。

Math.exp (e): 返回 e 的指數。

Math.log (x): 返回數的自然對數（以 e 為底數）。

Math.sin (x): 返回數的正弦值。

Math.sqrt (x): 返回數的平方根。

Math.tan (x): 返回角的正切值。

Math.toSource (): 返回該對象的源代碼。

Math.valueOf (): 返回 Math 對象的原始值。

總結

以上是生活随笔為你收集整理的JavaScript一些常用 API整理汇总的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。