常见问题的 JavaScript 代码片段

最后更新于 2021 年 7 月 27 日

每种编程语言都有其缺陷和怪癖。 JavaScript 语言，甚至使用的 JavaScript 代码片段也不例外。 脚本语言近年来表现得很奇怪，但它是当今使用最广泛的语言之一。 在很大程度上是因为它是互联网浏览器的主要交互语言。

作为程序员和编码员，有时我们会遇到重复的、简单的任务问题，我们需要简单的代码片段。 在这篇博客中，我将介绍一些常见问题，这些问题可以使用 ES6 脚本作为一些 JavaScript 代码片段的一部分轻松解决。

JavaScript 代码片段提示：使用 'let' 而不是 'var'

let类似于var但let有作用域。 let只能在声明并赋值的块作用域级别访问。 var可以在任何级别访问它所定义的块范围。 在以下示例中，变量 'num1' 在If语句中定义，因此在函数外部无法访问。

 如果真实） {
  让 num1 = 40;
}

让 num2 = 20;

控制台.log(num2, num1);
控制台.log(num1);

输出：
20
不明确的

让 a = 25;
让 b = 50;

如果真实） {
  让 a = 100;
  变量 c = 5;
  控制台.log(a/c);
  控制台.log(b/c);
}

控制台.log(c);
控制台.log(a);

输出：
20
10
5
25

当变量值不变时使用 'const'

const将常量值分配给无法更改的变量。 每当定义 const 变量时，JavaScript 都会将值的地址引用到该变量。

JavaScript 代码片段的箭头函数，一种新的函数语法

ES6 中的 JavaScript 代码片段的函数已更改为更简单的表达式，'() => {}'。

 // 旧语法
功能我你好（）{
  console.log("Hello World..!");
}

// 新语法
var myHello = () => {
  console.log("Hello World..!");
}

新语法最初可能有点令人困惑。 语法有两部分。

 var myHello = ()

