前端常用js方法整理

前言

整理前端常用的一些函數


時間類

UTC()

方法接受的參數同日期構造函數接受最多參數時一樣,返回從1970-1-1 00:00:00 UTC到指定日期的的毫秒數。

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

now()

方法返回自1970年1月1日 00:00:00 UTC到當前時間的毫秒數。

var timeInMs = Date.now()

parse()

解析一個表示某個日期的字符串,并返回從1970-1-1 00:00:00 UTC 到該日期對象(該日期對象的UTC時間)的毫秒數

Date.parse(dateString)

getDate()

根據本地時間,返回一個指定的日期對象為一個月中的第幾天。

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

getDay()

據本地時間,返回一個具體日期中一周的第幾天,0 表示星期天。

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

getFullYear()

根據本地時間,返回一個指定日期對象的年份。

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

getHours()

方法根據本地時間,返回一個指定的日期對象的小時。

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

getMilliseconds()

根據本地時間,返回一個指定的日期對象的毫秒數。

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

getMinutes()

根據本地時間,返回一個指定的日期對象的分鐘數。

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

getMonth()

根據本地時間,返回一個指定的日期對象的月份,為基于0的值(0表示一年中的第一月)

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

getSeconds()

方法根據本地時間,返回一個指定的日期對象的秒數

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

add()

add(value,type)
在某個時間上新增時間,返回新增后的時間對象,格式不正確返回原時間對象,新增傳正數,減傳負數。

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)
新增指定天數,返回新增后的時間對象,格式不正確則返回原時間對象。
addHours()【新增小時】
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()

比較兩個時間大小,前者大于后者返回1,等于返回0,小于返回-1

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

dayOfweek()

返回某個時間星期幾

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

diff()

比較兩個時間,返回一個對象,包含一共差x天,或一共差x小時,或一共差x分鐘,或一共差x秒,或一共差x毫秒,格式不正確所有參數均為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()

用于計算兩個時間一共差x天x小時x分鐘x秒,格式不正確返回空字符串。

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

isLeapYear()

判斷是否是閏年。

new Date().isLeapYear()  //false

isSame()

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

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

format()

將時間格式化

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

參考資源

javascript 標準庫 Date


字符串類

charAt()

從一個字符串中返回指定的字符。


concat()

將一個或多個字符串與原字符串連接合并,形成一個新的字符串并返回。


endsWith()

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


startsWith()

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


includes()

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


indexOf()

方法返回指定值的第一次出現的調用 String 對象中的索引,開始在fromIndex進行搜索。如果未找到該值,則返回-1。


lastIndexOf()

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


match()

當一個字符串與一個正則表達式匹配時, match()方法檢索匹配項。


replace()

方法返回一個由替換值替換一些或所有匹配的模式后的新字符串。模式可以是一個字符串或者一個正則表達式, 替換值可以是一個字符串或者一個每次匹配都要調用的函數。


slice()

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


split()

將一個String對象分割成字符串數組,通過將字符串分成子串。


substr()

返回一個字符串中從指定位置開始到指定字符數的字符。


substring()

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


toLowerCase()

會將調用該方法的字符串值轉為小寫形式,并返回。


toUpperCase()

將調用該方法的字符串值轉換為大寫形式,并返回。


toString()

方法返回指定對象的字符串形式。


trim()

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


trimAll()

去掉所有的空白符


toLowerCase()

該特性是非標準的,但是此方法已經重寫,可以放心使用
方法移除原字符串左端的連續空白符并返回,trimLeft方法并不會直接修改原字符串本身.


trimRight()

該特性是非標準的,但是此方法已經重寫,可以放心使用
trimRight方法移除原字符串右端的連續空白符并返回,trimRight方法并不會直接修改原字符串本身


isNullOrEmpty()

判斷字符是否為null或空


format()

將字符傳轉換為指定的其他字符串

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

參考資源

javascript 標準庫 String


數字類

toFixed()

使用定點表示法來格式化一個數。

numObj.toFixed(digits)

toPrecision()

指定的精度返回該數值對象的字符串表示

numObj.toPrecision(precision)

toString()

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

numObj.toString([radix])

abs()

函數返回指定數字 “x” 的絕對值。

Math.abs(x) 

ceil()

返回一個大于或等于數 “x” 的最小整數

Math.ceil(x)

