JavaScript 相關的工具代碼

博客地址：https://ainyi.com/49

記錄一些數據處理須要的方法工具代碼

持續更新中...

時間戳轉與日期格式相互轉換

• 時間戳轉換成日期格式

function timestampToTime (timestamp) {
  // 時間戳爲10位需*1000，時間戳爲13位的話不需乘1000
  let dateTime = timestamp.toString().length > 10 ? timestamp : timestamp * 1000;
  let date = new Date(dateTime);
  let Y = date.getFullYear() + '-';
  let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
  let D = (date.getDate()+1 < 10 ? '0'+date.getDate() : date.getDate()) + ' ';
  let h = (date.getHours()+1 < 10 ? '0'+date.getHours() : date.getHours()) + ':';
  let m = (date.getMinutes()+1 < 10 ? '0'+date.getMinutes() : date.getMinutes()) + ':';
  let s = (date.getSeconds()+1 < 10 ? '0'+date.getSeconds() : date.getSeconds());
  return Y+M+D+h+m+s;
}

let onTime = new Date().valueOf();
timestampToTime(onTime) // "2019-04-29 14:54:35"

• 日期格式轉換成時間戳

let date = new Date('2014-04-23 18:55:49:123');
// 有三種方式獲取
let time1 = date.getTime();
let time2 = date.valueOf();
let time3 = Date.parse(date);
console.log(time1); // 1398250549123
console.log(time2); // 1398250549123
console.log(time3); // 1398250549000

獲取 24 小時制的時間

當前 toLocaleTimeString 方法只能獲取到 12 小時制的時間（'上午09:10:01' | '下午08:10:24'）

這裏給出 js 獲取 24 小時制的時間

var myDate = new Date()
console.log(myDate.toLocaleTimeString('chinese', {hour12: false}));
// 14:57:15

數組元素隨機打亂

這是我看過最簡潔的數組打亂方式了，利用數組的 sort 方法

sort 的具體用法見：https://ainyi.com/41

function randomArray (arr) {
  return arr.sort(() => 0.5 - Math.random());
}
randomArray([1, 2, 3, 4, 5]) // [3, 4, 2, 1, 5]

數組去重

更多內容和方法看：https://ainyi.com/32

function unique(arr){
  return [...(new Set(arr))];
}
unique([1,1,2,3,4,2,3,4,5,3,3,4]); // [1, 2, 3, 4, 5]

嵌套數組的合併，扁平化數組

更多內容和方法看：https://ainyi.com/19

// toString、split、map （支持多維數組~~~寫法簡便，速度又快）
// 所有是數字類型，從新映射 map，如果字符串類型就不用 map
let newArr = [];
let nowTime = new Date();
newArr = arr.toString().split(',').map(item => +item);

JS 數組、對象的深拷貝

更多內容和方法看：https://ainyi.com/72

// 使用 JSON.parse(JSON.stringify(obj))
let a = [1, [2, {aa: 2}, [4]], {aa: 5, cc: { dd: 6 }}]
let b = JSON.parse(JSON.stringify(a)) // 完美

獲取當前 URL 截取參數對象

// ?foo=bar&baz=bing => {foo: bar, baz: bing}
let q = {};
location.search.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v);
console.log(q); // {foo: bar, baz: bing}

生成隨機 16 進制顏色

'#' + Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, '0');

間歇調用和超時調用

setInterval()、setTimeout()

首先兩個方法都會返回一個調用 ID，該 ID 表示當前的定時器，可用於未來取消該定時器的調用

var timeoutId = setTimeout(()=>{}, 1000);
var intervalId = setInterval(()=>{}, 1000);

clearTimeout(timeoutId);
clearInterval(intervalId);

• 使用普通 setInterval

let num = 0;
let max = 10;
let intervalId = null;
function incrementNumber () {
  num++;
  // 若是執行次數達到了 max 設定的值，則取消還沒有執行的調用
  if (num === max) {
    clearInterval(intervalId);
    alert('Done');
  }
}
// 追蹤調用 ID，用於取消定時器
intervalId = setInterval(incrementNumber, 500);

使用 setTimeout 代替 setInterval

let num = 0;
let max = 10;
function incrementNumber () {
  num++;
  // 若是執行次數沒有達到 max 設定的值，則就設置另一次超時調用
  if (num < max) {
    setTimeout(incrementNumber, 500);
  } else {
    alert('Done');
  }
}
setTimeout(incrementNumber, 500);

可見，在使用超時調用 setTimeout 代替 setInterval 時，沒有必要追蹤調用 ID，由於在每次執行代碼以後，若是不在設置另外一次超時調用，調用就會自動中止

通常認爲，使用 setTimeout 代替 setInterval 是一種==最佳的==間歇調用模式，在開發環境下，不多真正使用 setInterval，緣由是==後一個間歇調用可能會在前一個間歇調用結束以前啓動==。而使用 setTimeout 代替 setInterval，徹底能夠避免這一點

因此最好使用 setTimeout 代替 setInterval

小技巧

&& 運算符

true && 12 // 返回 12
false && 12 // 返回 false

|| 運算符

false || 12 // 返回 12
true || 12 // 返回 true

如下輸出 1 3

if([]==false){console.log(1)}; // true  []==false
if({}==false){console.log(2)}; // false
if([]){console.log(3)} // true
if([1]==[1]){console.log(4)} // 地址不同

[] == false; // 表達式爲 true
[] !== false; // 表達式爲 true

// 可是
if ([]) { // 能夠進入
  console.log(2); // 是能夠打印的
};

if ({}) { // 能夠進入
  console.log(2); // 是能夠打印的
};

判斷是否爲空數組，能夠用 length

判斷是否爲空對象，能夠用 JSON 序列化，JSON.stringify(obj) === '{}'

實際開發中，儘可能避免使用 ==，要用就用全等 ===

• 建立日曆集合

// 建立過去七天的數組
[...Array(7).keys()].map(days => new Date(Date.now() - 86400000 * days));

// 建立將來七天的數組，減號換加號
[...Array(7).keys()].map(days => new Date(Date.now() + 86400000 * days));

• 生成 11 位隨機 ID

// 生成長度爲 11 的隨機字母數字字符串
Math.random().toString(36).substring(2);
// "lr7fs27id3"

• 建立特定大小的數組

[...Array(3).keys()]
// [0, 1, 2]

Lodash

推薦使用 Lodash 工具，這是一個一致性、模塊化、高性能的 JavaScript 實用工具庫

官方文檔地址：https://www.lodashjs.com

使用理由：

Lodash 經過下降 array、number、objects、string 等等的使用難度從而讓 JavaScript 變得更簡單。

Lodash 的模塊化方法 很是適用於：

1. 遍歷 array、object 和 string
2. 對值進行操做和檢測
3. 建立符合功能的函數

例如：

// 只須要拷貝對象裏特定的某幾個值
var object = { 'a': 1, 'b': '2', 'c': 3 };
 
_.pick(object, ['a', 'c']);
// => { 'a': 1, 'c': 3 }

 博客地址：https://ainyi.com/49