首页 > 编程语言 >JavaScript中的析构对象,析构数组与展开运算符

JavaScript中的析构对象,析构数组与展开运算符

时间:2023-08-18 21:23:31浏览次数:45  
标签:const 析构 对象 JavaScript 运算符 数组 展开

前言

这些是JavaScript中重要的编程思想,这些析构对象,析构函数与展开运算符很重要

这块内容不怎么难,纯属一些语法,但是在所谓的函数式编程,以及React中却是广泛使用的

逆向思维,之前是怎么构造,而现在让你如何展开,获取里面的内容!!

逆向思维,之前是怎么构造,而现在让你如何展开,获取里面的内容!!

逆向思维,之前是怎么构造,而现在让你如何展开,获取里面的内容!!

 

目录

一、析构对象

二、析构数组

三、展开运算符

 

一、析构对象

构造时在等号右边使用{},而析构的原理很简单,直接逆向,直接在等号的左边来进行析构 {}=

{}中填写要获取值的名字,获取的可以是各种属性,比如数组,字符串甚至函数,可以说,很好用!!!

    const sandwich = {
        bread: "dutch crunch",
        meat: "tuna",
        cheese: "swiss",
        toppings: ["lettuce", "tomato", "mustard"]
    }

    const {bread, meat} = sandwich

    console.log(bread, meat) // dutch crunch tuna

要区分“析构对象”和“构造对象”,前者{name} = Object ,后者 object = {name: "value"}

这些是非常关键的,而且{name}可以直接作为参数,来直接对对象进行析构

一定要认识这种形式!! {name} 作为参数,对传入的对象进行析构!!

一定要认识这种形式!! {name} 作为参数,对传入的对象进行析构!!

一定要认识这种形式!! {name} 作为参数,对传入的对象进行析构!!

下面这段代码是个例子,要看看这个函数,其实一点也不难!!

    const lordify = ({firstName}) => {
        console.log(`${firstName} of Canterbury`)
    }

    const regularPerson = {
        firstName: "Bill",
        lastName: "wilSon"
    }

    lordify(regularPerson) // Bill of Canterbury

同时,也可以对嵌套对象进行处理,写的很简单 {name1 : { name2 }} 这种形式,想要什么就获取什么,这个一点也不难

如下,下面这个例子,平淡无奇写上 {spouse: {firstName}},直接析构了这个regularPerson的嵌套对象!!!

    const regularPerson = {
        firstName:"Bill",
        lastname:"WillSon",
        spouse: {
            firstName: "phil",
            lastname: "WillSon"
        }
    }

    const lordify = ({spouse : {firstName}})=>{
        console.log(`${firstName} of Canterbury`);
    }

    lordify(regularPerson) // phil of Canterbury

析构对象,其实没什么难度,关键是这种逆向思维方式,以及在参数传递时认识这种析构形式!!

析构对象,其实没什么难度,关键是这种逆向思维方式,以及在参数传递时认识这种析构形式!!

析构对象,其实没什么难度,关键是这种逆向思维方式,以及在参数传递时认识这种析构形式!!

 

二、析构数组

这个类比上面,构造数组使用 = [ xxx] ,那么析构数组很自然 [xx] .

下面直接写一个代码实例,直接不必多言,很自然的构造出来

    const [fistAnimal] = ["Horse", "Mouse", "Cat"];
    console.log(fistAnimal) // Horse

一个关键问题,数组是按顺序排序的,不想对象可以直接定位值,因此需要“列表匹配”,使用,来跳过不要的值!!

一个关键问题,数组是按顺序排序的,不想对象可以直接定位值,因此需要“列表匹配”,使用,来跳过不要的值!!

一个关键问题,数组是按顺序排序的,不想对象可以直接定位值,因此需要“列表匹配”,使用,来跳过不要的值!!

const [,,lastAnimal] = ["Horse", "Mouse", "Cat"];
console.log(lastAnimal) // cat    

如上代码,这个很好理解,使用“,”直接跳过前面两个值,这个确实比较重要!!

 

三、展开运算符

展开运算符,可以对对象和数组来进行展开,常常搭配析构数组[ ],可以达到对数组进行拆分的效果

这里展开运算符,理解清楚,展开获取时使用 ...others,而获取的数组是others而不是 ...others

这里你可能有点绕,看下面的例子就好了,如果再使用 ...others,其输出的是整个数组的字符串,类似 others.join(" ")这种形式

这个要深刻理解其原理,展开运算符,在React中经常使用!!!

const lakes = ["Donner", "Marlette", "Fallen Leaf", "Cascade"];
const [first, ...others] = lakes;
console.log(others); // ['Marlette', 'Fallen Leaf', 'Cascade']
console.log(...others); // Marlette Fallen Leaf Cascade