floor()

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

Math.floor(x)

max()

函數返回一組數中的最大值。

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

min()

返回零個或更多個數值的最小值。

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

pow()

函數返回基數(base)的指數(exponent)次冪,即 baseexponent。

Math.pow(base, exponent)

random()

函數返回 [0-1) 的浮點值偽隨機數(大于等于0,小于1)。

Math.random()

round()

返回一個數值四舍五入后最接近的整數值。

Math.round()

sqrt()

函數返回一個數的平方根

Math.sqrt(x)

sign()

函數用來判斷一個數字的符號, 是正數, 負數, 還是零.

Math.sign(x)

isFinite()

用來檢測傳入的參數是否是一個有窮數(finite number)。

Number.isFinite(value)

isInteger()

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

Number.isInteger(value)

isNaN()

方法用來檢測傳入的值是否是 NaN。該方法比傳統的全局函數 isNaN() 更可靠。

Number.isNaN(value)

isSafeInteger()

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

Number.isSafeInteger(testValue)

formatMoney()

formatMoney(places,symbol,thousand,decimal)
將數字轉換成貨幣格式
參數【places】: Number 保留的小數位 默認2
參數【symbol】: string 符號 默認’$’
參數【thousand】: string 每三位的分隔符 默認’,’
參數【decimal】:string 個位與小數的分隔符 默認’.’

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

currencyUpperCase()

將數字轉漢子大寫形式 小數最多支持4位

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

參考資源

javascript 標準庫 Number
javascript 標準庫 Math


數組類

push()

向數組的末尾添加一個或更多元素,并返回新的長度。


pop()

刪除并返回數組的最后一個元素


shift()

刪除并返回數組的第一個元素


unshift()

向數組的開頭添加一個或更多元素,并返回新的長度。


join()

把數組的所有元素放入一個字符串。元素通過指定的分隔符進行分隔。


reverse()

顛倒數組中元素的順序。


sort()

對數組的元素進行排序


concat()

連接兩個或更多的數組,并返回結果。


slice()

從某個已有的數組返回選定的元素


splice()

刪除元素,并向數組添加新元素


toString()

把數組轉換為字符串,并返回結果。


isArray()

判斷是不是數組


indexOf()

返回在數組中可以找到給定元素的第一個索引,如果不存在,則返回-1。


every()

測試數組的所有元素是否都通過了指定函數的測試。


filter()

使用指定的函數測試所有元素,并創建一個包含所有通過測試的元素的新數組。


forEach()

方法對數組的每個元素執行一次提供的函數。


map()

方法創建一個新數組,其結果是該數組中的每個元素調用一個提供的函數。


unique()

這是jquery提供的方法,去重

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

參考資源

javascript 標準庫 Array
w3school JavaScript Array 對象

其他擴展類

ConvertNetTDate()

返回一個javascript Date對象.
方法用來轉換C#通過json傳到前端的時間字符串中帶“T”的問題,如:"2017-03-01T16:33:03.73"

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

isMobileUserAgent()

判斷是否移動設備訪問


isAppleMobileDevice()

判斷是否蘋果移動設備訪問


isAndroidMobileDevice()

判斷是否安卓移動設備訪問


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
說明:元素不能被禁用(禁用的元素不會被包括在內),并且元素應當有含有 name 屬性,對于獲取不到的值,請自己手動賦值。

$(selector).serializeJson()

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

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

結果展示:

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

fillForm()

根據JSON數據填充表單
說明:對于上傳圖片空間或者使用了i-check插件美化checkbox是無法自動填充的,需要自己手動填充。

$(selector).fillForm()

serializeArray()

序列化表單值來創建對象數組(名稱和值)
.serializeArray() 方法使用了 W3C 關于 successful controls(有效控件) 的標準來檢測哪些元素應當包括在內。
特別說明,元素不能被禁用(禁用的元素不會被包括在內),并且元素應當有含有 name 屬性。提交按鈕的值也不會被序列化。文件選擇元素的數據也不會被序列化。

$(selector).serializeArray()

serialize()

創建以標準 URL 編碼表示的文本字符串

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

resetForm()

還原表單

$('#form1').resetForm()

clearForm()

清空表單所有元素的值

$('#form1').clearForm()

clearFields()

清空某個表單域的值

$('#form1 :password').clearFields()

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容