前端常用js方法整理

前言

整理前端常用的一些函數(shù)

時(shí)間類

UTC()

方法接受的參數(shù)同日期構(gòu)造函數(shù)接受最多參數(shù)時(shí)一樣，返回從1970-1-1 00:00:00 UTC到指定日期的的毫秒數(shù)。

Date.UTC(year,month[,date[,hrs[,min[,sec[,ms]]]]])

now()

方法返回自1970年1月1日 00:00:00 UTC到當(dāng)前時(shí)間的毫秒數(shù)。

var timeInMs = Date.now()

parse()

解析一個(gè)表示某個(gè)日期的字符串，并返回從1970-1-1 00:00:00 UTC 到該日期對(duì)象（該日期對(duì)象的UTC時(shí)間）的毫秒數(shù)

Date.parse(dateString)

getDate()

根據(jù)本地時(shí)間，返回一個(gè)指定的日期對(duì)象為一個(gè)月中的第幾天。

var data=new Date()
data.getDate()

getDay()

據(jù)本地時(shí)間，返回一個(gè)具體日期中一周的第幾天，0 表示星期天。

var data=new Date()
data.getDay()

getFullYear()

根據(jù)本地時(shí)間，返回一個(gè)指定日期對(duì)象的年份。

var data=new Date()
data.getFullYear()

getHours()

方法根據(jù)本地時(shí)間，返回一個(gè)指定的日期對(duì)象的小時(shí)。

var data=new Date()
data.getHours()

getMilliseconds()

根據(jù)本地時(shí)間，返回一個(gè)指定的日期對(duì)象的毫秒數(shù)。

var data=new Date()
data.getMilliseconds()

getMinutes()

根據(jù)本地時(shí)間，返回一個(gè)指定的日期對(duì)象的分鐘數(shù)。

var data=new Date()
data.getMinutes()

getMonth()

根據(jù)本地時(shí)間，返回一個(gè)指定的日期對(duì)象的月份，為基于0的值（0表示一年中的第一月）

var data=new Date()
data.getMonth()

getSeconds()

方法根據(jù)本地時(shí)間，返回一個(gè)指定的日期對(duì)象的秒數(shù)

var data=new Date()
data.getSeconds()

add()

add(value,type)
在某個(gè)時(shí)間上新增時(shí)間，返回新增后的時(shí)間對(duì)象，格式不正確返回原時(shí)間對(duì)象，新增傳正數(shù)，減傳負(fù)數(shù)。

var year = new Date().add(1,'y').format('yyyy-MM-dd'); //2018-03-24
var month = new Date().add(1,'M').format('yyyy-MM-dd'); //2017-04-24
var day = new Date().add(1,'d').format('yyyy-MM-dd'); //2017-04-25
var hour = new Date().add(1,'hh').format('yyyy-MM-dd HH:mm:ss'); //2017-04-24 12:34:27
var minute = new Date().add(1,'m').format('yyyy-MM-dd HH:mm:ss');//2017-04-24 11:35:27
var second = new Date().add(1 * 60,'s').format('yyyy-MM-dd HH:mm:ss'); //2017-04-24 11:35:27
var millisecond = new Date().add(1000 * 60 ,'ms').format('yyyy-MM-dd HH:mm:ss');  //2017-04-24 11:35:27

addDays()

add(value,type)
新增指定天數(shù)，返回新增后的時(shí)間對(duì)象，格式不正確則返回原時(shí)間對(duì)象。
addHours()【新增小時(shí)】
addMilliseconds()【新增毫秒】
addMinutes()【新增分鐘】
addMonths()【新增月】
addSeconds()【新增秒】
addYears()【新增年】

var date = new Date();
var newdate = date.addDays(1).format('yyyy-MM-dd'); //2017-03-25
var newdate = date.addYears(1).format('yyyy-MM-dd'); 
var newdate = date.addSeconds(1).format('yyyy-MM-dd');
var newdate = date.addMonths(1).format('yyyy-MM-dd'); 
var newdate = date.addMinutes(1).format('yyyy-MM-dd');
var newdate = date.addMilliseconds(1).format('yyyy-MM-dd');
var newdate = date.addHours(1).format('yyyy-MM-dd');

compareTo()

比較兩個(gè)時(shí)間大小，前者大于后者返回1，等于返回0，小于返回-1

new Date().compareTo(new Date('2017-03-24')) //1

dayOfweek()

返回某個(gè)時(shí)間星期幾

new Date().dayOfweek()  //星期五

diff()

