面向 Web 开发人员的 58 个 JavaScript 技巧

作为程序员，编写代码也需要大量的写作技巧。好的代码可以让人耳目一新、通俗易懂、舒适自然，同时又充满成就感。因此，整理了一些近三年使用过的JS开发技巧，希望能让大家写出耳目一新、通俗易懂、舒适自然的代码。

字符串技巧

1: Compare time

const time1 = "2022-03-02 09:00:00";
const time2 = "2022-03-02 09:00:01";
const overtime = time1 < time2;
// overtime => true
复制代码

2: Format money

const ThousandNum = num => num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
const money = ThousandNum(1000000);
// money => '1,000,000'
复制代码

3: Generate random ID

const RandomId = len => Math.random().toString(36).substr(3, len);
const id = RandomId(10);
// id => "xdeguewg1f"
复制代码

4: Generate random HEX color values

const RandomColor = () => "#" + Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0");
const color = RandomColor();
// color => "#2cbf89"
复制代码

5: Generate star ratings

const StartScore = rate => "★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);
const start = StartScore(3);
// start => '★★★☆☆'
复制代码

6: URL query parameters

const params = new URLSearchParams(location.search.replace(/\?/ig, "")); // location.search = "?name=test&sex=man"
params.has("test"); // true
params.get("sex"); // "man"
复制代码

数字技巧

7: Arrangement

const num1 = ~~1.19;
const num2 = 2.29 | 0;
const num3 = 3.09 >> 0;
// num1 num2 num3 => 1 2 3
复制代码

8: Zero padding

const FillZero = (num, len) => num.toString().padStart(len, "0");
const num = FillZero(1234, 5);
// num => "01234"
复制代码

9: Revolution value

const num1 = +null;
const num2 = +"";
const num3 = +false;
const num4 = +"169";
// num1 num2 num3 num4 => 0 0 0 169
复制代码

10: Timestamp

const timestamp = +new Date("2022-03-22");
// timestamp => 1647907200000
复制代码

11: Exact decimal

const RoundNum = (num, decimal) => Math.round(num * 10 ** decimal) / 10 ** decimal;
const num = RoundNum(1.2345, 2);
// num => 1.23
复制代码

12: Parity

const OddEven = num => !!(num & 1) ? "odd" : "even";
const num = OddEven(2);
// num => "even"
复制代码

13: Take min max

const arr = [0, 1, 2, 3];
const min = Math.min(...arr);
const max = Math.max(...arr);
// min max => 0 3   (0, 1, 2, 3)
复制代码

14: Generate range random numbers

const RandomNum = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
const num = RandomNum(1, 10); // 5
复制代码

布尔技巧

15: Short-circuit operator

const a = d && 1; // Fake operation, judge from left to right, return a false value when encountering a false value, and no longer execute it later, otherwise return the last true value
const b = d || 1; // Take the true operation, judge from left to right, return the true value when encountering the true value, and do not execute it later, otherwise return the last false value
const c = !d; // Returns false if a single expression converts to true, otherwise returns true
复制代码

16: Determine the data type

可确定的类型：undefined、null、string、number、boolean、array、object、symbol、date、regexp、function、asyncfunction、arguments、set、map、weakset、weakmap

function DataType(tgt, type) {
    const dataType = Object.prototype.toString.call(tgt).replace(/\[object (\w+)\]/, "$1").toLowerCase();
    return type ? dataType === type : dataType;
}

DataType("test"); // "string"
DataType(20220314); // "number"
DataType(true); // "boolean"
DataType([], "array"); // true
DataType({}, "array"); // false
复制代码

17: Check if array is empty

const arr = [];
const flag = Array.isArray(arr) && !arr.length;
// flag => true
复制代码

18: Execute when conditions are met

const flagA = true; // Condition A
const flagB = false; // Condition B
(flagA || flagB) && Func(); // Execute when A or B is satisfied
(flagA || !flagB) && Func(); // Execute when A is satisfied or B is not satisfied
flagA && flagB && Func(); // Execute when both A and B are satisfied
flagA && !flagB && Func(); // Execute when A is satisfied and B is not satisfied
复制代码

