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.解构语法详解

1. 首先在 ES6中引入的“解构赋值语法”允许把数组和对象中的值插入到不同的变量中。

2. 解构赋值语法是一种 JS表达式。ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。

3. 通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量

4. 数组解构非常简单。你所要做的就是为数组中的每个值声明一个变量。你可以定义更少的变量，而不是数组中的索引（即，如果你只想解处理前几个值），请跳过某些索引或甚至使用 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;

5. 对象解构与数组解构非常相似，主要区别是可以按名称引用对象中的每个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;