JavaScript基础

1. JavaScript基础-基本概念

1.1 什么是JavaScript？

JavaScript简称JS，是前端开发的一门脚本语言(解释型语言)

• 解释型语言：程序执行之前，不需要对代码进行编译，在运行时边解析边执行的语言

浏览器中有一个解析器，它可以对写好的代码进行解析，解析好了可以直接执行

浏览器工作原理

2.JavaScript发展史

JavaScript起源于Netscape（网景）公司的LiveScript,为了赶时髦，后面更改为JavaScript

时间	发生的事情
1994年	网景公司发布历史上第一个比较成熟的浏览器(Navigator 0.9), 但是只能浏览不能交互
1995年	为了解决表单有效性验证就要与服务器进行多次地往返交互问题，网景公司录用Brendan Eich(布兰登·艾奇)，他在 10 天内开发出 LiveScript 语言
Netscape Navigator 2.0 即将正式发布前	Netscape 将LiveScript 更名为 JavaScript， 目的是为了蹭Java的热度

3.JavaScript的组成

3.1 ECMAScript

概念

JavaScript的语法标准

• ECMA是European Computer Manufacturers Association的缩写，即欧洲计算机制造商协会
• ECMAScript是ECMA制定的脚本语言的标准, 规定了一种脚本语言实现应该包含的基本内容
• JavaScript是脚本语言的一种,所以JavaScript也必须遵守ECMAScript标准,包含ECMAScript标准中规定的基本内容

为什么有这个语法标准

因为要让不同浏览器都可以运行通过这个标准编写的代码

3.2 DOM(Document Object Model)

文档对象模型，JavaScript操作网页上的元素(标签)的API

3.2 BOM(Browser Object Model)

浏览器对象模型，JavaScript操作浏览器的部分功能的API

4.JavaScript关键字

什么是关键字？

        被JavaScript语言赋予了特殊含义的单词
        关键字在开发工具中会显示特殊颜色
        关键字不能用作变量名、函数名等
        关键字严格区分大小写, var和Var前者是关键字, 后者不是
        只需要记住一点: 在JavaScript中所有的关键字都是小写的

什么是保留字?

JavaScript预留的关键字，他们虽然现在没有作为关键字，但在以后的升级版本中有可能作为关键字

更多详细说明

5.数据及数据类型

数据的概念以及数据类型的详解

1.基本数据类型

• Number 数值类型
  在JavaScript中无论是整数还是小数都是属于数值类型的

• String 字符串类型
  在JavaScript中无论是通过单引号还是通过双引号括起来的内容都是属于字符串类型的

• Boolean 布尔类型
  在JavaScript中布尔类型比较特殊, 只有两个取值true/false

• Undefined 未定义类型
  在JavaScript中未定义类型比较特殊, 只有一个取值undefined

• Null 空类型

6.数据类型的转换

6.1 转换为字符串类型

1. 将Number类型转换为字符串类型
2. 将Boolean类型转换为字符串类型
3. 将undefined类型转换为字符串类型
4. 将null类型转换为字符串类型

6.1.1 将Number类型、Boolean类型转换为字符串类型

• 变量名称.toString()
• String(变量名称)
• 变量名称 + 单/双引号

注意点：

不能使用常量直接调用toString方法, 因为常量是不能改变的

String(常量or变量), 因为是根据传入的值重新生成一个新的值, 并不是修改原有的值

let str2 = 123.toString(); // 报错

6.1.2 将undefined类型、null类型转换转换为字符串类型

• String(变量名称)
• 变量名称 + 单/双引号

6.2 转换为数值类型

1. 将String类型转换为字符串类型
2. 将Boolean类型转换为字符串类型
3. 将undefined类型转换为字符串类型
4. 将null类型转换为字符串类型

转换方法：
1.通过Number(常量or变量);方式来转换
2.还可以通过数学运算中的+号和-号来转换
3.还可以通过parseInt(需要转换的字符串)/parseFloat(需要转换的字符串)

注意点: parseInt/parseFloat都会将传入的数据当做字符串来处理
parseInt/parseFloat都会从左至右的提取数值, 一旦遇到非数值就会立即停止，停止的时候如何还没有提取到数值, 那么就返回NaN

NaN === Not a Number

console.log(typeof NaN) // number

• 空字符串/false/null转换之后都是0
• 字符串中不仅仅是数字/undefined转换之后是NaN
• 其它的正常转换

6.2.1 将String类型转换为数值类型

• 如果字符串中都是数值, 那么就正常转换
• 如果字符串是一个空串"" / " "(空格), 那么转换之后是0
• 如果字符串中不仅仅是数字, 那么转换之后是NaN

6.2.2 将Boolean类型转换为数值类型

