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

JavaScript学习笔记02

JavaScript笔记02

数据类型详解

字符串

  • 在 JavaScript 中正常的字符串都使用单引号' '或者双引号" "包裹
  • 例:

在这里插入图片描述

转义字符

  • 在 JavaScript 字符串中也可用使用转义字符(参考:详解转义字符):
  • 例:

在这里插入图片描述

编写多行字符串

  • 在 JavaScript 中可以使用 ` 符号(键盘Tab键上面、Esc键下面的键)将多行字符串包裹来编写多行字符串
  • 例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>"use strict";//编写多行字符串:使用 ` 符号(键盘Tab键上面、Esc键下面的键)将多行字符串包裹let msg =`hello
world
你好
世界`</script>
</head>
<body></body>
</html>
  • 在浏览器控制台中输入console.log(msg),打印上面编写的多行字符串:

在这里插入图片描述

模板字符串

  • JavaScript 还支持使用模板字符串(ES6新特性)
  • 例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>"use strict";//模板字符串let name = "张三"let msg = `你好呀,${name}`</script>
</head>
<body></body>
</html>
  • 在浏览器控制台中输入console.log(msg),打印字符串msg

在这里插入图片描述

获取字符串的长度 & 指定下标位置的字符

  • 我们可以通过使用字符串.length来获取字符串的长度,也可以通过使用字符串[下标]来获取字符串中指定下标位置的字符
  • 例:

在这里插入图片描述

可变性:不可变

  • 需要注意的是,JavaScript 中的字符串是不可变的
  • 例:

在这里插入图片描述

大小写转换

  • 注意:以下使用的是函数(方法),而不再是属性
  • 我们可以使用toUpperCase()方法将字符串中的小写字母转换为大写;也可以使用toLowerCase()方法将字符串中的大写字母转换为小写
  • 例:

在这里插入图片描述

获取指定字符在字符串中的下标

  • 我们可以使用indexOf()方法获取指定字符在字符串中的下标
  • 例:

在这里插入图片描述

截取字符串

  • 我们可以使用substring()方法截取指定下标区间内的字符串(左闭右开区间)
  • 例:

在这里插入图片描述

数组

  • 在 JavaScript 中,数组可以包含任意类型的数据
  • 例:

在这里插入图片描述

长度

  • 我们可以通过使用数组.length来获取数组的长度
  • 例:

在这里插入图片描述

  • 注意:给数组的lentgh赋值,数组的大小就会发生变化;如果赋的值过小,元素就会丢失!
  • 例:

在这里插入图片描述

获取指定元素在数组中的下标索引

  • 我们可以使用indexOf()方法来获取指定元素在数组中的下标索引
  • 例:

在这里插入图片描述

  • 注意,上述例子中的数字1和字符串"1"是不同的!

截取数组 - slice()

  • 我们可以使用slice()方法来截取指定下标区间内的数组,返回一个新的数组,类似字符串中的substring()方法。
  • 例:

在这里插入图片描述

从尾部添加与删除元素 - push() & pop()

  • push() - 向数组尾部添加元素(可以添加一个或多个),并返回添加后数组的长度。
  • pop() - 从数组的尾部删除一个元素(删且只删除一个),并返回被删除的元素。
  • 例:

在这里插入图片描述

从头部添加与删除元素 - unshift() & shift()

  • unshift() - 向数组头部添加元素(可以添加一个或多个),并返回添加后数组的长度。
  • shift() - 从数组的头部删除一个元素(删且只删除一个),并返回被删除的元素。
  • 例:

在这里插入图片描述

排序 - sort()

  • sort() - 对数组的项目进行排序,并返回排序后的数组 。
  • 排序顺序可以是按字母或数字,也可以是升序(向上)或降序(向下)。
  • 默认情况下,sort() 方法将按字母和升序将值作为字符串进行排序。
  • 例:

在这里插入图片描述

