当前位置: 首页 > news >正文

JavaScript------内建对象

一、解构赋值

1、数组的解构

1.1、解构赋值

const arr = ["孙悟空", "猪八戒", "沙和尚"];let a, b, c;[a, b, c] = arr;  // 等同于 [a, b, c] = ["孙悟空", "猪八戒", "沙和尚"]

1.2、声明同时解构

let [d, e, f, g] = ["唐僧", "白骨精", "蜘蛛精", "玉兔精"];let [d, e, f, g] = ["唐僧", "白骨精", "蜘蛛精"];   // g是undefined

注意:括号、中括号前写分号,不会报错。或者每行代码都写上分号

1.3、解构时没有对应的值,就用默认值,而不是undefined

let [d, e, f, g] = [1, 2, 3]   // g=undefinedlet [d, e, f = 77, g = 10] = [1, 2, 3]  // [1, 2, 3, 10] 覆盖f的默认值,g用默认值

1.4、...设置剩余元素的值

let [d, e] = [1, 2, 3, 4, 5]   // [1, 2]let [d, e, ...f] = [1, 2, 3, 4, 5]   //  [1, 2, 3, 4, 5] 

1.5、对以数组为返回值的函数进行解构

function fn(){return ["二郎神", "猪八戒"]
}let [name1, name2] = fn()  // [name1, name2] = ["二郎神", "猪八戒"]

1.6、快速交换两个变量的值

let a1 = 10;
let a2 = 20;
[a1, a2] = [a2, a1];   // 等号左边是变量,等号右边是值const arr2 = ["孙悟空", "猪八戒"];
[arr2[0], arr2[1]] = [arr2[1], arr2[0]];

1.7、根据需求解构数组

const arr3 = [["孙悟空", 18, "男"], ["猪八戒" ,28, "男"]]let [[name, age, gender], obj] = arr3console.log(obj)  // ["猪八戒" ,28, "男"]
console.log(name, age, gender)  // 孙悟空 18 男

2、对象的解构

2.1、解构赋值

注意加括号!

const obj = { name: "孙悟空", age: 18, gender: "男" };let name, age, gender;({ name, age, gender } = obj);   // 加括号

2.2、声明同时解构

const obj = { name: "孙悟空", age: 18, gender: "男" }let { name, age, gender } = obj   // 等同于 let { name:name, age:age, gender:gender } = obj

2.3、当变量名与对象内属性名称不一致时

const obj = { name: "孙悟空", age: 18, gender: "男" }let {name:a, age:b, gender:c} = objconsole.log(a, b, c)

2.4、解构时没有对应的值,就用默认值,而不是undefined

const obj = { name: "孙悟空", age: 18, gender: "男" }let {name:a, age:b, gender:c, address:d="花果山"} = objconsole.log(a, b, c, d)

二、对象的序列化(JSON)

1、概念

JS中的对象使用时都是存在于计算机的内存中的(0101形式)。序列化指将对象转换为一个可以存储的格式。在JS中对象的序列化通常是将一个对象转换为字符串(JSON字符串)

2、序列化的作用

对象转换为字符串后,可以将字符串在不同的语言之间进行传递。甚至人可以直接对字符串进行读写操作,使得JS对象可以不同的语言之间传递。

  • 作为数据交换的格式
  • 用来编写配置文字

3、如何进行序列化

在JS中有一个工具类 JSON (JavaScript Object Notation) JS对象表示法,可以直接使用。

JS对象序列化后会转换为一个字符串,这个字符串我们称其为JSON字符串。

4、JSON类的使用方法

4.1、JSON.stringify()

将一个对象转换为JSON字符串

const obj = {name: "孙悟空",age: 18,
}const str = JSON.stringify(obj)console.log(obj) // {"name":"孙悟空","age":18}
console.log(str) // {"name":"孙悟空","age":18}
二者打印的东西看起来一样,但是上面的字体是灰色代表一个对象,下面的字体是黑色代表JSON字符串

4.2、JSON.parse()

将一个JSON格式的字符串转换为JS对象

const obj = {name: "孙悟空",age: 18,
}const str = JSON.stringify(obj)const obj2 = JSON.parse(str) 这里obj2和obj不是同一个对象,而是obj深拷贝

4.3、手动的编写JSON字符串

在很多程序的配置文件就是使用JSON编写的

const obj = {name: "孙悟空",age: 18,
}const str2 = '{"name":"孙悟空","age":18}'

5、编写JSON的注意事项

5.1、JSON字符串有两种类型:

                            JSON对象 {}

                            JSON数组 []

const str3 = "{}"
const str4 = '[]'

5.2.、JSON字符串的属性名必须使用双引号引起来

因为一些语言中字符串只能用双引号表示,为了避免转换时的麻烦,所以一定要用双引号

