三元操作符

如果使用if … else 语句 那么这是一个很好的节省代码的方式
比如

1
2
3
4
5
6
7
const x = 20
let answer
if (x > 10) {
    answer = 'is greater'
} else {
    answer = 'is lesser'
}

可以缩短为下面的一行代码

1
const answer = x > 10 ? 'is greater' : 'is lesser'

分配一个变量值到另一个变量值的时候，你可能想要确保变量不是null 、undefined 或 空。你可以写一个有多个if的条件语句

1
2
3
if (value !== null || value !== undefined || value !== ''){
    let newValue = value
}

但是下面的书写方式更简洁

1
const newValue = value || 'new'

js 的for循环

如果你只想要用原生的javascript 普通的写法如下

1
2
3
4
const array = ['1','2','3']
for (let i = 0; i < array.length; i ++){
    console.log(array[i])
}

更简洁的写法

1
2
3
4
const array = ['1','2','3']
for (let index in array){
    console.log(array[index])
}

Array.forEach()简写

1
2
3
4
function logArrayElements(element, index, array){
    console.log("a[" + index + "]=" + element)
}
[2, 5, 9].forEach(logArrayElements)

十进制指数

你可能看过这个 它本质上是一个写数字的奇特写法，就是一个数字后面有很多个0 例如1e7 本质相当于10000000 （1的后面有7个0）那么像这样的代码

1
2
3
for (let i = 0; i < 10000; i ++ ){
    console.log(i)
}

就可以简写成这个样子

1
2
3
for (let i = 0 ; i < 1e4; i ++){
    console.log(i)
}

箭头函数

经典函数很容易读和写，但是确实有点冗长，特别是嵌套函数中调用其他函数时还会让你困惑

1
2
3
4
5
6
7
8
9
function sayHello (name) {
    console.log('Hello , ' + name)
}
setTimeout(function () {
    console.log('Loaded')
}, 2000)
list.forEach(function(item) {
    console.log(item)
})

简写成如下

1
2
3
sayHello = name => console.log('Hello, ' + name)
setTimeout(() => console.log('Loaded'), 2000)
list.forEach(item => console.log(item))

隐式返回

return 是在函数中经常使用到的一个关键词，将返回函数的最终结果。箭头函数用一个语句将隐式的返回结果（为了省略return关键词 函数必须省略{}），如果返回一个多行语句（比如对象），有必要在函数体内使用（）代替{}。这样可以确保代码是否作为一个单独的语句返回。

1
2
3
function calcCircunference (diameter) {
    return Math.PI * diameter
}

可以简写成下面这种

1
2
3
const calcCircunference = diameter => (
    Math.PI * diameter
)

参数默认值

1
const vaolume = (l, w = 3, h =4)  => (l * w * h)

模版字符串

1
2
3
4
5
6
7
8
//  普通字符串
`In JavaScript '\n' is a line-feed`
// 多行字符串
`In JavaScript this is 
not legal`
//  字符串中嵌入变量
let name = 'Bob', time = 'today'
`Hello ${name}, how are you ${time}`