元素反转 - reverse()

  • reverse() - 反转数组中元素的顺序,并返回同一数组的引用。
  • 例:

在这里插入图片描述

拼接数组 - concat()

  • concat() - 用于拼接两个或多个数组。
  • 注意:concat() 方法不会更改现有数组,而是返回一个新数组,其中包含已连拼数组的值。
  • 例:

在这里插入图片描述

分隔符 - join()

  • join - 将数组中的所有元素转换为一个字符串,并且这个字符串中的所有元素都通过指定的分隔符进行分隔。
  • 例:

在这里插入图片描述

多维数组

  • JavaScript 中多维数组的定义方式以及多维数组中指定下标位置元素的获取方式如下:
  • 例:

在这里插入图片描述

对象

  • 补充:在 JavaScript 中,所有的键都是字符串,值是任意对象。
  • 例如:在调用对象中的属性时,除了可以使用对象名.属性名,还可以使用属性名["属性值"]这种方式调用:

在这里插入图片描述

定义对象

  • 在 JavaScript 中,对象是若干个属性的键值对(属性:属性值)的集合,多个属性之间用逗号隔开,最后一个属性后则不添加逗号
let 对象名 = {属性名: 属性值,属性名: 属性值,属性名: 属性值
}
  • 例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>// 定义一个person对象let person = {name: "张三",age: 18,gender: "男",score: 80}</script>
</head>
<body></body>
</html>

对象赋值

  • 和 Java 一样,在 JavaScript 中给对象中的属性赋值也是直接使用等号=
  • 例:

在这里插入图片描述

使用不存在的属性

  • 在 JavaScript 中即使我们使用了一个不存在的对象属性,也不会报错,而是会返回undefined
  • 例:

在这里插入图片描述

动态的删减属性

  • 在 JavaScript 中,我们可以通过使用delete,实现动态的删除对象中的属性
  • 例:

在这里插入图片描述

动态的添加属性

  • 在 JavaScript 中,我们还可以动态的添加属性,直接给新的属性添加值即可
  • 例:

在这里插入图片描述

判断属性是否在这个对象中

  • 我们可以使用"属性名" in 对象名来判断属性是否在这个对象中
  • 例:

在这里插入图片描述

判断属性是否是这个对象自身拥有的 - hasOwnProperty()

  • 我们可以使用对象名.hasOwnProperty("属性名")来判断属性是否是这个对象自身拥有的
  • 例:

在这里插入图片描述

相关文章:

JavaScript学习笔记02

JavaScript笔记02 数据类型详解 字符串 在 JavaScript 中正常的字符串都使用单引号 或者双引号" "包裹&#xff1a;例&#xff1a; 转义字符 在 JavaScript 字符串中也可用使用转义字符&#xff08;参考&#xff1a;详解转义字符&#xff09;&#xff1a;例&…...

短信过滤 APP 开发

本文字数&#xff1a;7033字 预计阅读时间&#xff1a;42分钟 一直想开发一个自己的短信过滤 APP&#xff0c;但是一直没有具体实施&#xff0c;现在终于静下心来&#xff0c;边开发边记录下整体的开发过程。 01 垃圾短信样本 遇到的第一个问题是&#xff0c;既然要过滤垃圾短信…...

【计算机基础知识7】垃圾回收机制与内存泄漏

目录 前言 一、垃圾回收机制的工作原理 1. 标记-清除算法的基本原理 2. 垃圾回收器的类型及其工作方式 3. 垃圾回收的回收策略和触发机制 三、内存泄漏的定义和原因 1. 内存泄漏的概念和影响 2. 常见的内存泄漏情况及其原因 四、如何避免和处理内存泄漏 1. 使用合适…...

[学习笔记]CS224W

资料&#xff1a; 课程网址 斯坦福CS224W图机器学习、图神经网络、知识图谱【同济子豪兄】 斯坦福大学CS224W图机器学习公开课-同济子豪兄中文精讲 图的基本表示 图是描述各种关联现象的通用语言。与传统数据分析中的样本服从独立同分布假设不一样&#xff0c;图数据自带关联…...

