简洁的JS代码片段

2022-01-24 11:03:22 阅读：138 来源： 互联网

标签：片段简洁 const FORM console LONG JS student SHORTHAND

一、较短的if-else的空合并 (??)

let maybeSomething;

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

// SHORTHAND
console.log(maybeSomething ?? "Nothing found");

二、防止崩溃的可选链 (?.)

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

const student = {
　　name:"Mike",
　　age:18,
　　address:{
　　　　state:"New York"
　　}
}

// LONG FORM
console.log(student && student.address && student.address.state);

// SHORTHAND
console.log(student?.address?.state);

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

let x = 1;
let y = 2;

// LONG FORM
let temp = x;
x = y;
y = temp;

// SHORTHAND
[x,y] = [y,x];

四、将任何值转换未布尔值 (!!)

在js中，可以使用 !! 将任何内容转换未布尔值。

!!true;            // true
!!2;               // true
!![];              // true
!!"Test";          // true


!!false;           // false
!!0;               // false
!!"";              // false

五、传播解构

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

const student = {
　　name:"Mike",
　　age:18,
     city:"New York",
     state:true
}

// LONG FORM
const name = student.name;
const age = student.age;
const address = { city:student.city, state:student.state };

// SHORTHAND
const { name,age,...address } = student;

六、使用 && 进行短路评估 (&&)

不必用if语句检查某结果是否为真，可以使用 && 运算符。

let isReady = true;

const doSomething(){
   console.log("Yay!");         
}

// LONG FORM
if(isReady){
   doSomething();  
}

// SHORTHAND
isReady && doSomething();

七、从数组中删除重复项 (Set)

const numbers = [1,1,20,3,3,3,9,9,16];
const uniqueNumbers = [];

// LONG FORM
numbers.forEach(item => {
    if(!uniqueNumbers.includes(item)){
        uniqueNumbers.push(item);
    }
})                                         // [1,20,3,9,16]

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

八、压缩多个条件 (includes)

避免使用长 || 检查多个条件链，可以使用 includes() 方法。

const num = 1;

// LONG FORM
if(num == 1 || num == 2 || num == 3){
   console.log("Yay");
}

// SHORTHAND
if([1,2,3].includes(num)){
   console.log("Yay");
}

九、指数运算符 Math.pow() 简写 (**)

// LONG FORM
Math.pow(4,2);   // 16
Math.pow(2,3);   // 8

// SHORTHAND
4**2;            // 16
2**3;            // 8

十、四舍五入 Math.floor() 简写 (~~)

// LONG FORM
Math.floor(5.25);   // 5.0

// SHORTHAND
~~5.25;             // 5.0

标签：片段,简洁,const,FORM,console,LONG,JS,student,SHORTHAND
来源： https://www.cnblogs.com/coolsboy/p/15838561.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

简洁的JS代码片段