比較兩個(gè)時(shí)間，返回一個(gè)對(duì)象，包含一共差x天，或一共差x小時(shí)，或一共差x分鐘，或一共差x秒，或一共差x毫秒，格式不正確所有參數(shù)均為0。

var obj = new Date().diff(new Date('2017-03-24')) 
//Object {totaldays: 0, totalhours: 5, totalminutes: 345, totalseconds: 20732, totalmilliseconds: 20732392} 
var totalhours = obj.totalhours;  //5

diffFormat()

用于計(jì)算兩個(gè)時(shí)間一共差x天x小時(shí)x分鐘x秒，格式不正確返回空字符串。

new Date().diffFormat(new Date('2017-03-23'))  //1天 5小時(shí) 57分鐘 35秒

isLeapYear()

判斷是否是閏年。

new Date().isLeapYear()  //false

isSame()

isSame(time,type)
判斷兩個(gè)時(shí)間的某個(gè)部分是否相同
【type只接受年月日和’date’,’all’,其中date用于判斷年月日，all判斷1970至現(xiàn)在的秒數(shù)】

new Date().isSame(new Date('2017-03-23'),'date')  //false

format()

將時(shí)間格式化

new Date().format('yyyy-MM-dd')  //2017-03-25

參考資源

javascript 標(biāo)準(zhǔn)庫 Date

字符串類

charAt()

從一個(gè)字符串中返回指定的字符。

concat()

將一個(gè)或多個(gè)字符串與原字符串連接合并，形成一個(gè)新的字符串并返回。

endsWith()

該新特性屬于 ECMAScript 2015（ES6）規(guī)范，存在瀏覽器兼容性。但是此方法已經(jīng)重寫，可以放心使用
方法用來判斷當(dāng)前字符串是否是以另外一個(gè)給定的子字符串“結(jié)尾”的，根據(jù)判斷結(jié)果返回 true 或 false。

startsWith()

該新特性屬于 ECMAScript 2015（ES6）規(guī)范，存在瀏覽器兼容性。但是此方法已經(jīng)重寫，可以放心使用
用來判斷當(dāng)前字符串是否是以另外一個(gè)給定的子字符串“開頭”的，根據(jù)判斷結(jié)果返回 true 或 false。

includes()

該新特性屬于 ECMAScript 2015（ES6）規(guī)范，存在瀏覽器兼容性。但是此方法已經(jīng)重寫，可以放心使用
用于判斷一個(gè)字符串是否包含在另一個(gè)字符串中，根據(jù)情況返回true或false。

indexOf()

方法返回指定值的第一次出現(xiàn)的調(diào)用 String 對(duì)象中的索引，開始在fromIndex進(jìn)行搜索。如果未找到該值，則返回-1。

lastIndexOf()

方法返回指定值在調(diào)用該方法的字符串中最后出現(xiàn)的位置，如果沒找到則返回 -1。從該字符串的后面向前查找

match()

當(dāng)一個(gè)字符串與一個(gè)正則表達(dá)式匹配時(shí)， match()方法檢索匹配項(xiàng)。

replace()

方法返回一個(gè)由替換值替換一些或所有匹配的模式后的新字符串。模式可以是一個(gè)字符串或者一個(gè)正則表達(dá)式, 替換值可以是一個(gè)字符串或者一個(gè)每次匹配都要調(diào)用的函數(shù)。

slice()

從一個(gè)字符串中提取字符串并返回新字符串。在一個(gè)字符串中的改變不會(huì)影響另一個(gè)字符串。也就是說，slice 不修改原字符串，只會(huì)返回一個(gè)包含了原字符串中部分字符的新字符串。

split()

將一個(gè)String對(duì)象分割成字符串?dāng)?shù)組，通過將字符串分成子串。

substr()

返回一個(gè)字符串中從指定位置開始到指定字符數(shù)的字符。

substring()

返回一個(gè)字符串在開始索引到結(jié)束索引之間的一個(gè)子集, 或從開始索引直到字符串的末尾的一個(gè)子集。

toLowerCase()

會(huì)將調(diào)用該方法的字符串值轉(zhuǎn)為小寫形式，并返回。

toUpperCase()

將調(diào)用該方法的字符串值轉(zhuǎn)換為大寫形式，并返回。

toString()

方法返回指定對(duì)象的字符串形式。

trim()

方法會(huì)刪除一個(gè)字符串兩端的空白字符。在這個(gè)字符串里的空格包括所有的空格字符 (space, tab, no-break space 等)以及所有的行結(jié)束符（如 LF，CR）。