华为云API对话机器人CBS的魅力—实现简单的对话操作

云服务、API、SDK&#xff0c;调试&#xff0c;查看&#xff0c;我都行 阅读短文您可以学习到&#xff1a;人工智能AI智能的问答管理、全面的对话管理、高效训练部署 1.IntelliJ IDEA 之API插件介绍 API插件支持 VS Code IDE、IntelliJ IDEA等平台、以及华为云自研 CodeArts …...

精益制造、质量管控,盛虹百世慧共同启动MOM(制造运营管理)

百世慧科技依托在电池智能制造行业中的丰富经验&#xff0c;与盛虹动能达成合作&#xff0c;为其提供MOM制造运营管理平台&#xff0c;并以此为起点&#xff0c;全面提升盛虹动能的制造管理水平与运营体系。 行业困境 中国动力电池已然发展为全球最大的电池产业&#xff0c;但…...

【科研论文配图绘制】task7密度图绘制

【科研论文配图绘制】task7密度图绘制 task7 了解密度图的定义&#xff0c;清楚密度图是常用使用常见&#xff0c;掌握密度图绘制。 1.什么是密度图 密度图&#xff08;Density Plot&#xff09;是一种用于可视化数据分布的图表类型。它通过在数据中创建平滑的概率密度曲线…...

Python3 集合

Python3 集合 集合&#xff08;set&#xff09;是一个无序的不重复元素序列。 可以使用大括号 { } 或者 set() 函数创建集合&#xff0c;注意&#xff1a;创建一个空集合必须用 set() 而不是 { }&#xff0c;因为 { } 是用来创建一个空字典。 创建格式&#xff1a; parame …...

【山河送书第十期】:《Python 自动化办公应用大全》参与活动,送书两本!!

【山河送书第十期】&#xff1a;《Python 自动化办公应用大全》参与活动&#xff0c;送书两本&#xff01;&#xff01; 前言一书籍亮点二作者简介三内容简介四购买链接五参与方式六往期赠书回顾 前言 在过去的 5 年里&#xff0c;Python 已经 3 次获得 TIOBE 指数年度大奖&am…...

Java多线程——同步

同步是什么&#xff1f; 当两个线程同时对一个变量进行修改时&#xff0c;不同的访问顺序会造成不一样的结果&#xff0c;这时候就需要同步保证结果的唯一性。 未同步时 新建Bank类&#xff0c;transfer()用于在两个账户之间转账金额 class Bank {private double[] account…...

Vue+NodeJS实现邮件发送

一.邮箱配置 这里以QQ邮箱为例,网易邮箱类似. 设置->账号 二.后端服务搭建 index.js const express require(express) const router require(./router); const app express()// 使用路由文件 app.use(/,router);app.listen(3000, () > {console.log(server…...

Go语言网络编程(socket编程)TCP粘包

1、TCP粘包 服务端代码如下&#xff1a; // socket_stick/server/main.gofunc process(conn net.Conn) {defer conn.Close()reader : bufio.NewReader(conn)var buf [1024]bytefor {n, err : reader.Read(buf[:])if err io.EOF {break}if err ! nil {fmt.Println("read…...

【再识C进阶2(中)】详细介绍指针的进阶——函数指针数组、回调函数、qsort函数

前言 &#x1f493;作者简介&#xff1a; 加油&#xff0c;旭杏&#xff0c;目前大二&#xff0c;正在学习C&#xff0c;数据结构等&#x1f440; &#x1f493;作者主页&#xff1a;加油&#xff0c;旭杏的主页&#x1f440; ⏩本文收录在&#xff1a;再识C进阶的专栏&#x1…...

PaddleOCR学习笔记3-通用识别服务