19: Executed if non-false

const flag = false; // undefined、null、""、0、false、NaN
!flag && Func();
复制代码

20: Executed when the array is not empty

const arr = [0, 1, 2];
arr.length && Func();
复制代码

21: Executed when the object is not null

const obj = {a: 0, b: 1, c: 2};
Object.keys(obj).length && Func();
复制代码

数组技巧

22: Clone array

const _arr = [0, 1, 2];
const arr = [..._arr];
// arr => [0, 1, 2]
复制代码

23: Merge array

const arr1 = [0, 1, 2];
const arr2 = [3, 4, 5];
const arr = [...arr1, ...arr2];
// arr => [0, 1, 2, 3, 4, 5];
复制代码

24: Deduplicated array

const arr = [...new Set([0, 1, 1, null, null])];
// arr => [0, 1, null]
复制代码

25: Obfuscated array

const arr = [0, 1, 2, 3, 4, 5].slice().sort(() => Math.random() - .5);
// arr => [3, 4, 0, 5, 1, 2]
复制代码

26: Empty an array

const arr = [0, 1, 2];
arr.length = 0;
// arr => []
复制代码

27: Truncate array

const arr = [0, 1, 2];
arr.length = 2;
// arr => [0, 1]
复制代码

28: Exchange assignment

let a = 0;
let b = 1;
[a, b] = [b, a];
// a b => 1 0
复制代码

29: Filter empty values

Empty values: undefined,null,””,0,false,NaN

const arr = [undefined, null, "", 0, false, NaN, 1, 2].filter(Boolean);
// arr => [1, 2]
复制代码

30: Insert member at the beginning of the array

let arr = [1, 2];
arr.unshift(0);
arr = [0].concat(arr);
arr = [0, ...arr];
// arr => [0, 1, 2]
复制代码

31: Insert members at the end of the array

let arr = [0, 1];
arr.push(2);
arr.concat(2);
arr[arr.length] = 2;
arr = [...arr, 2];
// arr => [0, 1, 2]
复制代码

32: Count number of array members

const arr = [0, 1, 1, 2, 2, 2];
const count = arr.reduce((t, v) => {
    t[v] = t[v] ? ++t[v] : 1;
    return t;
}, {});
// count => { 0: 1, 1: 2, 2: 3 }
复制代码

33: Destructuring nested array members

const arr = [0, 1, [2, 3, [4, 5]]];
const [a, b, [c, d, [e, f]]] = arr;
// a b c d e f => 0 1 2 3 4 5
复制代码

34: Destructuring array member aliases

const arr = [0, 1, 2];
const {0: a, 1: b, 2: c} = arr;
// a b c => 0 1 2
复制代码

35: Destructuring array member default value

const arr = [0, 1, 2];
const [a, b, c = 3, d = 4] = arr;
// a b c d => 0 1 2 4
复制代码

36: Get random array member

const arr = [0, 1, 2, 3, 4, 5];
const randomItem = arr[Math.floor(Math.random() * arr.length)];
// randomItem => 1
复制代码

37: Create an array of specified length

const arr = [...new Array(3).keys()];
// arr => [0, 1, 2]
复制代码

38: Creates an array of the specified length and equal values

const arr = new Array(3).fill(0);
// arr => [0, 0, 0]
复制代码

对象技巧

39: Clone object

const _obj = {a: 0, b: 1, c: 2};
const obj = {..._obj};
const obj = JSON.parse(JSON.stringify(_obj));
// obj => { a: 0, b: 1, c: 2 }
复制代码

40: Merge objects

const obj1 = {a: 0, b: 1, c: 2};
const obj2 = {c: 3, d: 4, e: 5};
const obj = {...obj1, ...obj2};
// obj => { a: 0, b: 1, c: 3, d: 4, e: 5 }
复制代码

