想品客老师的第一天:值类型使用

前面两章的摘要

ECMAscript(也就是ES)是JavaScript的一个标准,就像c++的c11和c99一样,几把的一年出一套标准

freeze()是一个对象方法,表示锁定、固定一个对象不可改变(因为const对于标量不可变,但是对于引用类型会被改变,所以作用是让const更const),如果想改变的时候显示报错信息可以加上

// 全局严格模式
"use strict";
x = 10; // ReferenceError: x is not defined// 局部严格模式
function foo() {"use strict";y = 20; // ReferenceError: y is not defined
}
foo();

一些其他比较重要的内容在往期涉及的文章里做了增添修改

值运算符

复习一下instanceof(判断该对象是否在原型链上)

   let hd = [];let hdcms = {};// console.log(typeof hdcms);// hd.prototypeconsole.log(hd instanceof Array);//trueconsole.log(hdcms instanceof Array);//falsefunction User() { }let xj = new User();console.log(xj instanceof Array);//false

字符串类型

转义字符

老生常谈的【\】为转义字符

 const str="今天是学习\"后盾人\"的第一天"//转义字符console.log(str)//今天是学习"后盾人"的第一天const str1 = "今天是学习\\后盾人\\的第一天"//转义字符console.log(str1)//今天是学习\后盾人\的第一天

【\t】用于在文本中插入一个制表符,相当于按下键盘上的 Tab 键

但是在 HTML 中,【\t 】会被渲染为单个空格,除非使用 <pre> 标签或 CSS 的 white-space: pre 属性。

另一个插入多个空格的方式是【&nbsp】

<p>Hello&nbsp;World</p> <!-- 渲染为: Hello World -->
<p>Hello&nbsp;&nbsp;&nbsp;World</p> <!-- 渲染为: Hello   World -->

这些在html里也讲过哈

【\n】表换行不用说了

【+】可以连接两个字符串

最好的办法还是使用模板字符串【`${}`】

模板字面量

模板字面量就是模板字符串哈

有些低版本的浏览器不支持模板字符串,后期可以打包,让它也可以使用es5的规则

字面量里面还可以套字面量:

    let lessons = [{ title: "媒体查询响应式布局" },{ title: "FLEX弹性盒模型" },{ title: "GRID栅格系统" }]function template() {return `<ul>${lessons.map(item => `<li>${item.title}</li>`).join('')}</ul>`}document.body.innerHTML = template()

新增特性:标签模板

模板字符串(Template Literals)的一种高级用法:使用一个函数(一般叫标签函数)解析和处理模板字符串的内容,特别适合处理动态生成的字符串内容

标签模板的语法是在模板字符串前加上一个函数名,这个函数会被调用来处理模板字符串的内容。

这是他的格式:

function tagFunction(strings, ...values) {console.log(strings); // 静态部分的数组console.log(values);  // 动态部分的值
}const name = "Alice";
const age = 25;tagFunction`Hello, my name is ${name} and I am ${age} years old.`;
 let lessons = [{ title: "后盾人媒体查询响应式布局", author: "后盾人向军" },{ title: "FLEX 弹性盒模型", author: "后盾人" },{ title: "GRID 栅格系统后盾人教程", author: "古老师" }];function template() {return `<ul>${lessons.map(item => links`<li>作者:${item.author},课程:${item.title}</li>`).join("")}//这一串是模板标签,一个函数(links)跟一个模板字符串(``)</ul>`}function links(strings, ...vars) {return strings.map((str, key) => { return 
(str + (vars[key] ? vars[key].replace("后盾人", `<a href="https://www.houdunren.com">后盾人</a>`) : "")) }).join("");}document.body.innerHTML += template();

hdr我恨你。。。这个代码块大概实现的是动态生成一个包含课程信息的 HTML 列表

lessons是一个对象数组,函数template()来生成一个html样式的列表,links就是标签模板里的模板函数,调用links函数后把后面的模板字符串里的值分为动态和静态来处理

静态:普通字符串,在这里就是【["<li>作者:", ",课程:", "</li>"]】

