20 个超级有用的 JavaScript 技巧，让你的工作更轻松(1)

m0_61331237

于 2024-04-20 22:09:31 发布

阅读量907

点赞数 19

分类专栏： 2024年程序员学习文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_61331237/article/details/138013357

版权

2024年程序员学习专栏收录该内容

286 篇文章 2 订阅

订阅专栏

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024c （备注前端）

正文

将多个值放入一个数组中，然后调用该数组的 include 方法。

// bad
if (x === “abc” || x === “def” || x === “ghi” || x === “jkl”) {
//logic
}

// better
if ([“abc”, “def”, “ghi”, “jkl”].includes(x)) {
//logic
}

2. 简化 if true…else 条件表达式

// bad
let test: boolean;
if (x > 100) {
test = true;
} else {
test = false;
}

// better
let test = x > 10 ? true : false;

//or let test = x > 10;

console.log(test);

3. 假值（undefined, null, 0, false, NaN, empty string）检查

当我们创建一个新变量时，有时我们想检查引用的变量是否是一个假值，例如 null 或 undefined 或空字符串。JavaScript 确实为这种检查提供了一个很好的快捷方式——逻辑 OR 运算符 (||)

|| 仅当左侧为空或 NaN 或 null 或 undefined 或 false 时，如果左侧操作数为假，则将返回右侧操作数，逻辑或运算符 ( || ) 将返回右侧的值。

// bad
if (test1 !== null || test1 !== undefined || test1 !== “”) {
let test2 = test1;
}

//
better
let test2 = test1 || “”;

// bad
if (test1 === true) or if (test1 !== “”) or if (test1 !== null)

// better
if (test1){
// do some
}else{
// do other
}

//Note: If test1 has a value, the logic after if will be executed. //This operator is mainly used for null, undefined, and empty string checks.

4. null/undefined 检查和默认赋值

//null checking and default assignment

let test1 = null;
let test2 = test1 ?? “”;

console.log(“null check”, test2); // output empty string “”

//undefined checking and default assignment

const test = undefined ?? “default”;
console.log(test);// expected output: “default”

5. 获取列表中的最后一项

在其他语言中，此功能被制成可以在数组上调用的方法或函数，但在 JavaScript 中，你必须自己做一些工作。

let array = [0, 1, 2, 3, 4, 5, 6, 7];

console.log(array.slice(-1)) >>> [7];
console.log(array.slice(-2)) >>> [6, 7];
console.log(array.slice(-3)) >>> [5, 6, 7];

6.比较后返回

// bad
let test;
function checkReturn() {
if (!(test === undefined)) {
return test;
} else {
return callMe(“test”);
}
}

// better
function checkReturn() {
return test ?? callMe(“test”);
}

7. 使用可选的链接运算符 -?。

? 也称为链判断运算，它允许开发人员读取深度嵌套在对象链中的属性值，而无需验证每个引用，当引用为空时，表达式停止计算并返回 undefined。

const travelPlans = {
destination: “DC”,
monday: {
location: “National Mall”,
budget: 200, },
};

// bad
const res = travelPlans && travelPlans.tuesday && travelPlans.tuesday.location && travelPlans.tuesday.location.href;
console.log(res); // Result: undefined

// better
const res1 = travelPlans?.tuesday?.location?.href;
console.log(res1); // Result: undefined

8. 多个条件的 && 运算符

要仅在变量为真时调用函数，请使用 && 运算符。

// bad
if (test) {
callMethod();
}

// better
test && callMethod();

当你想在 React 中有条件地渲染组件时，这对于使用 (&&) 进行短路很有用。例如：

{this.state.isLoading && }

9.开关简化

我们可以将条件存储在键值对象中，并根据条件调用它们。

// bad
switch (data) {
case 1:
test1();
break;
case 2:
test2();
break;
case 3:
test();
break; // And so on…
}

// better
var data = {
1: test1,
2: test2,
3: test,
};
// If type exists in data, execute the corresponding function
data[type] && datatype;

10.默认参数值

// bad
function add(test1, test2) {
if (test1 === undefined)
test1 = 1;
if (test2 === undefined)
test2 = 2;
return test1 + test2;}

// better
add = (test1 = 1, test2 = 2) => test1 + test2;add(); //output: 3

11. 条件查找简化

如果我们想根据不同的类型调用不同的方法，我们可以使用多个 else if 语句或开关，但是还有比这更好的简化技巧吗？其实和之前的switch简化是一样的。

// bad
if (type === “test1”) {
test1();
} else if (type === “test2”) {
test2();} else if (type === “test3”) {
test3();} else if (type === “test4”) {
test4();} else {
throw new Error("Invalid value " + type);
}

// better
var types = { test1, test2, test3, test4,};types[type] && typestype;