前面两章的摘要
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.prototype
console.log(hd instanceof Array);//true
console.log(hdcms instanceof Array);//false
function 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 属性。
另一个插入多个空格的方式是【 】
<p>Hello World</p> <!-- 渲染为: Hello World -->
<p>Hello 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)//20
console.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 > end，substring()会自动交换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('第'))//6
console.log(hd.indexOf('一', 7))//7
console.log(hd.indexOf('一', 8))//-1
console.log(hd.indexOf('二'))//-1旧版里检索字符是否存在需要确认console.log(hd.indexOf('某个字符'))这条语句是否等于-1
新版里有另一个函数：includes()
let hd = "想品客老师的第一天"
console.log(hd.indexOf('第'))//6
console.log(hd.includes('第'))//true直接返回一个bool值确认是否检索到
lastIndexOf()方法表示从后向前搜索（即从索引 6开始向左搜索）
let hd = "想品客老师的第一天"
console.log(hd.lastIndexOf('第',6))//6
console.log(hd.lastIndexOf('第', 5))//-1改为5则输出-1
还有老生常谈的startsWith()以某字符串开头和endsWith()以某字符串结尾
let hd = "想品客老师的第一天"
console.log(hd.startsWith('想'))//true
console.log(hd.endsWith('天'))//true返回一个bool值
如果想在检索的时候不区分大小写，可以统一转换为大写/小写
const hd='Hello world'
console.log(hd.toLowerCase().startsWith('h'))//truesome()方法是一个数组方法
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'))//true
const word = ["@@", "css"];
const string = "我喜欢在后盾人学习php与css知识";
const status = word.some(word => {
return string.includes(word);
});
if (status) {//在string字符串里找word
console.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的隐式转换这里写一下：
| false | true |
0（数字零） | 非零数字（如 1, -1, 3.14） |
""（空字符串） | 非空字符串（如 "hello", "0", "false"） |
null | 对象（如 {}, [], new Date()） |
undefined | 函数 |
NaN |
==的时候会隐式转换，===的时候不会
console.log(1 == true)//true
console.log(1 === true)//false显示转换再补充一点：
【!】在bool类型的显示转换
let n = 0
console.log(typeof n)//number
console.log(n == true)//false,n为false
console.log(typeof !n)//boolean
console.log(!n == true)//true,n本来为false，感叹号进行了类型转换+取反
console.log(typeof !!n)//boolean
console.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.length
let 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>
后盾人老师感觉在跟我唠嗑。。。没有重点。。这种没有重点的听课真难受
后盾人老师激情一讲，我查文档查半天。。。
后盾人老师你是怎么把代码写得行云流水的。。。
没人觉得后盾人老师长得很像黄磊吗