JavaScript 代码片段的第一部分声明了一个变量并将函数 () 分配给它。 它只是说变量是一个函数。

 => { //做点什么 } 

第二部分声明函数的主体部分。 带有花括号的箭头部分定义了正文部分。

其他示例，但带有参数。

 让 withParameters = (a, b) => {
  控制台.log(a+b);
}

withParameters(10, 20);

输出：
30

 让 sumOfNum = (a, b = 10) => {
  返回 a + b;
}

控制台.log(sumOfNum(20);
console.log(sumOfNum(20,30);

输出：
30
50

新的'for...of...'循环

for...of与for...in非常相似，只是稍作修改。 for...of遍历像 Array 这样的元素列表，并一一返回元素（不是它们的索引）。 请注意，变量“num”输出数组中的每个元素，而不是索引。

 让数字 = [5,6,7,8];

for（让数字数量）{
  控制台.log（值）；
}

输出：
5
6
7
8

 让 str = 'Arturo';

for (let char of str) {
  控制台.log(char);
}

输出：
一个
r
吨
你
r
○

破坏变量赋值

从数组中逐一分配变量既耗时又愚蠢。 只需使用析构函数赋值即可更快更轻松地完成此任务：

 让 profile = ['John', 32, 'engineer'];

让 [姓名，年龄，工作] = 个人资料；

控制台.log（名称）；

输出：
约翰

在对象数组中查找特定对象

您需要在 JavaScript 中完成的最常见任务之一是遍历对象数组以查找特定对象。 find 方法在这里是一个简单的解决方案。 您只需使用匿名函数作为参数插入选择标准，就可以设置：

 让员工= [
  { id: 0, name: 'Nina' },
  { id: 1, name: '凯文' },
  { id: 2, name: '约翰' }
]

让员工 = staff.find(emp => emp.name === 'John');

控制台.log（客户端）；

输出：
{ id: 2, name: '约翰' }

循环对象键和值

我们的数据结构可能是一个包含各种键/值对的复杂对象。 迭代每一对可能有点奇怪，但是一旦我们开始使用 Object 的函数就很简单了。

Object的key被抓取后，我们可以同时循环遍历key和value。 在接下来的解决方案中，我们在循环期间使用键和值变量访问每一对。

 让 myObject = { 彼得：15，约翰：20，安妮：35 }；

Object.keys(myObject).forEach((key, value) => {
  //...做一点事
  控制台.log（键，值）；
});

输出：
彼得 15
约翰 20
安妮 35

根据条件过滤对象数组

有时我们有大量数据，我们想根据特定条件过滤掉项目。 我们可以通过一个过滤函数来完成这个。 以下解决方案具有一组文件路径。 一些文件位于目录“data1”中，而其他文件位于目录“data2”中。 假设我们只想过滤特定目录：

 让位置 = [
  “文件/数据1/文件”，
  “文件/数据1/文件2”，
  “文件/data2/文件”，
  “文件/数据2/文件2”
];

让 filter = location.filter(path => path.includes('data2'));

控制台.log（过滤器）；

输出：
['文件/目录2/文件'，'文件/目录2/文件2']

通过指定路径字符串必须包含字符串“data2”，我们过滤掉任何不包含“data2”的路径。 请记住，您传递给 filter 的任何函数都必须返回 true 才能将项目包含在结果中。

将键分配给具有相同名称的对象

当您将键分配给对象时，如果键与保存要分配的值的变量同名，则可以完全省略值分配。 这可以防止你不得不重复自己，这是我们都讨厌做的事情。 看看这个例子：

 让名字='约翰';
让年龄= 32；
让工作 = '工程师';

// 而不是这个
让 profile1 = { 姓名：姓名，年龄：年龄，工作：工作 }；

// 做这个
让 profile2 = { 姓名、年龄、工作 };

控制台.log(profile2);

输出：
{ 姓名：“约翰”，年龄：32，工作：“工程师”}

使用 ES6 扩展运算符 '...'

扩展运算符允许您从字面上“扩展”一个数组。 这可用于将数组转换为参数列表，甚至组合两个数组。 您也可以使用它来形成函数的参数列表。

在第一个示例中，我们展示了扩展运算符如何在数组上工作并将每个项目转换为单个元素。

 让 numbers1 = [1,2,3,4,5];

控制台.log(...numbers1);

输出：
1 2 3 4 5

第二个示例通过创建一个包含两个内容的新临时数组来组合两个数组的内容。

 让 numbers2 = [6,7,8,9,10];

让组合 = [...numbers1, ...numbers2];

console.log(...组合);

输出：
1 2 3 4 5 6 7 8 9 10

最后一个示例说明了扩展运算符如何将数组转换为函数的参数列表。 Math.max 返回传递给它的参数列表中的最大数字。 其中一个论点是 10，这是最高的。

 让 numbers1 = [1,2,3,4,5];

让 numbers2 = [6,7,8,9,10];

让组合 = [...numbers1, ...numbers2];

console.log(Math.max(...combined));

输出：
10

新的 Getter 和 Setter 函数

Getter 和 setter 是 ES6 中引入的有用特性之一。 如果我们在 JavaScript 中使用类，它会派上用场。

 类人名 {
  构造函数（名称）{
    this.name = 名称；
  }
  获取名称（）{
    返回这个名称；
  }
  设置名称（名称）{
    this.name = 名称；
  }
}

let person = new PersonName("Jon Snow");
console.log(person.Name); // (一)

person.Name = "丹妮"; // (B)
console.log(person.Name);

输出：
琼恩·雪诺
丹妮

我们可以看到 PersonName 类中有两个具有“get”和“set”属性的函数。 “get”属性用于获取变量的值，“set”属性用于设置变量的值。 我们也可以看到， get Name 函数（A）是不带括号调用的， set Name 函数（B）是不带括号调用的，就像给变量赋值一样。