1.类型判断
let hd = "3"
let arr = [1,33,333] //typeof 判断为Object
let obj ={} //typeof 判断为Object
function run(){} //typeof 判断为function
if (typeof hdjs == "undefined"){
throw new Error("变量hdjs没有声明")
}
console.log(typeof run)
// 因为用typeof类型判断 数组和对象 返回结果都是Object
let hd = []
let hdcms = {}
// instanceof这个属性其实是判断 hd.prototype 是否在原型链上
// hd 是否是由Array这个构造函数实现出来的
console.log(hd instanceof Array)
2.构造函数
(1)什么是构造函数
在JacaScript中，用new关键字来调用的函数，称为构造函数。构造函数首字母一般大写。
(2)为什么要用构造函数
在使用对象字面量创建一系列同一类型的对象时候，这些对象可能具有一些相似的特征（属性）和行为（方法），此时会产生很多重复代码，而使用构造函数就可以实现代码复用。
3.字符串转义与模板字面量使用
// let hd = new String("houdunren.com")
// console.log(hd.toString())
// 简写形式
// 转义符\",\\ \n 显示" \ 换行
let hd = "houdunren\".com"
console.log(hd)
// 字符串的连接
let year = "2010"
let site = "成立于"
console.log(site + "成立于" + year)
console.log(`${site}成立于${year}`)
4.模板字面量嵌套使用技术
function show(){
return "houdunren.com"
}
// ${}里面可以写大多数的js表达式
let hd = `www.${show()}`
console.log(hd)
let lessons = [
{title:"媒体查询响应式布局"},
{title:"flex 弹性盒模型"},
{title:"grid栅格系统"}
]
function template(){
// join()方法用于把数组中的所有元素转换成一个字符串
return `<ul>
${lessons.map(item => `<li>${item.title}</li>`).join("")}
</ul>`
}
document.body.innerHTML = template()
5.神奇的标签模板实例操作
let name = "后盾人"
let web = "houdunren.com"
// tag标签
console.log(tag`在线教程${name}，网址是${web}。`)
function tag(strings,...vars){
// 这样是可以接收到变量的
console.log(vars)
// 打印出来的strings不包含变量${name}... 是包含字符串包含后面的句号
console.log(strings)
}
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("")}
</ul>`
}
// 将所有后盾人开头的作者加上链接
// replace()字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
function links(strings,...vars){
// Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。
return strings.map((str,key)=>{
return str + (vars[key] ? vars[key].replace('后盾人',
`<a href="https//www.houdunren.com">后盾人</a>`): "")
}).join("")
// console.log(vars)
}
document.body.innerHTML += template()
6.字符串基本函数使用
<body>
<input type="text" name="password">
<span>
</span>
</body>
<script>
let name = "houdunREN"
// 小写字母转换为大写字母
console.log(name.toUpperCase())
// 大写字母转换为小写字母
console.log(name.toLowerCase())
let site = " hdcms "
// length判断字符串长度，连带空格也包含在内
console.log(site.length)
// trim()方法可以帮助去掉字符串中两边的空白（中间空白不能去掉）
console.log(site.trim().length)
let ps = document.querySelector("[name='password']")
ps.addEventListener("keyup", function(){
this.value = this.value.trim()
let span = document.getElementsByTagName("span")
let error = ""
if(this.value.length < 5){
error = "密码不能小于5伟"
}
span[0].innerHTML = error
})
// 取字符串中单个字符
let hd = "houdunren"
// 用charAt()方法取单个字符
console.log(hd.charAt(0))
// 用迭代器的形式取单个字符
console.log(hd[0])
for(let i=0; i<hd.length; i++){
let span = document.createElement("span")
span.innerHTML = hd[i]
// append() 方法在被选元素的结尾插入指定内容。
document.body.append(span)
}
</script>
7.字符串截取
重点：从后台抓取过来的数据，进行字符串的截取...
let hd = "houdunren.com"
// slice substr substring
console.log(hd.slice(1,3)) // 从第一个开始截取，截取到第三个的位置 ou
console.log(hd.substring(1,3)) // 从第一个开始截取，截取到第三个的位置 ou
console.log(hd.substr(1,3)) // 从第一个开始截取，截取三个字符 oud
console.log(hd.slice(-3)) // 从后面截取三个 com
console.log(hd.substring(-3,-1)) // 负数无效都是0，都是从零开始截取 houdunren.com
console.log(hd.substr(-3) // 从后面截取三个 com
console.log(hd.slice(-3,-1)) // 从后面截取，截取到-1 co
console.log(hd.substr(-3,2)) // 从后面-3开始，截取两个 co
8.检索字符串使用技巧
const hd = "houdunren.com"
console.log(hd.indexOf("o",11)) // 从0开始第11个位置查找o ,查找到的是第二个o的位置（如果找不到则显示-1，默认从左边开始查找）
console.log(hd.lastIndexOf('o')) // 从右边开始查找 结果：11
console.log(hd.includes("h",5)) // 返回布尔值真或假 两种类型
// startsWith()看某个字符是不是在开始出现 区分大小写H则显示false
console.log(hd.toLowerCase().startsWith("h"))
// endsWith()查看是否以某个字符结束
console.log(hd.toLowerCase().endsWith("m"))
const word = ['php','css']
const string = "我喜欢学习css知识，不喜欢学习php"
// some,遍历元素有一个是真 则返回true，否则返回false（就近查找）
word.some((word)=>{
console.log(word)
return string.includes(word)
})
9.字符串替换标题关键词
const hd = "houdunren.com"
hd.replace("houdunren","xiaoxin")
const word = ['php','css']
const string = "我喜欢学习css知识，不喜欢学习php"
const replaceString = word.reduce((pre,word)=> pre.replace(word,`<a href="?w=${word}">${word}</a>`),string)
console.log(replaceString)
document.body.innerHTML += replaceString
10.电话号码模糊处理
function phone(mobile,len = 3){
// 截取方法只对字符串有效，所以要先将mobile转换成String，在进行截取
return String(mobile).slice(0,len*-1)+'*'.repeat(len)
}
console.log(phone(392492834234))
11.类型转换
// 字符串转换成数字
const string = "99"
// 第一种字符串转换 参与数值运算
console.log(string * 1 + 78)
// 第二种使用构造函数Number
console.log(Number(string) + 78)
// 数字转字符串
const number = 66
const str = number + ""
console.log(typeof str)
// String是构造函数，tostring是Object的方法
console.log(typeof String(number))
// 将包含字母或其他字符的字符串 转换为数字类型 parseInt()
const string = "99hhhh"
console.log(parseInt(string))
// 显示结果为99
const array = ["hdcms","123"]
// join方法把数组中的所有元素转换成一个字符串括号里面是每个元素的连接方式
console.log(array.join(""))
let str = "hou"
// String
console.log(typeof str)
// 但是值类型也能调用对象的相关方法，是因为解析器隐式将他变成对象来调用
let cms = new String("hou")
// 用构造函数创建的是一个对象，有对象之后才能通过对象来调用对象相关的方法
console.log(tpyeof cms)
const arr = ["hdcms","hou"]
// 将arr转换成字符串，默认用逗号进行连接
console.log(arr.toString())
const number = 99
const newNumber = number.toString()
12.Boolean隐式转换原理
const boolean = new Boolean(true)
console.log(typeof boolean) // Object
// 取值valueOf()
console.log(boolean.valueOf()) // true
// 字面量形式
let hd = true
console.log(typeof hd) // boolean 直接可以进行判断，不需要取值
let number = 89
// 解析器默认将它们都转换成数值类型 true转换成1 1==89 结果为false
console.log(number == true)
// 但是可以将number转换成布尔类型 就为true了
Boolean(number)
// 字符串转布尔类型也是一样，字符串只有空字符串才是假，其他时候都是真
// 空数组为假,但是将一个空数组转换成布尔类型它就变成了true（比较和转换是两件事情）
let arr1 = []
let array = Number(array)
console.log(array == false) true
// 数组里面有多个值的时候没办法转换成数字，所以返回的结果为NaN
let arr2 = [1,2,3]
console.log(Namber(arrr2)) // NaN
// [] {} 这种空数组空对象，最终装换成布尔类型都是真
总结：数值类型除了0都为真，字符串类型除了空字符串都为真，引用类型数组和对象也都是为真
13.显示转换Boolean
let number = 0
// 第一种转换取反！ 进行了两步操作一个是转换成布尔类型，第二步取反，真变假，假变真
number = !!number
// 上面的操作是将0数字类型通过取反再取反转换成一个布尔类型
// 第二种使用构造函数
console.log(Boolean(number))
// 针对于字符串、数组、对象、日期等等也是同理，可以使用这两种方式。
14.Boolean实例
// prompt弹窗输入框，trim()去掉空格在使用length计算长度的时候不参与计算
const year = prompt('今年是哪一年？').trim()
while(true){
// prompt弹窗输入框，trim()去掉空格在使用length计算长度的时候不参与计算
const year = prompt('今年是哪一年？').trim()
if(!year) contimue;
console.log(year == "2022" ? "正确" : "错误");
break;
}
15.Number声明方式与基本函数
let number = 99
console.log(Number.isInteger(number)) // 构造函数的静态方法判断是否为整型
let num1 = 99.3242
console.log(number.toFixed(2)) // 四舍五入截取小数点后两位 99.32
// toFixed() 返回的是一个字符串
16.数值类型转换技巧与NaN类型
console.log(Namber("hhhh")) // NaN
console.log(2 / "hhh") // NaN
console.log(NaN == NaN) // 两个NaN是不可以比较的
console.log(Number.isNaN(2 / "hhh")) //true
console.log(Object.is(2 / "hhh", NaN)) //true
let hd = 89
console.log(Number(hd))
const number = document.querSelector("[name='number']").value
console.log(typeof number) //String当输入的内容是数字的时候也是String类型所以可以再input里面将tpye="number"，这样就能接收到一个数字类型的了
let hd1 = "89sdjlfja"
console.log(parseInt(hd1)) // 返回结果为89，但是字符串以字符开头就取不到数字了
17.Math数学计算
console.log(Math.min(1,2,3,4,5))
let grade = [12,22,33]
console.log(Math.max(grade)) // NaN 因为这个函数本身不支持数组，只支持多参数
console.log(Math.max.apply(null,grade)) // 33 apply call
// 向上取整
console.log(Math.ceil(5.01)) // 6
// 向下取整
console.log(Math.floor(5.99)) // 5
// 舍入函数
console.log((4.539).toFixed(2)) // 4.54
console.log(Math.round(4.532)) // 5
18.Math.random随机点名操作
// 默认范围 >= 0 ~ < 1
// Math.floor(Math.random()*(Max + 1))
// 要想取0~5之间的数
console.log(Math.floor(Math.random() * (5 + 1)))
// 2~5之间(包含5则加一)
// min + Math.floor(Math.random()*(Max - min + 1))
console.log(2 + Math.floor(Math.random() * (5-2+1)))
