【JS】Chapter1-基础语法-EW帮帮网

站在巨人的肩膀上

黑马程序员前端JavaScript入门到精通全套视频教程，javascript核心进阶ES6语法、API、js高级等基础知识和实战教程

（一）基础语法

1. JavaScript 介绍

1.1 JavaScript 是什么

JavaScript（是什么？）

是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。

作用（做什么？）
– 网页特效 (监听用户的一些行为让网页作出对应的反馈)
– 表单验证 (针对表单数据的合法性进行判断)
– 数据交互 (获取后台的数据, 渲染到前端)
– 服务端编程 (node.js)
JavaScript的组成（有什么？）

ECMAScript:
- 规定了js基础语法核心知识。比如：变量、分支语句、循环语句、对象等等。
Web APIs :
- DOM：操作文档，比如对页面元素进行移动、大小、添加删除等操作。
- BOM：操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等。

权威网站：MDN

JavaScript权威网站：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

1.2 JavaScript 书写位置

内部 JavaScript

直接写在html文件里，用script标签包住
规范：script标签写在 </body> 上面

<script>
    alert('你好，js')
</script>

页面弹出警告对话框。

注意事项：我们将 <script> 放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。因此，将 JavaScript 代码放在 HTML页面的底部附近通常是最好的策略。

外部 JavaScript

代码写在以.js结尾的文件里
语法：通过script标签，引入到html页面中。

<body>
    <script src="my.js"></script>
</body>

注意事项：

script标签中间无需写代码，否则会被忽略！
外部JavaScript会使代码更加有序，更易于复用，且没有了脚本的混合，HTML 也会更加易读，因此这是个好的习惯。
内联 JavaScript

代码写在标签内部

注意：此处作为了解即可，但是后面vue框架会用这种模式

<body>
    <button onclick="alert('已经点击成功')">点击我</button>
</body>

1.3 JavaScript 的注释

单行注释
- 符号：//
- 作用：//右边这一行的代码会被忽略
- 快捷键：ctrl + /
块注释
- 符号：/* */
- 作用：在/* 和 */ 之间的所有内容都会被忽略
- 快捷键：shift + alt + A

1.4 JavaScript 的结束符

作用：使用英文的 ; 代表语句结束
实际情况：实际开发中，可写可不写, 浏览器（JavaScript 引擎）可以自动推断语句的结束位置
现状：在实际开发中，越来越多的人主张，书写 JavaScript 代码时省略结束符
约定：为了风格统一，结束符要么每句都写，要么每句都不写（按照团队要求）

1.5 输入和输出语法

输出语法：

// 语法1：
document.write('要输出的内容')
// 作用： 向body内输出内容
// 注意：如果输出的内容写的是标签，也会被解析成网页元素

// 语法2：
alert('要输出的内容')
// 作用：页面弹出警告对话框

// 语法3：
console.log('控制台打印')
// 作用：控制台输出语法，程序员调试使用

输入语法：

// 语法：
prompt('请输入您的姓名：')
// 作用：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字

JavaScript 代码执行顺序：

按HTML文档流顺序执行JavaScript代码
alert() 和 prompt() 它们会跳过页面渲染先被执行（目前作为了解，后期讲解详细执行过程）

1.6 字面量

在计算机科学中，字面量（literal）是在计算机中描述事/物。

2. 变量

2.1 变量是什么

白话：变量就是一个装东西的盒子。
通俗：变量是计算机中用来存储数据的“容器”，它可以让计算机变得有记忆。

注意：变量不是数据本身，它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子。

2.2 变量基本使用

声明变量：

要想使用变量，首先需要创建变量（也称为声明变量或者定义变量）
语法：
```
let 变量名
```
- 声明变量有两部分构成：声明关键字、变量名（标识）
- let 即关键字（let：允许、许可、让、要），所谓关键字是系统提供的专门用来声明（定义）变量的词语

变量赋值：

定义了一个变量后，你就能够初始化它（赋值）。在变量名之后跟上一个“=”，然后是数值。

举例：

// 1. 声明一个 age 变量
let age
// 2. age 变量赋值为 18
age = 18    // 其中 age 是变量，18 是字面量。
// 3. 输出 age 变量
alert(age)

注意：是通过变量名来获得变量里面的数据。

简单点，也可以声明变量的时候直接完成赋值操作，这种操作也称为变量初始化。

<script>
    // 声明了一个 age 变量，同时里面存放了 18 这个数据
    let age = 18
</script>

更新变量：

变量赋值后，还可以通过简单地给它一个不同的值来更新它。

// 声明了一个 age 变量，同时里面存放了 18 这个数据
let age = 18
// 变量里面的数据发生变化，更改为 19
age = 19
// 页面输出的结果为 19
document.write(age)

注意：let 不允许多次声明一个变量。