41: Object Variable Properties

const flag = false;
const obj = {
    a: 0,
    b: 1,
    [flag ? "c" : "d"]: 2
};
// obj => { a: 0, b: 1, d: 2 }
复制代码

42: Create a pure empty object

const obj = Object.create(null);
Object.prototype.a = 0;
// obj => {}
复制代码

43: Delete object useless properties

const obj = {a: 0, b: 1, c: 2};
const {a, ...rest} = obj;
// rest => { b: 1, c: 2 }
复制代码

44: Destructuring object property nesting

const obj = {a: 0, b: 1, c: {d: 2, e: 3}};
const {c: {d, e}} = obj;
// d e => 2 3
复制代码

45: Destructuring object property aliases

const obj = {a: 0, b: 1, c: 2};
const {a, b: d, c: e} = obj;
// a d e => 0 1 2
复制代码

46: Destructuring object property default values

const obj = {a: 0, b: 1, c: 2};
const {a, b = 2, d = 3} = obj;
// a b d => 0 1 3
复制代码

函数技巧

47: Function self-execution

const Func = function () {
}(); // Commonly used
(function () {
})(); // Commonly used
(function () {
}()); // Commonly used
[function () {
}()];

+function () {
}();

-function () {
}();
~function () {
}();
!function () {
}();
new function () {
};
new function () {
}();
void function () {
}();
typeof function () {
}();
delete function () {
}();
1, function () {
}();
1 ^ function () {
}();
1 > function () {
}();

复制代码

48: One-time function

适合运行一些只需要执行一次的初始化代码，如：

function Func() {
    console.log("x");
    Func = function () {
        console.log("y");
    }
}
复制代码

49: Lazy loading functions

当函数中的复杂判断分支越来越多时，可以大大节省资源开销，可以使用闭包来实现。

function Func() {
    if (a === b) {
        console.log("x");
    } else {
        console.log("y");
    }
}

// replace with
function Func() {
    if (a === b) {
        Func = function () {
            console.log("x");
        }
    } else {
        Func = function () {
            console.log("y");
        }
    }
    return Func();
}
复制代码

50: Detect non-null parameters

function IsRequired() {
    throw new Error("param is required");
}

function Func(name = IsRequired()) {
    console.log("I Love " + name);
}

Func(); // "param is required"
Func("You"); // "I Love You"
复制代码

51: String creation function

const Func = new Function("name", "console.log(\"I Love \" + name)");
复制代码

52: Handle error messages gracefully

try {
    Func();
} catch (e) {
    location.href = "https://stackoverflow.com/search?q=[js]+" + e.message;
}
复制代码

53: Handle Async/Await parameters gracefully

function AsyncTo(promise) {
    return promise.then(data => [null, data]).catch(err => [err]);
}

const [err, res] = await AsyncTo(Func());
复制代码

54: Handle multiple function return values gracefully

function Func() {
    return Promise.all([
        fetch("/user"),
        fetch("/comment")
    ]);
}

const [user, comment] = await Func();
复制代码

DOM技巧

55: Show all DOM borders

[].forEach.call($$("*"), dom => {
    dom.style.outline = "1px solid #" + (~~(Math.random() * (1 << 24))).toString(16);
});
复制代码

56: Responsive pages

页面基于设计图但需要适配多个模型，元素大小使用rem设置

function AutoResponse(width = 750) {
    const target = document.documentElement;
    target.clientWidth >= 600
        ? (target.style.fontSize = "80px")
        : (target.style.fontSize = target.clientWidth / width * 100 + "px");
}
复制代码

57: Filter XSS

function FilterXss(content) {
    let elem = document.createElement("div");
    elem.innerText = content;
    const result = elem.innerHTML;
    elem = null;
    return result;
}
复制代码

58: Access LocalStorage

const love = JSON.parse(localStorage.getItem("love"));
localStorage.setItem("love", JSON.stringify("I Love You"));
复制代码