15个简洁的JS代码片段
1.单行If-Else语句
使用三元运算符用一行代码编写整个语句
const age=18
let ageGroup
//long form
if(age >18){
ageGroup='An adult'
}else{
ageGroup='A child'
}
//shorthand
ageGroup = age > 18 ? 'An adult' : 'A child'
但是不能过度使用,会使你的代码更加冗长。推荐做法是仅用此替换简单表达式以提高可读性并减少代码行数
2.从数组删除重复项
Js的Set集合仅允许存储唯一值,即意味着删除任何重复值
const numbers=[1,2,3,4,2,3,5]
const uniqueNumbers=[...new Set(numbers)]
// ... 展开运算符将任何可迭代对象转换为数组
3.较短的If-Else的空合并
看涨合并,检查值是否为空。该nullish合并操作??,如果没有定义左侧则返回右侧。如果是,返回左侧
let maybeSomething
//long form
if(maybeSomething){
console.log(maybeSomething)
}else{
console.log('Nothing found')
}
//shorthand
console.log(maybeSomething??'Nothing found')
or
console.log(maybeSomething || 'Nothing found')
function(obj){
let a=obj||{}
}
等价于
function(obj){
let a
if(obj === null ||
obj === undefined ||
obj === '' ||
obj === 0 ||
obj === false ){
a=obj
}else{
a={}
}
}
function(obj){
let a=obj??{}
}
等价于
function(obj){
let a
if(obj===null || obj===undefined){
a={}
}else{
a=obj
}
}
4. 防止崩溃链的可选链
可选链的用处:如果访问未定义的属性,则会产生错误。
在未定义属性时使用可选链运算符,undefined将返回而不是错误。可以防止代码崩溃
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
console.log(student?.address?.ZipCode) //doesn't exist -Returns undefined
5.在没有第三个变量的情况下交换两个变量
使用解构从数组中拆分值,可以应用于交换两个变量而无需第三个
let x=1
let y=2
//long form
let temp=x
x=y
y=temp
//shorthand
[x,y]=[y,x]
6.将任何值转换成布尔值
借助**!!**运算符
!!true //true
!!2 //true
!![] //true
!!'test' //true
!!false //false
!!0 //false
!!'' //false
7.扩展运算符
组合两个数组
const nums1=[1,2,3]
const nums2=[4,5,6]
//long form
let newArray=nums1.concat(nums2)
//shorthand
newArray=[...nums1,...nums2]
也可以使用此语法代替将值推送到数组
let numbers=[1,2,3,4]
//long form
numbers.push(4)
numbers.push(5)
//shorthand
numbers=[..numbers,4,5]
8.传播解构
使用扩展运算符将剩余元素分配给变量
const student = {
name: "Matt",
age: 23,
city: "Helsinki",
state: "Finland"
}
//long form
const name=student.name
const age=student.age
const address={city:student.city,state:student.state}
//shorthand
const [name,age,..address]=student
9.使用&&进行短路评估
不必用if语句检查某事是否为真,直接用&&运算符
let isReady=true
function doSomething(){
console.log('Yay!')
}
//long form
if(isReady){
doSomething()
}
//shorthand
isReady && doSomething()
10. 类固醇的字符串
将字符串包装在反引号内并${}用于嵌入值,从而在字符串之间插入变量
const age=41
const sentence=`I'm ${age} years old`
11.从数组中查找特定元素
**find()**方法查找匹配特定条件的元素
const fruits=[
{type:'Banana',color:'Yellow'},
{type:'Apple',color:'Green'}
]
//long form
let yellowFruit
for(let i=0;i<fruits.length;++i){
if(fruits[i].color==='Yellow'){
yellowFruit=fruits[i]
break
}
}
//shorthand
yellowFruit=fruits.find(fruit=>fruit.color === 'Yellow')
12.压缩for循环
用**forEach()**方法通过一行代码循环遍历数组
13.将对象的值收集到数组中
用**Object.values()**将对象的所有制收集到一个新数组中
let student={name:'zhangsan',age:25,sex:'man'}
//long form
let data=[]
for(ley key in student){
data.push(student[key])
}
//shorthand
const data=Object.values(student) //['zhangsan',25,'man']
14.检查一个项目是否存在于数组中
可以使用**includes()方法而不是indexOf()**方法来检查元素是否在数组中,这使你的意图非常明确
let numbers=[1,2,3]
//long form
const hasNumber1 = numbers.indexOf(1) > -1 //true
//shorthand /cleaner approach
const hasNumber1 = numbers.includes(1) // true
还可以使用**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')
}
15.解构语法详解
-
首先在 ES6中引入的“解构赋值语法”允许把数组和对象中的值插入到不同的变量中。
-
解构赋值语法是一种 JS表达式。ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。
-
通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量
-
数组解构非常简单。你所要做的就是为数组中的每个值声明一个变量。你可以定义更少的变量,而不是数组中的索引(即,如果你只想解处理前几个值),请跳过某些索引或甚至使用 REST 模式将所有剩余的值放到新数组中。
const nums=[3,6,9,12,15]
const [
k, //k=3
m, //m=6
, //skip a value(9)
...n //rest value n=[12,15]
] = nums;
- 对象解构与数组解构非常相似,主要区别是可以按名称引用对象中的每个key,从而创建一个有相同名称的变量。此外还可以将键解构为新的变量名,只解构所需的 key,然后用 rest 模式将剩余的 key 解构为新对象。
const obj={name:'zhangsan',age:25,sex:'man',desc:'boy'}
const [
name, //name='zhangsan'
age:AGE, //AGE=25
...rest //rest = {sex:'man',desc:'boy'}
] = obj;