二、JavaScript的基本语法和变量及数据类型和数据类型转换

Lyk 2022/6/20 JS基础基本语法注释变量数据类型数据类型转换

# 1、JavaScript的基本语法

# 1.1.JavaScript的编写方式

位置一：HTML代码行内（不推荐）

<!-- 百度一下 -->
<a href="javascript:alert('百度一下')" onclick="alert('点击百度一下')">百度一下</a>

1
2

位置二：script标签中

<a href="#" class="google">Google一下</a>
<script>
  const googleEl = document.querySelector('.google')
  googleEl.onclick = function() {
    alert('Google一下')
  }
</script>

1
2
3
4
5
6
7

位置三：外部的script文件
- 需要通过script元素的src属性来引入JavaScript文件

<a href="#" class="bing">Bing一下</a>
<script src="./bing.js"></script>

1
2

//bing.js 中的内容
const bingEl = document.querySelector('.bing')
bingEl.onclick = function () {
    alert('Bing一下')
}

1
2
3
4
5

# 1.2.noscript元素

如果运行的浏览器不支持JavaScript, 那么我们如何给用户更好的提示呢?
- 针对早期浏览器不支持 JavaScript 的问题，需要一个页面优雅降级的处理方案;
- 最终，<noscript>元素出现，被用于给不支持 JavaScript 的浏览器提供替代内容;
- 即是：如果浏览器不支持js，那么浏览器就会显示HTML中noscript元素中的内容
下面的情况下, 浏览器将显示包含在<noscript>中的内容:
- 浏览器不支持脚本;
- 浏览器对脚本的支持被关闭。
- 浏览器中有禁止运行JavaScript的操作；以chrome浏览器为例：点击设置 -> 隐私设置和安全性 -> 网站设置 -> JavaScript；即可设置允许/禁止 js的运行；（当然也可以在浏览器设置中搜索 JavaScript 也可以找到哦）

<body>
  <noscript>
    <p>你的浏览器不支持JavaScript运行 或 浏览器设置了关闭运行JavaScript了</p>  
  </noscript>
</body>

1
2
3
4
5

# 1.3.JavaScript编写的注意事项

注意一: script元素不能写成单标签
- 在外联式引用js文件时，script标签中不可以写JavaScript代码，并且script标签不能写成单标签；
- 即不能写成<script src="index.js"/>；
注意二: 省略type属性
- 在以前的代码中，<script>标签中会使用 type=“text/javascript”；
- 现在可不写这个代码了，因为JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言；
注意三: 加载顺序
- 作为HTML文档内容的一部分，JavaScript默认遵循HTML文档的加载顺序，即自上而下的加载顺序；
- 推荐将JavaScript代码和编写位置放在body子元素的最后一行；
注意四: JavaScript代码严格区分大小写
- HTML元素和CSS属性不区分大小写，但是在JavaScript中严格区分大小写；
后续补充：script元素还有defer、async属性，我们后续再详细讲解。

# 1.4.JavaScript的交互方式

JavaScript有如下和用户交互的手段：最常见的是console.log,

交互方法	方法说明	效果查看
alert	接受一个参数	弹窗查看
console.log	接受多个参数	在浏览器控制台查看
document.write	接受多个字符串	在浏览器页面查看
prompt	接受一个参数	在浏览器接受用户输入

# 1.5.Chrome的调试工具

前面我们利用Chrome的调试工具来调试了HTML、CSS，它也可以帮助我们来调试JavaScript。
当我们在JavaScript中通过console函数显示一些内容时，也可以使用Chrome浏览器来查看：
按F12，进入调试页面，在console中即可看到JavaScript中打印的内容及报错原因
另外补充几点：
- 如果在代码中出现了错误，那么可以在console中显示错误；
- console中有个 > 标志，它表示控制台的命令行
  - 在命令行中我们可以直接编写JavaScript代码，按下enter会执行代码；
  - 如果希望编写多行代码，可以按下shift+enter来进行换行编写；
- 后续再讲如何通过debug方式来调试、查看代码的执行流程；

# 1.6.JavaScript语句和分号

语句是向浏览器发出的指令，通常表达一个操作或者行为（Action）。
- 语句英文是Statements；
- 比如我们前面编写的每一行代码都是一个语句，用于告知浏览器一条执行的命令；

alert('Hello！浏览器请执行我这条命令');