5.3、JSON中可以使用的属性值(元素)

也就是所有语言都共有的数据类型就可以写,JavaScript单独有的就不可以写

                            - 数字(Number)

                            - 字符串(String) 必须使用双引号

                            - 布尔值(Boolean)

                            - 空值(Null)

                            - 对象(Object {})

                            - 数组(Array [])

const str4 = '["hello", true, []]'

5.4、JSON的格式和JS对象的格式基本上一致的

注意:JSON字符串如果属性是最后一个,则不要再加逗号

6、JSON进行深复制

const obj = {name: "孙悟空",age: 18,
}const obj2 = JSON.parse(JSON.stringify(obj)) 

相关文章:

JavaScript------内建对象

一、解构赋值 1、数组的解构 1.1、解构赋值 const arr ["孙悟空", "猪八戒", "沙和尚"];let a, b, c;[a, b, c] arr; // 等同于 [a, b, c] ["孙悟空", "猪八戒", "沙和尚"] 1.2、声明同时解构 let [d, e…...

React + Redux 处理异步请求

redux 处理异步请求 方式一:在 componentDidmount 中直接进⾏请求,在将数据同步到 redux 创建 Store 仓库 import {createStore } from redux;const defaultState = {banners: [] }const reducer =...

揭秘涨薪50%经验:从功能测试到自动化测试,我是如何蜕变的?

