【建议收藏】🔥 JS 的实用技巧和注意事项!

大家好,我是 前端架构师 - 大卫

更多优质内容请关注微信公众号 @前端大卫

初心为助前端人🚀,进阶路上共星辰✨,

您的点赞👍与关注❤️,是我笔耕不辍的灯💡。

背景

本篇文章整理了一些常见的 JavaScript 语法优化技巧,并标注了每个特性的 ECMAScript 版本,以帮助开发者更好地理解和应用这些特性。

1. 多次解构拿到最终属性值

ES6 (2015) 引入了解构赋值。

js 复制代码
const obj = {
  part: {
    name: "David",
    age: 37
  }
};

const {
  part,
  part: { name, age }
} = obj;

console.log(part); // { name: "David", age: 37 }
console.log(name, age); // David 37

2. 模版字符串当作函数参数

ES6 (2015) 引入了模板字符串(Template literals

ts 复制代码
function getPersonInfo(template: TemplateStringsArray, person: string, age: number) {
  console.log(template); // ["", " is ", " years old"]
  console.log(person); // Lydia
  console.log(age); // 21
}

const person = "Lydia";
const age = 21;
getPersonInfo`${person} is ${age} years old`;

3. 解构字符串

ES6 (2015) 引入了扩展运算符(Spread operator

js 复制代码
[...'Lydia']; // ["L", "y", "d", "i", "a"]

4. 生成随机字符串

  • ES6 (2015) 引入 toString(36) 进制转换
  • ES8 (2017) 引入padEnd

代码解析:

  • Math.random() 生成随机数 0.6142088877102427
  • toString(36) 转换成36进制 0.m40j2pdqw8o
  • substr(2, 2+8) 进行字符串截取。
  • padEnd 末尾补 0
js 复制代码
const generatorRandomString = (length) => {
  return Math.random()
    .toString(36)
    .slice(2, 2 + length)
    .padEnd(length, "0");
};

generatorRandomString(8); // 'm40j2pdq'

5. 数字分隔符

ES12 (2021) 引入数字分隔符

js 复制代码
const myMoney = 1_000_000_000_000;

// 等价于
const myMoney = 1000000000000;

6. while 简写循环

js 复制代码
let i = 0;
while (i < 3) {
  i++;
  console.log(i);
}

// 简写
let i = 0;
while (i++ < 3) {
  console.log(i);
}

7. Array.includes 判断多个 if 条件

ES7 (2016) 引入 includes

js 复制代码
if (x === "abc" || x === "def" || x === "ghi") {
  // logic
}

// 简写
if (["abc", "def", "ghi"].includes(x)) {
  // logic
}

8. 字符串转数字

js 复制代码
parseInt("32");

// 简写
"32" * 1;
+"32";

9. 数组去重

ES6 (2015) 引入 Set

js 复制代码
const uniqueArray = (arr) => [...new Set(arr)];

10. 快速幂运算

ES7 (2016) 引入 ** 运算符

js 复制代码
Math.pow(2, 3); // 8

// 简写
2 ** 3;

11. 交换变量值

ES6 (2015) 引入解构赋值

js 复制代码
let a = 1, b = 2;
let temp = a;
a = b;
b = temp;

// 简写
let a = 1, b = 2;
[a, b] = [b, a];

12. 判断一个元素是否能在数组里找到

ES7 (2016) 引入 includes

js 复制代码
const arr = [0, 1];
arr.includes(0); // true

错误写法如下, 因为 0 在 js 里是 false

js 复制代码
const arr = [0, 1];
const foundNumber = arr.find(item=>item===0);
if(foundNumber){
    console.log('找到了');
}

注: JS 里的假值还有 undefined, null, NaN, 0, '', false

13. 三元运算符简化条件判断

js 复制代码
let result;
if(condition){
    result = 'yes';
}else{
    result = 'no';
}

// 简写
const result = condition ? 'yes' : 'no';

14. switch 语句优化成用字典的形式

js 复制代码
function getDayName(day) {
  switch (day) {
    case 1: return "Monday";
    case 2: return "Tuesday";
    case 3: return "Wednesday";
    case 4: return "Thursday";
    case 5: return "Friday";
    case 6: return "Saturday";
    case 7: return "Sunday";
    default: return "Invalid day";
  }
}

// 简写
function getDayName(day) {
  const days = {
    1: "Monday",
    2: "Tuesday",
    3: "Wednesday",
    4: "Thursday",
    5: "Friday",
    6: "Saturday",
    7: "Sunday",
  };
  return days[day] || "Invalid day";
}

15. 使用 filter 过滤数组中的所有假值

js 复制代码
const removeFalsy = (arr) => arr.filter(Boolean);

// 返回: [1, 2, 3, "a", "s", 34]
removeFalsy([0, 1, false, 2, "", 3, "a", NaN, "s", 34]);

16. 强制参数,缺失报错

ES6 (2015) 可使用默认参数

js 复制代码
function required(param) {
  throw new Error(`${param} is required`);
}

function example(value = required("value")) {
  console.log(value);
}

example(); // 抛出错误 "value is required"

总结

本篇文章介绍了 JavaScript 在不同版本 ECMAScript 规范中引入的常用特性,掌握这些特性可以让开发者更高效地编写 JavaScript 代码,提高代码的可维护性。

最后点赞👍 + 关注➕ + 收藏❤️ = 学会了🎉。

相关推荐
RaidenLiu11 分钟前
告别陷阱:精通Flutter Signals的生命周期、高级API与调试之道
前端·flutter·前端框架
非凡ghost11 分钟前
HWiNFO(专业系统信息检测工具)
前端·javascript·后端
非凡ghost13 分钟前
FireAlpaca(免费数字绘图软件)
前端·javascript·后端
非凡ghost20 分钟前
Sucrose Wallpaper Engine(动态壁纸管理工具)
前端·javascript·后端
拉不动的猪21 分钟前
为什么不建议项目里用延时器作为规定时间内的业务操作
前端·javascript·vue.js
该用户已不存在28 分钟前
Gemini CLI 扩展,把Nano Banana 搬到终端
前端·后端·ai编程
地方地方30 分钟前
前端踩坑记:解决图片与 Div 换行间隙的隐藏元凶
前端·javascript
炒米233332 分钟前
【Array】数组的方法
javascript
jason_yang34 分钟前
vue3+element-plus按需自动导入-正确姿势
vue.js·vite·element
小猫由里香35 分钟前
小程序打开文件(文件流、地址链接)封装
前端