动态:插值表达式【${}】的值,在这里就是【[item.author, item.title]】

拆开以后里面,把静态部分传入links()函数的【strings】参数,动态部分传入links()函数的【...vars】,.【..var】是剩余参数,将接收的多个参数收集到一个数组中

然后执行return语句:返回一个【静态部分和动态部分的值,如果动态部分的值不为空,替换为一个`<a href="https://www.houdunren.com"链接,如果为空就替换为''(空字符串)】

想品客老师的第一天

关于字符串的函数

str.trim()可以去除字符串首部和尾部的空格,中间的去不掉

let str = ' 今天是学习   后盾人   的第一天 '//前后各有一个空格console.log(str.length)//20console.log(str.trim().length)//18

当我们判定密码输入的位数的时候,就需要去掉空格(总感觉前面学过(擦汗)

这时候就需要去掉空格

   let password=document.querySelector("[name='password']")password.addEventListener("keyup",function(){this.value=this.value.trim()console.log(this.value.length)})

str.charAt()方法和普通的下标索引是相似的:

let str = 'Hello, World!'
console.log(str.charAt(0))// 输出'H'
console.log(str.[0]) // 输出'H'
//区别在超出索引值的范围时
console.log(str.charAt(20)); // 输出:''
console.log(str[20]); // 输出:undefined
 let hd = "想品客老师的第一天"// console.log(hd[0]);for (let i = 0; i < hd.length; i++) {let span = document.createElement("span")span.style.fontSize = (i + 1) * 10 + "px"span.innerHTML = hd.charAt(i)document.body.append(span)}

字符串截取

用于截取后台传来的数据:

let hd = "想品客老师的第一天"
console.log(hd.slice(1))//品客老师的第一天
console.log(hd.substr(1))//品客老师的第一天

可以看见内容是一样的,但是这两个函数使用起来是有区别的:

slice(start, end):左闭右开的截取,end表示结束提取的下标;如果省略end参数,则默认提取到字符串结尾

支持负数索引,表示从字符串末尾开始计算。

如果 start 大于 end,返回空字符串

substr(start, length):从 start 索引开始提取字符串,提取长度为 length 的子字符串;如果省略length参数,则默认提取到字符串结尾

​​​​​​​支持负数索引,表示从字符串末尾开始计算。

如果 start 为负数,表示从字符串末尾开始计算索引。

还有一个提取字符串的函数是substring():

let hd = "想品客老师的第一天";
console.log(hd.substring(1)); // 输出:品客老师的第一天
console.log(hd.substring(1, 4)); // 输出:品客老
console.log(hd.substring(4, 1)); // 输出:品客老(自动交换 start 和 end)
console.log(hd.substring(-3)); // 输出:想品客老师的第一天(负数被当作 0)

substring(start, end):左闭右开的截取,end表示结束提取的下标;如果省略end参数,则默认提取到字符串结尾

不支持负数索引。如果传入负数,会被当作 0 处理

如果 start > endsubstring() 会自动交换 start 和 end 的值。

 let hd = "想品客老师的第一天"console.log(hd.slice(3,6))//老师的console.log(hd.substr(2,3))//客老师console.log(hd.substring(1,4))//品客老

检索字符串

indexOf()函数返回对应字符在字符串里的下标,不存在的字符返回-1

后面的参数表示从第几个字符向后检索(总感觉都学过。)

    let hd = "想品客老师的第一天"  console.log(hd.indexOf('第'))//6console.log(hd.indexOf('一', 7))//7console.log(hd.indexOf('一', 8))//-1console.log(hd.indexOf('二'))//-1

旧版里检索字符是否存在需要确认console.log(hd.indexOf('某个字符'))这条语句是否等于-1

新版里有另一个函数:includes()

    let hd = "想品客老师的第一天"console.log(hd.indexOf('第'))//6console.log(hd.includes('第'))//true

直接返回一个bool值确认是否检索到

lastIndexOf()方法表示从后向前搜索(即从索引 6开始向左搜索)

  let hd = "想品客老师的第一天"console.log(hd.lastIndexOf('第',6))//6console.log(hd.lastIndexOf('第', 5))//-1

改为5则输出-1

还有老生常谈的startsWith()以某字符串开头和endsWith()以某字符串结尾

  let hd = "想品客老师的第一天"console.log(hd.startsWith('想'))//trueconsole.log(hd.endsWith('天'))//true

返回一个bool值

如果想在检索的时候不区分大小写,可以统一转换为大写/小写

const hd='Hello world'
console.log(hd.toLowerCase().startsWith('h'))//true

some()方法是一个数组方法

callback是回调函数,​​​​​​

array.some(callback(element, index, array), thisArg)
  • callback:一个测试函数,用于检查数组中的每个元素。

    • element:当前正在处理的元素。

    • index(可选):当前元素的索引。

    • array(可选):调用 some() 的数组本身。

  • thisArg(可选):执行 callback 时使用的 this 值。

​​​​​

 const hds = 'Hello world'console.log(hds.toLowerCase().startsWith('h'))//trueconst word = ["@@", "css"];const string = "我喜欢在后盾人学习php与css知识";const status = word.some(word => {return string.includes(word);});if (status) {//在string字符串里找wordconsole.log("找到了关键词")//找到了css,所以为true}

替换字符串

replace()方法,老生常谈了属于是

实现一个替换查找:

const words = ["php", "css"];
const strings = "我喜欢在后盾人学习php与css知识"const replaceString = words.reduce((pre, word) => pre.replace(new RegExp(word, "g"), `<a href="?w=${word}">${word}</a>`),strings
)console.log(replaceString)
document.body.innerHTML += replaceString

重复字符

repeat()

  function phone(num, len) {return String(num).slice(0, len * -1) + '*'.repeat(len)}console.log(phone(27390201209,4))//2739020****

slice的参数是0,-4,所以选定的范围是后四位

转换为String类型才能用slice()方法哦

Boolean类型转换

这部分之前写过js:基础-CSDN博客

关于Boolean的隐式转换这里写一下:

falsetrue
0(数字零)非零数字(如 1-13.14
""(空字符串)非空字符串(如 "hello""0""false"
null对象(如 {}[]new Date()
undefined函数
NaN

==的时候会隐式转换,===的时候不会

console.log(1 == true)//true
console.log(1 === true)//false

显示转换再补充一点:

【!】在bool类型的显示转换

  let n = 0console.log(typeof n)//numberconsole.log(n == true)//false,n为falseconsole.log(typeof !n)//booleanconsole.log(!n == true)//true,n本来为false,感叹号进行了类型转换+取反console.log(typeof !!n)//booleanconsole.log(!!n == true)//false,类型转换+二次取反

Boolean()也可以显示转换,和【!!】一个作用

Number类型

这部分很多学过了

一些Math方法

max()、min(),ceil()向上取整,floor()向下取整,toFixed(n)保留n位小数,random()取随机数

随机点名:

 const students = ["李四", "赵云", "张三", "王五", "马六"]function arrayRandomValue(arr, start, end) {end = end ? end : arr.lengthlet index = Math.floor(start + Math.random() * (end - start))console.log(index)return arr[index]}console.log(arrayRandomValue(students, 0,))

NaN

NaN的几种情况

NaN:Not A Number

NaN自己也不和自己相等

判断是否为NaN:

两种方法

这种情况也为NaN:

      let arr = [1, 2, 3]console.log(Number(arr))//NaN

时间戳

+new Date()和Date.now()都可以生成时间戳

js:日期对象和dom节点-CSDN博客

大部分和这篇是重复的。。

获取指定时间戳的其他方法

优秀日期处理库

https://www.bootcdn.cn/

 <script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script>

引入库​​​​​​​

<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.30.1/moment.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.30.1/locale/ar-kw.min.js"></script><input type="text" name="password"><script>const date = moment("2022-02-22 22:22:22");console.log(date.format("YYYY-MM-DD HH:mm:ss")); // 输出原始日期console.log(date.add(10, "days").format("YYYY-MM-DD HH:mm:ss")); // 输出加10天后的日期</script>

后盾人老师感觉在跟我唠嗑。。。没有重点。。这种没有重点的听课真难受

后盾人老师激情一讲,我查文档查半天。。。

后盾人老师你是怎么把代码写得行云流水的。。。

没人觉得后盾人老师长得很像黄磊吗

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

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

相关文章

容器渗透横向

本质上要获得 1.获得容器IP段 2.获得主机IP段 3.获得本机IP 4.通过CNI或Docker0等扫描本机端口 Flannel 容器信息 rootubuntu-linux-22-04-desktop:/home/parallels/Desktop# k get po -A -o wide NAMESPACE NAME …

贪心算法(题1)区间选点

输出 2 #include <iostream> #include<algorithm>using namespace std;const int N 100010 ;int n; struct Range {int l,r;bool operator <(const Range &W)const{return r<W.r;} }range[N];int main() {scanf("%d",&n);for(int i0;i&l…

解决本地运行MR程序访问权限问题

文章目录 1. 提出问题2. 解决问题2.1 临时解决方案2.2 永久解决方案 3. 小结 1. 提出问题 运行DeduplicateIPsDriver类&#xff0c;抛出如下异常&#xff1a; 该错误信息表明在尝试运行 DeduplicateIPsDriver 类时&#xff0c;遇到了 HDFS&#xff08;Hadoop 分布式文件系统&a…

【学习总结|DAY032】后端Web实战:登录认证

在 Web 后端开发中&#xff0c;登录认证是保障系统安全和用户数据隐私的关键环节。本文将结合实际开发案例&#xff0c;深入探讨登录功能与登录校验的实现思路和技术细节&#xff0c;希望能帮助读者更好地掌握这一重要知识点。 一、登录功能实现 1.1 思路分析 登录功能的核心…

html全局遮罩,通过websocket来实现实时发布公告

1.index.html代码示例 <div id"websocket" style"display:none;position: absolute;color:red;background-color: black;width: 100%;height: 100%;z-index: 100; opacity: 0.9; padding-top: 30%;padding-left: 30%; padding-border:1px; "onclick&q…

sqlmap使用手册

sqlmap使用手册 一、sqlmap简介二、sqlmap常用命令三、sqlmap使用示例四、注意事项sqlmap使用手册 sqlmap是一个开源的渗透测试工具,主要用于自动检测和利用SQL注入漏洞来接管数据库服务器。以下是对sqlmap的详细介绍和使用指南: 一、sqlmap简介 sqlmap具有强大的检测引擎和…

高通8255 Android STR 启动失败要因分析调查

目录 背景&#xff1a; 调查过程&#xff1a; 步骤1&#xff1a; slog2info | grep vmm_service 步骤2&#xff1a; slog2info | grep qvm 总结&#xff1a; 解决方案 背景&#xff1a; 调试高通8255 STR的STR过程中发现Android和QNX进入STR状态后&#xff0c;脱出STR时…

Linux UDP 编程详解

一、引言 在网络编程领域&#xff0c;UDP&#xff08;User Datagram Protocol&#xff0c;用户数据报协议&#xff09;作为一种轻量级的传输层协议&#xff0c;具有独特的优势和适用场景。与 TCP&#xff08;Transmission Control Protocol&#xff0c;传输控制协议&#xff0…

数据增强方法及其工具

数据增强&#xff08;Data Augmentation&#xff09;是指在训练深度学习模型时&#xff0c;通过对现有数据进行一系列变换&#xff0c;从而生成新的样本。数据增强有助于增加数据的多样性&#xff0c;减少过拟合&#xff0c;提升模型的泛化能力&#xff0c;尤其是在数据量有限的…

整数在计算机眼中是什么样子的呢?

整数类型 在现实世界中&#xff0c;整数是无穷的。但在计算机中&#xff0c;由于内存资源的有限性&#xff0c;我们只能表示有限范围的整数。 1. 整数类型的分类 在编程语言(如Java)中&#xff0c;整数类型主要分为以下几种&#xff1a; byte: 1个字节&#xff0c;范围[-12…

【Pandas】pandas Series apply

Pandas2.2 Series Function application, GroupBy & window 方法描述Series.apply()用于将一个函数应用到 Series 的每个元素或整个 Series pandas.Series.apply pandas.Series.apply 是 Pandas 库中 Series 对象的一个方法&#xff0c;用于将一个函数应用到 Series 的…

SDL2:arm64下编译使用 -- SDL2多媒体库使用音频实例

SDL2&#xff1a;Android-arm64端编译使用 2. SDL2&#xff1a;Android-arm64端编译使用2.1 安装和配置NDK2.2 下载编译SDL22.3 SDL2使用示例&#xff1a;Audio2.4 Android设备运行 2. SDL2&#xff1a;Android-arm64端编译使用 在Linux系统上使用Android NDK编译和使用arm64下…

Ubuntu服务器折腾集

目录 Ubuntu 更改软件源Ubuntu 系统语言英文改中文windows 远程链接 Ubuntu 图形界面Windows 通过 openssh 连接 UbuntuUbuntu linux 文件权限Ubuntu 空闲硬盘挂载到 文件管理器的 other locationsUbuntu 开启 SMB 服务&#xff0c;并通过 windows 访问DockerseafileNextcloud…

可解释性机器学习

一、引言 随着机器学习&#xff08;ML&#xff09;在各个领域的广泛应用&#xff0c;模型的复杂度不断增加&#xff0c;如深度神经网络等黑盒模型逐渐成为主流。这些模型虽然具有很高的预测性能&#xff0c;但其内部的决策机制往往难以理解&#xff0c;导致模型的透明度和可解释…

PyTorch使用教程(8)-一文了解torchvision

一、什么是torchvision torchvision提供了丰富的功能&#xff0c;主要包括数据集、模型、转换工具和实用方法四大模块。数据集模块内置了多种广泛使用的图像和视频数据集&#xff0c;如ImageNet、CIFAR-10、MNIST等&#xff0c;方便开发者进行训练和评估。模型模块封装了大量经…

网络安全防护指南:筑牢网络安全防线(510)

一、网络安全的基本概念 &#xff08;一&#xff09;网络的定义 网络是指由计算机或者其他信息终端及相关设备组成的按照一定的规则和程序对信息收集、存储、传输、交换、处理的系统。在当今数字化时代&#xff0c;网络已经成为人们生活和工作中不可或缺的一部分。它连接了世…

关于vite+vue3+ts项目中env.d.ts 文件详解

env.d.ts 文件是 Vite 项目中用于定义全局类型声明的 TypeScript 文件。它帮助开发者向 TypeScript提供全局的类型提示&#xff0c;特别是在使用一些特定于 Vite 的功能时&#xff08;如 import.meta.env&#xff09;。以下是详细讲解及代码示例 文章目录 **1. env.d.ts 文件的…

CentOS 安装Redis

1. 安装 Redis 安装 EPEL 仓库&#xff08;对于 CentOS/RHEL 系统&#xff09;&#xff1a; 首先安装 EPEL 仓库&#xff0c;因为 Redis 存在于 EPEL 仓库中&#xff1a; yum install epel-release安装 Redis 数据库&#xff1a; yum install redis2. 修改 Redis 配置文件 …

Spring Boot 基础入门指南

Spring Boot 基础入门指南 引言 在当今快速发展的软件行业中&#xff0c;开发者们一直在寻找简化应用程序开发的方法。Spring Boot 应运而生&#xff0c;它旨在帮助开发者快速构建基于Spring框架的应用程序&#xff0c;同时尽可能减少配置工作。本文将带您了解Spring Boot的基…

1.17学习

crypto nssctf-[SWPUCTF 2021 新生赛]crypto8 不太认识这是什么编码&#xff0c;搜索一下发现是一个UUENCODE编码&#xff0c;用在线工具UUENCODE解码计算器—LZL在线工具解码就好 misc buuctf-文件中的秘密 下载附件打开后发现是一个图片&#xff0c;应该是一个图片隐写&…