【移動應(yīng)用開發(fā)技術(shù)】使用JS與trick的代碼的注意事項有哪些

【移動應(yīng)用開發(fā)技術(shù)】使用JS與trick的代碼的注意事項有哪些

這篇文章將為大家詳細(xì)講解有關(guān)使用JS與trick的代碼的注意事項有哪些，在下覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

這次給大家?guī)鞪S與trick的代碼，使用JS與trick的代碼的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。浮點數(shù)取整const

x

=

123.4545;

x

>>

0;

//

123

~~x;

//

123

x

|

0;

//

123

Math.floor(x);

//

123注意：前三種方法只適用于32個位整數(shù)，對于負(fù)數(shù)的處理上和Math.floor是不同的。Math.floor(-12.53);

//

-13

-12.53

|

0;

//

-12生成6位數(shù)字驗證碼//

方法一

('000000'

+

Math.floor(Math.random()

*

999999)).slice(-6);

//

方法二

Math.random().toString().slice(-6);

//

方法三

Math.random().toFixed(6).slice(-6);

//

方法四

''

+

Math.floor(Math.random()

*

999999);16進(jìn)制顏色代碼生成(function()

{

return

'#'+('00000'+

(Math.random()*0x1000000<<0).toString(16)).slice(-6);

})();駝峰命名轉(zhuǎn)下劃線'componentMapModelRegistry'.match(/^[a-z][a-z0-9]+|[A-Z][a-z0-9]*/g).join('_').toLowerCase();

//

component_map_model_registryurl查詢參數(shù)轉(zhuǎn)json格式//

ES6

const

query

=

(search

=

'')

=>

((querystring

=

'')

=>

(q

=>

(querystring.split('&').forEach(item

=>

(kv

=>

kv[0]

&&

(q[kv[0]]

=

kv[1]))(item.split('='))),

q))({}))(search.split('?')[1]);

//

對應(yīng)ES5實現(xiàn)

var

query

=

function(search)

{

if

(search

===

void

0)

{

search

=

'';

}

return

(function(querystring)

{

if

(querystring

===

void

0)

{

querystring

=

'';

}

return

(function(q)

{

return

(querystring.split('&').forEach(function(item)

{

return

(function(kv)

{

return

kv[0]

&&

(q[kv[0]]

=

kv[1]);

})(item.split('='));

}),

q);

})({});

})(search.split('?')[1]);

};

query('?key1=value1&key2=value2');

//

es6.html:14

{key1:

"value1",

key2:

"value2"}獲取URL參數(shù)function

getQueryString(key){

var

reg

=

new

RegExp("(^|&)"+

key

+"=([^&]*)(&|$)");

var

r

=

window.location.search.substr(1).match(reg);

if(r!=null){

return

unescape(r[2]);

}

return

null;

}n維數(shù)組展開成一維數(shù)組var

foo

=

[1,

[2,

3],

['4',

5,

['6',7,[8]]],

[9],

10];

//

方法一

//

限制：數(shù)組項不能出現(xiàn)`,`，同時數(shù)組項全部變成了字符數(shù)字

foo.toString().split(',');

//

["1",

"2",

"3",

"4",

"5",

"6",

"7",

"8",

"9",

"10"]

//

方法二

//

轉(zhuǎn)換后數(shù)組項全部變成數(shù)字了

eval('['

+

foo

+

']');

//

[1,

2,

3,

4,

5,

6,

7,

8,

9,

10]

//

方法三，使用ES6展開操作符

//

寫法太過麻煩，太過死板

[1,

...[2,

3],

...['4',

5,

...['6',7,...[8]]],

...[9],

10];

//

[1,

2,

3,

"4",

5,

"6",

7,

8,

9,

10]

//

方法四

JSON.parse(`[${JSON.stringify(foo).replace(/\[|]/g,

'')}]`);

//

[1,

2,

3,

"4",

5,

"6",

7,

8,

9,

10]

//

方法五

const

flatten

=

(ary)

=>

ary.reduce((a,

b)

=>

a.concat(Array.isArray(b)

?

flatten(b)

:

b),

[]);

flatten(foo);

//

[1,

2,

3,

"4",

5,

"6",

7,

8,

9,

10]

//

方法六

function

flatten(a)