其除了展开数组,还可以展开对象,这是非常重要的,其可以展开对象

我举一个很好的例子,下面其实不难理解,构造新的object的时候,可以使用 ... 来展开之前的object

注意,如果不使用展开运算符,其是一个嵌套的对象,这个要不难理解!!

    const morning = {
        breakfast: "oatmeal",
        lunch: "peanut butter and jelly"
    };
    
    const dinner = "mac and cheese";
    
    const backpackingMeals = {
        ...morning,
        dinner
    }
    
    console.log(backpackingMeals);
    // {
    //     breakfast: "oatmeal",
    //     lunch: "peanut butter and jelly",
    //     dinner: "mac and cheese"
    // }

  

标签:const,析构,对象,JavaScript,运算符,数组,展开
From: https://www.cnblogs.com/qwe-asd-zxc-nm/p/17641628.html

相关文章

  • JavaScript中常见的数据结构和算法及其应用场景简介
    在JavaScript编程中,数据结构和算法是必不可少的组成部分。本文将介绍JavaScript中常见的数据结构和算法以及它们的应用场景。数据结构数组数组是JavaScript中最常见的数据结构之一。它是一种有序的集合,可以存储任意类型的数据。由于数组支持快速随机访问,因此它非常适合用于存......
  • 《Javascript中关于this作用域的箭头函数,普通函数以及回调函数中的特殊作用》
    开言这篇文章的内容很简单,一句话就是“涉及this指向谁”!!!但是涉及JavaScript的普通函数,箭头函数,WIndow,回调,Object等各种知识点其糅杂在一起,其知识点会很混乱,我们要理性头绪!!简单来说,普通函数可以看做管理严格的孩子,箭头函数是一个自由自在的孩子因此,在object中,使用箭头函数很危......
  • 7 JavaScript循环语句
    7循环语句在js中有三种循环语句.首先是while循环.它的逻辑和咱们python中的while几乎一模一样,就是符号上有些许的区别.//语法while(条件){循环体->里面可以有break和continue等关键字}/*判断`条件`是否为真,如果`真`,则执行`循环体`.执行完`循环体`,会再次......
  • 6 JavaScript条件判断
    6条件判断除了HTML以外.几乎所有的编程语言都有条件判断的功能.比如,python,我们用if语句来做条件判断.到了javascript中也是一样的,也使用javascript来做条件上的判断./*语法1*/if(条件1){代码块1}if(条件)a,b,c,d;该语法表示当条件为真.运......
  • [转]如何在 JavaScript 中遍历对象
    原文地址:如何在JavaScript中遍历对象在JavaScript中,当你听到“循环”一词时,你可能会想到使用各种循环方法,例如 for 循环、forEach() 方法、map() 方法等等。但不幸的是,这些方法对于对象不起作用,因为对象是不可迭代的。这并不意味着我们不能循环遍历一个对象——只是我......
  • C++快速入门 第二十七讲:运算符左移<<重载
    一般来说,在调用operator<<()重载函数时,传递给它的是哪一个流,它返回的就应该是那个流的一个引用。实例:左移操作符重载1#include<iostream>2#include<string>3#include<math.h>45usingnamespacestd;6classRational//定义基类7{8public:......
  • 2 JavaScript的基础类型
    2JavaScript的基础类型JS虽然是一个脚本语言.麻雀虽小,五脏俱全.在js中也是可以像其他编程语言一样.声明变量,条件判断,流程控制等等.我们先看一下JS中的数据类型在js中主要有这么几种数据类型(基本)number数字,不论是整数还是小数,数据类型都是numberstring字......
  • QtWebChannel和JavaScript进行通信(简单理解)
    说明在使用Qt(C++)和JavaScript之间实现通信时,通常会使用一些模块和技术来使两者能够交互和传递数据。这种通信通常用于在Qt应用程序中嵌入Web内容,或者在Web页面中嵌入Qt应用程序。以下是一些常用的模块和技术,以及它们的作用QtWebEngine模块:作用:QtWebEngine是Qt中的Web引擎,允......
  • JavaScript-数据类型
    JavaScript语言的每一个值,都属于某一种数据类型。JavaScript的数据类型,共有六种。(ES6又新增了Symbol和BigInt数据类型,本教程不涉及。)数值(number):整数和小数(比如1和3.14)。字符串(string):文本(比如HelloWorld)。布尔值(boolean):表示真伪的两个特殊值,即true(真)和false(假)。undefined:表......
  • javascript学习笔记day3
    今天没做啥笔记都是些学了的基础知识,学的都是像while,switch这些基础的语法,下面带是笔记++i前置运算和i++后置运算的区别:前置运行先相加再计算,后端运算先计算完再++。比较符也有隐式转换brank退出循环continue退出本次循环继续下次循环 顺便把while的循环作业一起放上来了,这个......