前端基础总结

1.将一个数组转换为另一个新的数组

在前端页面中,将数组A赋值给数组B,再将数组A赋值给数组C,改变数组C的值,数组A和数组B的值同时发生改变,因为3个数组都是指向同一内存地址,要避免这种情况,可以采用如下方式

①使用数组concat方法

concat方法是将两个数组拼接起来生成一个新的数组。

var arr1=[1,2,3];
var arr2=arr1.concat();
arr2.push(4);
console.log('arr1的值为:'+arr1);
console.log('arr2的值为:'+arr2);

②使用数组的slice方法

slice方法是提取数组的一部分生成一个新的数组

var arr1=[1,2,3];
var arr2=arr1.slice();
arr2.push(4);
console.log('arr1的值为:'+arr1);
console.log('arr2的值为:'+arr2);

③使用Array.from方法

Array.from() 方法是 JavaScript 中用于从类数组对象或可迭代对象创建一个新的数组实例的静态方法。它接受一个类数组对象或可迭代对象作为参数,并返回一个新的数组实例,其中包含传入对象的所有元素。

// 从类数组对象(比如字符串)创建数组
const str = 'hello';
const arr = Array.from(str);
console.log(arr); // ['h', 'e', 'l', 'l', 'o']// 从可迭代对象(比如 Set)创建数组
const set = new Set([1, 2, 3, 4, 5]);
const newArr = Array.from(set);
console.log(newArr); // [1, 2, 3, 4, 5]

2.数组的循环

①for循环

const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {console.log(arr[i]);
}

forEach方法

arr.forEach(item => {console.log(item);
});

for of循环

for (const item of arr) {console.log(item);
}

3.对象的循环

①for in循环

const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {console.log(key, obj[key]);
}

②Object.keys (返回对象的所有键组成的数组,然后可以使用数组方法进行循环)

Object.keys(obj).forEach(key => {console.log(key, obj[key]);
});

③Objec.values(返回对象的所有值组成的数组)

Object.values(obj).forEach(value => {console.log(value);
});

④Object.entries(返回对象的键值对组成的数组,每个键值对都是一个数组)

Object.entries(obj).forEach(([key, value]) => {console.log(key, value);
});

4.对象的赋值

可以使用对象.key的方式,也可以使用对象[key]的方式

当key是动态时,需要使用第二种方式,例如

  for (const [key, value] of Object.entries(editData)) {const obj = editCol.find((x: { dataIndex: string; }) => x.dataIndex == key)if (obj) {transformedData[key] = value;}}

5.||及&&

|| 是 JavaScript 中的逻辑运算符之一,表示逻辑“或”操作。它的作用是在两个表达式之间进行判断,如果第一个表达式为真,则返回第一个表达式的值;如果第一个表达式为假,则返回第二个表达式的值。

例如,{{ record[item.sign] || '暂无' }}, 表示如果 record[item.sign] 的值存在(即不为 null、undefined 或者空字符串),则返回 record[item.sign] 的值;如果 record[item.sign] 的值不存在,则返回字符串 '暂无'。这样可以在显示数据时,如果数据不存在,则显示默认的 '暂无' 字符串。
JavaScript 中常见的逻辑运算符有以下几种:

    逻辑与(&&):用于判断多个条件是否同时成立。如果两个条件都为真,返回最后一个条件的值;如果其中任一条件为假,返回第一个为假的条件的值。
        示例:if (a > 5 && b < 10) { ... }

    逻辑或(||):用于判断多个条件中是否至少有一个成立。如果两个条件中任一条件为真,返回第一个为真的条件的值;如果两个条件都为假,返回最后一个条件的值。
        示例:if (a > 5 || b < 10) { ... }

    逻辑非(!):用于对单个条件取反。如果条件为真,则返回 false;如果条件为假,则返回 true。
        示例:if (!isTrue) { ... }

    条件运算符(三元运算符)(? :):用于根据条件选择不同的值。基于条件的真假,返回两个表达式中的一个。
        示例:var result = isTrue ? 'Yes' : 'No';

这些逻辑运算符在 JavaScript 中经常用于条件判断、布尔运算、控制流程等场景中。通过合理使用它们,可以实现复杂的逻辑操作。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/22130.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot项目使用CXF框架开发SOAP通信接口