trimAll()

去掉所有的空白符

toLowerCase()

該特性是非標(biāo)準(zhǔn)的，但是此方法已經(jīng)重寫，可以放心使用
方法移除原字符串左端的連續(xù)空白符并返回,trimLeft方法并不會(huì)直接修改原字符串本身.

trimRight()

該特性是非標(biāo)準(zhǔn)的，但是此方法已經(jīng)重寫，可以放心使用
trimRight方法移除原字符串右端的連續(xù)空白符并返回,trimRight方法并不會(huì)直接修改原字符串本身

isNullOrEmpty()

判斷字符是否為null或空

format()

將字符傳轉(zhuǎn)換為指定的其他字符串

var str='hello {0}{1}{2}ld'.format("w","o","r")  //hello world

參考資源

javascript 標(biāo)準(zhǔn)庫 String

數(shù)字類

toFixed()

使用定點(diǎn)表示法來格式化一個(gè)數(shù)。

numObj.toFixed(digits)

toPrecision()

指定的精度返回該數(shù)值對(duì)象的字符串表示

numObj.toPrecision(precision)

toString()

方法返回指定 Number 對(duì)象的字符串表示形式。

numObj.toString([radix])

abs()

函數(shù)返回指定數(shù)字 “x” 的絕對(duì)值。

Math.abs(x)

ceil()

返回一個(gè)大于或等于數(shù) “x” 的最小整數(shù)

Math.ceil(x)

floor()

函數(shù)返回小于或等于數(shù) “x” 的最大整數(shù)。

Math.floor(x)

max()

函數(shù)返回一組數(shù)中的最大值。

Math.max([value1[,value2, ...]])

min()

返回零個(gè)或更多個(gè)數(shù)值的最小值。

Math.min([value1[,value2, ...]])

pow()

函數(shù)返回基數(shù)（base）的指數(shù)（exponent）次冪，即 baseexponent。

Math.pow(base, exponent)

random()

函數(shù)返回 [0-1) 的浮點(diǎn)值偽隨機(jī)數(shù)（大于等于0，小于1）。

Math.random()

round()

返回一個(gè)數(shù)值四舍五入后最接近的整數(shù)值。

Math.round()

sqrt()

函數(shù)返回一個(gè)數(shù)的平方根

Math.sqrt(x)

sign()

函數(shù)用來判斷一個(gè)數(shù)字的符號(hào), 是正數(shù), 負(fù)數(shù), 還是零.

Math.sign(x)

isFinite()

用來檢測(cè)傳入的參數(shù)是否是一個(gè)有窮數(shù)（finite number）。

Number.isFinite(value)

isInteger()

方法用來判斷給定的參數(shù)是否為整數(shù)。

Number.isInteger(value)

isNaN()

方法用來檢測(cè)傳入的值是否是 NaN。該方法比傳統(tǒng)的全局函數(shù) isNaN() 更可靠。

Number.isNaN(value)

isSafeInteger()

方法用來判斷傳入的參數(shù)值是否是一個(gè)“安全整數(shù)”（safe integer）

Number.isSafeInteger(testValue)

formatMoney()

formatMoney(places,symbol,thousand,decimal)
將數(shù)字轉(zhuǎn)換成貨幣格式
參數(shù)【places】: Number 保留的小數(shù)位 默認(rèn)2
參數(shù)【symbol】: string 符號(hào) 默認(rèn)’$’
參數(shù)【thousand】: string 每三位的分隔符 默認(rèn)’,’
參數(shù)【decimal】：string 個(gè)位與小數(shù)的分隔符 默認(rèn)’.’

var revenue = 12345678;
var result = revenue.formatMoney(4,"",".","|"); //12.345.678|0000
var result2 = revenue.formatMoney();  //$12,345,678.00

currencyUpperCase()

將數(shù)字轉(zhuǎn)漢子大寫形式 小數(shù)最多支持4位

var revenue = 1234561000;
var result = revenue.currencyUpperCase();   //壹拾貳億叁仟肆佰伍拾陸萬壹仟元整

參考資源

javascript 標(biāo)準(zhǔn)庫 Number
javascript 標(biāo)準(zhǔn)庫 Math

數(shù)組類

push()

向數(shù)組的末尾添加一個(gè)或更多元素，并返回新的長度。

pop()

刪除并返回?cái)?shù)組的最后一個(gè)元素

shift()

刪除并返回?cái)?shù)組的第一個(gè)元素