通常每条语句的后面我们会添加一个分号，表示语句的结束：
- 分号的英文是semicolon
- 当存在换行符（line break）时，在大多数情况下可以省略分号；
- JavaScript 将换行符理解成“隐式”的分号；
- 这也被称之为自动插入分号（an automatic semicolon）；
推荐：
- 前期在对JavaScript语法不熟悉的情况推荐添加分号；
- 后期对JavaScript语法熟练的情况下，任意！

# 1.7.JavaScript的注释

在HTML、CSS中我们都添加过注释，JavaScript也可以添加注释。
JavaScript的注释主要分为三种
- 单行注释： //
- 多行注释：/* */
- 文档注释（VSCode中需要在单独的JavaScript文件中编写才有效）:如下

/*文档注释的作用：我们在公司做项目开发，写一些功能函数时，可能别的开发人员也会用到这些功能函数，
  为了方便他人用我们功能函数，我们可以写文档注释，对咱们写的功能函数进行一个描述，
  这样在他们用到的时候，鼠标放在这个功能函数上，就可以看到我们对这个功能函数的描述了
  那么文档注释如何写呢？代码如下：*/

//下面就是文档注释
/**
 * 该函数是：求两数之和
 * @param {number} n 第一个数字
 * @param {number} m 第二个数字
 * @returns 返回两数之和的值
 */
function sum(n,m) {
  return n+m
}
console.log(sum(1,2))

//下面就是文档注释
/**
 * 该函数是：输入个人信息，返回值是：个人信息描述
 * @param {string} name 姓名
 * @param {number} age 年龄
 * @param {string} address 地址
 * @returns 返回值是个人信息描述
 */
function sayLyk(name,age,address) {
  return `我叫${name},今年${age}岁，来自${address}。`
}

console.log(sayLyk('lyk',23,'上海'));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

注意：JavaScript也不支持注释的嵌套

# 1.8.VSCode插件和配置

推荐一个VSCode的插件：（个人经常使用的）
- ES7+ React/Redux/React-Native snippets
- 这个插件是在react开发中会使用到的，但是我经常用到它里面的打印语句；(如输入clg；按回车自动生成：console.log() 语句，提升开发效率)
另外再推荐一个插件：
- Bracket Pair Colorizer 2，但是该插件已经不再推荐使用了；
- 因为VSCode已经内置了该功能，我们可以直接通过VSCode的配置来达到插件的效果；
- 如何配置呢？ VSCode插件和配置如下：（在vscode中的setting.json文件中进行如下配置）

{
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs":"active"  
}

1
2
3
4

# 2、JavaScript变量

# 2.1.变化数据的记录 – 变量

如果我们希望记录某一个之后会变量的数据，在JavaScript中我们可以定义一个变量：
- 一个变量，就是一个用于存放数值的容器；
- 这个数值可能是一个用于计算的数字，或者是一个句子中的字符串，或者其他任意的数据；
- 变量的独特之处在于它存放的数值是可以改变的；
我们可以把变量想象成一个盒子，盒子里面装着我们的数据，我们需要给盒子进行一个特性的名称。
- 例如，变量 message 可以被想象成一个标有 “message” 的盒子，盒子里面的值为 “Hello!”；
- 并且，这个盒子的值，我们想改变多少次，就可以改变多少次；

# 2.2.变量的命名格式

在JavaScript中如何命名一个变量呢？包含两部分：
- 变量的声明：在JavaScript中声明一个变量使用var关键字（variable单词的缩写）（后续学习ES6还有let、const声明方式）
- 变量的赋值：使用 = 给变量进行赋值；

var name = '孙悟空'

这个过程也可以分开操作：

var name 
name = '孙悟空'

1
2

同时声明多个变量：

var name,age,height
name = '孙悟空'
age = 100
height = 2.22
console.log(name,age,height)

/*
//也可以这么写(简写)
var name='孙悟空',age=100,height=2.22
console.log(name,age,height)
*/

1
2
3
4
5
6
7
8
9
10
11

# 2.3.变量的命名规范

变量命名规则：必须遵守
- 第一个字符必须是一个字母、下划线（ _ ）或一个美元符号（ $ ）
- 其他字符可以是字母、下划线、美元符号或数字
- 不能使用关键字和保留字命名：什么是关键字，什么是保留字？关键字/保留字查询 (opens new window)
- 变量严格区分大小写
变量命名规范：建议遵守
- 多个单词使用驼峰标识；如下图
- 赋值 = 两边都加上一个空格；
- 一条语句结束后加上分号; 也有很多人的习惯是不加；
- 变量应该做到见名知意；

