JS 与 trick 代码的运用及解析全攻略

const x = 123.4545;

x >> 0; // 123

~~x; // 123

x | 0; // 123

Math.floor(x); // 123

Math.floor(-12.53); // -13

-12.53 | 0; // -12

// 方法一

('000000' + Math.floor(Math.random() * 999999)).slice(-6);

// 方法二

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

// 方法三

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

// 方法四

'' + Math.floor(Math.random() * 999999);

(function() {

 return '#'+('00000'+

 (Math.random()*0x1000000<p style="text-align: left;"><span style="color: #ff0000"><strong>驼峰命名转下划线</strong></span></p><pre class="brush:php;toolbar:false">'componentMapModelRegistry'.match(/^[a-z][a-z0-9]+|[A-Z][a-z0-9]*/g).join('_').toLowerCase(); // component_map_model_registry

// ES6

const query = (search = '') => ((querystring = '') => (q => (querystring.split('&').forEach(item => (kv => kv[0] && (q[kv[0]] = kv[1]))(item.split('='))), q))({}))(search.split('?')[1]);

// 对应ES5实现

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"}

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;

}

var foo = [1, [2, 3], ['4', 5, ['6',7,[8]]], [9], 10];

// 方法一

// 限制：数组项不能出现`,`，同时数组项全部变成了字符数字

foo.toString().split(','); // ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]

// 方法二

// 转换后数组项全部变成数字了

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;

// 方法一

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

// 方法二

Date.prototype.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

function htmlspecialchars (str) {

 var str = str.toString().replace(/&/g, "&").replace(/, "/g, ">").replace(/"/g, '"');

 return str;

}

htmlspecialchars('&jfkds'); // "&jfkds"

function 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);

}

// 方法一

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;

}

function isPrime(n) {

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

}

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 }

undefined = 1;

!!undefined; // true

!!void(0); // false

"★★★★★-----".slice(5 - rate, 10 - rate);

try {

  something

} catch (e) {

  window.location.href =

    "http://stackoverflow.com/search?q=[js]+" +

    e.message;

}

( 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() {}();

var a = 20, b = 30;

a ^= b;

b ^= a;

a ^= b;

a; // 30

b; // 20

var a = '1';

+a; // 1

[...new Set([1, "1", 2, 1, 1, 3])]; // [1, "1", 2, 3]

Array(6).fill(8); // [8, 8, 8, 8, 8, 8]

var argArray = Array.prototype.slice.call(arguments);

// ES6：

var argArray = Array.from(arguments)

// or

var argArray = [...arguments];

// 获取指定时间的时间缀

new Date().getTime();

(new Date()).getTime();

(new Date).getTime();

// 获取当前的时间缀

Date.now();

// 日期显示转换为数字

+new Date();

var str = 'hello world';

if (str.indexOf('lo') > -1) {

 // ...

}

if (~str.indexOf('lo')) {

 // ...

}

var a = '520';

var b = '520px';

Number(a); // 520

parseInt(a); // 520

Number(b); // NaN

parseInt(b); // 520

parseInt('10', 2); // 2

parseInt('10', 8); // 8

parseInt('10', 10); // 10

parseInt('10', 16); // 16

[1,2] + [3, 4]; // "1,23,4"

var a = {};

a + 123; // "[object Object]123"

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);

 }

 this.name = name;

 this.age = age;

}

// 方法二: ES5

function Person(name, age) {

 var self = this instanceof Person ? this : Object.create(Person.prototype);

 self.name = name;

 self.age = age;

 return self;

}

// 方法三：ES6

function Person(name, age) {

 if (!new.target) {

  throw 'Peron must called with new';

 }

 this.name = name;

 this.age = age;

}

// 对象

function isObject(value) {

 return Object.prototype.toString.call(value).slice(8, -1) === 'Object'';

}

// 数组

function isArray(value) {

 return Object.prototype.toString.call(value).slice(8, -1) === 'Array';

}

// 函数

function isFunction(value) {

 return Object.prototype.toString.call(value).slice(8, -1) === 'Function';

}

toString(); // Uncaught SyntaxError: Invalid or unexpected token

..toString(); // 第二个点号可以正常解析

 .toString(); // 注意点号前面的空格

(2).toString(); // 2先被计算

var suffix = ' name';

var person = {

 ['first' + suffix]: 'Nicholas',

 ['last' + suffix]: 'Zakas'

}

person['first name']; // "Nicholas"

person['last name']; // "Zakas"

// 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

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;

}

function 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"

function isEqual(n1, n2, epsilon) {

 epsilon = epsilon == undefined ? 10 : epsilon; // 默认精度为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

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 var formatparam><p style="text-align: left;"><span style="color: #ff0000"><strong>创建指定长度非空数组</strong></span></p>

<p style="text-align: left;">在JavaScript中可以通过new Array(3)的形式创建一个长度为3的空数组。在老的Chrome中其值为[undefined x 3]，在最新的Chrome中为[empty x 3]，即空单元数组。在老Chrome中，相当于显示使用[undefined, undefined, undefined]的方式创建长度为3的数组。</p>

<p style="text-align: left;">但是，两者在调用map()方法的结果是明显不同的</p>

<pre class="brush:php;toolbar:false">var a = new Array(3);

var b = [undefined, undefined, undefined];

a.map((v, i) => i); // [empty × 3]

b.map((v, i) => i); // [0, 1, 2]

var a = Array.apply(null, { length: 3 });

a; // [undefined, undefined, undefined]

a.map((v, i) => i); // [0, 1, 2]