JS技巧

  1. 字符串
    1. 格式化金钱
    2. 生成随机ID
    3. 生成随机HEX色值
    4. 生成星级评分
    5. 操作URL查询参数
  2. 数值
    1. 取整:代替正数的Math.floor(),代替负数的Math.ceil()
    2. 补零
    3. 转数值:只对null、""、false、数值字符串有效
    4. 时间戳
    5. 精确小数
    6. 判断奇偶
    7. 取最小最大值
  3. 函数
    1. 一次性函数:适用于运行一些只需执行一次的初始化代码
    2. 惰性载入函数:函数内判断分支较多较复杂时可大大节约资源开销
    3. 优雅处理Async/Await参数
  4. DOM
    1. 显示全部DOM边框:调试页面元素边界时使用
    2. 自适应页面:页面基于一张设计图但需做多款机型自适应,元素尺寸使用rem进行设置

字符串

格式化金钱

1
2
3
const thousandNum = num => num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
const money = thousandNum(19941112);
// money => "19,941,112"

生成随机ID

1
2
3
const randomId = len => Math.random().toString(36).substr(3, len);
const id = randomId(10);
// id => "jg7zpgiqva"

生成随机HEX色值

1
2
3
const randomColor = () => "##" + Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0");
const color = randomColor();
// color => "##f03665"

生成星级评分

1
2
3
const startScore = rate => "★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);
const start = startScore(3);
// start => "★★★"

操作URL查询参数

1
2
3
4
5
// https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams
const params = new URLSearchParams(location.search.replace(/\?/ig, ""));
// location.search = "?name=yajun&sex=female"
params.has("yajun"); // true
params.get("sex"); // "female"

数值

取整:代替正数的Math.floor(),代替负数的Math.ceil()

1
2
3
4
const num1 = ~~ 1.69;
const num2 = 1.69 | 0;
const num3 = 1.69 >> 0;
// num1 num2 num3 => 1 1 1

补零

1
2
3
const fillZero = (num, len) => num.toString().padStart(len, "0");
const num = fillZero(169, 5);
// num => "00169"

转数值:只对null、""、false、数值字符串有效

1
2
3
4
5
const num1 = +null;
const num2 = +"";
const num3 = +false;
const num4 = +"169";
// num1 num2 num3 num4 => 0 0 0 169

时间戳

1
2
const timestamp = +new Date("2019-03-31");
// timestamp => 1553990400000

精确小数

1
2
3
const roundNum = (num, decimal) => Math.round(num * 10 ** decimal) / 10 ** decimal;
const num = roundNum(1.69, 1);
// num => 1.7

判断奇偶

1
2
3
const num = 0;
const odd = !!(num & 1);
// odd => false

取最小最大值

1
2
3
4
const arr = [0, 1, 2];
const min = Math.min(...arr);
const max = Math.max(...arr);
// min max => 0 2

函数

一次性函数:适用于运行一些只需执行一次的初始化代码

1
2
3
4
5
6
function Func() {
console.log("x");
Func = function() {
console.log("y");
}
}

惰性载入函数:函数内判断分支较多较复杂时可大大节约资源开销

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function Func() {
if (a === b) {
console.log("x");
} else {
console.log("y");
}
}
// 换成
function Func() {
if (a === b) {
Func = function() {
console.log("x");
}
} else {
Func = function() {
console.log("y");
}
}
return Func();
}

优雅处理Async/Await参数

1
2
3
4
function AsyncTo(promise) {
return promise.then(data => [null, data]).catch(err => [err]);
}
const [err, res] = await AsyncTo(Func());

DOM

显示全部DOM边框:调试页面元素边界时使用

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

自适应页面:页面基于一张设计图但需做多款机型自适应,元素尺寸使用rem进行设置

1
2
3
4
5
6
function AutoResponse(width = 750) {
const target = document.documentElement;
target.clientWidth >= 600
? (target.style.fontSize = "80px")
: (target.style.fontSize = target.clientWidth / width * 100 + "px");
}
坚持原创技术分享,您的支持将鼓励我继续创作!
  • 本文作者: Leo
  • 本文链接: https://xuebin.me/posts/554f088e.html
  • 版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!