JavaScript02-类型转换、运算符和流程控制

JavaScript基础02-类型转换、运算符和流程控制

1.类型转换-字符串类型转换

toString()字符串类型转换。

// 通过toString()将其他类型转换为string。
// 其中null和undefined不能通过调用toString()转换为string类型。

let a = 10;
console.log(a.toString()); // 10

a = NaN;
console.log(a.toString()); // NaN

a = true;
console.log(a.toString()); // true

a = null;
// 报错 Cannot read properties of null (reading 'toString')
//console.log(a.toString());

a = undefined;
// 报错 Cannot read properties of undefined (reading 'toString')
//console.log(a.toString());

console.log(Infinity.toString()); // Infinity
console.log(-Infinity.toString()); // // -Infinity

String()字符串类型转换。

// 通过String()将其他类型转换为字符串。
// 1 使用String()转换null和undefined时不会报错。
// 2 String()在转换时，如果有toString()就调用toString()。
// 3 null没有toString就将其转换为字符串null。
// 4 undefined没有toString()，就将其转换为字符串undefined。

let b = 10;
let c = String(b);
// 类型换行时会创建一个新的值，而不会改变原有的值。
console.log(typeof b, typeof c); // number string
console.log(String(null), String(undefined)); // null undefined

字符串隐式类型转换。

// 字符串隐式类型转换。
let a = 10;
console.log(a + ''); // 10
a = null;
console.log(a + ''); // null
a = undefined;
console.log(a + ''); // undefined
a = NaN;
console.log(a + ''); // NaN

a = Infinity; // 正无穷
console.log(a + ''); // Infinity

a = -Infinity;
console.log(a + ''); // -Infinity

2.类型转换-数字类型转换

Number()数字类型转换。

console.log(Number('123')); // 123
console.log(Number('3.14')); // 3.14
console.log(Number('0xff')); // 255

console.log(Number('abc')); // NaN
console.log(Number('NaN')); // NaN
console.log(Number('123a')); // NaN

console.log(Number('Infinity')); // // Infinity
console.log(Number('-Infinity')); // -Infinity


console.log(Number(true)); // 1
console.log(Number(false)); // 0

console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN
console.log(Number('')); // 0
console.log(Number(' ')); // 0

parseInt()数字类型转换。

// 使用parseInt()将字符串转换为数字。
// parseInt()会依次从左到右读取字符串中的字符，直到读取到非整数为止。
console.log(parseInt('123a')); // 123

console.log(parseInt('12.3')); // 12

// NaN，parseInt(true)，内部会先将true转化为字符串'true'，然后再转换为数字，所以返回了NaN。
console.log(parseInt(true)); // NaN
console.log(parseInt('NaN')); // NaN
console.log(parseInt('null')); // NaN
console.log(parseInt('')); // NaN

parseFloat()数字类型转换。

// 使用parseFloat()将字符串转换为小数，parseFloat()会取有效的小数位。
console.log(parseFloat('12.3')); // 12.3
console.log(parseFloat('12a.3')); // 12
console.log(parseFloat('12.3a')); // 12.3
console.log(parseFloat('12.3.0')); // 12.3

3.类型转换-布尔类型转换

Boolean()布尔类型转换。

// 使用Boolean()转换为boolean类型。
// 1 数值类型 0和NaN是false，其他都是true。
// 2 对于字符串 ''是false，其他都是true。
// 3 是false的情况。 0 NaN '' null undefined false
console.log(Boolean(10)); // true
console.log(Boolean(-10)); // true
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(Infinity)); // true

console.log(Boolean('h')); // true
console.log(Boolean('false')); // true
console.log(Boolean('')); // false
console.log(Boolean(' ')); // true
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(false)); // false
console.log(Boolean(+0)); // false
console.log(Boolean(-0)); // false

4.运算符-算术运算符

算术运算符。

// 1 算术运算符 + - * / ** %
console.log(10 + 5); // 15
console.log(10 - 5); // 5
console.log(10 * 5); // 50
console.log(10 / 0); // Infinity
console.log(2 ** 3); // 8，2的3次方
console.log(16 ** 0.5); // 4，16的平方根。
console.log(10 % 3); // 1