文章目录 引言I SOAP1.1 SOAP消息组成1.2 XFire WebService 框架1.3 CXF框架II 测试访问webService效果2.1 浏览器访问暴露出的soap接口2.2 SOAP接口调试工具:SoapUI2.3 使用hutool的SoapClient调用soap接口2.4 使用cxf自带的工具请求webservice接口2.5 使用Postman测试工具来…

反激电源的类型与特点

主要分为 1 固定频率&#xff08;CCMDCM&#xff09; 2 可变频率控制&#xff08;CRM电流临界模式&#xff09; 这三种模式是很好辨别的&#xff0c;首先我们看左边的连续模式&#xff0c;Vds能看到他有一些尖峰毛刺&#xff0c;这是场效应管关闭的时候&#xff0c;LRC谐振导…

合势而上 聚力成峰 |“我店平台616购物嘉年华发布会”圆满落幕

引言 合势而上&#xff0c;聚力成峰&#xff1b;我店力量&#xff0c;势如破竹。 6月2日&#xff0c;“合势而上聚力成峰——我店平台616购物嘉年华发布会”于杭州顺利举办。会上&#xff0c;我店平台董事长肖翰成携手公司一众高管&#xff0c;正式启动“我店平台616购物嘉年华…

Java中getBytes()方法

我以为旅人将我 热情都燃尽 —— 24.6.4 String.getBytes(String decode)方法会根据指定的decode编码返回某字符串在该编码下的byte数组表示 而与getBytes相对的&#xff0c;可以通过new String(byte[], decode)的方式来还原这个“深”字时&#xff0c;这个new String(byte[],…

移位运算绝佳的应用

先想一下&#xff0c;如果要给你一个数对应的补码形式&#xff0c;你要计算这个数的1的数目&#xff0c;你有几种做法呢&#xff08;针对负数的补码也是否能够计算呢&#xff09;&#xff1a; 3种思路分享给你&#xff1a; 整完看看后面的思考题&#xff0c;c一下 first. v…

Git 保留空文件夹结构

假设有如下 helloworld 项目结构&#xff1a; helloworld|--.git|--.gitignore|--Builds|--WebGL|--iOS|--Android现在有个需求&#xff0c;在上传到 github 仓库时&#xff0c;只想保留 WebGL、iOS、Android 文件夹的结构&#xff0c;不想要里面的内容&#xff0c;可以按以下…

屏幕录制工具分享6款,附上详细电脑录屏教程(2024全新)

当你即将参加一个重要的在线会议或一堂关键的直播课&#xff0c;但又担心错过关键点或无法及时做笔记时&#xff0c;屏幕录制无疑是最好的方法之一。屏幕录制是一项非常有价值的技能&#xff0c;它能让你出于各种目的捕捉屏幕上的活动。无论你的目的是创建教程、演示软件功能、…

HiveMetastore

