简洁高效的JavaScript编程技巧

发表时间: 2023-06-09 10:44


1、三元运算符(条件运算符):

三元运算符,也称为条件运算符,是在某些编程语言中编写 if-else 语句的一种简写方式。它需要三个操作数:要判断的条件、条件为真时要返回的值以及条件为假时要返回的值。

例子:

// Longhand if-else statementlet age = 20;let message;if (age >= 18) {  message = 'You are an adult.';} else {  message = 'You are a minor.';}// Shorthand ternary operatorlet age = 20;let message = (age >= 18) ? 'You are an adult.' : 'You are a minor.';console.log(message);

2. 短路判断:

短路判断利用逻辑运算符&&(AND) 和||(OR) 更简洁地判断。

例子:

// Longhand if statementif (array && array.length > 0) {  // Do something with the array}// Shorthand short-circuit evaluationarray && array.length > 0 && doSomething(array);

3. 默认参数值:

默认参数值是在不为特定参数传递值的情况下调用函数时使用的值。

默认参数值是在ECMAScript 2015 (ES6)中引入的,是在调用缺少或未定义参数的函数时避免错误的便捷方法。

例子:

// Longhand default parameter valuesfunction greet(name) {  name = name || 'Guest';  console.log('Hello, ' + name + '!');}// Shorthand default parameter valuesfunction greet(name = 'Guest') {  console.log('Hello, ' + name + '!');}greet(); // Output: Hello, Guest!greet('Lokesh'); // Output: Hello, Lokesh!

4.对象属性简写:

在创建对象时,我们可以使用速记符号将变量赋值为对象的同名属性。

例子:

// Longhand object property assignmentlet name = 'Lokesh';let age = 30;let person = {  name: name,  age: age};// Shorthand object property assignmentlet name = 'Lokesh';let age = 30;let person = {  name,  age};

5.解构赋值:

解构赋值是 JavaScript ES6(ECMAScript 2015)中引入的一个特性,它允许你从数组中提取值或从对象中提取属性,并以更简洁和方便的方式将它们分配给变量。它简化了从复杂结构中提取数据的过程,使您的代码更具可读性和表现力。

{}解构赋值语法对对象使用一组花括号,[]对数组使用方括号。让我们探讨一下它在不同场景下的工作原理:

例子:

// Longhand array destructuring assignmentlet numbers = [1, 2, 3];let a = numbers[0];let b = numbers[1];let c = numbers[2];// Shorthand array destructuring assignmentlet numbers = [1, 2, 3];let [a, b, c] = numbers;// Longhand object destructuring assignmentlet person = { name: 'John', age: 30 };let name = person.name;let age = person.age;// Shorthand object destructuring assignmentlet person = { name: 'John', age: 30 };let { name, age } = person;

6.箭头功能:

箭头函数为编写函数表达式提供了简洁的语法。它们对于编写更短和更易读的回调函数特别有用。

// Longhand function expressionlet add = function(a, b) {  return a + b;};// Shorthand arrow functionlet add = (a, b) => a + b;

7. 模板文字:

模板字面量是连接字符串和在反引号 (`) 内嵌入表达式的简写方式,而不是使用连接运算符或字符串插值。

例子:

// Longhand string concatenationlet name = 'Lokesh';let greeting = 'Hello, ' + name + '!';// Shorthand template literallet name = 'Lokesh';let greeting = `Hello, ${name}!`;

8. 数组方法(map、filter、reduce):

JavaScript 提供了数组方法,例如map(), filter(), 并且reduce()允许您以简洁且富有表现力的方式对数组执行常见操作。

例子:

let numbers = [1, 2, 3, 4, 5];// Longhand maplet doubled = numbers.map(function(num) {  return num * 2;});// Shorthand map with arrow functionlet doubled = numbers.map(num => num * 2);// Longhand filterlet evens = numbers.filter(function(num) {  return num % 2 === 0;});// Shorthand filter with arrow functionlet evens = numbers.filter(num => num % 2 === 0);// Longhand reducelet sum = numbers.reduce(function(acc, num) {  return acc + num;}, 0);// Shorthand reduce with arrow functionlet sum = numbers.reduce((acc, num) => acc + num, 0);