// 2 JS中除了字符串的加法运算，其他类型值进行算术运算时都会转换为数值类型，然后进行运算。
console.log('hello ' + 'tom'); // hello tom
console.log(true + false); // 1，将true转换为1，false转换为0，然后进行加法操作。
console.log(1 + true); // 2
console.log(1 * null); // 0

// 任何值和NaN进行运算都是NaN
console.log(20 + undefined); // NaN

// 3 对任意类型的值进行 -0 +0 /1就可以将其转换为数字。
// 这个方式成为隐式类型转换，原理和Number()函数一样。
let a = true;
console.log(typeof (a + 0)); // number
console.log(typeof (a - 0)); // number
console.log(typeof (a * 1)); // number

字符串的加法。

// 1 任何值和字符串做加法都会转换为字符串，然后进行拼串。
console.log(12 +  'hello'); // 12 hello
console.log('1 ' + NaN); // 1 NaN

// 2 任何值加上一个空''都会转换为字符串，原理和String()函数是一样的。
let a = 1;
console.log(typeof (a + '')); // string

// 3 输出 b = 10的三种方式。
let b = 10;
console.log('b = ' + b); // b = 10，会将b转换为字符串然后输出。
console.log('b =', b); //  b = 10，会自动添加空格。
console.log(`b = ${b}`); //  b = 10，利用模板字符串来完成。

一元运算符。

// 一元运算符
// 1 typeof 检查一个值的类型
console.log(typeof 1); // number

// 2 + 正号；- 负号。
// 非数值类型的值进行正负运算时会将其转换为数字然后进行运算。
let a = true;
console.log(-a, typeof (-a)); // -1 'number'

a = 'h';
console.log(-a, typeof (-a)); // NaN 'number'
console.log(+'2'); // 2

a = 1 + '2' + 3;
console.log(a); // 123

a = 1 + +'2' + 3;
console.log(a); // 6

自增和自减运算符。

// 1 自增
let a = 10;
console.log(a++, a); // 10 11
console.log(++a, a); // 11 11

a = 10;
a = a++; // 相当与 a = a;
console.log(a); // 10

a = 10;
// 10 + 12 + 12
let b = a++ + ++a + a;
console.log(b); // 34

// 2 自减
let c = 10;
console.log(c--, c); // 10 9
c = 10;
console.log(--c, c); // 9 9

赋值运算符。

// 赋值运算符 = += -= *= /= **= %=
let a = 10;
a += 3;
console.log(a); // 13

5.运算符-逻辑运算符

逻辑运算符-非(!)。

let a = true;
a = !a;
console.info(a); // false

// 对于一个非布尔值进行!非运算，会先将其转换为布尔值，然后取反。
let b = 10;
b = !b;
console.log(typeof b, b); // boolean false

console.log(!0); // true;
console.log(!undefined); // true
console.log(!NaN); // true

// 可以对任何一个非布尔值取反两次，然后将其转换为布尔值。原理和Boolean()函数一样。
let c = 1;
c = !!c;
console.log(c); // true

// 任何值转换为字符串
let n1 = 10;
n1 = n1 + '';
// 任何值转换为数字
let n2 = '1';
n2 = +n2;
// 任何值转换为布尔值
let n3 = 10;
n3 = !!n3;

逻辑运算符-短路与(&&)。

// && 与，两个值都为true，才为true
console.log(true && true); // true
console.log(true && false); // false
console.log(false && true); // false
console.log(false && false); // false

逻辑运算符-短路非(||)。

// || 或，两个值都为false，才为false
console.log(true || true); // true
console.log(true || false); // true
console.log(false || true); // true
console.log(false || false); // false

短路与和短路非的其他运算。

// 1 &&是短路与，第一个为false，则值为false，不用去计算第二个的值。
// ||是短路或，即第二个为true，则值为true，不用去计算第二个的值。

false && console.log('false'); // 值为false，没有输出
true || console.log('true'); // 值为true，没有输出

// 2 非布尔值与(&&)运算。
// 对非布尔值进行与运算，会先将其转换为布尔值，然后进行与运算，最终返回原值。
// &&，与，第一个值为true，则返回第二个值；如果第一个值为false，则返回第一个值。
// true && true
console.log(1 && 'hello'); // hello
console.log('hello' && 1); // 1

