Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

js简洁的秘密

吃橘子只吃皮 2020-01-10 16:37:00 阅读数:20 评论数:0 点赞数:0 收藏数:0

本文主要和大家聊一些有效的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)
}
版权声明
本文为[吃橘子只吃皮]所创,转载请带上原文链接,感谢
https://www.cnblogs.com/xiaojuziya/p/12175458.html