unshift()

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

join()

把數(shù)組的所有元素放入一個(gè)字符串。元素通過指定的分隔符進(jìn)行分隔。

reverse()

顛倒數(shù)組中元素的順序。

sort()

對(duì)數(shù)組的元素進(jìn)行排序

concat()

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

slice()

從某個(gè)已有的數(shù)組返回選定的元素

splice()

刪除元素，并向數(shù)組添加新元素

toString()

把數(shù)組轉(zhuǎn)換為字符串，并返回結(jié)果。

isArray()

判斷是不是數(shù)組

indexOf()

返回在數(shù)組中可以找到給定元素的第一個(gè)索引，如果不存在，則返回-1。

every()

測(cè)試數(shù)組的所有元素是否都通過了指定函數(shù)的測(cè)試。

filter()

使用指定的函數(shù)測(cè)試所有元素，并創(chuàng)建一個(gè)包含所有通過測(cè)試的元素的新數(shù)組。

forEach()

方法對(duì)數(shù)組的每個(gè)元素執(zhí)行一次提供的函數(shù)。

map()

方法創(chuàng)建一個(gè)新數(shù)組，其結(jié)果是該數(shù)組中的每個(gè)元素調(diào)用一個(gè)提供的函數(shù)。

unique()

這是jquery提供的方法,去重

var arry=[1,2,1,3] $.unique(arry)

參考資源

javascript 標(biāo)準(zhǔn)庫 Array
w3school JavaScript Array 對(duì)象

其他擴(kuò)展類

ConvertNetTDate()

返回一個(gè)javascript Date對(duì)象.
方法用來轉(zhuǎn)換C#通過json傳到前端的時(shí)間字符串中帶“T”的問題，如："2017-03-01T16:33:03.73"

ConvertNetTDate("2017-03-01T16:32:46.927").format("yyyy-MM-dd")

isMobileUserAgent()

判斷是否移動(dòng)設(shè)備訪問

isAppleMobileDevice()

判斷是否蘋果移動(dòng)設(shè)備訪問

isAndroidMobileDevice()

判斷是否安卓移動(dòng)設(shè)備訪問

DisableWeChatDrop()

禁用微信瀏覽器下拉回彈,頁面在微信瀏覽器中禁止下拉露底

GUID()

生成GUID

var guid = new GUID();
var g1=guid.newGUID()

表單操作

使用說明

需要引用jquery

//引用js
<script src="/jquery/3.1.1/jquery-3.1.1.min.js"></script>
<script src="/js-common-methods/0.0.1/js-common-methods.min.js"></script>

serializeJson()

序列化表單值為JSON
說明：元素不能被禁用（禁用的元素不會(huì)被包括在內(nèi)），并且元素應(yīng)當(dāng)有含有 name 屬性，對(duì)于獲取不到的值，請(qǐng)自己手動(dòng)賦值。

$(selector).serializeJson()

解決disabled元素不能取值的方案：

var myform = $('#form');
var disabled = myform.find(':input:disabled').removeAttr('disabled');
var serialized = myform.serializeJson();
disabled.attr('disabled','disabled');

結(jié)果展示:

 {
    name: a,
    value: 1,
    age:20,
    ...
  }

fillForm()

根據(jù)JSON數(shù)據(jù)填充表單
說明：對(duì)于上傳圖片空間或者使用了i-check插件美化checkbox是無法自動(dòng)填充的,需要自己手動(dòng)填充。

$(selector).fillForm()

serializeArray()

序列化表單值來創(chuàng)建對(duì)象數(shù)組（名稱和值）
.serializeArray() 方法使用了 W3C 關(guān)于 successful controls（有效控件） 的標(biāo)準(zhǔn)來檢測(cè)哪些元素應(yīng)當(dāng)包括在內(nèi)。
特別說明，元素不能被禁用（禁用的元素不會(huì)被包括在內(nèi)），并且元素應(yīng)當(dāng)有含有 name 屬性。提交按鈕的值也不會(huì)被序列化。文件選擇元素的數(shù)據(jù)也不會(huì)被序列化。

$(selector).serializeArray()

serialize()

創(chuàng)建以標(biāo)準(zhǔn) URL 編碼表示的文本字符串

$(selector).serialize()  //a=1&b=2&c=3&d=4&e=5

resetForm()

還原表單

$('#form1').resetForm()

clearForm()

清空表單所有元素的值

$('#form1').clearForm()

clearFields()

清空某個(gè)表單域的值

$('#form1 :password').clearFields()
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容