// false && true
console.log(NaN && 1); // NaN
// true && false
console.log(1 && NaN); // NaN

// false && false
console.log(NaN && 0); // NaN
console.log(0 && NaN); // 0

// 5 非布尔值非||运算。
// 对非布尔值进行非运算，会先将其转换为布尔值，然后进行非运算，最终返回原值。
// ||，非，第一个值为false，则返回第二个值；如果第一个值为true，则返回第一个值。
console.log(1 || 'hello'); // 1
console.log(1 || true); // 1
console.log(1 || NaN); // 1

console.log(NaN || 23); // 23
console.log(NaN || 0); // 0
console.log(NaN || 'hello'); // hello

// console.log('' || abc); // 报错
console.log('1' || abc); // 1

6.运算符-关系运算符

关系运算符。

// 1 将a转换为字符串，避免null时报错。
let a = null;
// a是null，转换为boolean值是false，所有不会进行a.toString();
a = a && a.toString();
console.log(typeof a); // object

// 2 关系运算符，用来比较两个值大小等于的关系。
// > < >= <=
console.log(10 < 10); // false

// 3 对于非数值类型的值比较时，会先其转换为值类型，在进行比较。
// 1 > 0
console.log(true > false); // true

// 10 < 55
console.log(10 < '55'); // true
// 10 < 5
console.log(10 < '5'); // false

// 1 < 5
console.log(true < '5'); // true

// undefined转换为值是NaN，任何类型和NaN比较都是false。
console.log(null <= undefined); // false
console.log(null >= undefined); // false

// 4 两个字符串进行比较，情况比较特殊，会依次比较字符串的字母大小。
console.log('1' < '5'); // true
console.log('10' < '5'); // true

关系运算符复杂情况下的比较。

let a = 10;
a = 1 < a < 20;
console.log(a); // true
a = 10;
// 会先计算100 < a，值为true或者false，然后使用true或者false在于20比较。
a = 100 < a < 20;
console.log(a); // true

a = 10;
a = 100 < a < -10;
console.log(a); // false

// 字符串比较
console.log(1 < '5'); // true，会先将字符串'5'转换为数字5，然后进行比较。

// 如果是两个字符串比较，则不会转换为数字，而是逐位比较字符串的字符编码。
console.log('10' < '5'); // true，
console.log('a' < 'b'); // true

console.log('a' < 'a'); // false
console.log('a' < 'ab'); // true

7.运算符-相等和全等

相等。

// 相等 ==
// 1 相等用来比较两个值是否相等。
// 2 相等会对值进行自动类型转换。
// 3 如果比较的两个值类型不同，会将其转换为相同的类型在进行比较。
// 4 通常情况下，会转换为Number类型然后进行比较。
// 5 null和undefined比较会转换为其他类型，null和undefined做比较返回true。

console.log(10 == '10'); // true
console.log(true == '1'); //true
// 1 == NaN --> false
console.log(true == 'true'); // false

console.log(null == 0); // false
console.log(null >= 0); // true
console.log(null == undefined); // true
console.log(undefined == 0); // false

全等。

// 全等 ===
// 1 全等比较两个值是否全等。
// 2 全等运算不会发生类型转换。
// 3 如果两个值的类型不同，则全等直接返回false。
// 4 null和undefined全等比较返回false。
console.log(10 === '10'); // false
console.log(true === '1'); // false
console.log(null === undefined); // false

// NaN不和任何值相等，包括NaN自己。
console.log(NaN == NaN); // false
console.log(NaN === NaN); // false
console.log(NaN != NaN); // true
console.log(NaN !== NaN); // true

// 使用 isNaN()函数来判断一个值是否是NaN
let b = NaN;
console.log(isNaN(b)); // true

// != 不等，用来判断两个值是否不等，会发生类型转换。
console.log(10 != '10'); // false

// !== 不全等，用来判断两个值是否不全等，不会发生类型转换。
console.log(10 !== '10'); // true

8.运算符-条件运算符

