javascript-类型转化-运算符-if分支结构-循环-函数
2019-01-23 19:12
375 查看
文章目录
类型转化
转字符串：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); // 后期我们会在if分支结构中的判断以及循环中的判断中使用boolean类型 // 以上两种情况下,系统都会把非boolean的数据自动转换为boolean // 0 | "" | null | undefined | NaN => false，其他都会转化为true // 转化为数字类型 console.log(Number(false),Number(true),true + true); 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)); var n3 = parseInt(s3); console.log(n3); var n4 = parseInt(s4); console.log(n4); // 常用转化的字符串一定是一个合法的数字字符串形式(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>
运算符
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>运算符</title> </head> <body> 运算符 <!--需求: box的内容是123，则将文字颜色修改为red，负责不做操作--> <div id="box">123</div> <script> var box_ctx = box.innerText; // 前者满足，则做后者操作;前者不满足，后者被短路，不做操作 box_ctx == '123' && (box.style.color = 'red'); </script> </body> <script> // 1.算法运算符 // js中不区分整形和浮点型，结果为什么就是什么 var res = 5 / 2; 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>
if分支结构
<!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>
循环
// 循环比较
// 1.for: 解决已知循环次数的
// 2.while: 可以解决所有for循环可以解决的问题,也可以解决不知道循环次数但知道结束条件
// 3.do...while: 无论条件是否满足,循环体都会被执行一次
for (循环变量①; 条件表达式②; 循环变量增量③) {
代码块④;
}
=
while (条件表达式) {
代码块;
}
do {
代码块;
} while (条件表达式);
// break：结束本层循环
// continue：结束本次循环进入下一次循环
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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);
// 循环比较
// 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>
函数
// 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 = 函数名(实参列表);
// 3.函数的参数
// i.个数不需要统一
// ii.可以任意位置具有默认值
// iii.通过...语法接收多个值
// 4.返回值讲解
// i.可以空return操作，用来结束函数
// ii.返回值可以为任意js类型数据
// iii.函数最多只能拥有一个返回值
// js函数的重点: 如何给事件提供功能
// 注: 匿名函数
// 函数定义与调用(调用可以写在定义前)
function fn1() {
console.log('函数fn1');
}
var res =fn1();
console.log(res);
// 参数
// 1.个数不需要统一
function fn2(a,b) {
console.log(a,b)
}
fn2(10,20,30);
fn3('abc');
function fn3() {
console.log('自己玩')
}
// 2.可以任意位置具有默认值
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
// 3.通过...语法接收多个值
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>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 3.1运算符+代码结构（分支+循环）+函数
- oracle PL/SQL的基本构成,块结构和基本语法要求,数据类型,变量定义,运算符和函数
- （3）JavaScript基础（基本语法：变量与数据类型、类型转换、运算符、流程控制、函数、对象、自定义对象、原型）
- JavaScript之基础-6 JavaScript 分支结构 （if、if-else、else if、switch-case）
- JavaScript之变量、基本类型、数组、运算符、流程控制语句、函数
- Python数据类型、运算符、流程语句（条件结构，循环结构）斐波那契数列、99乘法表（for，while）
- php总结2——php中的变量、数据类型及转换、运算符、流程控制中的分支结构
- 第8周项目3（1）用if-else结构求多分支结构求函数值
- 23 用if语句实现分支结构 项目（1: 被3或者5整除的数） (2:乱玩数字 ) (3:两段函数求值 ) (4:三角公式求值 ) (5:我的加班费 ) (6：前导0的数字
- 分支结构、循环结构流控语句（if、switch、for、while）
- Web前端复习——Javascript复习（函数+分支结构）
- JavaScript基础语法：数据类型、变量、控制结构、函数、表达式
- OS笔记：第三篇 C语言中的运算符与if分支结构
- 4、java变量、函数、基本类型的值传递、分支、循环、流程控制
- day05 类型转换 循环分支结构
- JavaScript（1）——数据类型、运算符、流程处理、函数
- 边学边用JavaScript之数据类型，函数，控制结构
- 递归（任何有赋值，if-else和循环的结构都可以转化为递归）
- JavaScript核心语法————数据类型转化、运算符、表达式
- 尚硅谷 第三课全 java-变量类型转换-字符与字符串-算数运算符-赋值运算符-三元运算符-.switch语句-循环结构-while 循环语句 do-while 循环语句