# 2.4.变量的使用注意

注意一：如果一个变量未声明（declaration）就直接使用，那么会报错；

console.log(message)//报错：message is not defined

注意二：如果一个变量有声明，但是没有赋值，那么默认值是undefined

var name 
console.log(name)//undefined

1
2

注意三：如果没有使用var声明变量也可以，但是不推荐（事实上会被添加到window对象上）

name = 'lyk'
console.log(name)//lyk
console.log(Window)

1
2
3

# 2.5.拓展：变量面试题

// 面试: 定义两个变量保存两个数字, 对两个变量中的数字进行交换
  var num1 = 10
  var num2 = 20
  // 方法一: 借助第三个变量
    // console.log("交换前, num1, num2:", num1, num2)
    // var temp = num1
    // num1 = num2
    // num2 = temp
    // console.log("交换后, num1, num2:", num1, num2)

  // 方法二: 不借助于第三个变量完成交换(了解, 笔试面试题)
    console.log("交换前, num1, num2:", num1, num2)
    num1 = num1 + num2 // num1: 30, num2: 20
    num2 = num1 - num2 // num1: 30, num2: 10
    num1 = num1 - num2 // num1: 20, num2: 10
    console.log("交换后, num1, num2:", num1, num2)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 3、JavaScript数据类型

# 3.1.JavaScript的数据类型

JavaScript 中的值都具有特定的类型。
例如，字符串或数字。
我们可以将值赋值给一个变量，那么这个变量就具备了特定的类型；
一个变量可以在前一刻是个字符串，下一刻就存储一个数字；
允许这种操作的编程语言，例如 JavaScript，被称为“动态类型”（dynamically typed）的编程语言；
在JavaScript 中有 8 种基本的数据类型（7种原始类型和 1种复杂类型）
Number
String
Boolean
Undefined
Null
Object（复杂类型/引用类型）
BigInt（后续了解）
Symbol（后续了解）

# 3.2.typeof操作符

因为 ECMAScript 的类型系统是松散的，所以需要一种手段来确定任意变量的数据类型
- typeof 操作符就是为此而生的。
对一个值使用 typeof 操作符会返回下列字符串之一:
- "undefined"表示值未定义;
- "boolean"表示值为布尔值;
- "string"表示值为字符串;
- "number"表示值为数值;
- "object"表示值为对象(而不是函数)或 null;
- "function"表示值为函数;
- “symbol”表示值为符号；
typeof()的用法：
- 你可能还会遇到另一种语法：typeof(x)，它与 typeof x 相同；
- typeof是一个操作符，并非是一个函数，()只是将后续的内容当做一个整体而已；

# 3.3.Number类型（isNaN）

number类型代表整数和浮点数。

var age = 18
var height = 1.88

1
2

数字number可以有很多操作，比如，乘法、除法 /、加法 +、减法 - 等等。
- 常见的运算符后续会专门讲解

var result1 = 10 * 3
var result2 = 10 / 3

1
2

除了常规的数字，还包括所谓的“特殊数值（“special numeric values”）”也属于Number类型（了解）
- Infinity：代表数学概念中的无穷大 ∞，也可以表示-Infinity；
  - 比如 1/0 得到的就是无穷大；
- NaN：NaN 代表一个计算错误，它是一个错误的操作所得到的结果；
  - 比如字符串和一个数字相乘；
在之前我们学习过进制的概念，数字类型也有其他的进制表示方法：
- 十进制（掌握）、十六进制、二进制、八进制（了解）

//十进制
var num1 = 11
//十六进制
var num2 = 0x11
//八进制
var num3 = 0o11
//二进制
var num4 = 0b11
console.log(num1,num2,num3,num4)//输出进行十进制输出：11,17,9,3

1
2
3
4
5
6
7
8
9

数字表示的范围：
- 最小正数值：Number.MIN_VALUE，这个值为： 5e-324，小于这个的数字会被转化为0
- 最大正数值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
isNaN
- 用于判断是否不是一个数字。不是数字返回true，是数字返回false。
- 当然字符串里面全是数字返回的是false：console.log(isNaN('1234')) //false
后续我们会对Number类型进行更加详细的学习

# 3.4.String类型