HiveMetastore 背后的存储 select * from DBS; select * from TBLS; select * from TABLE_PARAMS; 查找出没有 totalSize stats 的table SELECT DBS.NAME,t.TBL_NAME from DBS inner join (select DB_ID,TBL_NAME from TBLS where TBLS.TBL_ID not in(select TBL_ID from T…

家里总是“飞尘、毛絮”多怎么办?用这个东西教你轻松解决难题

每次清洁家里卫生的时候&#xff0c;都会发现家里空气中飘浮着毛毛和灰尘&#xff0c;地板上、沙发套、床单被罩都是毛毛。明明每天清洁&#xff0c;为什么家里还有这么多“飞尘、毛絮”呢&#xff1f;如果不将这些“飞尘、毛絮”清洁干净&#xff0c;空气中的飞尘、毛絮进入我…

<PLC><西门子><工控>西门子博图V18中使用SCL语言编写一个CRC16-modbus校验程序

前言 本系列是关于PLC相关的博文,包括PLC编程、PLC与上位机通讯、PLC与下位驱动、仪器仪表等通讯、PLC指令解析等相关内容。 PLC品牌包括但不限于西门子、三菱等国外品牌,汇川、信捷等国内品牌。 除了PLC为主要内容外,PLC相关元器件如触摸屏(HMI)、交换机等工控产品,如…

任务3.3 学生喂养三种宠物:猫、狗和鸟

本任务旨在通过Java面向对象编程中的多态性和方法重载概念&#xff0c;实现一个学生喂养三种不同宠物&#xff08;猫、狗、鸟&#xff09;的程序。 定义基类和派生类 创建一个Animal基类&#xff0c;包含所有动物共有的属性和方法&#xff0c;如name、age、speak()、move()和ea…

一篇文章讲透排序算法之归并排序

0.前言 本篇文章将详细解释归并排序的原理&#xff0c;以及递归和非递归的代码原理。 一.概念 归并排序是建立在归并操作上的一种有效的排序算法&#xff0c;该算法是采用分治法的一个非常典型的应用。将已有序的子序列合并&#xff0c;得到完全有序的序列&#xff1b;即先使…

虚拟机Ubuntu 22.04上搭建GitLab操作步骤

GitLab是仓库管理系统&#xff0c;使用Git作为代码管理工具。GitLab提供了多个版本&#xff0c;包括社区版(Community Edition)和企业版(Enterprise Edition)。实际应用场景中要求CPU最小4核、内存最小8GB&#xff0c;非虚拟环境。 以下是在虚拟机中安装社区版步骤&#xff1a;…

git获取的项目无法运行

一、Unsupported engine 问题&#xff1a;在使用命令npm install下载依赖项的时候就遇到了这个问题&#xff0c;有帖子说多试几次&#xff0c;其实这是提示node版本问题&#xff0c;版本的更新出现兼容性问题&#xff0c;多试几次也没用。 解决方案&#xff1a; 更新node.js的…

【Python】使用flask作为web服务器

一、flash轻量级web框架介绍 Python Flask 框架是一个轻量级的 Web 框架&#xff0c;它简单易用&#xff0c;灵活多变&#xff0c;非常适合用于构建小型到中型规模的 Web 应用程序。以下是 Flask 框架的详细介绍&#xff1a; 1、基本概念 Flask 是一个基于 Python 的微型 We…

Paper速读-[Visual Prompt Multi-Modal Tracking]-Dlut.edu-CVPR2023

文章目录 简介关于具体的思路问题描述算法细节实验结果模型的潜力模型结果 论文链接&#xff1a;Visual Prompt Multi-Modal Tracking 开源代码&#xff1a;Official implementation of ViPT 简介 这篇文章说了个什么事情呢&#xff0c;来咱们先看简单的介绍图 简单来说&…

【玩转C语言】第一讲--->C语言概念

&#x1f525;博客主页&#x1f525;&#xff1a;【 坊钰_CSDN博客 】 欢迎各位点赞&#x1f44d;评论✍收藏⭐ 目录 引言&#xff1a; 1. C语言是什么 2. C语言的辉煌历史 3. 第一个C语言程序 4. main()函数 5. printf() 函数 6. 库函数 6.1 库函数概念 7. 关键字介绍 …

工具:一键采集 平台:TB+PDD+JD...

什么是数据集&#xff1f; 电商商品数据集通常是指收集自电子商务平台的商品信息的结构化数据集合。这些数据包括但不限于商品名称、价格、描述、用户评价、分类标签、卖家信息、销售量、库存量、图片链接等。数据集可以由电商平台公开提供&#xff0c;也可以通过网络爬虫等技术…

沟通技巧(Communication Skills 业务分析能力)

背景 业务分析的胜任力模型&#xff0c;有六大部分&#xff0c;今天我们看第二部分&#xff0c;业务知识 Analytical Thinking and Problem Solving &#xff1a;分析判断及问题解决能力Behavioural Characteristics&#xff1a; 行为特质&#xff08;责任、道德、适应性等等…

Kubernetes小记

Kubernetes 集群 架构 一个有效的 Kubernetes 部署称为集群&#xff0c;可以将 Kubernetes 集群分为两个部分&#xff1a;控制平面与计算设备&#xff08;或称为节点&#xff09;控制组件 控制平面 K8s 集群的神经中枢,负责处理重要的工作&#xff0c;以确保容器以足够的数量…