JS基础语法
一.JS引入
js导读
js属于编写运行在浏览器上的脚本语言
ps.脚本语言:通过一门编程语言写的代码块到其他的语言中，为其他的语言辅助完成一些功能
js采用ECMAScript语法，来操作BOM及DOM
操作BOM:浏览器对象模型
操作DOM:文档对象模型
js引入
相关代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js引入</title>
<style>
#box, #wrap, #temp, #res {
width: 200px;
height: 200px;
background-color: red;
margin-top: 10px;
}
</style>
<script>
alert("hello js")
</script>
</head>
<body>
<!--1.行间式-->
<div id="box" onclick="this.style.borderRadius = '10px'"></div>
<div id="wrap" ondblclick="this.style.backgroundColor = 'orange'"></div>
<div id="temp"></div>
<!--2.内联式-->
<script>
temp.onclick = function () {
this.style.width = "400px";
}
</script>
<div id="res"></div>
</body>
<!--3.外联式-->
<script src="js/1.js">
// 有src链接外部js的script标签相当于单标签, 会自动屏蔽标签内部代码块
</script>
<!--script通常放在body和html之间-->
</html>
// js/1.js res.onclick = function () { // res点击会触发一个功能 this.style.height = "100px"; // this => res this.style.backgroundColor = "yellow"; this.style.borderRadius = "50%"; }
js相关总结
<style>
#box, #wrap, #temp, #res {
width: 200px;
height: 200px;
background-color: red;
margin-top: 10px;
}
</style>
<!--1.行间式: 就是代码块书写在全局事件属性中-->
<!--this就是激活该代码块(脚本)的页面标签(页面元素对象)-->
<div id="box" onclick="this.style.borderRadius = '10px'"></div>
<div id="wrap" ondblclick="this.style.backgroundColor = 'orange'"></div>
<div id="temp"></div>
<!--2.内联式-->
<script>
// id为标签的唯一标识, 使用可以识别到html的具体标签
temp.onclick = function () { // 完成某一项功能
this.style.width = "400px"; // this => temp
}
</script>
<div id="res"></div>
<!--3.外联式-->
<script src="js/1.js">
二.JS选择器
js选择器相关代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js选择器</title>
<style>
#box, .box1, .box2 {
background-color: orange;
width: 200px;
height: 200px;
margin-top: 2px;
}
</style>
</head>
<body>
<div id="box"></div>
<!--虽然id可以重复, 但是js中就无法唯一标识识别, 所以约定俗成标签id名一定不能重复-->
<div id="box"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box2">1</div>
<div class="box2">2</div>
</body>
<script>
// 事件绑定这函数的地址, 使用激活事件, 就会通过函数地址找到函数功能体, 完成指定功能
// 页面如果有两个id="box", 一个都匹配不上
// box.onclick = function () {
// this.style.borderRadius = "50%";
// }
// document对象
// getElement系列选择器
// 能获得到第一个id="box", 但是第二个永远取不到, 所以id还是不能重复
document.getElementById('box').onclick = function () {
this.style.borderRadius = "50%";
}
// js变量的定义
// 关键字(var) 变量名 = 变量值;
var num = 10;
// 如何查看变量名
var a = num;
// print(num); // 调用浏览器使用打印机
// 弹出框查看(*)
// alert(num);
// alert(a);
// 浏览器控制台查看(***)
// console.log(num);
// console.log(a);
// 将内容书写到页面(*)
// document.write(num);
// document.write(a);
// 断点调试(***)
// 断点调节(debug)
var box = document.getElementById('box');
// 上面和下面获取的都是第一个box, box的点击事件最终绑定到的是改变背景颜色的函数地址
box.onclick = function () {
this.style.backgroundColor = "green";
}
// 通过类名 => 类名可以重复 => 获取的结果是数组(列表)
var boxs = document.getElementsByClassName('box1');
console.log(boxs);
boxs[0].onclick = function () {
this.style.backgroundColor = 'blue'
}
boxs[1].onclick = function () {
this.style.backgroundColor = 'pink'
}
// 通过标签名 => 标签名 => 获取的结果是数组(列表)
var divs = document.getElementsByTagName('div');
console.log(divs);
divs[1].ondblclick = function () {
divs[1].style.borderRadius = "50%";
}
</script>
<script>
// 参数: css语法的选择器
var box2s = document.querySelectorAll('body .box2');
console.log(box2s);
var box2 = document.querySelector('body .box2');
console.log(box2);
</script>
</html>
js选择器总结
<div id='box' class="bb"></div> <div class='box1 bb'></div> <div class='box1 bb'></div> <script> // getElement系列 // box var box = document.getElementById('box'); // [] | [.box1] | [.box1, ..., .box1] var boxs = document.getElementsByClassName('box1'); // [] | [div] | [div, ..., div] var divs = document.getElementsByTagName('div'); // 总结: 参数采用的是id名或类名或标签名,不需要带符号(#|.) </script> <script> // 只能获取检索到的第一个满足条件的标签(元素对象) var div = document.querySelector('.bb'); // 获取的是满足条件的有双类名的.box1.bb var divs = document.querySelectorAll('body .box1.bb'); // 总结: 参数采用的就是css选择器语法 </script>
三.事件的简单总结
var box = document.querySelector('.box'); // 元素对象.事件名 = 函数 box.onclick = function() { // 具体功能代码块; this代表就是激活该事件的元素对象 this.style.color = 'red'; // 将box的字体颜色修改为红色 }
四.JS操作页面元素对象*****
js操作页面元素对象相关代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>操作页面文档</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: orange;
font: 900 30px/200px "STSong";
text-align: center;
color: red!important;
margin: 0 auto;
}
.box.box1 {
color: greenyellow!important;
font-size: 12px;
font-weight: lighter;
}
</style>
</head>
<body>
<div class="box">文本内容</div>
</body>
<script>
// 1. 通过选择器获取页面元素对象(指定的标签)
// 2. 为该对象绑定事件
// 3. 通过事件中的功能操作元素对象
// i) 修改内容: innerText | innerHTML
// ii) 修改样式
// iii) 修改类名
var box = document.querySelector('.box');
box.onclick = function () {
// 修改内容
// this.innerText = "innerText";
// this.innerHTML = "<i>innerHTML</i>"; // 可以解析html标签
// 修改样式 => 修改的是行间式
// this.style.color = "green";
// this.style.fontSize = "12px";
// 修改类名
// this.className = "box1"; // 直接修改类名, 会丢失之前类名下的属性们
// 在原类名基础上添加类型
this.className += " box1";
// var cName = this.className;
// console.log(cName);
// cName = cName + " " + "box1";
// console.log(cName);
// this.className = cName; //这是处理后的cName
// 清除类名
this.className = "";
}
</script>
</html>
js操作页面元素对象总结
// 1. 通过选择器获取页面元素对象(指定的标签) // 2. 为该对象绑定事件 // 3. 通过事件中的功能操作元素对象 // i) 修改内容: innerText | innerHTML // ii) 修改样式 // iii) 修改类名 var box = document.querySelector('.box'); // 获取页面元素 box.onclick = function () { // 绑定事件 // 修改内容 // this.innerText = "innerText"; // 不能解析html标签 // this.innerHTML = "<i>innerHTML</i>"; // 可以解析html标签 // 修改样式 => 修改的是行间式 => 优先级高于所有内联外联样式(没有设置!important) // this.style.color = "green"; // this.style.fontSize = "12px"; // 修改类名 // this.className = "box1"; // 直接修改类名, 会丢失之前类名下的属性们 // 在原类名基础上添加类型 this.className += " box1"; // 多类名之间用空格隔开, 所有做字符串拼接时一定需要添加空格 // 清除类名 this.className = ""; // 将类名等于空字符串就是置空类名 }
五.计算后样式
pass
六.数据类型
1.1值类型
// Number: 数字类型 var a1 = 10; var a2 = 3.14 // String: 字符串 var s1 = "123"; var s2 = '456'; // undefined: 未定义 var u1; var u2 = undefined; // Boolean: 布尔 var b1 = true; var b2 = false; // typeof() 来查看类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js基础语法</title>
</head>
<body>
js基础语法
<div id="box"></div>
</body>
<script>
// 1.定义变量
var num = 10;
var s = "hello js";
console.log(num, "<<>>", s); //10 "<<>>" "hello js"
console.log("%d %s", num, s); //10 hello js
// 将字符串赋值给页面元素对象
box.innerText = s;
//命名规范：
// 由字母，数字，_，$组成，不能以数字开头（可以包含中文字符）
// 区分大小写
// 不能出现关键字及保留字
// var var = 30; // 出错
// 数据类型
// 值类型
// 数字类型 | 字符串类型 | 未定义类型 | 布尔类型
// 用typeof()函数可以查看变量类型
// 1.Number
var a = 10;
console.log(a, typeof(a)); //10 "number"
a = 3.14;
console.log(a, typeof(a)); //3.14 "number"
// 2.String
a = '123';
console.log(a, typeof(a)); //123 string
a = "456";
console.log(a, typeof(a)); //456 string
// 3.undefined
var b;
console.log(b); //undefined
// 打印出undefined,为什么能打印，因为js不直接操作内存
a = undefined;
console.log(a, typeof(a)); //undefined "undefined"
// 4.boolean
a = true;
console.log(a, typeof(a)); //true "boolean"
b = false;
console.log(b, typeof(b)); //false "boolean"
</script>
</html>
1.2引用类型
// Object var obj = {}; // Function var func = function(){} // Null var n = null;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js基础语法</title>
</head>
<body>
js基础语法
<div id="box"></div>
</body>
<script>
// 引用类型
// 5.Function
a = function () {
return 0;
}
console.log(a, typeof(a));
// ƒ () {
// return 0;
// } "function"
// 6.Object => 当做字典
a = {
name: "Bob",
age: 18
}
console.log(a, typeof(a));
// 7.Null => 空对象
a = null;
console.log(a, typeof(a));
</script>
</html>
1.3其他类型
// 数组 a = new Array(1, 2, 3, 4, 5); a = [5, 4, 3, 2, 1]; // 语法糖 // 时间对象 (cookie) a = new Date(); // 当前时间 // a = new Date("2019-3-1 12:00:00"); // 设定的时间 console.log(a.getFullYear()); // 年 console.log(a.getDay()) // 周几 console.log(a.getMonth()) // 月份(从0) console.log(a.getDate()) // 几号 // 正则 var re = new RegExp('\\d{3}', 'g'); var res = "abc123abc123".match(re); re = /\d{2}/g; res = 'a1b23c456'.match(re); console.log(res); re = /[abc]/gi; res = 'aBc'.match(re); console.log(res); // 总结: // 1.正则 /正则语法/ // 2.参数g 全文匹配 // 3.参数i 不区分大小写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js基础语法</title>
</head>
<body>
js基础语法
<div id="box"></div>
</body>
<script>
// 其他
// 数组对象
a = new Array(1, 2, 3, 4, 5); //创建对象的形式
console.log(a, typeof(a));
a = [5, 4, 3, 2, 1]; // 语法糖
console.log(a, typeof(a));
// 时间对象 (cookie)
a = new Date(); // 当前时间
// a = new Date("2019-3-1 12:00:00"); // 设定的时间 2019年3月1日创建的时间
console.log(a, typeof(a));
var year = a.getFullYear();
console.log(year)
console.log(a.getDay()) // 周几
console.log(a.getMonth()) // 月份(从0)
console.log(a.getDate()) // 几号
// 正则（暂时未消化）
var re = new RegExp('\\d{3}', 'g');
var res = "abc123abc123".match(re);
console.log(res);
re = /\d{2}/g;
res = 'a1b23c456'.match(re);
console.log(res);
re = /[abc]/gi;
res = 'aBc'.match(re);
console.log(res);
// 总结:
// 1.正则 /正则语法/
// 2.参数g 全文匹配
// 3.参数i 不区分大小写
</script>
</html>
1.4数组与字典的使用
// 数组与对象(字典)的使用 var arr = [3, 5, 2, 1, 4]; console.log(arr[2]); var dic = { "name": "Bob", age: 18, "little-name": "b" } console.log(dic['name']); console.log(dic['age']); console.log(dic.name); console.log(dic.age); console.log(dic["little-name"]) // dic中所有的key都是string类型, value可以为任意类型 // dic中key可以通过中括号及.语法访问值,但key不满足js命名规范时,只能使用中括号语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js基础语法</title>
</head>
<body>
js基础语法
<div id="box"></div>
</body>
<script>
// 数组与对象(字典)的使用
var arr = [3, 5, 2, 1, 4];
console.log(arr[2]);
var dic = {
"name": "Bob",
age: 18,
"little-name": "b"
}
console.log(dic['name']);
console.log(dic['age']);
console.log(dic.name);
console.log(dic.age);
console.log(dic["little-name"])
// dic中所有的key都是string类型, value可以为任意类型
// dic中key可以通过中括号及.语法访问值,但key不满足js命名规范时,只能使用中括号语法
</script>
</html>
七.小米案例分析(项目实例)
pass
八.if分支
分支结构
if (表达式1) { } else if (表达式2) { } ... else if (表达式2) { } else { }
// +做类型转换 var salary = +prompt("请输入工资:"); if (salary > 88888) { console.log("开始还账!"); salary -= 50000; console.log("开始购物 30000!"); salary -= 30000; // 最少剩8888 if (salary > 10000) { console.log("旅游!"); } else if (salary > 9000) { console.log("花200学习!"); salary -= 200; } else { console.log("吃土!") } } else { console.log("要求提薪"); } // if可以省略else if, 也可以省略else // if可以嵌套 // if(条件){ 逻辑体 } else if(条件){ 逻辑体 } else{ 逻辑体 }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>if分支结构</title>
</head>
<body>
if分支结构
</body>
<script>
/*
if (表达式1) {
} else if (表达式2) {
}
...
else if (表达式2) {
} else {
}
*/
// 三种弹出框
// alert(123); // 普通弹出框
// var res = prompt("请输入:"); // 输入框, 得到输入的字符串内容
// var res = confirm("请选择"); // 确认框, 得到true | false
var salary = +prompt("请输入工资:");
if (salary > 88888) {
console.log("开始还账!");
salary -= 50000;
console.log("开始购物 30000!");
salary -= 30000; // 最少剩8888
if (salary > 10000) {
console.log("旅游!");
} else if (salary > 9000) {
console.log("花200学习!");
salary -= 200;
} else {
console.log("吃土!")
}
} else {
console.log("要求提薪");
}
</script>
</html>
九.函数
// js函数的重点: 如何给事件提供功能 // 1.函数的定义 // function 函数名(形参列表) { // 函数体; // } // 2.函数的调用 // var res = 函数名(实参列表); // 3.函数的参数 // i.个数不需要统一 // ii.可以任意位置具有默认值 // iii.通过...语法接收多个值 // 4.返回值讲解 // i.可以空return操作，用来结束函数 // ii.返回值可以为任意js类型数据 // iii.函数最多只能拥有一个返回值 // 5.匿名函数: 没有名字的函数, 函数只能在定义的时候自己来调用一次, 之后在也无法被调用 // 匿名函数 自定义 (function () { // 产生具备名称空间(局部作用域), 并且可以随着匿名函数调用完毕, 被回收 var aaa = 1000; console.log("匿名函数的自调用") })()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数</title>
</head>
<body>
函数
</body>
<script>
// 1.函数的定义
// function 函数名(形参列表) {
// 函数体;
// }
// 2.函数的调用
// var res = 函数名(实参列表); python中返回值是none,js中是null
// 3.函数的参数
// i.个数不需要统一
// ii.可以任意位置具有默认值
// iii.通过...语法接收多个值
// 4.返回值讲解
// i.可以空return操作，用来结束函数
// ii.返回值可以为任意js类型数据
// iii.函数最多只能拥有一个返回值
// js函数的重点: 如何给事件提供功能
// 注: 匿名函数 python中是lambda,js中是没有名字的函数
// 函数定义与调用(调用可以写在定义前,和python不同)
function fn1() {
console.log("函数fn1");
}
var res = fn1();
console.log(res);
// 参数
// i.个数不需要统一
function fn2(a, b) {
console.log(a, b);
}
fn2(10, 20, 30);
fn3("abc");
function fn3() { // 不需要参数就不接收, 需要就接收
console.log("自己玩")
}
// ii.可以任意位置具有默认值
function fn4(a, b=10, c, d=20) {
console.log(a, b, c, d);
}
fn4(); // undefined 10 undefined 20
fn4(100) // 100 10 undefined 20
fn4(100, 200) // 100 200 undefined 20
fn4(100, null, 200) // 100 null 200 20
// iii.通过...语法接收多个值
function fn5(...arr) { // 以数组形式接受多个值
console.log(arr)
}
fn5(1, 2, 3, 4, 5);
// i.可以空return操作，用来结束函数
function fn6(a) {
if (a == 10) {
return;
}
console.log("参数不为10");
}
fn6(10);
// ii.返回值可以为任意js类型数据
function fn7() {
return {
name: 'egon',
age: 79
}
}
var res = fn7();
console.log(res.age)
// iii.函数最多只能拥有一个返回值
function fn8() {
// return 10, true; // 了解: 将最后一个值返回
// 解决方案
return [10, true];
}
res = fn8();
console.log(res);
// 匿名函数 自定义
(function () { // 产生具备名称空间(局部作用域), 并且可以随着匿名函数调用完毕, 被回收
var aaa = 1000;
console.log("匿名函数的自调用")
})()
</script>
<script>
console.log(aaa)
</script>
</html>
十.类型转换
转字符串：String() | .toString() | "" + // 123..toString() | 重点是 "" + 转数字：Number(a) | parseFloat() | parseInt() | + // +'123' // parseFloat('3.14.15') => 3.14 | parseInt('3.14.15') => 3 转布尔：Boolean(a) 非数字：NaN // 当一个其他类型转化为数字类型的产物 // 任何判断一个结果是否是NaN, isNaN(运算)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>类型转化</title>
</head>
<body>
值类型之间的相互转化
</body>
<script>
// number | string | boolean
// 转化为boolean
var num = 10;
var s = "123";
num = 0;
s = "";
var b1 = Boolean(num);
var b2 = Boolean(s);
console.log(b1, b2); //false false
// 后期我们会在if分支结构中的判断以及循环中的判断中使用boolean类型,
// 以上两种情况下, 系统都会把非boolean的数据自动转换为boolean
// 0 | "" | null | undefined | NaN => false, 其他都会转化为true
// 转化为数字类型
console.log(Number(false), Number(true), true + true); //0 1 2
var s1 = "123";
var s2 = "3.14";
var s3 = "123abc";
var s4 = "3.14.15";
var s5 = "abc123";
// 123 3.14 NaN NaN NaN
console.log(Number(s1), Number(s2), Number(s3), Number(s4), Number(s5)); //123 3.14 NaN NaN NaN
var n3 = parseInt(s3); //获取得到的结果是整型
console.log(n3); //123
var n4 = parseFloat(s4);
console.log(n4); //3.14
// 常用转化的字符串一定是一个合法的数字字符串形式(s1, s2)
var n1 = +s1;
console.log(n1, typeof n1); //弱语言类型可以随便转换，+将字符串转成数字
console.log(+s2);
// 转化为字符串类型
var nn1 = 123;
var ss1 = String(nn1);
var ss2 = nn1.toString();
var ss3 = "" + nn1;
console.log(ss1, ss2, ss3);
// 了解
var ss4 = 123..toString();
console.log(ss4);
// 弱语言类型 类型会自动的转换，这个叫弱语言类型
console.log(3 + "5"); // "35"
console.log(3 - "5"); // -2
// 总结:
// 1.最快转化为数字类型 +"123" | +true
// 2.最快转化为字符串形式 "" + 123 | "" + true
</script>
</html>
十一.循环
// 循环比较 // 1.for: 解决已知循环次数的 // 2.while: 可以解决所有for循环可以解决的问题,也可以解决不知道循环次数但知道结束条件 // 3.do...while: 无论条件是否满足,循环体都会被执行一次 for (循环变量①; 条件表达式②; 循环变量增量③) { 代码块④; } = while (条件表达式) { 代码块; } do { 代码块; } while (条件表达式); // break：结束本层循环 // continue：结束本次循环进入下一次循环
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
</body>
<script>
/**
* for (循环变量①; 条件表达式②; 循环变量增量③) {
代码块④;
}
*/
for (var i = 0; i < 5; i++) {
console.log("打气");
}
// ① ②④③ ... ②④③ ②
/*while (条件表达式) {
代码块;
}
* */
var j = 0;
while (j < 5) {
console.log("打气");
j++;
}
/*
do {
代码块;
} while (条件表达式); //不管条件满不满足，先执行逻辑再判断条件 制作零件，先制作，再判断是否合格
* */
var k = 0;
do {
console.log("打气");
k++;
} while (k < 5);
// 循环比较(python中循环只有一个while循环,for循环是迭代器,js中有三种循环)
// 1.for: 解决已知循环次数的
// 2.while: 可以解决所有for循环可以解决的问题,也可以解决不知道循环次数但知道结束条件
// 3.do...while: 无论条件是否满足,循环体都会被执行一次
var x = 0;
while (x < 5) { // 0, 1, 3, 4
if (x == 2) {
x++;
continue;
}
console.log(x);
x++;
}
// while (x < 5) { // 0, 1, 3, 4
// x++;
// if (x == 3) {
// continue;
// }
// var res = x - 1;
// console.log(res);
// }
console.log(x); // 5
x = 0;
while (x < 5) { // 0, 1, 2
if (x >= 3) {
break;
}
console.log(x);
x++;
}
</script>
</html>
十二.运算符
算数运算符：+ - * / % ++ -- 加 减 乘 除 取余 加加 减减 赋值运算符：+= -= *= /= %= 比较运算符：> < >= <= == === != !== 逻辑运算符：&& || ！ 三目运算符：结果 = 条件表达式 ? 结果1 : 结果2;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>运算符</title>
</head>
<body>
运算符
<!--需求: box的内容是123,则将文字颜色修改为red,否则不做操作-->
<div id="box">1234</div>
<script>
var box_ctx = box.innerText;
// 前者满足,则做后者操作;前者不满足,后者被短路,不做操作
box_ctx == '123' && (box.style.color = 'red');
</script>
</body>
<script>
// 1.算法运算符
// js中不区分整形和浮点型, 结果为什么就是什么
var res = 5 / 2; // 2.5
console.log(res);
// 任何正整数对n取余 结果为: [0, n-1]
// [1, 正无穷] % n
// [1, 正无穷] % 10 => [0, 9]
console.log(5 % 2); // 1
// num++ | ++num => num = num + 1; => 自增1
// ++在后先赋值再自增 | ++在前先自增再赋值
var num = 10;
var r1 = ++num;
console.log(r1); // ++num => re=11 | num++ => re=10
console.log(num); // 11
var a = 10;
var b = a++; // a:11 b:10
var c = ++a; // a:12 c:12
console.log(a, b, c); // 12 10 12
// 2.赋值运算符
var x = 20;
x += 10; // => x = x + 10
console.log(x);
// 3.比较运算符
var y = 10;
var z = '10';
console.log(y == z); // 只做值比较 => true
console.log(y === z); // 全等: 值与类型都必须相等 => false
console.log(y != z); // => false
console.log(y !== z); // => ture
// 4.逻辑运算符: js的逻辑运算符结果不一定为boolean类型的结果
var a1 = 10;
var a2 = 20;
var a3 = '10';
// 逻辑与: 条件1 && 条件2 => 全为真则真,否则为假
// 逻辑或: 条件1 || 条件2 => 全为假则假,否则为真
// 逻辑非: 非真即假,非假即真
// 逻辑运算符的短路效果
// var res1 = a1 == a3 && a2++; // => res1结果 即 a2的结果
// console.log(res1, a2); // 20, 21
// 逻辑与的短路效果, 条件1为假, 条件2就不会被执行
// var res1 = a1 === a3 && ++a2; // => res1结果 即 a2的结果
// console.log(res1, a2); // false 20
// 逻辑或的短路效果, 条件为真, 条件2就不会被执行
var res2 = a1 == a3 || a2++;
console.log(res2, a2); // true 20
// 5.三目运算符：结果 = 条件表达式 ? 结果1 : 结果2;
var xx = 10;
var yy = '10';
// 条件满足, 执行:前的结果1, 否则执行:后的结果2
var res = xx == yy ? "xx与yy的值相等" : "xx与yy的值不相等";
console.log(res)
console.log(NaN == NaN, isNaN(NaN))
</script>
</html>
浙公网安备 33010602011771号