20个JS精简代码无形装逼集合,最为致命,记得收藏好

简介: 20个JS精简代码无形装逼集合,最为致命,记得收藏好

1、单行 If-Else 语句


这是许多编程语言的共同特征。你可以使用三元运算符用一行代码编写整个语句,而不是在多行上编写 if-else.

例如


const age = 12;
let ageGroup;
// LONG FORM
if (age > 18) {  
ageGroup = "An adult";
} else {  
ageGroup = "A child";
}
// SHORTHANDageGroup = age > 18 ? "An adult" : "A child";


但是,不要过度使用它。它会使你的代码更加冗长。明智的做法是仅用此替换简单的表达式以提高可读性并减少代码行数。


2、从数组中删除重复项


在 JavaScript 中,Set 是一个集合,它允许你仅存储唯一值。这意味着删除任何重复的值。

因此,要从数组中删除重复项,你可以将其转换为集合,然后再转换回数组。


const numbers = [1, 1, 20, 3, 3, 3, 9, 9];
const uniqueNumbers = [...new Set(numbers)]


困惑吗?让我解释一下它是如何工作的:

1)、new Set(numbers)从数字列表中创建一个集合。创建集合会自动删除所有重复值。2)、展开运算符…将任何可迭代对象转换为数组。这意味着将集合转换回数组。[…new Set(numbers)]


3、 较短的 If-Else 的空合并


这也是 if-else 的简写。

你可以使用看涨合并,而不是使用 if-else 构造来检查值是否为空。该nullish合并操作 ??,如果没有定义左侧返回右侧。如果是,则返回左侧:


let maybeSomething;
// LONG FORM
if(maybeSomething){  
console.log(maybeSomething)
} else {  
console.log("Nothingfound")
}
//SHORTHAND
console.log(maybeSomething ?? "Nothing found")



4、防止崩溃的可选链


如果访问未定义的属性,则会产生错误。这就是可选链的用武之地。

在未定义属性时使用可选链运算符,undefined将返回而不是错误。这可以防止你的代码崩溃。例如:


graph TD;
A-->B;
const student = {
  name: "Matt",
    age: 27,  
    address: {    state: "New York"  },
    };
    // LONG FORM
    console.log(student && student.address && student.address.ZIPCode); 
    // Doesn't exist - Returns undefined
    //SHORTHAND
    console.log(student?.address?.ZIPCode);
     // Doesn't exist - Returns undefined
B-->C;


5、在没有第三个变量的情况下交换两个变量


在 JavaScript 中,你可以使用解构从数组中拆分值。这可以应用于交换两个变量而无需第三个:


let x = 1;
let y = 2;
// LONGER FORM
let temp = x;
x = y;
y = temp;
// SHORTHAND
[x, y] = [y, x];


6、将任何值转换为布尔值


在 JavaScript 中,你可以使用 !! 在 JS 中将任何内容转换为布尔值。

例如,这里有一些例子:


!!true    // true
!!2       // true
!![]      // true
!!"Test"  // true
!!false   // false
!!0       // false
!!""      // false



7、扩展运算符


使用扩展运算符组合两个数组…:


const nums1 = [1, 2, 3];
const nums2 = [4, 5, 6];// LONG FORMlet newArray = nums1.concat(nums2);
// SHORTHAND
newArray = [...nums1, ...nums2];


也可以使用此语法代替将值推送到数组:

在这里插入代let numbers = [1, 2, 3];
// LONGER FORM
numbers.push(4);
numbers.push(5);
// SHORTHAND
numbers = [...numbers, 4, 5];


8、传播解构


使用扩展运算符将剩余元素分配给变量:


const student = {
  name: "Matt",  age: 23,  city: "Helsinki",  state: "Finland",};
  // LONGER FORMconst
   name = student.name;
   const age = student.age;
   const address = { city: student.city, state: student.state };
   // SHORTHAND
   const { name, age, ...address } = student;


相关文章
|
4天前
|
前端开发 JavaScript
js 等待接口访问成功后执行指定代码【3种方法】(含async await Promise的使用)
js 等待接口访问成功后执行指定代码【3种方法】(含async await Promise的使用)
6 1
|
4天前
|
JavaScript
js 【实用技巧】给全文代码添加一键复制按钮
js 【实用技巧】给全文代码添加一键复制按钮
11 1
|
5天前
|
前端开发 JavaScript 定位技术
JavaScript 等待异步请求数据返回值后,继续执行代码 —— async await Promise的使用方法
JavaScript 等待异步请求数据返回值后,继续执行代码 —— async await Promise的使用方法
12 1
|
6天前
|
JSON JavaScript 前端开发
JavaScript 技巧:干净高效的代码写法
JavaScript 技巧:干净高效的代码写法
10 1
|
6天前
|
前端开发 JavaScript Serverless
前端新手建议收藏的JavaScript 代码技巧
前端新手建议收藏的JavaScript 代码技巧
|
1天前
|
JavaScript API 索引
JS【详解】Set 集合 (含 Set 集合和 Array 数组的区别,Set 的 API,Set 与 Array 的性能对比,Set 的应用场景)
JS【详解】Set 集合 (含 Set 集合和 Array 数组的区别,Set 的 API,Set 与 Array 的性能对比,Set 的应用场景)
6 0
|
1天前
|
JavaScript
js 延时执行代码的最佳实践 —— 自定义 sleep 函数
js 延时执行代码的最佳实践 —— 自定义 sleep 函数
2 0
|
1天前
|
JavaScript 前端开发
js【深度解析】代码的执行顺序
js【深度解析】代码的执行顺序
6 0
|
4天前
|
存储 缓存 JavaScript
浅谈JS的映射和集合
浅谈JS的映射和集合
|
4天前
|
Web App开发 JavaScript 前端开发
Android端使用WebView注入一段js代码实现js调用android
Android端使用WebView注入一段js代码实现js调用android
14 0