让你的JavaScript代码简单又高效

偶然看到一句话

前端就是面向规范编程

确实，无论是 CSS、HTML、JS 都需要注重规范，如果放飞自我很容易写出自己都看不懂的垃圾代码

下面总结一些让 JS 代码变得易懂、简洁、干净的要点

# 使用默认参数简化参数

🙅‍♂️🙅‍♂️🙅‍♂️

function getFloor(floor) {
  const res = floor || 1
  // ...code...
}

1
2
3
4

👍👍👍

function getFloor(floor = 1) {
  const res = floor
  // ...code...
}

1
2
3
4

# Object.assign 和扩展运算符...合并对象参数

🙅‍♂️🙅‍♂️🙅‍♂️

const menuConfig = {
  title: null,
  body: 'Bar',
  buttonText: null,
  cancellable: true
}

function createMenu(config) {
  config.title = config.title || 'Foo'
  config.body = config.body || 'Bar'
  config.buttonText = config.buttonText || 'Baz'
  config.cancellable =
    config.cancellable !== undefined ? config.cancellable : true
}

createMenu(menuConfig)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

👍👍👍

const menuConfig = {
  title: 'Order',
  // User did not include 'body' key
  buttonText: 'Send',
  cancellable: true
}

function createMenu(config) {
  const defaultConfig = {
    title: 'Foo',
    body: 'Bar',
    buttonText: 'Baz',
    cancellable: true
  }

  // 1. Object.assign
  let finalConfig = Object.assign(defaultConfig, config)
  // 2. Spread syntax ...
  let finalConfig = { ...defaultConfig, ...config }

  return finalConfig
  // config now equals: {title: "Order", body: "Bar", buttonText: "Send", cancellable: true}
  // ...
}

createMenu(menuConfig)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 让你的 class 支持链式调用

🙅‍♂️🙅‍♂️🙅‍♂️

class Car {
  constructor(make, model, color) {
    this.make = make
    this.model = model
    this.color = color
  }

  setMake(make) {
    this.make = make
  }

  setModel(model) {
    this.model = model
  }

  setColor(color) {
    this.color = color
  }

  save() {
    console.log(this.make, this.model, this.color)
  }
}

const car = new Car('Ford', 'F-150', 'red')
car.setColor('pink')
car.save()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

👍👍👍

class Car {
  constructor(make, model, color) {
    this.make = make
    this.model = model
    this.color = color
  }

  setMake(make) {
    this.make = make
    // NOTE: Returning this for chaining
    return this
  }

  setModel(model) {
    this.model = model
    // NOTE: Returning this for chaining
    return this
  }

  setColor(color) {
    this.color = color
    // NOTE: Returning this for chaining
    return this
  }

  save() {
    console.log(this.make, this.model, this.color)
    // NOTE: Returning this for chaining
    return this
  }
}

const car = new Car('Ford', 'F-150', 'red').setColor('pink').save()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

# 解构赋值简化变量赋值

🙅‍♂️🙅‍♂️🙅‍♂️

const obj = {
  name: 'bili',
  age: 22,
  gender: 'male'
}

const name = obj.name
const age = obj.age
const gender = obj.gender
console.log(name, age, gender) // bili 22 male

1
2
3
4
5
6
7
8
9
10

👍👍👍

const obj = {
  name: 'bili',
  age: 22,
  gender: 'male',
  skill: {
    work: 'code',
    hobby: 'sing'
  }
}

const { name, age, gender } = obj
console.log(name, age, gender) // bili 22 male

// rename
const { name: myname } = obj
console.log(myname) // bili

// nest
const {
  doing: { work }
} = obj
console.log(work) // code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

赋值解构数组

🙅‍♂️🙅‍♂️🙅‍♂️

const arr = [1, 2, 3]

const a = arr[0]
const b = arr[1]
const c = arr[2]
console.log(a, b, c) // 1 2 3

1
2
3
4
5
6

👍👍👍

const arr = [1, 2, 3]

const [a, b, c] = arr
console.log(a, b, c) // 1 2 3

// set default
const [a, b, c, d = 5] = arr
console.log(a, b, c, d) // 1 2 3 5

1
2
3
4
5
6
7
8

# Object.values() 获取对象 value 值数组

比如做 leaflet 地图应用的时候 leaflet 的点位坐标为 {lat: 50, lng: 30}

后端需要的格式是[50,30]

🙅‍♂️🙅‍♂️🙅‍♂️

const latLng = { lat: 50, lng: 30 }

const latLngArr = []

latLangArr.push(latLng[0])
latLangArr.push(latLng[1])

console.log(arr) // [ 50, 30]

1
2
3
4
5
6
7
8

👍👍👍

const latLng = { lat: 50, lng: 30 }

const latLngArr = Object.values(latLng)

console.log(arr) // [ 50, 30]

1
2
3
4
5

#JavaScript

上次更新: 2023/04/05, 09:41:10

← 前端图片处理 BEM:class命名规范→