• true转换之后是1
• false转换之后是0

6.2.3 将undefined类型转换为数值类型

• 转换之后是NaN

6.2.4 将null类型转换为数值类型

• 转换之后是0

6.3 转换为布尔类型

1. 将String类型转换为字符串类型
2. 将Number类型转换为字符串类型
3. 将undefined类型转换为字符串类型
4. 将null类型转换为字符串类型

转换方法：
1.Boolean(常量or变量)

空字符串 / 0 / NaN / undefined / null 会转换成false, 其它的都是true

6.2.1 将String类型转换为布尔类型

只要字符串中有内容都会转换为true, 只有字符串中没有内容才会转换为false

6.2.2 将Number类型转换为布尔类型

只有数值是0才会转换为false, 其它的都会转换为true
如果是NaN也会转换为false

6.2.3 将undefined类型转换为布尔类型

undefined会转换为false

6.2.4 将null类型转换为布尔类型

null会转换为false

7.JavaScript运算符

7.1 自增自减运算符

1.什么是自增自减运算符?
自增运算符: ++
自减运算符: –

2.自增自减运算符的作用
自增运算符: 可以快速的对一个变量中保存的数据进行+1操作
自减运算符: 可以快速的对一个变量中保存的数据进行-1操作

3.自增和自减写在变量的前面和后面的区别?
写在变量的后面, 表示变量先参与其它的运算, 然后再自增或者自减
写在变量的前面, 表示变量先自增或者自减, 然后再参与其它的运算
注意点
1.自增自减运算符只能出现在变量的前面或者后面, 不能出现在常量或者表达式的前面或者后面
2.什么是表达式?
表达式就是用运算符连接在一起有意义有结果的语句, 我们就称之为表达式
1 + 1; 表达式
a * 5; 表达式

3.在企业开发中自增自减运算符最好单独出现, 不要出现在表达式中

7.2 关系运算符

1.什么是关系运算符?
> < >= <= == != === !==

2.关系运算符的返回值
只有两个, 要么是true, 要么是false
如果关系成立, 就返回true
如果关系不成立, 就返回false

3.关系运算符的注意点
3.1对于非数值类型的数据, 会先转换成数值类型, 再进行判断
3.2对于关系运算符来说, 任何数据和NaN进行比较, 返回值都是false
3.3如果参与比较的都是字符串类型, 那么不会转换成数值类型再比较, 而是直接比较字符对应的Unicode编码
3.4特殊比较的结果

 		// let res = null == 0; // false
        // let res = undefined == 0; // false
        // let res = null == undefined;  // true 因为undefined的底层是null衍生来的
        // 在企业开发中千万不要通过==来判断某一个数据是否是NaN
        // 如果想判断某一个数据是否是NaN那么可以通过isNaN来进行判断
        // let res = NaN == NaN; // false
        let num = NaN;
        let res = isNaN(num);
        console.log(res);

注意点
1.== 只会判断取值是否相等, 不会判断数据类型是否相等

2.=== 不仅会判断取值是否相等, 并且还会判断数据类型是否相等。只有取值和数据类型都相等, 才会返回true
3. 因为关系运算符是左结合性, 所以不能利用关系运算符来判断区间

// let res = 10 > 5 > 3; // let res = true > 3;  let res = 1 > 3;
let res = 10 <= 25 <= 20; // let res = true <= 20; let res = 1 <= 20;
console.log(res);

4.关系运算符的结合性和优先级
关系运算符都是左结合性(从左至右的运算)
关系运算符中 > < >= <= 的优先级高于 == != === !==

let res = 10 == 10 > 0; // let res = 10 == true; let res = 10 == 1;
console.log(res); // false

7.3 逻辑运算符

1.逻辑运算符的优先级和结合性

逻辑运算符的结合性是左结合性(从左至右的运算)
在逻辑运算中&&的优先级高于||

2.逻辑运算符的注意点

2.1 在逻辑运算中如果参与运算的不是布尔类型, 那么会先隐式地转换成布尔类型, 再参与其它的运算
2.2 在逻辑与运算中, 如果参与运算的不是布尔类型, 返回值有一个特点
格式: 条件A && 条件B

• 如果条件A不成立, 那么就返回条件A
• 如果条件A成立, 无论条件B是否成立, 都会返回条件B
  2.3 在逻辑或运算中, 如果参与运算的不是布尔类型, 返回值有一个特点
  格式: 条件A || 条件B
• 如果条件A成立, 那么就返回条件A
• 如果条件A不成立, 无论条件B是否成立, 都会返回条件B

2.4 在逻辑与运算中,有一个逻辑短路现象
格式: 条件A && 条件B
由于逻辑与运算的规则是一假则假, 所以只要条件A是假, 那么条件B就不会运算