在开发中我们经常会有一些文本需要表示，这个时候我们会使用字符串String：
- 比如人的姓名：孙悟空。地址：花果山。简介：石头里蹦出来的；
JavaScript 中的字符串必须被括在引号里，有三种包含字符串的方式。
- 双引号："Hello"
- 单引号：'Hello’
- 反引号：Hello（ES6之后学习）

//双引号："Hello1"
var say1 = "Hello1"
//单引号：'Hello2’
var say2 = 'Hello2'
//反引号：`Hello3`（ES6之后学习）
var say3 = `Hello3 ${say1}`

console.log(say1,say2,say3)// Hello1, Hello2, Hello3 Hello1

1
2
3
4
5
6
7
8

前后的引号类型必须一致：
- 如果在字符串里面本身包括单引号，可以使用双引号；
- 如果在字符串里面本身包括双引号，可以使用单引号；

var name = " 我是'孙悟空' "

字符串中的转义字符
- 转义字符串开发中只有特殊场景才会用到，暂时掌握 \’ \” \t \n四个的用法即可。

var name = " \" \\ \' "

console.log(name)//  " \ '

1
2
3

字符串的属性和方法
- 字符串还有很多细节和操作方法，在后续学习了面向对象后，我们再详细学习；
- 这里我们先掌握几个基本的字符串使用操作：
  - 操作一：字符串拼接，通过 +运算符（后续还会详细讲解）
  - 操作二：获取字符串长度：字符串.length