声明多个变量：

变量赋值后，还可以通过简单地给它一个不同的值来更新它。
语法：多个变量中间用逗号隔开。
```
let age = 18, uname = 'pink'

// 多行代码声明有点长，但更容易阅读
let age = 18
let uname = 'pink'
```
- 说明：看上去代码长度更短，但并不推荐这样。为了更好的可读性，请一行只声明一个变量。

2.3 变量的本质

内存：计算机中存储数据的地方，相当于一个空间
变量本质：是程序在内存中申请的一块用来存放数据的小空间

2.4 变量命名规则与规范

规则：必须遵守，不遵守报错（法律层面）
规范：建议，不遵守不会报错，但不符合业内通识（道德层面）

规则：

不能用关键字
- 关键字：有特殊含义的字符，JavaScript 内置的一些英语词汇。例如：let、var、if、for 等
只能用下划线、字母、数字、$组成，且数字不能开头
字母严格区分大小写，如 Age 和 age 是不同的变量

规范：

起名要有意义
遵守小驼峰命名法
第一个单词首字母小写，后面每个单词首字母大写。例：userName

2.5 变量拓展—— let 和 var 的区别

在较旧的JavaScript，使用关键字 var 来声明变量，而不是 let。

var 现在开发中一般不再使用它，只是我们可能在老版程序中看到它。

let 为了解决 var 的一些问题。

var 声明:

可以先使用再声明（不合理）
var 声明过的变量可以重复声明（不合理）
比如变量提升、全局变量、没有块级作用域等等

结论：var 就是个 bug，别迷恋它了，以后声明变量我们统一使用 let。

2.6 变量拓展——数组

数组（Array）：一种将一组数据存储在单个变量名下的优雅方式。

let arr = []

2.6.1 数组的基本使用

声明语法

let 数组名 = [数据1, 数据2, ..., 数据n]

let names = ['小明', '小刚', '小红']

数组是按顺序保存，所以每个数据都有自己的编号
计算机中的编号从0开始，所以小明的编号为0，小刚编号为1，以此类推
在数组中，数据的编号也叫索引或下标
数组可以存储任意类型的数据

取值语法

数组名[下标]

let names = ['小明', '小刚', '小红']
names[0]                    // 小明
console.log(names[1])       // 小刚
console.log(names.length)   // 3

通过下标取数据
取出来是什么类型的，就根据这种类型特点来访问

一些术语

元素：数组中保存的每个数据都叫数组元素
下标：数组中数据的编号
长度：数组中数据的个数，通过数组的length属性获得

3. 常量

概念：使用 const 声明的变量称为“常量”。
使用场景：当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是let。
命名规范：和变量一致

常量使用：

// 声明一个常量
const G = 9.8
// 输出这个常量
console.log(G)

注意：常量不允许重新赋值，声明的时候必须赋值（初始化）
小技巧：不需要重新赋值的数据使用const

4. 数据类型

4.1 数据类型

计算机世界中的万事万物都是数据。

计算机程序可以处理大量的数据，为什么要给数据分类？

更加充分和高效的利用内存
也更加方便程序员的使用数据

JS 数据类型整体分为两大类：

基本数据类型
- numer 数字型
- string 字符串型
- boolean 布尔型
- undefined 未定义型
- null 空类型
引用数据类型
- object 对象

4.1.1 数据类型——数字类型（Number）

即我们数学中学习到的数字，可以是整数、小数、正数、负数。

JavaScript 中的正数、负数、小数等统一称为数字类型。

注意：JS 是弱数据类型，变量到底属于那种类型，只有赋值之后，我们才能确认。

数字可以有很多操作，比如，乘法 * 、除法 / 、加法 + 、减法 - 等等，所以经常和算术运算符一起。

数学运算符也叫算术运算符，主要包括加、减、乘、除、取余（求模）。

+：求和
-：求差
*：求积
/：求商
%：取模（取余数）
- 开发中经常作为某个数字是否被整除

同时使用多个运算符编写程序时，会按着某种顺序先后执行，我们称为优先级。JavaScript中优先级越高越先被执行，优先级相同时以书从左向右执行。

乘、除、取余优先级相同
加、减优先级相同
乘、除、取余优先级大于加、减
使用 () 可以提升优先级
总结：先乘除后加减，有括号先算括号里面的

NaN 代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果。

console.log('老师' - 2)     // NaN

NaN 是粘性的。任何对 NaN 的操作都会返回 NaN。

console.log(NaN + 2)        // NaN

4.1.2 数据类型——字符串类型（string）

