JavaScript 简便、灵巧的用法你用过吗?

45 阅读3分钟

三元操作符

三元操作符(condition ? expr1 : expr2)是一个非常优雅的方式,可以简洁地表达条件语句。它通常用于控制流语句(例如 if 语句),并省略掉不必要的 else 语句。

let isTrue = true;
let result = isTrue ? "Yes" : "No";
console.log(result); // 输出 Yes

短路求值

短路求值是利用 Javascript 所支持的&&||运算符的特性,根据第一个运算数的值来决定计算第二个运算数的值,并通过短路运算来得出结果。这通常用于表达式的提前退出或缩短后端的运算。

let name = "Tom";
let welcome = name && "Welcome, " + name;
console.log(welcome); // 输出 "Welcome, Tom"
function foo(num) {
  num = num || 10; // 如果没有传入参数,num 将默认为 10
  console.log(num);
}

foo(); // 输出 10
foo(20); // 输出 20

数组解构

ES6 引入了解构语法,可以通过写出一些简短的语法来解构对象和数组。通过在解构表达式的左侧提供变量名称,可以从数组中提取和存储值。

let arr = [1, 2, 3];
let [a, b, c] = arr;
console.log(a, b, c); // 输出 1 2 3

展开运算符

展开运算符(...)使得在数组、函数调用、对象字面量等处传递多个参数或者迭代可迭代对象变得更简单。

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let combined = [...arr1, ...arr2];
console.log(combined); // 输出 [1, 2, 3, 4, 5, 6]
function foo(x, y, z) {
  console.log(x, y, z);
}

let arr = [1, 2, 3];
foo(...arr); // 输出 1 2 3

箭头函数

箭头函数是一种更简洁、更易于理解的函数语法。相较传统函数,简化了 this 的使用,以及提供了更简单的函数定义语法。

// 传统函数
function add(a, b) {
  return a + b;
}

// 箭头函数
const add = (a, b) => a + b;

更多的 JavaScript 技巧和实用方法还有很多,这里提供的只是很小的一部分。不论实用什么新特性或语法,务必了解其实现和方方面面,避免过多的语法嵌套和不必要的代码复杂度。

forEach

forEach是一种非常实用的数组方法,它可以方便地迭代数组中的每个元素并执行指定的函数操作。可以用它替代常规的 for 循环和 for...in 循环。

let arr = [1, 2, 3];
arr.forEach(function(elem) {
  console.log(elem);
});

map

map是一种转换数组的方法,它可以应用一个转换函数到数组中的每个元素,并返回一个包含转换结果的新数组。可以用它将一个数组转换成另一个新数组。

let arr1 = [1, 2, 3];
let arr2 = arr1.map(function(elem) {
  return elem * 2;
});
console.log(arr2); // 输出 [2, 4, 6]

filter

filter是一种筛选数组的方法,它可以应用一个筛选函数到数组中的每个元素,并返回一个包含筛选结果的新数组。可以用它从一个数组中筛选出符合条件的元素。

let arr1 = [1, 2, 3, 4, 5, 6];
let arr2 = arr1.filter(function(elem) {
  return elem % 2 === 0;
});
console.log(arr2); // 输出 [2, 4, 6]

find

find是一种寻找数组元素的方法,它可以应用一个验证函数到数组中的每个元素,并返回第一个符合条件的元素。可以用它寻找一个唯一符合条件的元素。

let arr = [{id: 1, name: "Tom"}, {id: 2, name: "Jack"}];
let obj = arr.find(function(elem) {
  return elem.id === 1;
});
console.log(obj); // 输出 {id: 1, name: "Tom"}

reduce

reduce是一种将数组元素按照特定方法合并的方法,它可以应用一个合并函数到数组中的每个元素,然后将其结果合并为一个最终值。可以用它将一个数组合并为一个单一的值。

let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce(function(acc, curr) {
  return acc + curr;
}, 0);
console.log(sum); // 输出 15

以上技巧都是常用的 JavaScript 语言特性之一,它们大大提高了开发效率并让代码更具可读性。