想提升JavaScript技能，你得掌握这5大关键概念

骑猪看日落 2022-12-11 15:03 139阅读 0赞

全文共3576字，预计学习时长9分钟

![759c7d1a27dd4d8d3a3bffe5228f38ae.png][]

图源：unsplash

学习一种语言或框架的核心概念，从而高效编写代码，这是个不错的想法。然而，如果你想快速学习新东西，必然需要阅读冗长的说明，这会很麻烦。因此，本文将简单地解释一些核心概念帮助你更轻松地去理解它们。

这些概念将改变你的编码方式，助你写出高质代码，成为高效的开发人员。基于在编码领域的受欢迎度，笔者挑选出了下面这些概念。一起开始吧！

**1．解构**

从对象中提取属性有几种方法，解构就是其中之一。它有助于清晰地提取对象的属性、从数组中赋值或将对象的属性赋给变量。之所以优于其他方法，是因为它允许在单个语句中提取多个属性，可以从嵌套对象中访问属性，还可以在属性不存在时为其赋默认值。

比如以下对象。

const profile = {
       name: "Harry",
       age: 15,
       country: "UK"
    };

运用解构，可以在单个语句中提取此对象的一个或多个属性。

const { name, age } = profile; console.log(name, age);
    // Harry 15

给属性赋值是解构的另一种用法，不存在的属性将返回指定默认值。

const { name, age, school = "Hogwarts" } =profile;console.log(school);
    // Hogwarts

此外，数组解构也很流行，可以为变量分配默认值，在变量之间交换值等。在引入ES6之前，还不存在可以一次提取所有数据的机制。因此，解构是一个工具概念，可以让代码更纯净。

**2.Spread语法**

将spread运算符用于可迭代对象（如数组和字符串），它有助于将可迭代对象扩展为单个元素。扩展运算符的语法为三个点( ... )。

例如，假设一个函数需要三个参数，而我们有一个包含三个元素的数组。通过使用spread语法，可以将数组传递给这个函数，它将迭代数组，并将元素分配给函数的相关参数。

function sum (a, b, c) {
       return a + b + c;
    }const numbers = [1, 2, 3];console.log(sum(...numbers));
    // 6

在ES6中引入spread运算符之前，使用数组将参数传递给函数要复杂得多。

spread语法的另一种用法是连接数组。假设有两个数组，如下所示：

const vegetables = ["carrot", "pumpkin"];
    const fruits = ["apple", "pear"];

在引入spread语法前，必须使用array.concat方法来组合这些数组。然而，使用spread语法，数组组合变得非常容易。

const newArray = [ ...vegetables, ...fruits ];console.log(newArray);
    // ["carrot", "pumpkin", "apple","pear"]

此外，还可以使用spread运算符创建具有完全相同内容但引用不同的对象副本。

![c793c0df5d89b575a522a23ab5ba9d1f.png][]

图源：unsplash

**3. Rest语法**

rest语法使用规范与spread语法相同。区别在于，spread会复制所有内容，而如果想要检索所有剩余元素时，就可以使用rest语法。

const numbers = [1, 3, 2, 6, 8];const [1, 3, ...rest] =numbers;console.log(rest);
    // [2, 6, 8]

**4.数组方法**

JavaScript数组方法为数组中的数据转换提供了一种干净简洁的解决方案。在众多可用的数组方法中，我将介绍4种最重要的方法，即map, filter, reduce 和 some。

· Map

此方法返回一个数组，其中数组中的每个元素都根据指定函数进行转换。比如，如果要将数组的每个元素乘以2，就可以使用map方法，在单个语句中完成这项工作，而不需要任何复杂循环。此外，map方法不会改变原始数据。

const array = [1, 2, 3];
    const mapped = array.map(element => element * 2);console.log(mapped);
    // [2, 4, 6]
    · Filter

此方法返回一个元素数组，其中函数返回true。比如，如果需要从数组中检索偶数，则可以按如下方式筛选数组。

const numbers = [1, 2, 3, 4, 5, 6];
    const evenNumbers = numbers.filter(element => element % 2 ===0);console.log(evenNumbers);
    // [2, 4, 6]
    · Reduce

