1.0 隐式转换
隐式转换 => 隐式的转换数据类型 => js机制(原理),不是语法.判断 => 语法
隐式转换什么时候发生?
- 操作符对操作数的类型是有要求的,如果操作数的类型不符合要求,就会有隐式转换.
- 判断语句的()内的数据类型也是有要求,不符合要求就隐式转换.
- 某些方法的参数的类型是有要求的,不符合要求的隐式转换.
- 算术运算符要求操作数的类型是Number.如果不是,隐式转换成number再计算
- 比较运算符要求操作数的类型是Number.(==除外),如果不是,隐式转换成number在比较
- 判断的()内的数据类型应该是boolean.如果不是,隐式转换成boolean再比较
- alert()的参数类型应该是string.如果不是,隐式转换成string,再弹出
隐式转换的规律是什么?
- 1 * '零' => '零'不是number,需要转换成数字后再和1相乘.
- '零'转换成number是多少? => Number('零') => 返回的值就是'零'转换后的number
- NaN和任何数字进行计算，结果都还是NaN
- 字符串转换成number的规律
- 非数字字符串转换成number都是NaN.
- 空字符串会隐式转换成0
- 纯数字字符串转直接换成number
- 布尔值转换成number
- true是1
- false是0
- undefinded转换成number是NaN
- null转换成number是0
- 把数字开头的字符串转换成数字.
- parseInt('100px') === 100;
- 转换小数.
- parseFloat('1.4px') === 1.4
1 + true;
2.0 字符串的隐式转换
字符串拼接的 + 不是算术运算的 +
如果 + 的操作数有一个是字符串,则这个+就是拼接的 + , 而不是算术的 +
如果 + 的操作数有一个是对象,则这个+就是拼接的 + , 而不是算术的 +
拼接的 + .要求操作数是字符串.不是就隐式转换成字符串.然后再拼接.
<script>
100 + '' === '100';
100 + true === 101;
100 + 'true' === '100true';
100 + window === '100[object Window]';
</script>3.0 布尔值隐式转换
<body>
<div id='wrap'></div>
<script>
// 100写在if的判断条件里,100不是布尔值,需要隐式转换为布尔值.
// 显示转换100位布尔值: Boolean(100) === true
// if (100) {
// alert('100是真的');
// }
// if (window) {
// alert('window是true');
// }
const oDiv = document.getElementById('wrap1');
if (oDiv === null) {
console.log('div不存在');
} else {
console.log('div存在');
}
// 推荐利用隐式转换来判断一个标签的存在与否。
if (oDiv) {
console.log('div存在');
} else {
console.log('div不存在');
}
if (1<2) {
console.log('1<2');
}
if (1<2 === true) {
console.log('1<2');
}
// 哪些值转换成布尔值是false?
// 0,NaN,'',undefined,null
// 6个数据类型记不住.
// 5个但记不住.
</script>
</body>4.0 常见的判断形式
1.如何判断一个div的内容是空的
<script>
const oDiv = document.getElementById('wrap');
const oText = document.getElementById('text');
const oCheck = document.getElementById('check');
console.dir(oDiv);
console.dir(oText);
if (oDiv.innerHTML === '') {
console.log('div的内容是空的');
}
if (oDiv.innerHTML) {
console.log('div的内容不是空的');
} else {
console.log('div的内容是空的');
}
</script>2.如果判断一个文本框是空的
<script>
if (oText.value) {
console.log('文本框有输入内容');
} else {
console.log('文本框没有输入内容');
}
</script>3.如何判断一个div的class是不是active
<script>
if (oDiv.className === 'active') {
console.log('oDiv的class是active')
}
</script>4.如何判断一个复选框是不是打钩的.
// checked是一个布尔属性,属性值是布尔值.
// true表示打钩，false表示不打钩。
<script>
console.log(oCheck.checked);// true
if (oCheck.checked === true) {
console.log('打钩的')
} else {
console.log('不是打钩的')
}
if (oCheck.checked) {
console.log('打钩的')
} else {
console.log('不是打钩的')
}
</script>5.如何判断一个标签的背景色是不是红的
<script>
if (oDiv.style.backgroundColor === 'red') {
console.log('红色的')
}
// 如何判断一个标签是不是显示的
if (oDiv.style.display === 'none') {
console.log('隐藏的')
}
</script>6.如何判断一个标签是不是div
<script>
if (oDiv.localName === 'div') {
console.log('oDiv是一个div标签')
}
if (oDiv.nodeName === 'DIV') {
console.log('oDiv是一个div标签')
}
</script>7.判断一个变量的类型是不是number
<script>
let num = '';
if (typeof num === 'number') {
console.log('num是数字类型')
}
</script>5.0 判断是不是数字
<body>
<input type="text" id='text'>
<input type="button" value='按钮' id='btn'>
<script>
// NaN的两个特性:
// 1: NaN和任何数字进行计算都是NaN
// 2: NaN自己和自己比较是false.(只有NaN是这样)
const oText = document.getElementById('text');
const oBtn = document.getElementById('btn');
oBtn.onclick = function() {
// 把用户的输入的内容转换成number类型.
// 如果输入的不是纯数字,隐式转换成NaN.
// 只有NaN自己和自己不等.不等证明输入的不是数字.
if (oText.value * 1 === oText.value * 1) {
// 只有整数经过parseInt和parseFloat转换之后的值是一样的.小数不一样.
if (parseFloat(oText.value) === parseInt(oText.value)) {
alert('输入的是整数');
} else {
alert('输入的是小数');
}
} else {
alert('输入的不是数字');
}
}
// 要判断一个值是不是小数，你得先判断它是不是数字，然后再判断是不是小数。
</script>6.0 逻辑与和或
<script>
// 区间判断.
// 判断一个数是不是在10-20之间.
let num = 5;
// 10 < num < 20 => 永远都是true.
// 因为: 10 < num 隐式转换为数字不是0就是1, 0或者1永远小于20
if (10 < num < 20) {
alert('在10-20之间')
} else {
alert('不在10-20之间')
}
</script><script>
// 区间判断.
// 判断一个数是不是在10-20之间.
let num = 5;
// 这个数必须同时大于10并且小于20.
if (num > 10) {
if (num < 20) {
alert('在10-20之间')
} else {
alert('不在10-20之间')
}
} else {
alert('不在10-20之间')
}
</script>&& => 并且的意思.
if ( 条件1 && 条件2 ) => 条件1和条件2都是true,判断条件才是true, 只要有一个是false,条件就是false
if ( 条件1 && 条件2 && 条件3 .....)
<script>
// 区间判断.
// 判断一个数是不是在10-20之间.
let num = 5;
if (num > 10 && num < 20) {
alert('在10-20之间')
} else {
alert('不在10-20之间')
}
</script>7.0 逻辑或
let num = 15;
if (num < 10) {
alert('不在10-20之间')
} else if (num > 20) {
alert('不在10-20之间')
} else {
alert('在10-20之间')
}|| => 或者意思.
if ( 条件1 || 条件2 ) => 条件1或者条件2为true,判断条件就是true.两个条件都是false,条件就是false
if ( 条件1 || 条件2 || 条件3 ...... )
<script>
// 判断一个数不在10-20之间.
// 数字小于10,或者大于20.
let num = 15;
if (num < 10 || num > 20) {
alert('不在10-20之间')
} else {
alert('在10-20之间')
}
</script>8.0 逻辑非
! => 取反 (true变false,false变true) (逻辑非)
!需要操作数是布尔值,如果不是,就隐式转换为布尔值再取反
<script>
let flag = true;
console.log(!flag);
console.log(!100);
</script>9.0 反选
<body>
<input type="checkbox" id='check' >
<input type="button" id='btn' value='切换'>
<script>
const oCheck = document.getElementById('check');
const oBtn = document.getElementById('btn');
oBtn.onclick = function() {
if (oCheck.checked === true) {
oCheck.checked = false;
} else {
oCheck.checked = true;
}
}
</script>
</body><body>
<input type="checkbox" id='check' >
<input type="button" id='btn' value='切换'>
<script>
const oCheck = document.getElementById('check');
const oBtn = document.getElementById('btn');
oBtn.onclick = function() {
// 取反操作.
oCheck.checked = !oCheck.checked;
}
</script>
</body>
- 三目写法赋值
<body>
<input type="checkbox" id='check' >
<input type="button" id='btn' value='切换'>
<script>
const oCheck = document.getElementById('check');
const oBtn = document.getElementById('btn');
oBtn.onclick = function() {
// 三目赋值
oCheck.checked = oCheck.checked ? false : true;
}
</script>
</body>2.0 逻辑或和逻辑与的运算
&& || ! => 都是运算符 => 都能构成表达式 => 有返回值。
短路操作 => 只需要判断一个条件是否成立,就能知道整个条件是否成立.
逻辑&& => 操作数1是true,就返回第二个操作数,否则返回第一个操作数.
逻辑|| => 操作数1是true,就返回第一个操作数,否则返回第二个操作数.
let x = 100 && '幂幂';
let x = 100 || '幂幂';
if (num < 20 && num > 10) => 操作数是什么类型就返回什么类型
console.log(x);
<script>
// 女朋友的消息.
let toBf = '';
// 男朋友的消息
let toGf = '';
// 判断赋值
// if (toBf === '分手吧') {
// toGf = '滚吧！'
// }
toGf = toBf === '分手吧' && '滚吧！';
// if (toBf === '我饿了') {
// toGf = '多喝热水'
// }
toGf = toBf === '我饿了' && '滚吧！';
</script>2.1 三目运算
三目运算符，三元运算符，条件运算符
单目运算符 => typeof ++, --, ! delete
三目运算符有三个操作数.
操作数1 ? 操作数2 : 操作数3
运算规律 => 操作数1是true,就返回操作数2,否则返回操作数3.
<script>
if (1<2) {
alert('1<2')
} else {
alert('1>=2')
}
// 以上的判断可以改写成三目.
1 < 2 ? alert('1<2') : alert('1>=2');
</script><script>
if (1<2) {
alert('1<2');
console.log('我是多余的');
} else {
alert('1>=2');
console.log('我也是多余的');
}
// 以上代码可以改写成下面的三目.
1 < 2
? (alert('1<2'),console.log('我是多余的'))
: (alert('1>=2'),console.log('我也是多余的'));
</script><script>
if (是数字) {
if (是小数) {
console.log('输入的是小数')
} else {
console.log('输入的不是小数')
}
} else {
console.log('输入的不是数字')
}
// 以上代码可以改写成下面的三目.
是数字
? 是小数
? console.log('输入的是小数')
: console.log('输入的不是小数')
: console.log('输入的不是数字')
</script>2.2 判断赋值
<script>
// 女朋友的消息.
let toBf = '';
// 男朋友的消息
let toGf = '';
// 判断赋值
if (toBf === '分手吧') {
toGf = '滚吧！';
} else {
toGf = '多喝热水';
}
// 根据条件toBf === '分手吧'的真假,给toGf赋值不同的字符串
toGf = toBf === '分手吧' ? '滚吧！' : '多喝热水';
</script>2.3 逻辑与改写if
<script>
// && 可以改写单个if判断.
if (1<2) {
alert('1<2');
}
// 通过&&改写if判断.
1<2 && alert('1<2');
// if 判断 可以用 && 改写.
// if else 判断可以用 三目改写.
</script>2.4 运算符优先级
<script>
// 先乘除后加减 => 运算符优先级问题.
// 粗劣的优先级.
// ++ -- >!>算术 > 比较 > 逻辑 > 三目 > 赋值 > ,
// let num = 100 && null + 200 * typeof '赵六' || NaN ? console.log('哈哈') && !alert(100) : 1+3;
// num = 100 && null + 200 * 'string' || NaN ? undefined && !undefined : 1+3;
// num = 100 && null + 200 * 'string' || NaN ? undefined && true : 1+3;
// num = 100 && null + NaN || NaN ? undefined && true : 1+3;
// num = 100 && NaN || NaN ? undefined && true : 4;
// num = NaN || NaN ? undefined : 4;
// num = NaN ? undefined : 4;
// num = 4;
console.log(num);// 4
</script>
1308
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
