第二章 JavaScript 基础（上）

第二章 JavaScript 基础（上）

2.1数据类型

2.1.1变量的数据类型

因为 JavaScript 是一种弱类型的语言，所以不用提前声明变量的数据类型，像 C、JAVA 等强类型语言就需要提前声明数据类型。下面通过代码来比较强类型语言和弱类型语言的区别

//强类型语言
int num = 10;   //这里的变量是一个 int 类型（整数型）
//弱类型语言
var num = 10;    //在声明变量时不用确定类型
num = 'abc';     //赋值一个字符串，从 num 型变成了字符串型

2.1.2数据类型分类

数据类型

基本数据类型	复杂数据类型
Boolean(布尔型)、String(字符串型)、 Number(数字型)、Null(空型)、Undefind（未定义型）	复杂数据类型：Object(对象)

1、数字型（Number），包含整型值和浮点型值；

var num = 20;   //整型值
var num = 1.22; //浮点值

2、布尔型（Boolean），包含 true 和 flase 两个布尔值；

var bool1 = turn;
var bool2 false;

3、字符串型（String），用单引号或双引号包裹；

var str1 = '';
var str2 = 'abc';
var str3 = “abc”;

4、未定义型（Undefined），只有一个值 undefined;

var a;              //声明了变量 a 但是没赋值，此时的变量 a 值为 undefined 
var b = undefined;

5、空型（Null），只有一个值 null ；

var a = null;

2.1.3数字型

JavaScript 中的数字型可以用来保存整数或者浮点数

var age = 20;
var pi = 3.14;

1、进制。在数字开头加上 0 ，表示八进制，八进制由 0~8 组成，逢八进一。

var num = 015;
console.log(num);   //此时输出的结果为 13 。

2、在数字开头加上 0x ,表示为十六进制。

var a = 0xa1;
console.log(a);   //此时输出的结果为 161 .

3、特殊值

console.log(Number.MAX_VALUE *2);    //Infinity
console.log(-Number.MAX_VALUE *2);   //-Infinity
console.log('abc' - 100);            //NaN
//当我们要判断一个值是否为 NaN 时，用如下代码
console.log(isNaN(123));      //输出为 flase 表示不是 NaN 
console.log(isNaN('abc'));    //输出为 ture 表示是 NaN 

2.1.4字符串

1、字符串的长度

var a = 'I am beautiful girl';
console.log(a.length);

2、访问字符串中的字符

var a = 'I am beautiful girl';
console.log(str[0]);   //输出结果为 I
console.log(str[2]);   //输出结果为 a

3、字符串的拼接

console.log('a' + 'b');   //输出 ab
console.log('a' + 18);    //输出 a18

4、显示年龄的案例

var age = prompt('请输入您的年龄');
var msg = '您今年' + age + '岁';
alert(msg);

2.1.5布尔型

1、布尔型有两个值：turn 和 false ，表示事物的真假

console.log(true);   //输出结果：true
console.log(false);  //输出结果：false

2、当布尔型和数字相加时，true 会转化为 1 ，false 会转化 0 ；

console.log(true + 2);     //输出结果为 3
console.log(false + 2);    //输出结果为 2 

2.1.6 undefined 和 null

如果一个变量声明之后没有赋值，那么输出的结果就会是 undefined 代码如下

var a;
console.log(a);  //输出结果为 undefined 
console.log(a+'_'); //输出为undefined_ (字符串型)
console.log(a + 1); //输出为 NaN
var b = null;
console.log(b);  //输出结果为 null 
console.log(b + '_');//此处是字符串的拼接  输出为 null_
console.log(b + 1);//此时输出为 1 ，null 转化为 0 
console.log(b + true);//输出为 1 ，true 转化为 1

如上就是 undefined 和 null 的一些例子

2.1.7 数据类型检测

在开发中，当我们不明白一个数据的数据类型时，可以利用 typeof 运算符进行数据类型检测，代码如下

console.log(typeof 12);//输出结果为 number
console.log(typeof '12');//输出结果为 string 
console.log(typeof true);//输出结果为 boolean
console.log(typeof undefined);//输出结果为 undefined 
console.log(typeof null);//输出结果为 null

使用 typeof 可以方便检测变量的数据类型

var a = 20;
console.log(typeof a == 'string');//输出为 false
console.log(typeof a == 'number');//输出为 ture
var age = prompt('请输入您的年龄');
console.log(typeof age);

2.2数据类型转换

2.2.1转换为字符串型

var num = 3.14;
var str = num + '';   //利用字符串的拼接转化为字符串类型
console,log(atr, typeof str);

var str = num.toString(); //利用 toString 转化为字符串
console.log(str,typeof str);

var str = String(num);   //利用 string() 转化为字符串
console.log(str,typeof str);
//注意：数值和字符串进行加法运算时 数值变为字符串类型，当数值和字符串进行减法时,字符串变为数值型

2.2.2转化为数字型

console.log(parseInt('78'));//将字符串转化为整数
console.log(parseFloat('3.215'));//将字符串转化为浮点数
console.log(Number('3.02'));//将字符串转换为数字型
console.log('45' - 1);//利用运算符（-、*、/）隐式转换
console.log(parseInt('F',16));//将其转换成 16 进制，此时输出结果为 15

2.2.3转换为 Boolean 型

//在转化为 boolean 型时，代表空、否定的值会被转换为 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

2.2.4案例

1、“计算年龄”

var year = prompt('请输入您的年龄');
var age = 2020 - pareInt('year');
alert('您今年已经' + age + '岁了');

2、计算两个数字之和

var a = prompt('请输入第一个数字');
var b = prompt('请输入第二个数字');
var sum = parseInt(a) + parseInt(b);
alert('两个数字之和是：' + sum);

2.3运算符