此方法根据函数指定的值进行累积。

const arr = [1, 2, 3, 4, 5, 6];
    const reduced = arr.reduce((total, current) => total +current);console.log(reduced);
    // 21

这三种方法是数组中功能强大的数据转换方法，可以得到非常清晰易读的代码。使用这些方法可以编写更简单、更短的代码，而不必担心循环或分支。这些数组方法对于JavaScript开发人员来说非常重要，它可以减少代码、减少人工操作并提高可读性。

· Some

如果数组中的某些元素通过了指定函数的测试，则此方法返回true。如果没有元素与该函数相对应，则此方法返回false：

const array = [1, 2, 3, 4, 5];const isEven = (element) => element % 2=== 0;console.log(array.some(isEven));
    // true

与在数组中迭代查找结果的传统方法相反，该方法在查找符合特定条件数组中的元素时非常有用。

![f7b92c8b4f304e2d3f6299cc71d17a30.png][]

图源：unsplash

**5. 值与引用变量分配**

如何给变量赋值是每个JavaScript开发人员都应该知道的一个最重要的概念。如果不知道这一点，就可能会给变量赋值并无意中更改掉了，这将导致代码中出现意外错误。

JavaScript总是按变量的值分配变量。但是主要有两种赋值类型：如果赋值是JavaScript基元类型(boolean、null、undefined、string、number、bigint和symbol)，则实际值被赋给变量。但如果分配的值是Array, Function,或Object，则分配的是内存中对象的引用，而不是实际值。

一起来看下面几个例子，加深理解。考虑变量name1和name2：

let name1 = "John";
    let name2 = name1;

变量name2被分配为变量name1，因此，这些变量属于基元类型，所以实际值(“John”)被分配给这两个变量。因此，这两个变量可以看作是两个值相同的独立变量。由于这个原因，重新分配第二个变量不会影响第一个变量。这称为按值分配变量。

name2 = "Peter";console.log(name1, name2);
    // "John", "Peter"

另一种方法是通过引用分配变量。如果变量类型是array, object,或 function，则在内存中为变量分配一个引用，而不是实际值。来看看以下对象赋值。

let obj1 = { name: "Lucy" }
    let obj2 = obj1;

通过该赋值，变量obj2获得与obj1相同的内存引用。因此，改变obj2 也会影响obj1，因为它们不再被视为单独的变量。这两个变量在内存中有相同的引用。

obj2.name = "Mary";console.log(obj1);
    // { name: "Mary" }console.log(obj2);
    // { name: "Mary" }

如果需要在内存中创建具有不同引用的相同对象的副本，可以使用spread运算符。以这种方式改变新创建的对象不会影响第一个对象，因为它们在内存中有不同的引用。

let object1 = { name: "Lucy" };
    let object3 = {...object1}object3.name = "Anne";console.log(object1);
    // { name: "Lucy" }console.log(object3);
    // { name: "Anne" }

掌握这些概念将助你编写更好、更简洁的代码。以上讲到的这些核心概念，你了解了嘛？

![551f9994553c950aff2cb130e7ac905d.png][]

**一起分享AI学习与发展的干货**

**欢迎关注全平台AI垂类自媒体 “读芯术”**

![format_png][]

（添加小编微信：dxsxbb，加入读者圈，一起讨论最新鲜的人工智能科技哦～）

[759c7d1a27dd4d8d3a3bffe5228f38ae.png]: /images/20221123/49181fc89c414932bd3121d701e4fff0.png
[c793c0df5d89b575a522a23ab5ba9d1f.png]: /images/20221123/0a59d34d05f4465da6821827d6ec18d4.png
[f7b92c8b4f304e2d3f6299cc71d17a30.png]: /images/20221123/7305d68c27b845b5a0e5cd373209f750.png
[551f9994553c950aff2cb130e7ac905d.png]: /images/20221123/ca8917a452d445129e0f43093b5433fc.png
[format_png]: /images/20221123/129b03e3ed84485989f1f7457deaecf7.png