编写简洁JavaScript 代码的最简单的技巧（适合初学者）

106 阅读 0 评论 70 点赞

我是靠谱客的博主内向溪流，最近开发中收集的这篇文章主要介绍编写简洁JavaScript 代码的最简单的技巧（适合初学者），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.从对象中获取值

正常代码：

let user = {
    "name": "zhangsan",
    "age": 25
}

let name = user.name
let age = user.age

console.log(name)
console.log(age)

使用对象解构的简洁代码：

let user = {
    "name": "zhangsan",
    "age": 25
}

let {name, age} = user

console.log(name)
console.log(age)

2.检查无效

在使用变量之前，我们经常需要检查其值是否为空。

正常的方法是使用 if-else

function getUserRole(role) {
    let userRole;
    if (role) {
        userRole = role;
    } else {
        userRole = 'USER';
    }
    console.log(userRole);
}
getUserRole()

使用 || 让代码看起来更简洁

function getUserRole(role) {
    console.log(role || 'USER');
}
getUserRole()

3.在数组中查找某一项

假设我们需要通过一个对象的属性从一个对象数组中查找一个对象，我们通常使用 for 循环：


let inventory = [
  {name: 'Bananas', quantity: 5},
  {name: 'Apples', quantity: 10},
  {name: 'Grapes', quantity: 2}
];

function getApples(arr, value) {
  for (let index = 0; index < arr.length; index++) {
    if (arr[index].name === 'Bananas') {
      return arr[index];
    }
  }
}

let result = getApples(inventory);
console.log( result )
//=> { name: "Bananas", quantity: 5 };

使用 array.find() 看效果


let inventory = [
  {name: 'Bananas', quantity: 5},
  {name: 'Apples', quantity: 10},
  {name: 'Grapes', quantity: 2}
];

function getApples(arr, value) {
  return arr.find(obj => obj.name === 'Bananas');
}

let result = getApples(inventory);
console.log( result )
//=> { name: "Bananas", quantity: 5 };