JavaScript基础知识2

1、数据类型

JavaScript 中的数据类型可以分为两⼤类：基本数据类型、复杂数据类型。

（1）简单数据类型：Number、String、Boolean、null、undefined、BigInt - 新增、Symbol - 新增

①Number 类型：在 JavaScript 中整数(5, 6, 10)和浮点数(11.5, 1.1)都属于 Number 类型，也就是所有的数值类型都是Number 类型。

②String 类型：把多个字符组成⼀串，就是⼀个字符串。字符串字⾯量：字⾯形式来代表字符串数据。定义字符串的时候⽤单引号和双引号都可以  如'程序猿'，"程序媛"

let userName = 'jiaoshou';
let nickName = "教瘦";

在定义字符串的时候我们推荐使⽤单引号，这是因为 HTML 中属性值使⽤双引号包裹，有的时候
HTML 和 JavaScript 可能会嵌套书写，为了区分 HTML 的属性和 JavaScript 中的字符串，所以这⾥始终推荐字符串使⽤单引号。 

③Boolean 类型：布尔类型是⼀种专⻔为了编程设置的⼀种语法，主要⽤来表示⼀个结果的成⽴与否，其值只有两个 true(真) 和 false (假)。

④undefined 类型：undefined 类型只有⼀个值：undefined。代表变量定义了，但是没有赋值。

var a;
// 输出 undefined
console.log(a);
// or
let b;
// 输出 undefined
console.log(b);

⑥null 类型：null 类型只有⼀个值：null。代表变量赋值了，但是值代表的是空。

var a = null;
let b = null;
// 变量a和b都赋值了，值为 null

（2）复杂数据类型：Object

2、注释

（1）单⾏注释

⽤来描述下⾯⼀个或多⾏代码的作⽤，VSCode 中的快捷键：Ctrl + /

// 这是⼀个变量
let nickName = 'js';

（2）多⾏注释

⽤来注释多条代码，VSCode 中的快捷键：Shift+ Alt + A

/*
var age = 18;
var name = 'zs';
console.log(name, age);
*/

3、运算符

JavaScript 中提供了很多运算符，⽅便我们进⾏各种运算，例如：算数运算符、⽐较运算符、逻辑运算符、赋值运算符

（1）算数运算符：+ - * / % 取余

（2）⾃增操作符、⾃减操作符：++ ⾃增操作符的作⽤是让⼀个数字在原来的基础上⾃增；-- 操作符的作⽤是让⼀个数据⾃减

但是⾃增和⾃减操作符是可以写在数据前⾯和后⾯的，两者的区别在于运算顺序不同，a++ : 参与运算的时候，会先⽤原来的值先运算，再⾃增；++a: 参与运算的时候，会先在原来的基础上⾃增，再使⽤新的值参与运算。--运算符同理。

var a = 10;
var b = a++ + 10; // 运算的时候，使⽤a的原来值10参与加法运算，10+10赋值给b之后，再实
现a的⾃增
console.log(b); // 输出20
console.log(a); // 输出 11
var c = 10;
var d = ++a + 10; // 运算的时候，先执⾏a的⾃增，再使⽤a⾃增后的值11和10相加，最终结
果是 11 + 10
console.log(d); // 输出21
console.log(c); // 输出11

（3）⽐较操作符：⽐较操作符的就是⽐较两个数据，操作符号有> < >= <= ，这⼏个符号的作⽤和数字中学习的⽐较是⼀样的，就是⽐较两个数字的⼤⼩，运算结果是 布尔 类型

（4）还有两类的操作符：== 相等判断 != 不等判断    === 全等 !== 全不等

== 和 === 是⽤来⽐较两个数据是否相等的

let res1 = '123' == 123;
let res2 = '123' === 123;
console.log(res1); // true
console.log(res2); // false

两者的区别在于
== 会进⾏隐式类型转换，先把字符串转换成数值类型，再进⾏⽐较。
=== 不会进⾏隐式类型转换。先⽐较两个操作数的类型，如果类型⼀致再⽐较值，如果类型不⼀致直接返回false

!= 和 !== 类似 != 先进⾏隐式类型转换，!== 不会进⾏类型转换

  <script>
 var res1 = '4' != 4;
    var res2 = '4' !== 4;
    console.log(res1); // 输出 false ,⽐较两个数据的值是否不相等, 此时两个数据的 值 都4 ，相等，结果是 false
    console.log(res2); // 输出 true ，⽐较两个数据的类型和值是否不相等，此时两个数据的类型不相等，结果是 true
    </script>

（5）逻辑操作符

逻辑运算符的主要作⽤是连接多个条件，我们要掌握的⽐较运算符有&&  ||  ! 

&& 与 两个操作数同时为true，结果为true，否则都是false

|| 或 两个操作数有⼀个为true，结果为true，否则为false

! ⾮ 取反

（6）赋值操作符：=、+=、 -=、 *= 、/=、 %=

4、流程控制

（1）顺序结构：从上到下执⾏的代码就是顺序结构，程序默认就是由上到下顺序执⾏的

（2）分⽀结构：根据不同的情况，执⾏对应代码

①单分⽀：满⾜⼀个指定条件，执⾏指定的代码块。

例：⽤户输出成绩，转换成浮点数，判断成绩是否及格(⼤于60分)

let score = prompt('请输⼊你的成绩');
score = parseFloat(score);
if (score >= 60) {
console.log('及格')
}

②双分⽀：满⾜指定条件，执⾏指定的代码块；不满⾜条件，执⾏另⼀个代码块。

例：⽤户输⼊成绩，如果⼤于60分输出及格，否则输出不及格 

let score = prompt('请输⼊你的成绩');
score = parseFloat(score);
if (score >= 60) {
console.log('及格，买糖吃');
} else {
console.log('不及格，打pp');
}

③多分⽀：多个条件的判断，如果满⾜其中⼀个条件只执⾏对应的⼀个代码块。

例：⽤户输⼊成绩，判断输⼊的是否是数字如果不是提示⽤户输出正确的成绩。

成绩在[0, 60)之间，输出差
成绩在[60, 70)之间，输出可
成绩在[70, 80)之间，输出中
成绩在[80, 90)之间，输出良
成绩在[90, 100]之间，输出优
其它值输出，成绩范围不正确 

let score = parseFloat(prompt('请输⼊考试成绩：'));
if (isNaN(score)) {
console.log('请输⼊正确的成绩');
} else {
if (score >= 0 && score < 60) {
console.log('差')
} else if (score >= 60 && score < 70) {
console.log('可');
} else if (score >= 70 && score < 80) {
console.log('中');
} else if (score >= 80 && score < 90) {
console.log('良');
} else if (score >= 90 && score <= 100) {
console.log('优');
} else {
console.log('输⼊的成绩范围不正确');
}
}

（3）循环结构：重复做⼀件相似的事情

①while 循环

例：循环输出100次，“我爱你”。

// 定义循环变量，控制循环的次数
let i = 0;
// 判断条件是否成⽴
while (i < 100) {
// 循环体
// console.log('教瘦，我爱你');
console.log(i + ' 教瘦，我爱你');
// 循环遍历⾃身加1
i++;
}

②do...while 循环

例：循环输出100次，“我爱你”。

// 定义循环变量，控制循环的次数
let i = 0;
do {
console.log(i + ' 教瘦，我爱你。');
i++;
} while (i < 100);

③for 循环

       例：求1-100之间所有偶数的和

let sum = 0;
for (let i = 1; i <= 100; i++) {
if (i % 2 === 0) {
sum += i;
}
}
console.log(sum);