今天优化了下之前的初步识别服务的python代码和html代码。 采用flask paddleocr bootstrap快速搭建OCR识别服务。 代码结构如下&#xff1a; 模板页面代码文件如下&#xff1a; upload.html : <!DOCTYPE html> <html> <meta charset"utf-8"> …...

9.8 校招 实习 内推 面经

绿泡*泡&#xff1a; neituijunsir 交流裙 &#xff0c;内推/实习/校招汇总表格 1、校招 | 长安福特2024校园招聘正式启动 校招 | 长安福特2024校园招聘正式启动 2、2023校招总结--SLAM岗位 - 5 2023校招总结--SLAM岗位 - 5 3、校招&实习 | 格灵深瞳2024秋季校园招聘启…...

web前段与后端的区别优漫动游

要了解web前后端的区别&#xff0c;首先必须得清楚什么是web前端和web后端。 web前段与后端的区别 首先&#xff1a;web的本意是蜘蛛网和网的意思&#xff0c;在网页设计中我们称为网页的意思。现广泛译作网络、互联网等技术领域。表现为三种形式&#xff0c;即超文本(hyp…...

局域网ntp服务器设置(windows时间同步服务器NetTime)(ubuntu systemd-timesyncd ntp客户端)123端口、ntp校时

文章目录 背景windows如何配置ntp服务器手动配置配置参数AnnounceFlags和Enabled含义 使用软件配置&#xff08;NetTime&#xff09;实操相关疑问&#xff1a;0.nettime.pool.ntp.org是什么&#xff1f; 注意事项请务必检查windows主机123端口是否已被占用&#xff0c;方法请参…...

【个人博客系统网站】我的博客列表页 · 增删改我的博文 · 退出登录 · 博客详情页 · 多线程应用

【JavaEE】进阶 个人博客系统&#xff08;4&#xff09; 文章目录 【JavaEE】进阶 个人博客系统&#xff08;4&#xff09;1. 增加博文1.1 预期效果1.1 约定前后端交互接口1.2 后端代码1.3 前端代码1.4 测试 2. 我的博客列表页2.1 期待效果2.2 显示用户信息以及博客信息2.2.1…...

安全狗陈奋:数据安全需要建立在传统网络安全基础之上

8月22日-23日&#xff0c;由创业邦主办的“2023 DEMO WORLD 企业开放式创新大会”在上海顺利举行。 作为国内云原生安全领导厂商&#xff0c;安全狗受邀出席此次活动。 本次大会以“拥抱开放”为主题&#xff0c;聚焦开放式创新&#xff0c;通过演讲分享、专场对接、需求发布…...

【Redis】深入探索 Redis 的数据类型 —— 哈希表 hash

文章目录 前言一、hash 类型相关命令1.1 HSET 和 HSETNX1.2 HGET 和 HMGET1.3 HKEYS、HVALS 和 HGETALL1.4 HEXISTS 和 HDEL1.5 HLEN1.6 HINCRBY 和 HINCRBYFLOAT1.7 哈希相关命令总结 二、hash 类型内部编码三、hash 类型的应用场景四、原生&#xff0c;序列化&#xff0c;哈希…...

Claude Code智能体与CasRel模型协作:自动化数据标注流水线

Claude Code智能体与CasRel模型协作&#xff1a;自动化数据标注流水线 1. 引言 做关系抽取项目&#xff0c;最头疼的是什么&#xff1f;十有八九的工程师会告诉你&#xff1a;是数据标注。传统的人工标注&#xff0c;不仅耗时费力&#xff0c;成本高昂&#xff0c;而且面对复…...

自由学习记录(155)

中间拖动编辑&#xff0c;暂时性的调整&#xff0c;好的设计 可以撤回的误触远比需要记忆检索的多键要实用 如果系统提供了极其便捷的撤回&#xff08;Undo&#xff09;或容错机制&#xff0c;用户可以更放心地进行模糊操作&#xff0c;从而在宏观上提高效率。 身体本能 vs.…...

