JavaScript 2
JavaScript 2
- 大纲
-
JS 操作符
-
算术运算符
-
算术运算符有 ：+ 、- 、 * 、 / 、 %、++、–
-
对于算术运算符要注意的是，字符串和数字之间的相加减，以及布尔类型和字符，数字之间的相加减
-
代码示例：
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>算术运算符</title> </head> <body> <script> /* 多行注释 */ /* 算术运算符：+ - * / % ++ -- */ var a = "88"; var b = 23; // - 号 字符串会自动转型成数字类型进行计算 结果：65 console.log(a-b); // + 号 数字拼接 8823 console.log(a+b); // * 号 字符串会自动转型成数字类型进行计算 结果：2024 console.log(a*b); // / 号 字符串会自动转型成数字类型进行计算 结果:3.8260869565217392 console.log(a/b); // 总结：- * / % 字符串会自动转型成数字类型进行计算 // 总结：+ ++ -- 都是字符串之间的操作，不会转型 var c = "c"; var d = 33; console.log(c*d); // 结果：NaN not a number 特殊的数字类型 console.log(typeof (c*d)); // typeof 查看类型 结果：number 特殊的数字类型 var e = 5; e++; console.log(e); // 结果：6 自增1 运行逻辑：先加1，后返回值 即： e = e+1 -->6 // 后置递增，先参与运算，再加1 ++e; console.log(e); // 结果：7 运行逻辑：先返回值，再加1 即： 先返回6 e = e+1 -->7 // 前置递增，先加1，输出返回值后，再运算 // 案例分析： var f = 5; console.log(++f + 10); // 结果：16 // 运行逻辑：f=f+1 +10 -->16 console.log(f++ + 10); // 结果：16 // 运行逻辑：先返回5 f=f+1 +10 -->16 var aa = 10; ++aa; // aa = 11 var bb = ++aa + 2; // bb=11+1+2=14 aa=11+1=12 console.log(bb) // 结果:14 var cc = 10; cc++; // cc = 11 var dd = cc++ + 2; // dd=11+2=13 cc=11+1=12 console.log(dd); // 结果：13 </script> </body> </html>
-
-
赋值运算符
-
赋值运算符有： = 、+=、-=、 *=、/=、
-
代码示例：
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>赋值运算符</title> </head> <body> <script> // 赋值运算符：= 、+=、-=、 *=、/= // = var a = 1; var b = a++; console.log(a,b); // a=1+1=2 b=1 // += c = 5; c += 6; // c=c+6 console.log(c); // c=11 // -= d = 8; d -= 3; // d=d-3 console.log(d); // d=5 // *= e = 5; e *= 6 ; // e=e*6 console.log(e); // e=30 // /= f = 15; f /= 3; // f=f/3 console.log(f) // f=5 </script> </body> </html>
-
-
比较运算符
-
比较运算符有: >、>=、<、<=、、=（全等）
-
代码示例：
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>比较运算符</title> </head> <body> <script> // 比较运算符有: >、>=、<、<=、==、===（全等） // == 默认转换数据类型，只看内容是否相等，不区分类型 var a = "8"; var b = 8; console.log(a==b) // true // ===（全等） 除了内容相等，类型也必须一样 console.log(a===b) // false </script> </body> </html>
-
-
逻辑运算符
-
逻辑运算符有：&&（与）、||（或）、! （非）
-
需要注意:逻辑运算符两边的数值
-
1.均为布尔值
-
2.其他数据类型
-
-
代码示例：
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>逻辑运算符</title> </head> <body> <script> // 逻辑运算符有：&&（与）、||（或）、! （非） // && 两边为 true，结果为true 一假得假，同真为真 碰到假就停并打印假 var a = true && true; console.log(a); // true // || 有一个为true，整体为true 碰到真就停并且打印真 var b = false || true; console.log(b) // true // 当多给对象运算时 一假得假 var c = true && false && true; console.log(c) // false // 短路 0 false 1 2 true 有一个为true，整体为true var d = 0 || 1 || 2; console.log(d) // 1 从左往右，直到遇到真，就打印真 var e = 3 || 1 || 0; // 0 false 1 3 true console.log(e); // 3 从左往右，直到遇到真，就打印真 var f = 0 || "" || 2; // 0 "" false 2 true console.log(f); // 2 var g = 4 && 3 && 0; // 4 3 true 0 false console.log(g); // 0 碰到假就停并打印假 var h = 0; console.log(12 || h++); // 遇真则真 12 console.log(h); // h=0 var i = 0; console.log(i++ || 6); // 遇真则真 6 console.log(i) // i=0+1=1 </script> </body> </html>
-
-
-
JS 流程控制
-
分支流程
-
代码示例1：
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>分支流程</title> </head> <body> <script> // 判断是否大于18岁 // prompt 用户自行在浏览器中输入值 相当于input var age = prompt("请输入年龄"); // 格式：if (条件) {当条件满足时执行的操作} else {当条件不满足时执行的操作} // alert 弹出警示框 if (age>=18){ alert("恭喜你，到法定年龄，可以谈恋爱了！") }else { alert("没成年，还是好好学习吧！") } </script> </body> </html> -
代码示例2
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>分支流程</title> </head> <body> <script> // 判断是否大于18岁 // prompt 用户自行在浏览器中输入值 相当于input var a = prompt("请输入年龄"); // 格式：if (条件) {当条件满足时执行的操作} else if {当条件满足时执行的操作} else {当条件不满足时执行的操作} // alert 弹出警示框 if (a==10){ alert("等于10") }else if (a==15){ alert("等于15") }else if (a==18){ alert("等于18") }else { alert("可能等于20吧") } </script> </body> </html> -
代码示例3：
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>分支流程</title> </head> <body> <script> // switch() 用在特定值的时候 var age = 19; // 当知道用户可能输入什么值的时候用switch // 格式：switch (放入当前的值) { case 可能出现的值：{满足条件时执行的操作 break} default: 当不满足条件时执行的操作} switch (age) { // 当输入的值是10的时候 case 10:{ alert(10) break // 如果不写break ，则全部结果都会打印出来 } case 20:{ alert(20) break } case 30:{ alert(30) break } default: alert(0) } </script> </body> </html>
-
-
-
JS 循环
-
for 循环
-
代码示例：
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> for 循环</title> </head> <body> <script> // 格式：for (创建对象;判断条件;自增) {条件满足时执行的操作} for (var i = 0;i<=99;i++){ console.log(i) // i=0-99 } // 九九乘法表 document.write("    九九乘法表") // 行数 for (var x = 0;x<=9;x++){ // 列 for (var y=1;y<=x;y++){ var a = x * y // 在页面进行写入 用 + 号进行拼接 默认不换行 document.write(y + "*" + x + "=" + a + " ") } document.write("<br>") } </script> </body> </html>
-
-
do while 循环
-
代码示例：
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> do while 循环</title> </head> <body> <script> // do while 循环 特点：至少执行一次 // 格式：do {先执行的程序} while (再判断条件) var i = 0; do { console.log(i); i++; }while (i<5) </script> </body> </html>
-
-
while 循环
-
代码示例：
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> while 循环</title> </head> <body> <script> // while 循环 // 格式：while (判断条件) {条件满足时执行的程序} var i = 0; while (i<10){ console.log(i) i++; // i=0-9 } // 案例：计算1-100的和 var a = 1; // 初始值 var sum = 0; // 接收和 while (a<=100){ sum += a; a++; } console.log(sum) // 5050 </script> </body> </html>
-
-
-
JS 字符串方法
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字符串方法</title> </head> <body> <script> var str1 = "人生如意须尽欢"; // 注：字符串为不可变类型 // length 查看对象的长度 console.log(str1.length) ; // 7 // 通过索引取值 console.log(str1[2]); // 如 // typeof 查看类型 var a = 8; console.log(typeof a) // number // toString() 转换为字符串 console.log(typeof a.toString()) // string 重新定义了一个字符串 // substring() 截取字符串片段 特点：不在乎位置 var str2 = "hello world" console.log(str2.substring(0,5)) // hello 左闭右开 取左不取右 console.log(str2.substring(5,0)) // hello 括号内不在乎位置，默认自动排位 console.log(str2.substring(-3,5)) // hello 如果片段取不到，则默认从0开始 // slice(起始值，结束值) 截取字符串片段 步长不能加 var str3 = "kwlejfgoiewlgno"; console.log(str3.slice()); // kwlejfgoiewlgno console.log(str3.slice(0,5)); // kwlej 左闭右开 // split() 切割字符串 console.log(str3.split("g")); // ['kwlejf', 'oiewl', 'no'] // indexOf() 查询字符串元素,成功返回元素索引，不成功返回-1 console.log(str3.indexOf("l")); // 2 console.log(str3.indexOf("x")); // -1 查询元素不存在，返回-1 console.log(str3.indexOf("g",10)) // 12 从索引10开始查询"g"元素，可以设置查询的起始位置 </script> </body> </html>
-
-
JS 数组方法
-
代码示例：
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数组方法</title> </head> <body> <script> // 数组方法 相当于 python的列表 var arr = ["红烧排骨","冬菇焖鸡","蜜汁叉烧","咕噜肉"] // 根据索引取值 console.log(arr[2]); // 蜜汁叉烧 // 修改元素 arr[2] = "白斩鸡"; console.log(arr); // ['红烧排骨', '冬菇焖鸡', '白斩鸡', '咕噜肉'] // 添加元素 push() 追加元素 arr.push("臭豆腐","咕噜肉") console.log(arr); // ['红烧排骨', '冬菇焖鸡', '白斩鸡', '咕噜肉', '臭豆腐', '咕噜肉'] // unshift(“元素”) 向左添加元素 arr.unshift("土豆丝"); console.log(arr); // ['土豆丝', '红烧排骨', '冬菇焖鸡', '白斩鸡', '咕噜肉', '臭豆腐', '咕噜肉'] // pop() 向后删除元素 arr.pop(); arr.pop(); console.log(arr); // ['土豆丝', '红烧排骨', '冬菇焖鸡', '白斩鸡', '咕噜肉'] // shift() 向左删除 arr.shift(); arr.shift(); console.log(arr); // ['冬菇焖鸡', '白斩鸡', '咕噜肉'] // indexOf(“元素”) 查询指定元素，返回元素索引，查不到，返回-1 console.log(arr.indexOf("咕噜肉")); // 2 console.log(arr.indexOf("xx")); // -1 查询元素不存在，则返回-1 // slice(起始索引值，结束索引值)截取元素 console.log(arr.slice(0,2)); // ['冬菇焖鸡', '白斩鸡'] 左闭右开 // splice(从几号索引开始（含索引）,删除几个,在索引位置添加元素) console.log(arr); // ['冬菇焖鸡', '白斩鸡', '咕噜肉'] arr.splice(1,1); console.log(arr); // ['冬菇焖鸡', '咕噜肉'] arr.splice(1,1,"辣子鸡"); // 从索引1开始，删除1个元素，同时添加“辣子鸡”元素 console.log(arr); // ['冬菇焖鸡', '辣子鸡'] var arr1 = [5,6,2,3,8,4]; // sort() 排序 arr1.sort(); console.log(arr1); // [2, 3, 4, 5, 6, 8] // reverse() 反序 arr1.reverse(); console.log(arr1); // [8, 6, 5, 4, 3, 2] // join() 将括号内的元素进行拼接 var arr2 = ["我","你"]; console.log(arr2.join("爱")); // 我爱你 // concat() 合并数组 后面可以继续合并多个数组，不限次数 arr3 = [1,2,3]; arr4 = [4,5,6]; arr5 = arr3.concat(arr4); console.log(arr5); // [1, 2, 3, 4, 5, 6] </script> </body> </html>
-
-
JS 数字方法
-
代码示例：
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数字方法</title> </head> <body> <script> // Math.random() 随机数 默认0-1的小数 console.log(Math.random()); // 0.85510 每次刷新都不一样 // Math.random()*10 变个位数的小数 console.log(Math.random()*10); // 7.01628 每次刷新都不一样 // Math.floor 变成一个整数 console.log(Math.floor(Math.random()*10)); // 7 每次刷新都不一样 // toFixed(2) 保留两位小数 console.log(Math.random().toFixed(2)); // 0.90 每次刷新都不一样 var a = "354165egwse5416" // parseInt 将参数转换成数字,整数部分遇到不是数字的就停 console.log(parseInt(a)); // 354165 // parseFloat 将参数转换成数字,整数部分遇到不是数字的就停 console.log(parseFloat(a)); // 354165 </script> </body> </html>
-
版权声明：本文为Pork-belly原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。