开发人员必须了解的 JavaScript 技巧

1. 循环对象

使用 Object.entries() 循环键值对。

const person = {
  name: 'Tony Stark',
  age: 53,
  city: 'NewYork'
};

/*
name: Tony Stark
age: 53
city: NewYork
*/
for (const [key, value] of Object.entries(person)) {
  console.log(`${key}: ${value}`);
}

说明：

• Object.entries() 将对象的属性转换为键值对数组，以便轻松迭代它们。

 

2. 从数组中删除假值

使用filter(Boolean)过滤掉虚假值。
（虚假值包括 false、0、''、null、undefined 和 NaN）

const arr = [1, 2, 0, '', undefined, null, 3, NaN, false];

const filteredArr = arr.filter(Boolean);

console.log(filteredArr); // [1, 2, 3]

说明：

• 在此代码中，布尔值作为回调函数传递给filter()。
• Boolean() 函数是 JavaScript 中的内置函数，对于真值返回 true，对于假值返回 false。
• 通过传递布尔值作为回调函数，filter() 将从数组 arr 中删除所有虚假值，并返回一个仅包含真实值的新数组 filteredArr。

 

3. 展平多维数组

使用 flat() 方法来展平数组。

const multiDimensionalArray = [[1, 2], [3, 4, [5, 6]]];
const flattenedArray = multiDimensionalArray.flat(2);

// Output: [1, 2, 3, 4, 5, 6]
console.log(flattenedArray); 

说明：

• 在此代码中，multiDimensionalArray 是一个具有两个嵌套数组的二维数组。
• 通过调用深度为 2 的 flat() 方法，所有子数组元素都连接成一个平面数组。
• 生成的 flattenedArray 在一个维度中包含原始多维数组的所有元素。

 

4. 从可迭代对象创建数组

使用 Array.from() 从可迭代对象创建数组。

// Converting String to an array
const str = "TonyStark";
const arr = Array.from(str);

// ['T', 'o', 'n', 'y', 'S', 't', 'a', 'r', 'k']
console.log(arr);

// Converting Set to an array
const set = new Set([1, 2, 3, 3, 4, 5]);
const arr = Array.from(set);
console.log(arr); // Output: [1, 2, 3, 4, 5]

说明：

• Array.from() 将可迭代或类似数组的对象（如字符串、集合、映射）转换为数组。

 

5. 从数组中提取值

使用解构从数组中提取值。

const numbers = [1, 2, 3, 4, 5];
const [first, second, , fourth] = numbers;

console.log(first); // 1
console.log(second); // 2
console.log(fourth); // 4

说明：

• 解构让您可以将数组元素直接分配给变量并跳过不需要的值。

 

6. 从对象中提取值

使用对象解构来提取属性。

const person = {
  name: 'Tony Stark',
  age: 53,
  email: 'tonystark@starkindustries.com'
};

const {name, age, email} = person;

console.log(name); // Tony Stark
console.log(age); // 53
console.log(email); // tonystark@starkindustries.com

说明：

• 解构通过将对象属性与变量匹配来提取对象属性。

 

7. 并行执行多个 Promise

Promise.all() 允许并行执行多个 Promise。

const promise1 = fetch('https://api.example.com/data1');
const promise2 = fetch('https://api.example.com/data2');

Promise.all([promise1, promise2])
  .then(responses => {
    // handle responses from both requests here
    const [response1, response2] = responses;
    // do something with the responses
  })
  .catch(error => {
    // handle errors from either request here
    console.error(error);
  });

说明：

• 在此代码中，我们使用 fetch() 方法创建两个 Promise，以从两个不同的端点获取数据。
• 然后，我们将一个 Promise 数组传递给 Promise.all()，它会返回一个新的 Promise，当数组中的所有 Promise 都已解决时，该新 Promise 就会得到解决。
• 然后我们可以使用 then() 块中的响应数组来处理两个请求的响应。如果任一 Promise 被拒绝，catch() 块将处理该错误。

 

8. 查找数组中最大和最小的数字

使用带有展开语法的 Math.max() 和 Math.min()。

const nums = [10, 12, 29, 60, 22];
console.log(Math.max(...nums)); // 60
console.log(Math.min(...nums)); // 10

说明：

• 扩展语法 (...) 扩展数组元素，允许 Math.max() 和 Math.min() 对其求值。

 

9. 将任何值转换为布尔值

使用双重否定！！转换值。

!!2; // true
!!''; // false
!!NaN; // false
!!'word'; // true
!!undefined; // false

说明：

JavaScript 中的双重否定 (
• !!) 是将任何值转换为其布尔值的技巧。
第一个
• ! 将真值转换为 false 并将假值转换为 true，第二个 ! 翻转此布尔值，结果true 表示真值，false 表示假值。

 

10. 交换变量值

使用数组解构来交换值。

let a = 5;
let b = 10;

// Swap values using array destructuring
[a, b] = [b, a];

console.log(a); // 10
console.log(b); // 5

说明：

在此示例中，
• a 和 b 的值在不使用临时变量的情况下进行交换。
右侧的
• [b, a] 创建一个新数组，其值为 b 和 a，然后解构赋值 [a, b] 将这些值分配回 a 和 b，有效地交换它们的值。

以上是开发人员必须了解的 JavaScript 技巧的详细内容。更多信息请关注PHP中文网其他相关文章！