{

return

Array.isArray(a)

?

[].concat(...a.map(flatten))

:

a;注：更多方法請參考《HowtoflattennestedarrayinJavaScript?》日期格式化//

方法一

function

format1(x,

y)

{

var

z

=

{

y:

x.getFullYear(),

M:

x.getMonth()

+

1,

d:

x.getDate(),

h:

x.getHours(),

m:

x.getMinutes(),

s:

x.getSeconds()

};

return

y.replace(/(y+|M+|d+|h+|m+|s+)/g,

function(v)

{

return

((v.length

>

1

?

"0"

:

"")

+

eval('z.'

+

v.slice(-1))).slice(-(v.length

>

2

?

v.length

:

2))

});

}

format1(new

Date(),

'yy-M-d

h:m:s');

//

17-10-14

22:14:41

//

方法二

Dtotype.format

=

function

(fmt)

{

var

o

=

{

"M+":

this.getMonth()

+

1,

//月份

"d+":

this.getDate(),

//日

"h+":

this.getHours(),

//小時

"m+":

this.getMinutes(),

//分

"s+":

this.getSeconds(),

//秒

"q+":

Math.floor((this.getMonth()

+

3)

/

3),

//季度

"S":

this.getMilliseconds()

//毫秒

};

if

(/(y+)/.test(fmt)){

fmt

=

fmt.replace(RegExp.$1,

(this.getFullYear()

+

"").substr(4

-

RegExp.$1.length));

}

for

(var

k

in

o){

if

(new

RegExp("("

+

k

+

")").test(fmt)){

fmt

=

fmt.replace(RegExp.$1,

(RegExp.$1.length

==

1)

?

(o[k])

:

(("00"

+

o[k]).substr((""

+

o[k]).length)));

}

}

return

fmt;

}

new

Date().format('yy-M-d

h:m:s');

//

17-10-14

22:18:17特殊字符轉(zhuǎn)義function

htmlspecialchars

(str)

{

var

str

=

str.toString().replace(/&/g,

"&").replace(/</g,

"<").replace(/>/g,

">").replace(/"/g,

'"');

return

str;

}

htmlspecialchars('&jfkds<>');

//

"&jfkds<>"動態(tài)插入jsfunction

injectScript(src)

{

var

s,

t;

s

=

document.createElement('script');

s.type

=

'text/javascript';

s.async

=

true;

s.src

=

src;

t

=

document.getElementsByTagName('script')[0];

t.parentNode.insertBefore(s,

t);

}格式化數(shù)量//

方法一

function

formatNum

(num,

n)

{

if

(typeof

num

==

"number")

{

num

=

String(num.toFixed(n

||

0));

var

re

=

/(-?\d+)(\d{3})/;

while

(re.test(num))

num

=

num.replace(re,

"$1,$2");

return

num;

}

return

num;

}

formatNum(2313123,

3);

//

"2,313,123.000"

//

方法二

'2313123'.replace(/\B(?=(\d{3})+(?!\d))/g,

',');

//

"2,313,123"

//

方法三

function

formatNum(str)

{

return

str.split('').reverse().reduce((prev,

next,

index)

=>

{

return

((index

%

3)

?

next

:

(next

+

','))

+

prev

});

}

formatNum('2313323');

//

"2,313,323"身份證驗證function

chechCHNCardId(sNo)

{

if

(!this.regExpTest(sNo,

/^[0-9]{17}[X0-9]$/))

{

return

false;

}

sNo

=

sNo.toString();

var

a,

b,

c;

a

=

parseInt(sNo.substr(0,

1))

*

7

+

parseInt(sNo.substr(1,

1))

*

9

+

parseInt(sNo.substr(2,

1))

*

10;

a

=

a

+

parseInt(sNo.substr(3,

1))

*

5

+

parseInt(sNo.substr(4,

1))

*

8

+

parseInt(sNo.substr(5,

1))

*

4;

a

=

a

+

parseInt(sNo.substr(6,

1))

*

2

+

parseInt(sNo.substr(7,

1))

*

1

+

parseInt(sNo.substr(8,

1))

*

6;

a

=

a

+

parseInt(sNo.substr(9,

1))

*

3

+

parseInt(sNo.substr(10,

1))

*

7

+

parseInt(sNo.substr(11,

1))

*

9;

a

=

a

+

parseInt(sNo.substr(12,

1))

*

10

+

parseInt(sNo.substr(13,

1))

*

5

+

parseInt(sNo.substr(14,

1))

*

8;

a

=

a

+

parseInt(sNo.substr(15,

1))

*

4

+

parseInt(sNo.substr(16,

1))

*

2;

b

=

a

%

11;

if

(b

==

2)

{

c

=

sNo.substr(17,

1).toUpperCase();

}

else

{

c

=

parseInt(sNo.substr(17,

1));

}

switch

(b)

{

case

0:

if

(c

!=

1)

{

return

false;

}

break;

case

1:

if

(c

!=

0)

{

return

false;

}

break;

case

2:

if

(c

!=

"X")

{

return

false;

}

break;

case

3:

if

(c

!=

9)

{

return

false;

}

break;

case

4:

if

(c

!=

8)

{

return

false;

}

break;

case

5:

if

(c

!=

7)

{

return

false;

}

break;

case

6:

if

(c

!=

6)

{

return

false;

}

break;

case

7:

if

(c

!=

5)

{

return

false;

}

break;

case

8:

if

(c

!=

4)

{

return

false;

}

break;

case

9:

if

(c

!=

3)

{

return

false;

}

break;

case

10:

if

(c

!=

2)

{

return

false;

};

}

return

true;

}測試質(zhì)數(shù)function

isPrime(n)

{

return

!(/^.?$|^(..+?)\1+$/).test('1'.repeat(n))

}統(tǒng)計字符串中相同字符出現(xiàn)的次數(shù)var

arr

=

'abcdaabc';

var

info

=

arr

.split('')

.reduce((p,

k)

=>

(p[k]++

||

(p[k]

=

1),

p),

{});

console.log(info);

//{

a:

3,

b:

2,

c:

2,

d:

1

}使用void0來解決undefined被污染問題undefined

=

1;

!!undefined;

//

true

!!void(0);

//

false單行寫一個評級組件"★★★★★☆☆☆☆☆".slice(5

-

rate,

10

-

rate);JavaScript錯誤處理的方式的正確姿勢try

{

something

}

catch

(e)

{

window.location.href

=

"/search?q=[js]+"

+

e.message;

}匿名函數(shù)自執(zhí)行寫法(

function()

{}()

);

(

function()

{}

)();

[

function()

{}()

];

~

function()

{}();

!

function()

{}();

+

function()

{}();

-

function()

{}();

delete

function()

{}();

typeof

function()

{}();

void

function()

{}();

new

function()

{}();

new

function()

{};

var

f

=

function()

{}();

1,

function()

{}();

1

^

function()

{}();

1

>

function()

{}();兩個整數(shù)交換數(shù)值var

a

=

20,

b

=

30;

a

^=

b;

b

^=

a;

a

^=

b;

a;

//

30

b;

//

20數(shù)字字符轉(zhuǎn)數(shù)字var

a

=

'1';

+a;

//

1最短的代碼實現(xiàn)數(shù)組去重[...new

Set([1,

"1",

2,

1,

1,

3])];

//

[1,

"1",

2,

3]用最短的代碼實現(xiàn)一個長度為m(6)且值都n(8)的數(shù)組Array(6).fill(8);

//

[8,

8,

8,

8,

8,

8]將argruments對象轉(zhuǎn)換成數(shù)組var

argArray

=

Atotype.slice.call(arguments);

//

ES6：

var

argArray

=

Array.from(arguments)

//

or

var

argArray

=

[...arguments];獲取日期時間綴//

獲取指定時間的時間綴

new

Date().getTime();

(new

Date()).getTime();

(new

Date).getTime();

//

獲取當(dāng)前的時間綴

Date.now();

//

日期顯示轉(zhuǎn)換為數(shù)字

+new

Date();使用~x.indexOf('y')來簡化x.indexOf('y')>-1var

str

=

'hello

world';

if

(str.indexOf('lo')

>

-1)

{

//

...

}

if

(~str.indexOf('lo'))

{

//

...

}兩者的差別之處在于解析和轉(zhuǎn)換兩者之間的理解。解析允許字符串中含有非數(shù)字字符，解析按從左到右的順序，如果遇到非數(shù)字字符就停止。而轉(zhuǎn)換不允許出現(xiàn)非數(shù)字字符，否者會失敗并返回NaN。var

a

=

'520';

var

b

=

'520px';

Number(a);

//

520

parseInt(a);

//

520

Number(b);

//

NaN

parseInt(b);

//

520parseInt方法第二個參數(shù)用于指定轉(zhuǎn)換的基數(shù)，ES5默認(rèn)為10進(jìn)制。parseInt('10',

2);

//

2

parseInt('10',

8);

//

8

parseInt('10',

10);

//

10

parseInt('10',

16);

//

16對于網(wǎng)上parseInt(0.0000008)的結(jié)果為什么為8，原因在于0.0000008轉(zhuǎn)換成字符為"8e-7"，然后根據(jù)parseInt的解析規(guī)則自然得到"8"這個結(jié)果。+拼接操作，+xorString(x)？+運算符可用于數(shù)字加法，同時也可以用于字符串拼接。如果+的其中一個操作符是字符串(或者通過隱式強(qiáng)制轉(zhuǎn)換可以得到字符串)，則執(zhí)行字符串拼接；否者執(zhí)行數(shù)字加法。需要注意的時對于數(shù)組而言，不能通過valueOf()方法得到簡單基本類型值，于是轉(zhuǎn)而調(diào)用toString()方法。[1,2]

+

[3,

4];

//

"1,23,4"對于對象同樣會先調(diào)用valueOf()方法，然后通過toString()方法返回對象的字符串表示。var

a

=

{};

a

+

123;

//

"[object

Object]123"對于a+""隱式轉(zhuǎn)換和String(a)顯示轉(zhuǎn)換有一個細(xì)微的差別：a+''會對a調(diào)用valueOf()方法，而String()直接調(diào)用toString()方法。大多數(shù)情況下我們不會考慮這個問題，除非真遇到。var

a

=

{

valueOf:

function()

{

return

42;

},

toString:

function()

{

return

4;

}

}

a

+

'';

//

42

String(a);

//

4判斷對象的實例//

方法一:

ES3

function

Person(name,

age)

{

if

(!(this

instanceof

Person))

{

return

new

Person(name,

age);

}

=

name;

this.age

=

age;

}

//

方法二:

ES5

function

Person(name,

age)

{

var

self

=

this

instanceof

Person

?

this

:

Object.create(Ptotype);

=

name;

self.age

=

age;

return

self;

}

//

方法三：ES6

function

Person(name,

age)

{

if

(!new.target)

{

throw

'Peron

must

called

with

new';

}

=

name;

this.age

=

age;

}數(shù)據(jù)安全類型檢查//

對象

function

isObject(value)

{

return

Ototype.toString.call(value).slice(8,

-1)

===

'Object'';

}

//

數(shù)組

function

isArray(value)

{

return

Ototype.toString.call(value).slice(8,

-1)

===

'Array';

}

//

函數(shù)

function

isFunction(value)

{

return

Ototype.toString.call(value).slice(8,

-1)

===

'Function';

}讓數(shù)字的字面值看起來像對象toString();

//

Uncaught

SyntaxError:

Invalid

or

unexpected

token

..toString();

//

第二個點號可以正常解析

.toString();

//

注意點號前面的空格

(2).toString();

//

2先被計算對象可計算屬性名(僅在ES6中)var

suffix

=

'

name';

var

person

=

{

['first'

+

suffix]:

'Nicholas',

['last'

+

suffix]:

'Zakas'

}

person['first

name'];

//

"Nicholas"

person['last

name'];

//

"Zakas"數(shù)字四舍五入//

v:

值，p:

精度

function

(v,

p)

{

p

=

Math.pow(10,

p

>>>

31

?

0

:

p

|

0)

v

*=

p;

return

(v

+

0.5

+

(v

>>

31)

|

0)

/

p

}

round(123.45353,

2);

//

123.45在瀏覽器中根據(jù)url下載文件function

download(url)

{

var

isChrome

=

navigator.userAgent.toLowerCase().indexOf('chrome')

>

-1;

var

isSafari

=

navigator.userAgent.toLowerCase().indexOf('safari')

>

-1;

if

(isChrome

||

isSafari)

{

var

link

=

document.createElement('a');

link.href

=

url;

if

(link.download

!==

undefined)

{

var

fileName

=

url.substring(url.lastIndexOf('/')

+

1,

url.length);

link.download

=

fileName;

}

if

(document.createEvent)

{

var

e

=

document.createEvent('MouseEvents');

e.initEvent('click',

true,

true);

link.dispatchEvent(e);

return

true;

}

}

if

(url.indexOf('?')

===

-1)

{

url

+=

'?download';

}

window.open(url,

'_self');

return

true;

}快速生成UUIDfunction

uuid()

{

var

d

=

new

Date().getTime();

var

uuid

=

'xxxxxxxxxxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g,

function(c)

{

var

r

=

(d

+

Math.random()

*

16)

%

16

|

0;

d

=

Math.floor(d

/

16);

return

(c

==

'x'

?

r

:

(r

&

0x3

|

0x8)).toString(16);

});

return

uuid;

};

uuid();

//

"33f7f26656cb-499b-b73e-89a921a59ba6"JavaScript浮點數(shù)精度問題function

isEqual(n1,

n2,

epsilon)

{

epsilon

=

epsilon

==

undefined

?

10

:

epsilon;

//

默認(rèn)精度為10

return

n1.toFixed(epsilon)

===

n2.toFixed(epsilon);

}

0.1

+

0.2;

//

0.30000000000000004

isEqual(0.1

+

0.2,

0.3);

//

true

0.7

+

0.1

+

99.1

+

0.1;

//

99.99999999999999

isEqual(0.7

+

0.1

+

99.1

+

0.1,

100);

//

true格式化表單數(shù)據(jù)function

formatParam(obj)

{

var

query

=

'',

name,

value,

fullSubName,

subName,

subValue,

innerObj,

i;

for(name

in

obj)

{

value

=

obj[name];

if(value

instanceof

Array)

{

for(i=0;

i<value.length;

++i)

{

subValue

=

value[i];

fullSubName

=

name

+

'['

+

i

+

']';

innerObj

=

{};

innerObj[fullSubName]

=

subValue;

query

+=

formatParam(innerObj)

+

'&';

}

}

else

if(value

instanceof

Object)

{

for(subName

in

value)

{

subValue

=

value[subName];