Skip to main content

[JS] JavaScript 小技巧筆記

實用

使用連續等於

會先從後面賦值,才往前賦值

overtime = house = listingDetail = {...}

轉址

keywords: redirect
// similar behavior as an HTTP redirect
window.location.replace("http://stackoverflow.com");

// similar behavior as clicking on a link
window.location.href = "http://stackoverflow.com";

How to redirect to another webpage? @ StackOverflow

檢驗效能(計時)

keywords: performance

方法一:使用內建函式

keywords: new Date().getTime()
// test performance function
const testPerformance = (testName, testFunction) => {
const startTime = new Date().getTime();

let i = 0;
while (i < 10000000) {
i++;
testFunction();
}

const endTime = new Date().getTime();

console.log(testName, endTime - startTime, 'ms');
};

// 執行測試
testPerformance('jsonStringify', jsonStringify);
// jsonStringify total time 59 ms

// 要測試的功能
function jsonStringify() {
JSON.stringify({ foo: name });
}

原始的概念:

let start;
let end;

start = new Date();

// Do something here
for (var i = 0; i < 1000; i++) {
Math.sqrt(i);
}

end = new Date();

console.log('Operation took ' + (end.getTime() - start.getTime()) + ' msec');

getTime @ MDN

方法二:使用 chrome devtool 的函式

keywords: console.time(timerName), console.timeEnd(timerName)
const timeTaken = (callback) => {
console.time('timer');
const r = callback();
console.timeEnd('timer');
return r;
};

timeTaken(() => {
// Do something here
for (var i = 0; i < 1000; i++) {
Math.sqrt(i);
}
});

資料結構

型別轉換(Type Transform | Type Coercion)

轉數值

keywords: Number(obj), parseInt(<string>, <radix>)

Cast to Number in Javascript using the Unary (+) Operator @ Medium

可以使用 Number(obj);如果使用 parseInt(<sting>, <radix>),則務必要給予 radix | 進位 參數,另外不建議使用 +>>

const inputValue = '4';

// good
const val = Number(inputValue);

// good
const val = parseInt(inputValue, 10);

imgur

實際例子
// 有小數點時
let str = '23.1';

~~str; // 23
parseInt(str, 10); // 23
Number(str); // 23.1
// 數值後面有單位時
let str = '25px';

~~str; // 0
parseInt(str, 10); // 25
Number(str); // NaN
// 數值前面有單位時
let str = 'p25';

~~str; // 0
parseInt(str, 10); // NaN
Number(str); // NaN
// 編號
let str = '0010';

~~str; // 10
parseInt(str, 10); // 10
Number(str); // 10

22.3 Numbers: Use Number for type casting and parseInt always with a radix for parsing strings. @ airbnb

轉字串

keywords: String(obj)
let reviewScore = 9;

// good
const totalScore = String(this.reviewScore);

// bad: typeof totalScore is "object" not "string"
// const totalScore = new String(reviewScore);

// bad: invokes this.reviewScore.valueOf()
// const totalScore = reviewScore + '';

// bad: isn’t guaranteed to return a string
// const totalScore = reviewScore.toString();

22.2 eslint: no-new-wrappers @ airbnb

轉布林(Boolean)

keywords: Boolean(), !!
const age = 0;

// best
const hasAge = !!age;

// good
const hasAge = Boolean(age);

// wrong: is an Object
// const hasAge = new Boolean(age);

22.6 @ airbnb

Number 和 String 函數 @ MDN What is the difference between parseInt() and Number()? @ StackOverflow

其他

避免字串中正則表達式的反斜線被過濾

keywords: backslash, escape, regex, string
regex = 'apple';
console.log(regex); // apple

/**
* 避免反斜線被過濾
**/
// 方法一:使用兩次反斜線來跳脫
regex = '\\apple';
console.log(regex); // \apple

// 方法二:使用 String.raw``
String.raw`\apple`;

Get backslashes inside a string - Javascript

Native JavaScript Buffer to NodeJS Buffer

new Blob([Uint8Array.from(fs.readFileSync($('#screen-video').attr('src'))).buffer]);

參考資料