var str1 = 'Hello'
var str2 = 'World'
var newStr = str1 + str2
console.log(newStr,newStr.length//HelloWorld, 10

1
2
3
4

# 3.5.Boolean类型

Boolean（布尔）类型用于表示真假：
- 比如是否毕业. 是否有身份证. 是否购买车票. 是否成年人；
- 比如开发中，我们会判断一个账号是否登录、是否是管理员、是否具备某个权限、是否拥有某个英雄、皮肤等；
布尔（英语：Boolean）是计算机科学中的逻辑数据类型，以发明布尔代数的数学家乔治·布尔为名。
Boolean 类型仅包含两个值：true 和 false。

var isLogin = false
var flag = true
var result = 1==1 
console.log(result)//true

1
2
3
4

在后续逻辑运算符中我们还会详细学习和使用Boolean类型；

# 3.6.Undefined类型

Undefined 类型只有一个值，就是特殊值 undefined。
- 如果我们声明一个变量，但是没有对其进行初始化时，它默认就是undefined；

var message
console.log(message)//undefined
console.log(message === undefined)//true

1
2
3

下面的代码是一样的

var info
var info = undefined

1
2

这里有两个注意事项：
- 注意一：最好在变量定义的时候进行初始化，而不只是声明一个变量；
- 注意二：不要显示的将一个变量赋值为undefined
  - 如果变量刚开始什么都没有，我们可以初始化为0、空字符串、null等值；

# 3.7.Object类型

Object 类型是一个特殊的类型，我们通常把它称为引用类型或者复杂类型；
- 其他的数据类型我们通常称之为 “原始类型”，因为它们的值质保函一个单独的内容（字符串、数字或者其他）；
- Object往往可以表示一组数据，是其他数据的一个集合；
- 在JavaScript中我们可以使用花括号{} 的方式来表示一个对象；

var obj = {
    name:'孙悟空',
    age:99,
    address:'花果山'
}

1
2
3
4
5

Object是对象的意思，后续我们专门会有面向对象的概念和对象相关内容补充的详细学习；

# 3.8.Null类型

Null 类型同样只有一个值，即特殊值 null。
- null类型通常用来表示一个对象为空，所以通常我们在给一个对象进行初始化时，会赋值为null；

console.log(typeof null) //object

var obj = null
obj = {
    name:'lyk',
    age:19
}

1
2
3
4
5
6
7

null和undefined的关系：
- undefined通常只有在一个变量声明但是未初始化时，它的默认值是undefined才会用到；
- 并且我们不推荐直接给一个变量赋值为undefined，所以很少主动来使用；
- null值非常常用，当一个变量准备保存一个对象，但是这个对象不确定时，我们可以先赋值为null；

# 3.9.数据类型总结

JavaScript 中有八种基本的数据类型（前七种为基本数据类型，也称为原始类型，而 object 为复杂数据类型，也称为引用类型）。
- number 用于任何类型的数字：整数或浮点数。
- string 用于字符串：一个字符串可以包含 0 个或多个字符，所以没有单独的单字符类型。
- boolean 用于 true 和 false。
- undefined 用于未定义的值 —— 只有一个 undefined 值的独立类型。
- object 用于更复杂的数据结构。
- null 用于未知的值 —— 只有一个 null 值的独立类型。
后续学习的类型：
- symbol 用于唯一的标识符。
- bigint 用于任意长度的整数。

# 4、数据类型的转换

# 4.1.数据类型的转换

在开发中，我们可能会在不同的数据类型之间进行某些操作
- 比如把一个String类型的数字和另外一个Number类型的数字进行运算；
- 比如把一个String类型的文本和另外一个Number类型的数字进行相加；
- 比如把一个String类型或者Number类型的内容，当做一个Boolean类型来进行判断；
- 等等
也就是在开发中，我们会经常需要对数据类型进行转换：
- 大多数情况下，运算符和函数会自动将赋予它们的值转换为正确的类型，这是一种隐式转换；
- 我们也可以，通过显示的方式来对数据类型进行转换；
接下来我们来看一下数据类型之间的转换：
- String、Number、Boolean类型；

# 4.2.字符串String的转换

其他类型经常需要转换成字符串类型，比如和字符串拼接在一起或者使用字符串中的方法。
转换方式一：隐式转换
- 一个字符串和另一个字符串进行+操作；
  - 如果+运算符左右两边有一个是字符串，那么另一边会自动转换成字符串类型进行拼接；
- 某些函数的执行也会自动将参数转为字符串类型；
  - 比如console.log函数；
转换方式二：显式转换
- 调用String()函数；
- 调用toString()方法（后续面向对象再学习）；
方法和函数的区别，我们后续在讲解面向对象时会讲到；

# 4.3.数字类型Number的转换

其他类型也可能会转成数字类型。
转换方式一：隐式转换
- 在算数运算中，通常会将其他类型转换成数字类型来进行运算；
  - 比如 "6" / "2"；
  - 但是如果是+运算，并且其中一边有字符串，那么还是按照字符串来连接的；
转换方式二：显式转换
- 我们也可以使用Number()函数来进行显式的转换；
其他类型转换数字的规则

值	转换后的值
undefined	NaN
null	0
true 和 false	1 and 0
string	去掉首尾空格后的纯数字字符串中含有的数字。如果剩余字符串为空，则转换结果为 0。否则，将会从剩余字符串中“读取”数字。当类型转换出现 error 时返回 NaN。

# 4.4.布尔类型Boolean的转换

布尔（boolean）类型转换是最简单的。
它发生在逻辑运算中，但是也可以通过调用 Boolean(value) 显式地进行转换。
转换规则如下：
- 直观上为“空”的值（如 0、空字符串、null、undefined 和 NaN）将变为 false。
- 其他值变成 true。

值	转化后
0, null, undefined, NaN, ""	false
其他值	true

注意：包含 0 的字符串 "0" 是 true
- 一些编程语言（比如 PHP）视 "0" 为 false。但在 JavaScript 中，非空的字符串总是 true。

一、初识JavaScript 三、JavaScript的运算符、分支语句、逻辑运算符、循环语句

Lyk-Blog

Choose mode

二、JavaScript的基本语法和变量及数据类型和数据类型转换

二、JavaScript的基本语法和变量及数据类型和数据类型转换

# 1、JavaScript的基本语法

# 1.1.JavaScript的编写方式

# 1.2.noscript元素

# 1.3.JavaScript编写的注意事项

# 1.4.JavaScript的交互方式

# 1.5.Chrome的调试工具

# 1.6.JavaScript语句和分号

# 1.7.JavaScript的注释

# 1.8.VSCode插件和配置

# 2、JavaScript变量

# 2.1.变化数据的记录 – 变量

# 2.2.变量的命名格式

# 2.3.变量的命名规范

# 2.4.变量的使用注意

# 2.5.拓展：变量面试题

# 3、JavaScript数据类型

# 3.1.JavaScript的数据类型

# 3.2.typeof操作符

# 3.3.Number类型（isNaN）

# 3.4.String类型

# 3.5.Boolean类型

# 3.6.Undefined类型

# 3.7.Object类型

# 3.8.Null类型

# 3.9.数据类型总结

# 4、数据类型的转换

# 4.1.数据类型的转换

# 4.2.字符串String的转换

# 4.3.数字类型Number的转换

# 4.4.布尔类型Boolean的转换