let num = 1;
let res = (10 > 20) && (++num > 0);
console.log(num); // 1
console.log(res); // false

2.5在逻辑或运算中,有一个逻辑短路现象
格式: 条件A || 条件B
由于逻辑或运算的规则是一真则真, 所以只要条件A是真, 那么条件B就不会运算

let num = 1;
let res = (10 < 20) || (++num > 0);
console.log(num); // 1
console.log(res); // true

7.4 逗号运算符

1.逗号运算符 ,
在JavaScript中逗号运算符一般用于简化代码

2.逗号运算符优先级和结合性
逗号运算符的结合性是左结合性(从左至右的运算)
逗号运算符的优先级是所有运算符中最低的

3.逗号运算符也是一个运算符, 所以也有运算符结果
逗号运算符的运算符结果就是最后一个表达式的结果
表达式1, 表达式2, 表达式3, …;

let res = ((1 + 1), (2 + 2), (3 + 3));
        console.log(res); // 6

// 利用逗号运算符同时定义多个变量
let a, b
// 利用逗号运算符同时给多个变量赋值
a = 10, b = 5;

7.5 赋值运算符

1.什么是赋值运算符?

    赋值运算符就是将等号右边的值存储到等号左边的变量中

1.1简单类型的赋值运算符

    =

1.2复杂类型的赋值运算符

    += -= *= /= %=

2.赋值运算符的优先级和结合性

赋值运算符的优先级低于算数运算符
赋值运算符的结合性是右结合性(从右至左的计算)
赋值运算符的左边只能放变量, 不能放常量

let res = 5;
res += 2 * 2; // res = 5 + 2 * 2;

let res = 5;
res *= 2 + 2; //  res = res * (2 + 2);

8.JavaScript流程控制

8.1 switch

1.switch格式:

    switch(表达式){
        case 表达式A:
            语句A;
            break;
        case 表达式B:
            语句B;
            break;
        ... ...
        default:
            前面所有case都不匹配执行的代码;
            break;
    }

2.switch特点

会从上至下的依次判断每一个case是否和()中表达式的结果相等, 如果相等就执行对应case后面的代码, 如果前面所有的case都不匹配, 那么就会执行default后面的代码
并且所有的case和default只有一个会被执行, 并且只会被执行一次

注意点：
1.case判断的是===, 而不是==
2.()中可以是常量也可以是变量还可以是表达式
3.case后面可以是常量也可以是变量还可以是表达式
4.break的作用是立即结束整个switch语句
在switch语句中一旦case或者default被匹配, 那么其它的case和default都会失效
5.default不一定要写在最后
switch中的default无论放到什么位置, 都会等到所有case都不匹配再执行
6.和if/else中的else一样, default也可以省略

/*
         要求用户输入一个分数，根据输入的分数输出对应的等级
        A 90～100
        B 80～89
        C 70～79
        D 60～69
        E 0～59

        100 / 10 = 10
        90 / 10 = 9
        99 / 10 = 9.9
        98 / 10 = 9.8
        */
        // 1.接收用户输入的分数
        let str = prompt("请输入一个0~100的数");
        // let score = +str;
        let num = +str;
        let score = parseInt(num / 10);
        console.log(score);
        switch (score) {
            case 10:
            case 9:
                alert("A");
                break;
            case 8:
                alert("B");
                break;
            case 7:
                alert("C");
                break;
            case 6:
                alert("D");
                break;
            case 5:
            case 4:
            case 3:
            case 2:
            case 1:
            case 0:
                alert("E");
                break;
            default:
                alert("输入有误");
                break;
        }

在企业开发中如果是对区间进行判断, 那么建议使用if
在企业开发中如果是对几个固定的值的判断, 那么建议使用switch
原则: 能用if就用if

9.break和continue

break

1.什么是break关键字?

break关键字可以用于switch语句和循环结构中
在switch语句中break关键字的作用是立即结束当前的switch语句
在循环结构中break关键字的作用也是立即结束当前的循环结构

2.break关键字的注意点

• 2.1 break关键字后面不能编写任何的语句, 因为永远执行不到
• 2.2 如果在循环嵌套的结构中, break结束的是当前所在的循环结构

continue

1.什么是continue关键字?

continue关键字只能用于循环结构
在循环结构中continue关键字的作用是跳过本次循环, 进入下一次循环

2.continue关键字的注意点

• 2.1 continue关键字后面和break一样, 不能编写其它的代码, 因为执行不到
• 2.2 和break一样, 如果continue出现在循环嵌套结构中, 只会跳过当前所在的循环

---

学习笔记❥(^_-)，版权归Jonathan所有