本文主要和大家聊一些有效的JS小技巧，有需要的朋友可以参考下，希望能帮助到大家
1、三元运算符号
当你有项目中写if...else语句的时候且不是多重判断的情况下，可以考虑使用三元运算符来代替，这样代码可以简洁很多...
// bar let num = 10 if (num > 5) { num-- } else { num++ } // good num > 5 ? num-- : num++
2、&& 符号代替 if 语句
如果你的项目中if条件语句是单一行代码，我们可以简化成
// bar let num = 4 const MAX_LENGHT = 8 if (num < MAX_LENGHT) { console.log(`${num}的长度小于${MAX_LENGHT}`) } // good num < MAX_LENGHT && console.log(`${num}的长度小于${MAX_LENGHT}`)
3、数组去重
这个在开发中也经常会使用到，使用ES6语法简化成
// ES5写法 let arr = [1, 8, 8, 0, 15, 8] function unique(arr) { for (var i = 0; i < arr.length; i++) { for (var j = i + 1; j < arr.length; j++) { if (arr[i] == arr[j]) { arr.splice(j, 1) j-- } } } return arr } console.log(unique(arr)) // [1, 8, 0, 15] // ES6写法 function unique(arr) { return Array.from(new Set(arr)) } console.log(unique(arr)) // [1, 8, 0, 15]
4、使用函数式编程代替传统的for循环
// bar let arr = [4,5,8,9] for (let i = 0; i < arr.length; i++) { arr[i] = arr[i] + 1 } // good arr.forEach(item => { item++ })
5、箭头函数
// bar function getStyle () { } function setControlKey (id, key) { } // good getStyle = () => { } setControlKey = (id, key) => { }
6、模板字符串
使用${}直接放入变量即可，用起来十分顺手~记得是反引号！！！强烈推荐重复三次！！！
// bar let name = 'Linda' let age = 22 console.log('I am' + ' ' + name + ',' + 'I' + ' '+ age + ' ' + 'years old') // 把这句话拼接出来，别提有多难受了 // I am Linda,I 22 years old // good console.log(`I am ${name},I ${age} years old`) // 简写顺手
7、Array.find
// bar const data = [ { type: 'dog', color: 'brown' }, { type: 'dog', color: 'white' }, { type: 'dog', color: 'black' }, { type: 'cat', color: 'white' }, { type: 'bird', color: 'blue' } ] function findeAnimalClor(type, color) { for (let i = 0; i < data.length; i++) { if (data[i].type == type && data[i].color == color) { return data[i] } else { break } } } console.log(findeAnimalClor('dog','brown')) // {type: "dog", color: "brown"} // good let catColor = data.find(item => item.type === 'cat' && item.color === 'white') console.log(catColor) // {type: "cat", color: "white"}
8、伪数组转换成真数组
<body>
<ul>
<li>这是第1个li元素</li>
<li>这是第2个li元素</li>
<li>这是第3个li元素</li>
<li>这是第4个li元素</li>
<li>这是第5个li元素</li>
</ul>
</body>
</html>
<script>
// 使用以下两种方法都可以把伪数组转换成真数组
let liArr1 = [...document.querySelectorAll('li')]
let liArr2 = Array.from(document.querySelectorAll('li'))
</script>
9、函数默认值
// bar function getName(name) { var name = name || '小玉' console.log(name) } // good let getName = (name = '小玉') => { console.log(name) }