通过单引号（ ‘’）、双引号（ “”）或反引号( ` ) 包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。

let uname = '小明'          // 使用单引号 
let gender = "男"           // 使用双引号
let goods = `小米`          // 使用反引号
let tel = '12345678900'     // 看上去时数字，但是引号包裹了就是字符串
let str = ''                // 这种情况叫空字符串

注意事项：

无论单引号或是双引号必须成对使用
单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双）
必要时可以使用转义符 \，输出单引号或双引号

字符串拼接：
场景：+ 运算符可以实现字符串的拼接。
口诀：数字相加，字符相连

模板字符串：

使用场景
- 拼接字符串和变量
- 在没有它之前，要拼接变量比较麻烦
语法：
- `` (反引号)
- 在英文输入模式下按键盘的tab键上方那个键（1左边那个键）
- 内容拼接变量时，用 ${ } 包住变量

举例：

document.write(`大家好，我叫${name}，今年${age}岁`)

4.1.3 数据类型——布尔类型（boolean）

表示肯定或否定时在计算机中对应的是布尔类型数据。

它有两个固定的值 true 和 false，表示肯定的数据用 true（真），表示否定的数据用 false（假）。

4.1.4 数据类型——未定义类型（undefined）

未定义是比较特殊的类型，只有一个值 undefined。

什么情况出现未定义类型？只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。
js let age // 声明变量但是未赋值 document.write(age) // 输出 undefined

工作中的使用场景：

我们开发中经常声明一个变量，等待传送过来的数据。
如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是undefined，就判断用户是否有数据传递过来。

4.1.5 数据类型——null（空类型）

JavaScript 中的 null 仅仅是一个代表“无”、“空”或“值未知”的特殊值

null 和 undefined 区别：

undefined 表示没有赋值
null 表示赋值了，但是内容为空

null 开发中的使用场景：

官方解释：把 null 作为尚未创建的对象
大白话：将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null

4.2 检测数据类型

4.2.1 控制台输出语句和检测数据类型

控制台输出语句：

控制台语句经常用于测试结果来使用。数字型和布尔型颜色为蓝色，字符串和undefined颜色为灰色。

通过 typeof 关键字检测数据类型：

typeof 运算符可以返回被检测的数据类型。它支持两种语法形式：
1. 作为运算符： typeof x （常用的写法）
2. 函数形式： typeof(x)
换言之，有括号和没有括号，得到的结果是一样的，所以我们直接使用运算符的写法。

例子：

let age = 18
console.log(typeof age)     // number

5. 类型转换

5.1 为什么需要类型转换

JavaScript是弱数据类型：JavaScript也不知道变量到底属于那种数据类型，只有赋值了才清楚。

坑：使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。
js console.log('10000' + '2000') // 输出结果 100002000
- 此时需要转换变量的数据类型。

通俗来说，就是把一种数据类型的变量转换成我们需要的数据类型。

5.2 隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。
规则：
- - 号两边只要有一个是字符串，都会把另外一个转成字符串
- 除了+以外的算术运算符，比如 - * / 等都会把数据转成数字类型
缺点：
- 转换类型不明确，靠经验才能总结
小技巧：
- +号作为正号解析可以转换成数字型
- 任何数据和字符串相加结果都是字符串

例子：

console.log(11 + 11)        // 22
console.log('11' + 11)      // 1111
console.log(11 - 11)        // 0
console.log('11' - 11)      // 0
console.log(1 * 1)          // 1
console.log('1' * 1)        // 1
console.log(typeof '123')   // string
console.log(typeof +'123')  // number
console.log(+'11' + 11)     // 22

5.3 显式转换

编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。
为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。
概念：
- 自己写代码告诉系统该转成什么类型
转换为数字型
- Number(数据)
  - 转成数字类型
  - 如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字
  - NaN也是number类型的数据，代表非数字
- parseInt(数据)
  - 只保留整数
- parseFloat(数据)
  - 可以保留小数
转换为字符型:
- String(数据)
- 变量.toString(进制)

6. 实战案例

6.1 常见错误

const 声明的时候必须要赋值，进行初始化
提示 age变量没有定义过
- 很可能 age 变量没有声明和赋值
- 或者我们输出变量名和声明的变量不一致引起的（简单说写错变量名了）
提示 “age”已经声明
- 很大概率是因为重复声明了一个变量。
- 注意let 或者const 不允许多次声明同一个变量
常量被重新赋值了
- 常量不能被重新赋值

下面问题：

let num1 = prompt('请输入第一个数值:')
let num2 = prompt('请输入第一个数值:')
alert('两者相加的结果是：${num1 + num2}')

let num1 = +prompt('请输入第一个数值:')
let num2 = +prompt('请输入第一个数值:')
alert('两者相加的结果是：${num1 + num2}')

因为prompt 获取过来的是字符型，所以会出现字符相加的问题
prompt 如果出现相加，记得要转为数字型，可以利用 + 最简单

本文含有隐藏内容，请开通VIP 后查看

【JS】Chapter1-基础语法