js代码简写技巧！！！
所谓的“会偷懒”不是说工作上让你偷懒，而是在代码上面怎样精简，比如说三四行代码和一行代码实现的效果是一样的，那直接一行搞定，何乐而不为呢？哈哈，这篇文章总结了一些平时开发中写js代码常遇到的应用场景，如果大家有更好的方法也可以分享~~~
1. 三目运算符
- 当你想写if...else...可以使用三目运算符代替
let weight = 120,text
if (weight>100){
text = '胖'
} else {
text = '瘦'
}
简写：
let weight = 120,text
text = weight>100?'胖':'瘦'
2. 短路求值
- &&运算符 如果操作有false 则返回false，如果所有操作数的值都是 true，将返回最后一个表达式的值
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
- || 运算符 操作有true 就返回true ，如果所有操作数的值都是 false，将返回最后一个表达式的值
let x = 110, y;
if (0 < x < 100) {
console.log('0~100之间');
} else if (x < 200) {
console.log('100~200之间');
} else {
console.log('大于或等于200');
}
<!--简写-->
let x = 110;
let y = ((x>0 && x<100) && '0~100之间') || (x < 200 && '100~200之间') || '大于或等于200'
console.log(y)
- 判空的情况
3. 声明变量
let a
let b
let c = 2
简写：
let a,b,c=2
4. if存在条件简写
-
一般认为有内容或存在的（值或对象，0除外）进行判断时就是true值，而没有内容或不存在的（”“,undefined,null等等）进行判断时就是false值
- 常见的真值有：
if(a === true){}
if(a){}
只有a是真值时，二者语句才相等
- 常见的假值
如果判断值不是真值，则可以这样：
if(!a){}
5.数组精简技巧
1.去重
<!--第一种-->
let pigs = ['胖胖','肥肥','肉肉','肥肥']
let change = Array.from(new Set(pigs))
console.log(change) // ['胖胖','肥肥','肉肉']
<!--第二种-->
let pigs = ['胖胖','肥肥','肉肉','肥肥']
let change = [...new Set(pigs)]
console.log(change) // ['胖胖','肥肥','肉肉']
2.Array.from()
- 从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例，不改变原数组
let pigs = [
{name: '肥肥', weight: 200},
{name: '瘦瘦', weight: 100}
]
let change = Array.from(pigs,({name}) => name)
console.log(change) // ['肥肥','瘦瘦']
3.filter()方法
- 匹配数组中符合条件的某一项
let pigs=[
{name:'肥肥',id: 1,content:'吃太多会胖'},
{name: '瘦瘦',id:2,content:'少吃会瘦'}
]
console.log(pigs.filter(item=>item.id==1)
// [{name:'肥肥',id: 1,content:'吃太多会胖'}]
4.map()方法
- 数组中的每个元素都调用一个提供的函数后返回的结果
let pigs=[
{name:'肥肥',id: 1,content:'吃太多会胖'},
{name: '瘦瘦',id:2,content:'少吃会瘦'}
]
let new = pigs.map(item=>item.name=item.name+"66")
console.log(new) // ["肥肥66", "瘦瘦66"]
console.log(pigs)
//[{name:'肥肥66',id: 1,content:'吃太多会胖'},{name: '瘦瘦66',id:2,content:'少吃会瘦'}]
5.扩展运算符(...)
- 出于某种目的，需要将数组转化成对象，一个简单快速的方法是就使用展开运算符号
let pigs = [
{name: '肥肥', weight: 200},
{name: '瘦瘦', weight: 100}
]
console.log({...pigs})
//{0:{name: "肥肥",weight: 200},1:{name: '瘦瘦', weight: 100}}
- 多个数组合并起来。
let pigs = ['肥肥','瘦瘦'],fruits = ['草莓','芒果']
let all = [...pigs,...fruits]
console.log(all)
// ["肥肥", "瘦瘦", "草莓", "芒果"]
6.模板字符串(``)
- 需要拼接字符串的时候尽量改成使用模板字符串，模板字符串可以使字符串的拼接更加的简洁和直观
let pig = '肥肥',name='瘦瘦'
console.log('我吃的多，所以'+name+'会叫我'+ pig)
// "我吃的多，所以瘦瘦会叫我肥肥"
console.log(`我吃的多，所以${name}会叫我${pig}`)
// "我吃的多，所以瘦瘦会叫我肥肥"
6.解构赋值
普通赋值
let arr=[1,2,3]
let a=arr[0]
let b=arr[1]
let c=arr[2]
console.log(a,b,c)
//1,2,3
数组赋值：
let[a,b,c]=[1,2,3]
console.log(a,b,c)//1,2,3
获取对象中的值：
let {a,c,d}={a:12,c:5,d:6}
console.log(a,c,d) // 12,5,6
复杂解构
let [json,arr,num,str]=[{a:12,b:4},[2,3,6],787,'abcdes']
console.log(json,arr,num,str)
//{a:12,b:4},[2,3,6],787,'abcdes'