Step3-VL-10B基础教程:Gradio WebUI本地/远程访问配置与常见报错解决

Step3-VL-10B基础教程&#xff1a;Gradio WebUI本地/远程访问配置与常见报错解决 1. 引言 你是不是已经部署好了Step3-VL-10B这个强大的视觉语言模型&#xff0c;但在浏览器里输入地址后&#xff0c;要么页面打不开&#xff0c;要么显示一堆看不懂的错误信息&#xff1f;别着…...

别再纠结SGMII和RGMII了!从PCB布线到芯片选型,一次讲透千兆以太网接口怎么选

千兆以太网接口选型实战指南&#xff1a;从信号完整性到供应链决策 当你的项目进度表上出现"千兆以太网接口设计"这一项时&#xff0c;会议室里的空气总会突然凝固。硬件团队在白板上画着信号拓扑图&#xff0c;嵌入式工程师盯着芯片手册皱眉&#xff0c;项目经理则在…...

OpenClaw+千问3.5-35B-A3B-FP8:自动化技术文档翻译系统

OpenClaw千问3.5-35B-A3B-FP8&#xff1a;自动化技术文档翻译系统 1. 为什么需要自动化文档翻译 去年参与一个开源项目时&#xff0c;我遇到了多语言文档维护的困境。项目文档需要同步维护中英文版本&#xff0c;每次更新都要经历"写中文→翻译→调整格式→校对"的…...

告别纯手工!用X-AnyLabeling的SAM2模型,5分钟搞定复杂目标分割标注

5分钟解锁X-AnyLabeling的SAM2黑科技&#xff1a;复杂目标分割标注效率提升指南 当面对医学影像中不规则肿瘤轮廓、遥感图像中的破碎地块边界&#xff0c;或是工业质检场景下的缺陷区域时&#xff0c;传统矩形框标注就像用粉笔画框测量云朵形状——既笨拙又低效。X-AnyLabelin…...

极简办公:OpenClaw+Qwen3.5-9B自动回复日常邮件模板

极简办公&#xff1a;OpenClawQwen3.5-9B自动回复日常邮件模板 1. 为什么需要邮件自动化助手 每天早晨打开邮箱&#xff0c;总能看到十几封格式雷同的咨询邮件——产品报价、技术支持、会议邀约……这些邮件80%的内容都可以用标准模板回复&#xff0c;但手动复制粘贴依然要耗…...

应急响应靶机练习-Web2

一、靶机介绍这个靶机主要是通过暴力破解ftp&#xff0c;获取ftp账号后上传了php shell&#xff0c;获取shell后创建后门用户&#xff0c;以及做了一些端口转发操作。靶机采用phpstudy&#xff0c;开启了ftp和web服务&#xff0c;但是要注意的是&#xff0c;一旦ftp开启&#x…...

2026-04-06:字典序最小和为目标值且绝对值是排列的数组。用go语言,给你一个正整数 n 和一个整数 target。 你需要构造一个长度为 n 的整数数组,要求同时满足: 1.数组中所有元素的总

2026-04-06&#xff1a;字典序最小和为目标值且绝对值是排列的数组。用go语言&#xff0c;给你一个正整数 n 和一个整数 target。 你需要构造一个长度为 n 的整数数组&#xff0c;要求同时满足&#xff1a; 1.数组中所有元素的总和必须等于 target。 2.把数组里每个元素取绝对值…...

UE5 UMG坐标转换实战:用SlateBlueprintLibrary搞定UI拖拽与点击检测

UE5 UMG坐标转换实战&#xff1a;用SlateBlueprintLibrary搞定UI拖拽与点击检测 在虚幻引擎5的UMG开发中&#xff0c;精准控制UI元素的交互行为是提升用户体验的关键。想象一下&#xff0c;当玩家拖动一个自定义背包中的物品&#xff0c;或是点击复杂HUD中的某个区域时&#xf…...