前端工程师代码简约方式

在前端工程师中，代码简洁至关重要。不仅提高了程序代码易读性和可扩展性，还能让编码更加容易拓展和器重。下面为大家介绍一些前端代码简约的方式。

主要参数初始值

// 传统式书写
function greeting(name) {
  name = name || 'Guest';
  console.log('Hello, '   name   '!');
}

// 应用初始值
function greeting(name = 'Guest') {
  console.log('Hello, '   name   '!');
}

箭头函数

var sum = function(a, b) {
  return a   b;
}

// 应用箭头函数
const sum = (a, b) => a   b;

模版字符串数组

// 传统式书写
var name = 'Alice';
console.log('Hello, '   name   '!');

// 应用模版字符串数组
const name = 'Alice';
console.log(`Hello, ${name}!`);

对象字面量缩写

// 传统式书写
var firstName = 'John';
var lastName = 'Doe';
var user = {
  firstName: firstName,
  lastName: lastName
};

// 应用缩写
const firstName = 'John';
const lastName = 'Doe';
const user = { firstName, lastName };

解构赋值

// 传统式书写
var user = {
  firstName: 'John',
  lastName: 'Doe'
};
var firstName = user.firstName;
var lastName = user.lastName;

// 应用解构赋值
const user = {
  firstName: 'John',
  lastName: 'Doe'
};
const { firstName, lastName } = user;

Array.prototype.map()

// 传统式书写
var numbers = [1, 2, 3];
var doubledNumbers = [];
for (var i = 0; i < numbers.length; i  ) {
  doubledNumbers.push(numbers[i] * 2);
}

// 应用map()
const numbers = [1, 2, 3];
const doubledNumbers = numbers.map(number => number * 2);

Array.prototype.filter()

// 传统式书写
var numbers = [1, 2, 3, 4, 5];
var evenNumbers = [];
for (var i = 0; i < numbers.length; i  ) {
  if (numbers[i] % 2 === 0) {
    evenNumbers.push(numbers[i]);
  }
}

// 应用filter()
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(number => number % 2 === 0);

Array.prototype.reduce()

// 传统式书写
var numbers = [1, 2, 3, 4, 5];
var sum = 0;
for (var i = 0; i < numbers.length; i  ) {
  sum  = numbers[i];
}

// 应用reduce()
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((total, number) => total   number, 0);

尽量使用局部变量

局部变量也会导致用户标识符矛盾和意料之外的取值，最好是尽量使用。能将所需要的变量定义在变量内部结构或使用模块化的方法管理方法自变量。

// 不建议使用局部变量
const name = '张三';
function getName() {
  return name;
}

// 建议使用函数公式内部结构自变量
function getName() {
  const name = '张三';
  return name;
}

// 建议使用模块化设计
// moduleA.js
export const name = '张三';
// moduleB.js
import { name } from './moduleA.js';

应用二维数组跟对象结构

结构能让编码更为简约，同时提升易读性。

// 二维数组结构
const arr = [1, 2, 3];
const [first, second, third] = arr;

// 目标结构
const obj = { name: '张三', age: 18 };
const { name, age } = obj;

应用面向对象编程观念

面向对象编程观念能让编码更为简约，同时提升可扩展性。可以用纯函数、高阶函数、柯里化等形式。

// 纯函数
function add(a, b) {
  return a   b;
}

// 高阶函数
function double(fn) {
  return function(num) {
    return fn(num) * 2;
  }
}

// 柯里化
function add(a) {
  return function(b) {
    return a   b;
  }
}

以上就是一些简单的实例，自然还有很多的的方式和方法可用于让前端代码更为简约。总而言之，根据使用这种方式和方法，大家能让编码更为便于阅读文章、日常维护拓展，提升研发效率。

系列文章

• 10个非常好用的reduce操作技巧
• 10个非常好用的Set、Map操作技巧
• 10个非常实用的Javascript方法

我更深层次的前面新闻资讯

欢迎各位行业交流 资料分享 捞鱼 寻求帮助均可 —连接