1.比较运算符
let a = 1,b='1';
// 因为计算机会自动隐式转换将'1'转换成数字类型，所以 == 返回的结果是true'
console.log(a==b);
// 严格比较（不光比较值还比较数据类型）不会转换变量类型，所以 === 返回的结果是false
console.log(a===b);
注：0、null、空字符串、undefined为false
2.短路运算的妙用
|| 或运算符，当第一个值为真就不会判断后面的值。&& 与运算符，当第一个值为假也不会判断后面表达式。
// 返回的内容是值，而不是一个布尔类型。
let sex = prompt('请输入性别') || '保密'
console.log(sex)
注：prompt()可以输入内容的弹窗。
function star(num){
// repeat()方法是复制字符串指定次数
return '*'.repeat(num || 5)
}
console.log(star())
// 例子：网站协议接受验证
<body>
<form action="https://www.houdunren.com" id="form">
用户名：<input type="text" name="user">
<input type="checkbox" name="copyright" />接受协议
<button>提交</button>
</form>
<script>
function query(el) {
return document.querySelector(el)
}
query('#form').addEventListener('submit', function(event) {
// trim()方法去除字符串的左右空格
let user = query("[name='user']").value.trim()
// .checked查看复选框的选中状态
let copyright = query("[name='copyright']").checked;
console.log(copyright)
/*event.preventDefault() 方法阻止元素发生默认的行为。
例如:当点击提交按钮时阻止对表单的提交
阻止以下 URL 的链接*/
if (!user || copyright === false) {
event.preventDefault()
alert("请接收协议并添加用户名")
}
})
</script>
</body>
3. if流程控制
document.querySelector('[name="password"]').addEventListener('keyup', function() {
let length = this.value.length
let span = document.querySelector('#msg')
let msg = ''
if (length > 10) {
msg = '密码安全'
} else {
msg = '密码太弱'
}
span.innerHTML = msg
})
4.三元表达式
// let hd = true ? (3 ? "123" : "456") : 5
function div(options ={}){
let div = document.createElement("div")
div.style.width = options.width ? options.width: "100px"
div.style.height = options.height ? options.height: "100px"
}
div({width:"300px",height:"50px"})
5.switch使用注意事项
let error = "notice"
switch (error) {
case "notice":
case "warning":
console.log("提示或警告")
break;
case "error":
default:
console.log("错误信息")
}
6.while循环控制
function table(options = {
tr: 3,
td: 2
}) {
document.write(`<table border="1" width="100%">`)
while (options.tr-- != 0) {
let td = options.td
document.write(`<tr>`)
while (td-- != 0) {
document.write(`<td>${td}</td>`)
}
document.write(`</td>`)
}
document.write(`</table>`)
}
table({
tr: 7
})
7.dowhile循环
// dowhile先执行一次再进行判断
function star(row = 5){
let start = 0
do {
let n=0
do {
document.write("*")
}while(++n <= start)
document.write("<br/>")
}while(++start <=row)
}
8.使用for循环打印杨辉三角
for(let i=1;i<5;i++){
for(let n=5-i;n>0;n--){
docunment.write(' ')
}
for(let m=i*2-1;m>0;m--){
document.write("*")
}
docunment.write("<br/>")
}
9.break、continue和label标签的使用
houdunren: for(let i=1;i<=10;i++){
hdcms: for(let n=1;n<=10;n++){
if(n%2 == 0){
console.log(i,n)
}
if(n+i > 10){
// 直接退出两层循环
break houdunren
}
}
}
10.for-in 与 for-of使用方法操作
let news = [{
title: "第一章 走进JavaScript",
lesson: 3
}, {
title: "配置好用的编程工作站",
lesson: 6
}, {
title: "媒体查询响应式布局",
lesson: 8
}]
document.write(`<table border="1" width="100%">
<thead><tr><th>标题</th><th>课程数量</th></tr></thead>
`)
for (let i in news) {
document.write(`<tr><td>${news[i].title}</td><td>${news[i].lesson}</td></tr>`)
}
document.write("</table>")
// 遍历window对象
for (let key in window) {
// key就是键名
console.log(key)
console.log(window[key])
}
// for-in需要考虑索引，for-of直接取值就可以
let houdunren = ["hdcms", "houdunren.com"]
// for-of 里面是取值，主要是处理迭代对象 for (const iterator of object)
for (const value of object) {
console(value)
}
// 迭代对象也可以遍历字符串
for (let v of 'houdunren') {
console.log(v)
}