2.3.1比较运算符

// == 和 != 在进行比较时，会先转化为相同的数据类型，在进行值的比较。
// === 和 !== 在进行比较时不用进行数据类型的转化，而是直接进行比较，当数据类型和值都相等或不相等时输出 true
//注意：比较运算符的结果是 Boolean 型的，输出 true 或 false 。

2.3.2逻辑运算符

逻辑运算符有与或非三种，其结果也是布尔型。

1、与（&&），示例 a&&b，结果：当 a和b 都为 true 时，结果为 true 否则为 false 。

2、或（||），示例 a||b，结果：只要有一个为 true 则为 true 。

3、非（!），示例 !a ，结果：若 a 为 false 则结果为 true ，即与之相反。

var res = 2>1 && 3>1;
console.log(res);//输出为 true
var text = 2>1 || 3<1;
console.log(text);//输出为 true 
var rae = 5>1;
console.log(!rae);//输出为 false

2.3.3赋值运算符

//%= 求模并赋值
//+= 连接并赋值  a = 'abc';a += 'def'; 输出为 abcdef 
//<<= 左移位并赋值 a = 9;a<<=2;  输出的结果为 36 。左移位是先将其转化为二进制，再将二进制进行一个整体移位，移位后的结果再转化为十进制就是最终结果。

2.3.4三元运算符

条件表达式 ？ 表达式 1 ：表达式 2 ；

var a = prompt('请输入您的年龄');
var age = a >= 18 ? '已成年' : '未成年';
alert(age);

2.4分支结构

在一个程序执行的过程中，代码的执行顺序会影响最终结果，我们需要通过代码的执行顺序来完成要实现的功能，这就是流程控制。流程控制主要有三种结构，分别是顺序结构，分支结构，循环结构。

2.4.1 if 语句

if 语句又叫做条件语句、单分支语句。

if(条件表达式){
    //代码段
}
var age = prompt('请输入您的年龄');
if(age >= 18){
    alert('已成年');
}

//此时打印如果大于等于 18 则显示已成年，否则没有显示

var age = prompt('请输入您的年龄');
if(age == '' || age == null){
    alert('用户未输入');
}

2.4.2 if…else 语句

if…else 语句又称为双分支语句，当满足某种条件时，就进行某种处理，否则进行另一种处理。代码如下

if(条件表达式){
    //代码段1
}else{
    //代码段2
}
var age = prompt('请输入您的年龄');
if (age >= 18){
    alert('已成年');
}else{
    alert('未成年');
}

案例：判断闰年。

var year = prompt('请输入你要判断的年份');
if (year % 4 == 0 && year % 100 !=0 || year % 400 == 0){
    alert('该年是闰年');
}else{
    alert('该年不是闰年');
}

由上代码判断是否为闰年

案例：用三元表达式判断一个数字是否小于 10 .

var num = prompt('请输入数字');
var result = num < 10 ? '小于10' : '大于或等于 10 ';
alert(result);

如上的代码页可以用 if…else 来写

var num = prompt('请输入数字');
if(num < 10){
    alert('小于 10');
}else{
    alert('大于或等于 10');
}

var num = prompt('请输入数字');
if(num < 10){
    var resule = '小于 10';
}else{
    var result = '大于或等于 10';
}
alert(result);

以上就是三元表达式和 if…else 做判断的例子

2.4.3 if…else if 语句

if…else if 语句，又称为多分支语句，可针对不同情况进行不同处理。例如对一个学生的考试成绩按分数进行等级的划分：90~100 分为优秀，80~90 分为良好，70~80 分为中等，60~70 分为及格，60 分以下则为不及格。

if(条件表达式1){
    //代码段1
}else if(条件表达式2){
    //代码段2
}else if(条件表达式n){
    //代码段n
}else{
    //代码段 n+1 
}

如上例子代码如下

var num = prompt('请输入学生成绩');
if(num >= 90){
    alert('优秀');
}else if(num >= 80){
    alert('良好');
}else if(num >= 70){
    alert('中等');
}else if(num >= 60){
    alert('合格');
}else{
    alert('不及格');
}

2.4.4 switch 语句

switch 语句也是多分支语句，不同的是它只能针对某个表达式的值做出判断，从而决定执行哪一段代码。switch 语句的特点就是代码更加清晰简洁、方便阅读。代码如下

switch (表达式){
        case 值 1
        代码段 1;
        break;
        case 值 2 
        代码段 2;
        break;
        default;
        代码段 n ;
}

var num = 1;
switch(num + 1){
    case 1:
        console.log('结果为1');
        break;
    case 2:
        console.log('结果为2');
        break;
    case 3:
        console.log('结果为3');
        break;
    default:
        console.log('结果未知');
}

例如对一个学生的考试成绩按分数进行等级的划分：90~100 分为优秀，80~90 分为良好，70~80 分为中等，60~70 分为及格，60 分以下则为不及格。用 switch 语句写

var score = prompt('请输入学生成绩');
switch(parseInt(score / 10)){
    case 9:
        console.log('优秀');
        break;
    case 8:
        console.log('良好');
        break;
    case 7:
        console.log('中等');
        break;
    case 6:
        console.log('及格');
        break;
    default:
        console.log('不及格');
}

2.4.5【案列】查询水果的价格

实现用户在弹出框里面输入水果名字，如果有该水果就弹出该水果的价格，否则弹出‘没有该水果’。

var fruit = prompt('请输入水果名称');
switch(fruit){
    case '苹果':
        console.log('苹果的价格是 4.5 一斤');
        break;
    case '香蕉':
        console.log('香蕉的介个是 3.5 一斤');
        break;
    case '西瓜':
        console.log('西瓜的价格是 1.2 一斤');
        break;
    default:
        console.log('没有这种水果');
}