// 1 条件运算符 三元运算符 三目运算符

let a = 10;
let b = 20;
let max = a < b ? b : a;
console.log(max); // 20

9.运算符的优先级

// 运算符的优先级
// 1 JS中先乘除后加减。
// 2 JS优先级的表格，越往上优先级越大，js优先级文档地址：
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence。
let a = 1 + 2 * 3;
console.log(a); // 7

let b = null;
// console.log(b.toString()); // 报错

// ?. 可选链，如果为null，则不会调用toString();避免报错。
console.log(b?.toString()); // undefined

10.代码块

// 1 一对大括号就是一个代码块
// 2 同一个代码块的代码要么全执行，要么全不执行。
// 3 代码块中使用let声明的变量，在代码块外部无法访问。
// 4 在代码块中使用var声明的变量，在代码块外部可以访问。
{
    let a = 10;
    var b = 5;
    console.log(a);
}

//console.log(a); // 报错
console.log(b); // 5

11.流程控制语句

if。

// 条件判断语句 if
let a = 10;
// 如果条件的结果是一个非布尔值，就会转换为一个布尔值进行判断。
// 输出 a = 10
if (a) {
    console.log('a =', a);
}

if()...else if()...else。

let a = 100;
if (a > 60) {
    console.log('a > 30');
} else if (a > 40) {
    console.log('a > 40');
} else {
    console.log('a');
}

if练习，判断用户输入值的奇偶。

// if练习，用户输入一个整数，判断这个整数是奇数还是偶数。
// prompt()函数用来获取用户输入的内容，用户输入的内容是prompt()函数的返回值。
let c = prompt('请输入一个整数');
// 将c转换为数字，防止用户输入的是字符串。
c = +c;
if (c % 2 === 0) {
    console.log(`${c}是一个偶数`);
} else {
    console.log(`${c}是一个奇数`);
}

// prompt()函数直接点击确定，返回的值为空串 ''；如果点击取消，返回的只为null。
let d = prompt('请输入');
// 处理直接点击确定或者点击取消的情况。
if (d === null || d === '') {
    d = NaN;
} else {
    d = +d;
}

// 处理输入负数或者输入非数字的情况。
if (d < 0 || isNaN(d)) {
    console.log('请输入正确的数字')
} else {
    console.log(d);
}

switch。

// 1 switch语句执行时会进行全等比较。
// 2 如果没有break，case全等后，会依次执行后面的所有case。
// 3 可以使用break，在case满足后就退出switch语句。
// 4 switch中的default，在所有case都没有满足时执行。
let e = 1;
switch (e) {
    case 1:
        console.log('e = 1');
    case 2:
        console.log('e = 2');
        break;
        // e === 3或者4时，都会执行console.log(`e = ${e}`);
    case 3:
    case 4:
        console.log(`e = ${e}`);
        break;
    default:
        console.log("输入错误");
}

12.循环语句

while。

let a = 10;
while (a > 0) {
    console.log(`a = ${a}`);
    a--;
}

do...while，和while比较，do...while至少会执行一次。

let b = 10;
do {
    console.log(`b = ${b}`);
} while (false);

for。

for (let c = 0;c < 10;c++) {
    console.log(`c = ${c}`);
}

break和continue。break，用来结束switch和循环语句；continue用来跳出当前循环，进入下一次循环。

13.计时器

// JS计时器，使用计时器可以测试程序的性能。
// 开始一个计时器
console.time('test');
// 结束开启的计时器，结束之后会在控制台自动打印程序执行的时间。
console.timeEnd('test');

posted @ 2022-08-26 17:30 行稳致远方阅读(50) 评论(0) 收藏举报

刷新页面返回顶部

行稳致远方

JavaScript02-类型转换、运算符和流程控制

JavaScript基础02-类型转换、运算符和流程控制

1.类型转换-字符串类型转换

2.类型转换-数字类型转换

3.类型转换-布尔类型转换

4.运算符-算术运算符

5.运算符-逻辑运算符

6.运算符-关系运算符

7.运算符-相等和全等

8.运算符-条件运算符

9.运算符的优先级

10.代码块

11.流程控制语句

12.循环语句

13.计时器

公告