检测数据类型、小数点后保留后N位方法、数据类型转换、window对象的方法、分支结构（if单分支、if-else 双分支、多重if结构）isNaN() 与 Number.isN的区别

大脸胖柴

已于 2023-12-20 11:31:16 修改

阅读量289

点赞数

分类专栏： web前端基础 JavaScript 文章标签： javascript js 前端

于 2022-03-30 21:55:00 首次发布

本文链接：https://blog.csdn.net/TKY666/article/details/123857526

版权

web前端基础同时被 2 个专栏收录

22 篇文章 2 订阅

订阅专栏

JavaScript

13 篇文章 1 订阅

订阅专栏

3、window对象的方法（window.可省略）

4、顺序流程控制

5、分支（结构）流程控制

if单分支:条件成立，执行语句

if-else 双分支（条件成立，执行语句1；否则执行语句2）

多重if结构

isNaN() 与 Number.isNaN()区别:

1、检测数据类型（typeof）

1、数字类型、typeof 返回的值是 number。比如说：typeof(1)，返回值是 number
 
2、字符串类型，typeof 返回的值是 string。比如 typeof(“123”返回值是 string)
 
3、布尔类型，typeof 返回的值是 boolean。比如 typeof(true)返回值是 boolean
 
4、对象、数组、null 返回的值是 object。
  比如 typeof(window)，typeof(document)，typeof(null) 返回的值都是 object
 
5、函数类型，返回的值是 function。
比如：typeof(eval)，typeof(Date)返回的值都是 function。
 
6、不存在的变量、函数或者 undefined，将返回 undefined。
 比如：typeof(abc)、typeof(undefined) 都返回 undefined
举例：
let a = 1;
console.log(typeof a);

2、数据类型转换

转换为字符串类型

字符串拼接
String();
toString()

let a = 1;
a = String(a); 方法1
a = a.toString();  方法2
a+= ''; 方法3
console.log(a,typeof a);

换为数字类型

parseInt()
parseFloat(string)
Number()
js 隐式转换(- * /)

// 1.parseInt()
var age =prompt('请输入您的年龄');
consolo.log(parseInt(age));  //数字型18
consolo.log(parseInt('3.14'));  //3取整
consolo.log(parseInt('3.94'));  //3,不会四舍五入
consolo.log(parseInt('120px'));  //120,会去掉单位

// 2.parseFloat()
console.log(parseFloat('3.14'));  //3.14
consolo.log(parseFloat('120px'));  //120,会去掉单位


// 3.利用Number(变量)
var str ='123';
console.log(Number(str));
console.log(Number('12'));   

// 4.利用了算术运算 - * /   隐式转换
console.log('12'-0);  // 12
console.log('123' - '120');  //3
console.log('123' * 1);  // 123

(注意：parseInt是舍弃小数部分，直接取整数部分；parseFloat是直接原样输出)

其他类型转换为布尔值

!! 强制转换布尔类型
Boolean()函数
!!
var a="abc";
console.log(!!a);

Boolean()
var a="abc";
console.log(Boolean(a));
代表空，否定的值会被转换为false，如 ’ ’ , 0, NaN , null , undefined

其余的值都会被被转换为true
console.log(Boolean('')); //false
console.log(Boolean(0));  //false
console.log(Boolean(NaN)); //false
console.log(Boolean(null)); //false
console.log(Boolean(undefined)); //false
console.log(Boolean('只因')); //true
console.log(Boolean(12));   //true

小数点后保留后N位方法

.toFixed函数

var a = +prompt('请输入数字');
        var a = (a.toFixed(2)); //此处保留2位小数
        alert(a);
let a = 1.6;
    console.log(a.toFixed(0)); // 2
let b = 1.4;
    console.log(b.toFixed(0)); // 1
let c = 1.6;
    console.log(c.toFixed(2)); // 1.60

3、window对象的方法（window.可省略）

警示对话框:window.alert()方法用于显示警示对话框（没有返回值）
确认对话框:window.confirm()方法用于显示确认对话框（返回值为布尔值）
提示输入对话框:window.prompt()方法用于显示提示输入对话框（用户输入的内容将是此函数的返回值）

4、顺序流程控制

顺序结构是程序最简单、最基本的流程控制，他没有特定的语法结构，程序会按照代码的先后顺序，以此执行，程序中大多数的代码都是这样执行的。

5、分支（结构）流程控制

if单分支:条件成立，执行语句

if ( 条件 ) {

//语句;

}

例题：令狐冲javascript成绩大于90分，而且音乐成绩大于80分，师父奖励他；
或者javascript成绩等于100分，音乐成绩大于70分，师父也可以奖励他
 
  var js = prompt('请输入js成绩'), ms = prompt('请输入音乐成绩');
        if ((js > 90 && ms > 80) || (js == 100 && ms > 70)) { //内部括号可选择不写
            alert('恭喜你获得武功秘籍');
        }

var score = window.prompt("请输入成绩"，0);
     if ( score > 90 ) { 
          alert("师父说:不错，给你《独孤九剑》剑谱");
     }

if-else 双分支（条件成立，执行语句1；否则执行语句2）

if ( 条件 ) {

//语句1 ;

}else {

//语句2;

}

例题：奥巴马买了一筐鸡蛋，如果坏蛋少于5个，他就吃掉，否则他就去退货
 
var a = prompt('请输入坏蛋个数');
        if (a < 5) {
            alert('少于五个也不行，等着被投诉吧');
        } else {
            alert('坏蛋这么多，等着被投诉吧');
        }

例题：要求用户输入两个数a、b，如果a能被b整除或a加b大于1000，则输出a，否则输出b
 
var a = prompt("请输入第一个数");
        var b = prompt("请输入第二个数");
        if (a % b == 0 || +a + +b > 1000) {
            alert(a);
        }
        else {
            alert(b);
        }

多重if结构

if ( 条件 ) {

//语句 1;

}

else if ( 条件n ) {

//语句 n;

}......

else {

//语句若所有条件都不成立，则执行else语句;

}

例题：令狐冲参加比武大会
如果获得第一名，将出任武林盟主    90<level
如果获得第二名，将出任武当掌门    80<level<=90
如果获得第三名，将出任峨嵋掌门    60<=level<=80
否则，将被逐出师门               level<60
 
 var a = prompt("请输入令狐冲的比武分数");
        if (a >= 90) {
            alert("出任武林盟主");
        }
        else if (a >= 80) {
            alert("出任武当掌门");
        }
        else if (a >= 60) {
            alert("出任峨眉掌门");
        }
        else {
            alert("逐出师门");
        }

isNaN() 与 Number.isNaN()区别:

isNaN是ES5中提供的全局中的方法，用来判断一个值经过数字类型转换之后，转换的值是不是NaN，如果是则返回true，反之返回false。
Number.isNaN是ES6中提供的方法，他在判断的时候，不经过类型的转换直译为是否类型为数字且值为NaN，只有NaN本身可以满足，其他经过类型转换的则不算。
两者最大的区别就是是否经过类型的转换。
const num1 = '1',num2 = 1,num3 = NaN;;
console.log(isNaN(num1),isNaN(num2),isNaN(num3)); // false false true
console.log(Number.isNaN(num1),Number.isNaN(num2),Number.isNaN(num3)); // false false true