文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

编写代码所掌握的概念有哪些

2024-04-02 19:55

关注

本篇内容主要讲解“编写代码所掌握的概念有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“编写代码所掌握的概念有哪些”吧!

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运算符创建具有完全相同内容但引用不同的对象副本。

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。

此方法返回一个数组,其中数组中的每个元素都根据指定函数进行转换。比如,如果要将数组的每个元素乘以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开发人员来说非常重要,它可以减少代码、减少人工操作并提高可读性。

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

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

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

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" }

到此,相信大家对“编写代码所掌握的概念有哪些”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