Skip to content

03-javascript-tricks.md

Latest commit

 

History

History
244 lines (182 loc) · 7.98 KB

03-javascript-tricks.md

File metadata and controls

244 lines (182 loc) · 7.98 KB

js 常用技巧

  • 1. 数组相关

    • 数组去重: ES6 引入了 Set 对象和延展（spread）语法…
    const uniqueArray = [...new Set([1, 1, 2, 3, 5, 5, 1])]; // [1, 2, 3, 5]
// 截取数组，slice()的运行速度比重新定义数组的 length 属性快
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // [ 0, 1, 2, 3 ]
console.log([0, 1, 2, 3, 4, 5, 6, 7, 8, 9].slice(0, 4)); // [ 0, 1, 2, 3 ]
console.log([0, 1, 2, 3, 4, 5, 6, 7, 8, 9].slice(-4)); // [ 6, 7, 8, 9 ]
    • 在循环中缓存数组长度
    // 从性能方面来看，即使数组变得很大，也不需要花费额外的运行时重复计算 array.length。
for (let i = 0, length = array.length; i < length; i++) {...}
    • 使用 Boolean 过滤数组中的所有假值
    const compact = (arr) => arr.filter(Boolean);
compact([0, 1, false, 2, "", 3, "a", "e" * 23, NaN, "s", 34]); // 结果值为: [ 1, 2, 3, 'a', 's', 34 ]
    • 数组元素转化为数字
    const array2 = ["12", "1", "3.1415", "-10.01"];
console.log(array2.map(Number)); // [12, 1, 3.1415, -10.01]
    • 将数组平铺到指定深度
    const flatten = (arr, depth = 1) =>
  depth != 1
    ? arr.reduce(
        (a, v) => a.concat(Array.isArray(v) ? flatten(v, depth - 1) : v),
        []
      )
    : arr.reduce((a, v) => a.concat(v), []);
console.log(flatten([1, [2], 3, 4])); // [1, 2, 3, 4]
console.log(flatten([1, [2, [3, [4, 5], 6], 7], 8], 2)); // [1, 2, 3, [4, 5], 6, 7, 8]
    • 返回数组中最大值
    const maxElementFromArray = (array, number = 1) =>
  [...array].sort((x, y) => y - x).slice(0, number);
console.log(
  maxElementFromArray([1, 4, 3, 6, 7]),
  maxElementFromArray([7, 8, 9, 9, 9])
); // [7] [9]

  • 2. 字符串相关

    • 数字转换成字符串: strval = numval + ""； 字符串转成数字: ~~strnum，一个波浪号表示按位取反操作，~15 等于-16。
    console.log(+"15", typeof +"15"); // 输出: 15 number
// 在某些情况下，+运算符会被解析成连接操作，而不是加法操作。对于这种情况，可以使用两个波浪号：~~
console.log(~15, ~"15", ~~"15", typeof ~~"15"); // 输出都是number类型: -16 -16 15 number
    • 格式化 JSON.stringify() 输出的字符串

    该方法接受两个额外的参数，一个是函数，用于过滤要显示的 JSON；另一个是空格个数，也可以是一个字符串。

    console.log(JSON.stringify({ alpha: "A", beta: "B" })); // 挤在了一行输出
console.log(JSON.stringify({ alpha: "A", beta: "B" }, null, "\t")); // 有格式的输出
    • string 强制转换为数字

    用*1来转化为数字(实际上是调用.valueOf 方法)，也可以使用+来转化字符串为数字。

    console.log(
  "32" * 1,
  "ds" * 1,
  null * 1,
  undefined * 1,
  1 * { valueOf: () => "3" }
); // 32 NaN 0 NaN 3
console.log(+"123", +"ds", +"", +null, +undefined, +{ valueOf: () => "3" }); // 123 NaN 0 0 NaN 3
    • 字符串反转
    const reverseStr = (string) => [...string].reverse().join("");
console.log(reverseStr("hello"), reverseStr("1234")); // "olleh" "4321"

  • 3. 对象等结构相关

    • object 强制转化为 string

    使用 字符串 + Object 的方式来转化对象为字符串，也可以覆盖对象的 toString 和 valueOf 方法来自定义对象的类型转换。

    // 输出: Math转字符串:[object Math] JSON字符串:[object JSON]
console.log("Math转字符串:" + Math, "JSON字符串:" + JSON);
console.log(2 * { valueOf: () => "3" }, "J" + { toString: () => "S" }); // 输出: 6 "JS"
    • 对象动态声明属性
    const dynamic = "color";
let item = { brand: "Ford", [dynamic]: "Blue" };
console.log(item); // { brand: "Ford", color: "Blue" }

  • 4. 语法相关

    • 短路求值: ||
    let one = 1,
  two = 2,
  three = 3;
console.log(one && two && three); // 3
console.log(0 && null); // 0
    • 转换成布尔值: 使用!

    在 JavaScript 中，除了 0、空字符串、null、undefined、NaN 和 false 是假值之外，其他的都是真值。

    console.log(!"hello", !0, typeof true, !typeof true); // false true "boolean" false

    • 快速幂运算**，比使用Math.pow()更快: console.log(Math.pow(2, 3) == 2 ** 3) // true

    • 快速取整: 使用位或运算符 | 比 Math.floor()、Math.ceil()或 Math.round()更快。

    console.log(23.9 | 0, -23.9 | 0); // 位运算符，正数向下取整，负数向上取整，输出: 23 -23
console.log(Math.floor(23.9), Math.ceil(-23.9)); // 输出: 23 -23
console.log(1553 / 100, (1553 / 100) | 0); // // 移除整数尾部数字,输出: 15.53, 15
    • 判断奇偶数 & 1
    const num = 3;
console.log(!!(num & 1), !!(num % 2)); // true true
    • 给多个变量赋值
    let [a, b, c] = [5, 8, 12];
console.log(a, b, c); // 5 8 12
    • 交换两个变量
    let x = "Hello",
  y = 55;
console.log(x, y); // Hello 55
[x, y] = [y, x];
console.log(x, y); // 55 Hello
    • 多条件检查

    对于多个值匹配，我们可以将所有的值放到数组中，然后使用 indexOf() 或 includes() 方法。

    if (value === 1 || value === "one" || value === 2 || value === "two") {...}
if ([1, "one", 2, "two"].indexOf(value) >= 0) {  ...}
if ([1, "one", 2, "two"].includes(value)) {...}
    • 仅在变量为 true 的情况下才调用函数，则可以使用 && 运算符
    if (test1) {
  callMethod();
}
test1 && callMethod();
    • 在 return 语句中使用比较
    function checkReturn() {
  return test || callMe("test");
}

  • 5. 工具方法

    • 数组洗牌
    const shuffleArray = (arr) => arr.sort(() => Math.random() - 0.5);
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(shuffleArray(arr)); // 每次输出都不一样
    • 生成随机颜色字符串
    const generateRandomHexColor = () =>
  `#${Math.floor(Math.random() * 0xffffff).toString(16)}`;
console.log(generateRandomHexColor()); // 输出类似: #7a40e7
    • 缩短 console.log()
    // 在nodejs使用 globalThis，看环境使用window、document等
const cc = console.log.bind(globalThis);
cc(996, "hello world", new Date()); // 996 hello world 2022-12-15T07:02:08.567Z

ref: 实际上，这些大部分的所谓技巧都是 ES6 以来新特性的用法，有几个实用的工具方法到还有点用