26 个写高效干净JavaScript 的小技巧

// Instead of
var name = 'Lokesh Prajapati';


// Use
const name = 'Lokesh Prajapati'; // for constants
let age = 24; // for variables that may change

// Instead of
const d = new Date();


// Use
const currentDate = new Date();

const name = 'Lokesh';
console.log(`Hello, ${name}!`); // More readable

const person = { name: 'Lokesh', age: 24 };
const { name, age } = person;

function greet(name = 'Guest') {
  console.log(`Hello, ${name}!`);
}

const add = (a, b) => a + b;

async function fetchData() {
  const data = await fetch('https://api.example.com');
  return data.json();
}

// math.js
export const add = (a, b) => a + b;


// app.js
import { add } from './math.js';
console.log(add(2, 3));

const greet = name => console.log(name || 'Guest');

const age = 20;
const canVote = age >= 18 ? 'Yes' : 'No';

const nums = [1, 2, 3];
const newNums = [...nums, 4, 5];

function sum(...nums) {
  return nums.reduce((acc, curr) => acc + curr, 0);
}

fetchData()
  .then(data => processData(data))
  .then(result => displayData(result))
  .catch(error => console.error(error));

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(number => number * 2);

function processUser(user) {
  if (!user) return;
  // Process user
}

// Bad: The comment is unnecessary as the code is self-explanatory
// Increment the counter by one
counter++;


// Good: The comment provides context that the code cannot
// We increment the counter here because the user has opened a new session
counter++;


// Bad: Comment restates the code
// Check if the user is logged in
if (user.isLoggedIn) {
  // ...
}


// Good: Explains why the condition is important
// Check if the user is logged in because only logged-in users have access to premium features
if (user.isLoggedIn) {
  // Code to provide access to premium features
}

// Bad: inconsistent spacing and naming
function calculatevalue(a,b){
 const total=a+b
return total;
}


// Good: consistent naming and spacing, following a common style guide
function calculateValue(a, b) {
  const total = a + b;
  return total;
}

// Bad: doing too much in one function
function handleUserData(user) {
  if (user.age < 18) {
    console.log('User is a minor');
  } else {
    console.log('User is an adult');
  }
  // Additional unrelated tasks...
}


// Good: breaking down into smaller, focused functions
function logUserAgeCategory(age) {
  const category = age < 18 ? 'minor' : 'adult';
  console.log(`User is a ${category}`);
}

// userValidation.js
export function isValidUser(user) {
  // Validation logic...
}


// app.js
import { isValidUser } from './userValidation.js';
if (isValidUser(user)) {
  // Proceed...
}

const MAX_USERS = 10;


// Instead of
if (users.length > 10) {
  // Do something
}
// Use
if (users.length > MAX_USERS) {
  // Do something
}

const isEligibleForDiscount = (user) => user.age > 65 || user.memberStatus === 'VIP';


if (isEligibleForDiscount(user)) {
  // Apply discount
}

// Bad: unnecessary comment
// adds one to the number
const increment = (number) => number + 1;


// Good: comment explaining why
// We add 1 to include the last day of the range
const inclusiveEnd = (start, end) => end - start + 1;

const canEat = {
  eat: function() {
    console.log('Eating');
  }
};


// Composition
const person = Object.assign({}, canEat);
person.eat(); // Eating

function processOrder(order) {
  const validateOrder = (order) => {
    // Validation logic
  };

// Old way: callbacks
fs.readFile(filePath, function(err, data) {
  if (err) throw err;
  console.log(data);
});


// New way: async/await
async function readFileAsync(filePath) {
  try {
    const data = await fs.promises.readFile(filePath);
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}