本人在今年互联网大环境如此严峻的情况下,作为一个刚毕业不到一年的初级测试,赶在“金三银四”依然拿到了一些面试机会,并且成功拿下4家公司的offer,其中不乏互联网大厂,而且最高总包给到了接近double(无炫…...

【论文速递】MMM2020 - 电子科技大学提出一种新颖的局部变换模块提升小样本分割泛化性能

【论文速递】MMM2020 - 电子科技大学提出一种新颖的局部变换模块提升小样本分割泛化性能 【论文原文】:A New Local Transformation Module for Few-shot Segmentation 【作者信息】:Yuwei Yang, Fanman Meng, Hongliang Li, Qingbo Wu,Xiaolong Xu an…...

补充前端面试题(二)

#$set数据变化视图不更新问题, 当在项目中直接设置数组的某一项的值,或者直接设置对象的某个属性值,这个时候,你会发现页面并没有更新。这是因为 Object.defineProperty()限制,监听不到变化。解决方式:this.$set(你要改…...

JavaScript原型、原型链、原型方法

文章目录原型和原型链prototype、 __ proto __ 、constructor原型链原型方法instanceOfhasOwnPropertyObject.create()、new Object()总结原型和原型链 prototype、 __ proto __ 、constructor 首先我们看下面一段代码 // 构造函数Personfunction Person(name, age) {this.na…...

linux篇【14】:网络https协议

目录 一.HTTPS介绍 1.HTTPS 定义 2.HTTP与HTTPS (1)端口不同,是两套服务 (2)HTTP效率更高,HTTPS更安全 3.加密,解密,密钥 概念 4.为什么要加密? 5.常见的加密方式…...

1.9实验9:配置虚链路

1.4.4实验9:配置虚链路 实验目的(1) 实现OSPF 虚链路的配置 (2) 描述虚链路的作用 实验拓扑配置虚链路实验拓扑如图1-19所示。[1] 图1-19 配置虚链路 实验步骤...

三次握手-升级详解-注意问题

TCP建立连接的过程就是三次握手(Three-way Handshake),在建立连接的过程实际上就是客户端和服务端之间总共发送三个数据包。进行三次握手主要是就是为了确认双方都能接收到数据包和发送数据包,而客户端和服务端都会指定自己的初始…...

软件架构知识3-系统复杂度-高可用性、可扩展性、低成本、安全、规模

高可用性 系统无中断地执行其功能的能力,代表系统的可用性程度,是进行系统设计时的准则之一。 高可用的“冗余”解决方案,单纯从形式上来看,和之前讲的高性能是一样的,都是通过增加更多机 器来达到目的,但…...

SpringCloud学习笔记 - 自定义及解耦降级处理方法 - Sentinel

1. SentinelRecourse配置回顾 通过之前的学习,我们知道SentinelRecourse配置的资源定位可以通过两种方式实现:一种是URL,另一种是资源名称。这两种限流方式都要求资源ID唯一 RestController public class RateLimitController {GetMapping(…...

Redis之搭建一主多从

搭建redis一主多从的过程 1.在相应位置创建一个文件夹存放redis配置文件 mkdir myredis2.复制redis配置文件到此文件夹中 cp /opt/redis/redis/bin/redis.conf /opt/myredis/redis.conf3.新建三个配置文件 touch redis6379.conf touch redis6380.conf touch redis6381.conf4…...

Transformer机制学习笔记

学习自https://www.bilibili.com/video/BV1J441137V6 RNN,CNN网络的缺点 难以平行化处理,比如我们要算b4b^4b4,我们需要一次将a1a^1a1~a4a^4a4依次进行放入网络中进行计算。 于是有人提出用CNN代替RNN 三角形表示输入,b1b^1b1的…...

1、第一个CUDA代码:hello gpu

目录第一个CUDA代码&#xff1a;hello gpu一、__global__ void GPUFunction()二、gpu<<<1,1>>>();三、线程块、线程、网格知识四、核函数中的printf();五、cudaDeviceSynchronize();第一个CUDA代码&#xff1a;hello gpu #include <stdio.h>void cpu(…...

UG二次开发装配篇 添加/拖动/删除组件方法的实现

我们在UG装配的过程中&#xff0c;经常会遇到需要调整组件目录位置&#xff0c;在软件设计过程中可以通过在目录树里面拖动组件来完成。 那么&#xff0c;如果要用程序实现组件的移动/拖动&#xff0c;我们要怎么做呢&#xff1f; 本节就完成了添加/拖动/删除组件方法的实现&…...

【ros bag 包的设计原理、制作、用法汇总】

ros bag 包的设计原理 序列化和反序列化 首先知道Bag包就是为了录制消息,而消息的保存和读取就涉及到一个广义上的问题序列化和反序列化,它基本上无处不在,只是大部分人没有注意到,举个简单的例子,程序运行的时候,是直接操作的内存,也就是一个结构体或者一个对象,但内…...

Linux网络:聚合链路技术

目录 一、聚合链路技术 1、bonding作用 2、Bonding聚合链路工作模式 3、Bonding实现 一、聚合链路技术 1、bonding作用 将多块网卡绑定同一IP地址对外提供服务&#xff0c;可以实现高可用或者负载均衡。直接给两块网卡设置同一IP地址是不可以的。通过 bonding&#xff0c…...

2023年数据安全的下一步是什么?

IT 预算和收入增长领域是每个年度开始时的首要考虑因素&#xff0c;在当前的世界经济状况下更是如此。 IT 部门和数据团队正在寻找确定优先级、维护和构建安全措施的最佳方法&#xff0c;同时又具有成本效益。 这是一个棘手的平衡点&#xff0c;但却是一个重要的平衡点&#…...

在浏览器输入URL后发生了什么?

在浏览器输入URL并获取响应的过程&#xff0c;其实就是浏览器和该url对应的服务器的网络通信过程。从封装的角度来讲&#xff0c;浏览器和web服务器执行以下动作&#xff1a;&#xff08;简单流程&#xff09;1、浏览器先分析超链接中的URL:分析域名是否规范2、浏览器向DNS请求…...

Dubbo学习

0.start 容器container启动&#xff08;spring&#xff09;&#xff0c;初始化我们的服务提供者&#xff08;Provider&#xff09;1.register 把业务层的方法&#xff0c;注册到注册中心&#xff08;Register&#xff09;2.subscribe 消费者&#xff08;Consumer&#xff09;订…...

CMMI-立项管理流程

立项管理&#xff08;Project Initialization Management, PIM&#xff09;的目的是&#xff1a;&#xff08;1&#xff09;采纳符合机构最大利益的立项建议&#xff0c;通过立项管理使该建议成为正式的项目&#xff08;即合法化&#xff09;。&#xff08;2&#xff09;杜绝不…...

看《狂飙》读人生,致敬2023!

作为2023年的第一篇博文&#xff0c;我不想写代码&#xff0c;我想谈谈最近看的《狂飙》&#xff0c;总结了十条哲理&#xff0c;共勉。希望我们的2023&#xff0c;未来的人生会更加出彩。 01 你以为很好的关系&#xff0c;其实也就那么回事。 陈金默以为高启强对他很好&…...

Web自动化测试——Junit5篇

文章目录一、相关依赖注入二、注解调用三、断言 Assert四、规定用例执行顺序五、高效参数化1&#xff09;单参数2&#xff09;多参数3&#xff09;文件获取参数4&#xff09;方法获取数据&#xff08;动态参数&#xff09;六、测试套件整活Junit 是一个面向 Java 语言的单元测试…...

Seata源码学习(二)-源码入口

Seata源码剖析-源码入口 Seata客户端启动 首先一个Seata的客户端启动一般分为几个流程&#xff1a; 自动加载各种Bean及配置信息初始化TM初始化RM&#xff08;具体服务&#xff09;初始化分布式事务客户端完成&#xff0c;代理数据源连接TC&#xff08;Seata服务端&#xff…...

2023如何选购适合游戏设计的电脑硬件

游戏设计涉及许多不同的学科&#xff0c;因此涉及许多不同的软件包。有游戏引擎本身&#xff0c;例如 Unreal Engine 和 Unity&#xff0c;以及 3D 设计软件&#xff0c;例如 3ds Max、Blender 和 ZBrush——等等&#xff01;大多数软件开发人员都维护着这些不同应用程序的系统…...

springboot maven项目集成阿里p3c-pmd插件使用

阿里巴巴规约使用的是pmd代码静态分析工具&#xff0c;通过maven-pmd-plugin这个maven插件实现。 pom文件引入 <!-- 阿里p3c插件 --> <plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-pmd-plugin</artifactId><…...

PowerJob的server启动都经历了哪些?代码不多也很简单,咱们来逐一理解。

这是一篇让你受益匪浅的文章&#xff0c;点个关注交流一下吧~ PowerJob如何使用&#xff0c;官方文档已经说的很详细了&#xff0c;即使没学过计算机的人&#xff0c;按照那上面的步骤来也是可以搭建出一个可以使用的例子来&#xff0c;所以今天就不在这里重复前人的工作&#…...

分享好玩的h5小游戏制作步骤_怎么做h5微信小游戏

近年来&#xff0c;市面上一直流行各种h5游戏&#xff0c;例如投票、答题、刮刮乐、大转盘等等等等&#xff0c;而且我在各种营销场景下经常看到它们的身影&#xff0c;是做促销&#xff0c;引流和宣传的神器之一&#xff01;那么&#xff0c;怎么做好玩的h5游戏&#xff1f;还…...

代理模式--设计模式

为什么要学习代理模式&#xff1f; 因为这是SpringAOP的底层&#xff01; 1、定义&#xff1a; 在不改变源码的情况下&#xff0c;实现对目标对象的功能扩展 根据代理类的生成时间不同可以将代理分为静态代理和动态代理两种 静态代理 角色分析 抽象角色&#xff1a;一般会…...

【RSTP的原理和配置】

一、RSTP 概述 RSTP使用了IEEE 802.1W协议&#xff0c;视为STP的改进版本&#xff0c;收敛速度快&#xff0c;兼容STP。 RSTP可以兼容STP&#xff0c;但是会丧失快速收敛等优势&#xff1b; 1、RSTP对STP的改进&#xff1b; 1.1、端口角色的增补、简化了生成树协议的理解及部…...

广州网页设计机构/seo查询爱站网

1.运动前的健康筛查与评估方法主要包括 A.目前推荐常用身体活动准备问卷 B.健康/体适能机构修正的运动前自我筛查问卷 C.心脑血管疾病危险固素评价和分级 D.基于危险分层的医学检查、运动测试和医学监督建议 E.既往身体活动水平评价,常用如国际身体活动问卷等 2.运动锻炼的医…...

宁波seo教程app推广/seo快速排名多少钱

1、阿里云服务器 https://www.aliyun.com/ 2、百度云 https://bce.baidu.com/index.html 3、腾讯云 http://www.qcloud.com/ 4、360云 https://cloud.360.cn/ 5、ucloud https://www.ucloud.cn/ 6、美团云 https://mos.meituan.com/ 7、青云 https://www.qingcloud.com/ 云服务…...

深圳市网站建设公司好不好/营销型网站分为哪几种

face recognition 项目实际使用 最近在一个公众号上看到一个推荐的github上的项目&#xff0c;号称是最简单&#xff0c;最容易上手的人脸识别项目&#xff0c;折腾了两天才算把这个模块装好&#xff0c;其实大部分时间都花在了安装各种依赖包上&#xff0c;cmake&#xff0c;…...

动态网页文件/网站优化课程

<script languagejavascript> window.onbeforeunload onbeforeunload_handler; window.onunload onunload_handler; //准备去加载 function onbeforeunload_handler(){ var warning"确认退出?"; return warning; } //加载回来准备更换页…...

网站开发需求书/seo优化方式

3X家庭净水计划 1. 双膜单出水净水机(润佳系列 RO-18) 雷谛净水器主要参数&#xff1a; 双膜单出水&#xff0c;节能节水 智能控制显示 韩国进口RO和UF膜组件 马来西亚椰壳活性炭 欧洲标准工艺流程与结构设计 水压要求&#xff1a;0.1-0.4MPa 净水流量&#xff1a;50G 冲洗方式…...

最火的二十个电商app/广州网络推广seo

这里总结了常见的一些mysql错误&#xff0c;会不断更新。 要求大家将如下错误的每个单词都知道是什么意思&#xff0c;方便调错。 --1.语法错误&#xff1a;SQL syntax [Err] 1064 - You have an error in your SQL syntax; check the manual that corresponds to your MySQL …...