js基础第二章 运算符
赋值运算符与算数运算符
赋值运算符
= 与数学中的等于号不同，在计算机的编程语言中，它是赋值的意思。而==才是等于，并且js还有强等于===。强等于在比较值的同时还会比较变量的类型。
let a = 5,b=3;
复制代码算术运算符
也就是，对变量进行，数学中的加减乘除还有取余等运算。
let a = 5,b=3;
let c = a + b;
let d = a - b;
let e = a * b;
let f = a / b;
let g = a % b;
复制代码复合运算符
实际上是一种简写方式。加减乘除取余等都可以使用
a+=b // 也就是 a = a + b
a*=5 // a = a * 5
复制代码一元运算符
也就是，++n,n++,--n,n--，n是任意的变量。
前++ 和 后++ 只有在进行运算后才有区别。
let n = 1;
let f = n+ ++n; // 3 在运算开始前自增1
复制代码 let n = 1;
let f = n+ n++; // 2 在运算结束后再自增1
复制代码比较运算符
- 包括:
> < >= <= == ===。返回的是布尔值 true 活 false。 - 在使用
==比较数值型和字符串类型的变量的时候，实际上进行了类型转换。 - 而使用
===就不会进行类型转换了。因此== ===区别：==只比较值，而===比较值和类型。在工作中推荐使用===
let a = 3,b=5,c=3,d="3";
console.log(a<b) // true
console.log(a>b) // false
console.log(a==d) // true
console.log(a===d) // false
复制代码小例子
在输入框中输入的数值大于等于90，我们就提示信息。
画一个input给他的name取名age。再画一个span用于展示提示信息。
<body>
<input name="age">
<span id="msg"></span>
<script>
// 通过id选择器找到span元素
let span = document.querySelector("#msg")
// 通过name找到input，为其添加keyup也就是键盘按下事件。然后触发函数
document.querySelector('[name="age"]').addEventListener("keyup",function(){
msg = ""
// this.value获得input的value 当它>=90 为msg赋值
if(this.value>=90){
msg = "年龄不能大于90"
}
// innerHTML 将提示信息添加到页面上
span.innerHTML = msg
})
</script>
</body>
复制代码逻辑运算符
记住与或非 && || !
let a = 1,b=1;
// 两边都成立
if(a==1 && b==1){
console.log("都是1")
}
// 成立一个即可
if(a==1 || b==2){
console.log("有一个1就行")
}
// 非和等于号加起来就相当于不等于 同样也有 !==
if(a==1 && a!=2){
console.log("表达式成立")
}
复制代码这里说一下我在React经常用的一些方法
{
exist && <div>exist存在或者值不为空再渲染这个div</div>
}
复制代码{
btnClick && <div>点击按钮后渲染</div>
!btnClick && <div>未点击按钮前渲染</div>
}
复制代码// 判断是否为空
!!"" // false
!!"a" // true
复制代码小例子
对比两次输入的密码，如果不相同，提示。并且密码位数要大于五位，否则也提示。
首先，先画两个输入框和一个span，并为其添加name。
<input name="password">
<input name="confirm_password">
<span name="msg"></span>
复制代码用的是querySelectorAll，通过name，获得输入框元素dom。
// 获得元素
let inputs = document.querySelectorAll("[name='password'],[name='confirm_password']")
console.log(inputs)
复制代码此时获得的inputs是NodeList
image.png
通过延展字符串来将NodeList，转为list数组。
let input_list = [...inputs]
复制代码遍历input_list，对两个input dom 进行事件监听(addEventListener)。
- keyup:键盘抬起事件
- query:方法封装用于通过name获取元素
- innerHTML: 给span添加内容
function query(name) {
return document.querySelector(`[name=${name}]`)
}
// 添加监听事件
input_list.map(item => {
item.addEventListener('keyup', function () {
// 提示内容使用的变量
let msg = '';
if (query('password').value !== query('confirm_password').value || query('password').value.length < 5) {
msg = '两次密码不一致或密码长度小于五'
}
query('msg').innerHTML = msg
})
})
复制代码短路赋值
也就是或的使用 ||
let a=6;
let b=0;
let c = a || b // 6 a不为0，那就相当于true条件，就不会再去看b了
let d = b || a // 6 b为0，相当于false条件。会再去看a，a为6相当于true
复制代码 let sex = prompt("请输入") || "保密";
console.log(sex)
复制代码如过输入内容就会打印输入的内容，否则打印"保密"
image.png
在函数中的使用
function star(num){
// 如果不传参数 num则为undefined
return "*".repeat(num || 4)
}
console.log(star())
复制代码当不传递参数时，也可以如下给一个默认值，这是Es6的新语法
function star(num=5){
// 如果不传参数 num则为undefined
return "*".repeat(num)
}
复制代码短路运算符小例子
当我们如下的，用户名或者接收协议不填/不选则弹出提示“请完善信息”
image.png
- 首先，画一个form表单，id为form，form内包着一个输入框name为user、一个checkbox，name为copyright。
- 一个公用的query函数用于查找元素。
- addEventListener监听form的提交submit事件，通过name找到user对应的输入框元素的value、和checkbox元素
- event.preventDefault() 阻止form真的提交
<html>
<head></head>
<body>
<form action="http://www.baidu.com" id="form">
用户名 ： <input name="user">
<hr>
<input type="checkbox" name="copyright"> 接收协议
<hr>
<button>提交</button>
</form>
<script>
// 网站协议接受验证
function query(el) {
return document.querySelector(el)
}
query('#form').addEventListener('submit', function (event) {
let user = query("[name='user']").value.trim()
let copyright = query("[name='copyright']").checked
if (!user || copyright === false) {
alert("请完善信息")
}
event.preventDefault();
})
</script>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-04-04，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录