JS基础

时间：2021-04-17 17:32:22 阅读：16 评论：0 收藏：0 [点我收藏+]

1. JavaScript初体验

在 HTML 中，JavaScript 代码必须位于<script>与 </script> 标签之间。
```
<script>
	alert(‘这是我们的第一个js代码‘)；
</script>
```
注释：旧的 JavaScript 例子也许会使用 type 属性：<script type="text/javascript">。

注释：type 属性不是必需的。JavaScript 是 HTML 中的默认脚本语言。
<body>或者<head>中的JavaScript

脚本可被放置与 HTML 页面的 <body> 或 <head> 部分中，或兼而有之。
- <body>中的JavaScript
```
<!DOCTYPE html>
<html>
    <head>
      	<title>body中的JavaScript</title>
  	</head>
    <body> 
        <script>
               alert(‘body中的JavaScript‘);
        </script>
    </body>
</html>
```
  body 部分中的脚本: 当页面被加载时执行的脚本放在HTML的body部分。放在body部分的脚本通常被用来生成页面的内容。
- <head>中的JavaScript
```
<!DOCTYPE html>
<html>
    <head>
        <script>
            alert(‘<head>中的JavaScript‘);
        </script>
    </head>
    <body>
    </body>
</html>
```
  head 部分中的脚本: 需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部分中时，可以保证脚本在任何调用之前被加载。
- body 和 head 部分可同时有脚本:文件中可以在body和head部分同时存在脚本
```
<html>
    <head>
      <script>
      		alert(111);
      </script>
    </head>
    <body>
      <script>
      		alert(222);
      </script>
    </body>
</html>
```
  思考：head和body中同时存在script文件会执行哪个？
- 总结：js文件放到哪里更好？
  - 浏览器对html页面内容的加载是顺序加载，也就是在html页面中前面先加载。当浏览器加载html文件并解析到<head>时,<body>并没有被解析,浏览器会等到<head>中的js部分执行完再加载页面。
  - 如果把javascript放在head里的话，则先被解析,但这时候body还没有解析。（常规html结构都是head在前，body在后）如果head的js代码是需要传入一个参数（在body中调用该方法时，才会传入参数），并需调用该参数进行一系列的操作，那么这时候肯定就会报错，因为函数该参数未定undefined
  - 从JavaScript对页面下载性能方向考虑：由于脚本会阻塞其他资源的下载（如图片等）和页面渲染，直到脚本全部下载并执行完成后，页面的渲染才会继续，因此推荐将所有的<script>标签尽可能放到<body>标签的底部，以尽量减少对整个页面下载的影响。
引入外部脚本文件
- JS程序不仅可以直接写在HTML文档中，也可以放在JavaScript文件中。后缀名是.js。使用任何文本编辑器都可以编辑。
- JS文件不能够单独运行，需要使用 <script>标签导入到网页中。
- 定义src属性的<script>标签不应该再含有JavaScript代码，否则只会下载并执行外部JavaScript文件，嵌入代码被忽略。
```
1）创建一个js文件，名称为first.js
2) 引入js文件
    <html>
        <head>
            <title></title>
        </head>
        <body>
          <script src=‘first.js‘></script>
        </body>
    </html>
```
注意：在外部文件中放置脚本有如下优势：
- 分离了 HTML 和js代码
- 使 HTML 和 JavaScript 更易于阅读和维护
- 已缓存的 JavaScript 文件可加速页面加载
思考：内部js代码和外部引用哪个优先级更高？
延迟执行JS-defer
- <script>标签有一个布尔型属性defer，这个属性的用途是表明脚本在执行时不会影响页面的构造，也就是说，脚本会被延迟到整个页面都解析完成后再运行。
- 因此在script元素中设置defer属性，相当于告诉浏览器立即下载，但是延迟执行
- 如果页面中有多个延迟脚本，那么第一个延迟脚本会先于第二个延迟脚本执行
- 适用于外部JS文件，不适用于script标签包含的脚本
```
1）创建一个js文件，名称为first.js
2) 引入js延迟文件
  <!DOCTYPE html>
  <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Document</title>
            <script src="./first.js" defer></script>
            <script>
                alert("head引入js")
            </script>
        </head>
        <body>
            <script>
                alert("body末尾引入js")
            </script>
        </body>
  </html>
```
异步加载JS文件-async
- 在默认情况下，网页都是同步加载外部 JavaScript文件的，在引入外部js文件时会阻塞dom的执行，为此在html4.01为script标签引入了async属性
- 现在可以为<script>标签设置 async属性，让浏览器异步加载 Javascript文件，即表示应该立即下载脚本，但不应妨碍页面汇总的其它操作。只对外部脚本文件有效。
- 因为是下载完立即执行，不能保证多个加载时的先后顺序，因此确保异步脚本之间互不依赖
```
1）创建一个js文件，名称为first.js
2）引入js文件
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
            <script src="a.js" async></script>
        </head>
        <body>
           这是测试async的小案例，一jiao wulijiaojiao
        </body>
    </html>
```
扩展：async&defer
- 没有设置任何属性的script
  
  HTML文件将被解析，直到脚本文件被下载为止，同时将停止解析，发起请求去提取script文件（如果是外部文件）。下载并执行完成后将在恢复解析HTML。
- 设置了defer属性
  
  设置defer属性会在HTML解析的同时下载script，并在完成HTML解析和script下载之后执行该文件，同时设置了defer的脚本会按照他们在文档里面出现的顺序执行。
- 设置了async属性
  
  设置async属性会在HTML解析期间下载script文件，并在完成下载后暂停HTML解析器以执行该文件。

2. JavaScript 输出

JavaScript 能够以不同方式“显示”数据：

使用 window.alert() 写入警告框
使用 document.write() 写入 HTML 输出
使用 innerHTML 写入 HTML 元素
使用 console.log() 写入浏览器控制台

alert

您能够使用警告框来显示数据：

<!DOCTYPE html>
<html>
  <body>
      <script>
        	//和alert是一样的，后续window对象时候讲解
      		window.alert(‘故事里的小黄花‘);
      </script>
  </body>
</html>

document.write
1. 可以向HTML输出流中插入你传入的内容，浏览器会按着HTML元素依次顺序依次解析它们，并显示出来。
```
<!DOCTYPE html>
<html>
  <body>
      <script>
      		document.write(‘从出生那年就飘着‘);
      </script>
  </body>
</html> 
```
1. 需要注意的是，如果在文档加载完成后（即HTML输出已完成），再使用document.write()方法来要求浏览器来解析你的内容，则浏览器就会重写整个document，导致最后的这个document.write()方法输出的内容会覆盖之前所有的内容
```
<!DOCTYPE html>
<html>
	<body>
		<h6>淡黄的长裙</h6>
		<h6>蓬松的头发</h6>
		<button onclick="document.write(‘<h1>什么玩意儿</h1>‘)">试一试</button>
	</body>
</html>
```

innerHTML

id 属性定义 HTML 元素。innerHTML 属性定义 HTML 内容：

<!DOCTYPE html>
<html>
	<body>
		<p id="demo"></p>
		<script>
			document.getElementById("demo").innerHTML = ‘我们的开始，是漫长的电影‘;
		</script>
	</body>
</html>

console.log

在浏览器中，您可使用 console.log() 方法来显示数据。

请通过 F12 来激活浏览器控制台，并在菜单中选择“控制台”。
```
<!DOCTYPE html>
<html>
	<body>
		<p id="demo"></p>
		<script>
			console.log(‘苍茫的天涯是的爱‘);
		</script>
	</body>
</html> 
```

3. JavaScript语句

JavaScript 语句

JavaScript 语句由以下构成：值、运算符、表达式、关键词和注释。
```
//我是一个注释，我属于js语句的一部分，我也是狠重要的
var age = 1 + 17；
```
分号;
```
a = 1;
b = 2;
c = a + b;
```
如果有分号分隔，允许在同一行写多条语句：
```
a = 1; b = 2; c = a + b;
```

js的代码的行长度和折行

为了达到最佳的可读性，程序员们常常喜欢把代码行控制在 80 个字符以内。

可以在文本字符串中使用反斜杠对代码行进行换行

<!DOCTYPE html>
<html>
	<body>
		<script>
			document.write(‘我一路向北 			离开有你的季节‘);
		</script>
	</body>
</html>

不能像这样折行

<!DOCTYPE html>
<html>
	<body>
		<script>
			document.write \ 
			("你好世界!");
		</script>
	</body>
</html>

js空白字符

js会忽略多个空格。您可以向脚本添加空格，以增强可读性

这两行是相等的：
```
var name = "emo";
var name="emo"; 
```
在运算符旁边（ = + - * / ）添加空格是个好习惯：
```
var x = y + z;
```
js代码块

JavaScript 可以分批地组合起来。代码块以左花括号开始，以右花括号结束。代码块的作用是一并地执行语句序列。
```
function myFirst() {
    alert(‘听妈妈的话别让她受伤‘);
    alert(‘想快快长大才能保护她‘);
}
```

4. JavaScript注释

单行注释

单行注释以 // 开头。

任何位于 // 与行末之间的文本都会被 JavaScript 忽略（不会执行）。

<!DOCTYPE html>
<html>
	<body>
		<script>
			// 我是一个注释
			document.write("乘着风游荡在蓝天边");
		</script>
	</body>
</html>

多行注释

多行注释以 /* 开始，以 */ 结尾。

<!DOCTYPE html>
<html>
	<head>
		<meta charset=‘utf-8‘>
	</head>
	<body>
		<script>
			/* 
				祭司神殿征战弓箭是谁的从前，
				喜欢在人潮中你只属於我的那画面，
				经过苏美女神身边，我以女神之名许愿，
				思念像底格里斯河般的漫延，当古文明只剩下难解的语言，
				传说就成了永垂不朽的诗篇
			*/
			document.write("乘着风游荡在蓝天边");
		</script>
	</body>
</html>

在行末使用注释

<!DOCTYPE html>
<html>
	<head>
		<meta charset=‘utf-8‘>
	</head>
	<body>
		<script>
			document.write("乘着风游荡在蓝天边"); //繁华如三千东流水，我只取一瓢爱了解
		</script>
	</body>
</html>

5. JavaScript变量

思考：下列代码有什么问题？

		<script type="text/javascript">
				console.log(123456789012345678901234567890);
				console.log(123456789012345678901234567890);
				console.log(123456789012345678901234567890);
				console.log(123456789012345678901234567890);
				console.log(123456789012345678901234567890);
				console.log(123456789012345678901234567890);
				console.log(123456789012345678901234567890);
		</script>

js变量

定义：值可以被修改的量叫做变量

格式：定义一个变量：var x = 1；

x 叫做变量名，1 叫做字面量。

说明：
- 变量相当于容器，值相当于容器内装的东西，而变量名就是容器上贴着的标签，通过标签可以找到变量，以便读、写它存储的值
- ECMAScript 的变量是松散类型（弱类型，动态类型）的,所谓松散类型就是可以用来保存任何类型的数据
声明变量

在 js中，声明变量使用 var 语句。

案例1：在一个 var 语句中，可以声明一个或多个变量，也可以为变量赋值，未赋值的变量初始化为 undefined（未定义）值。当声明多个变量时，应使用逗号运算符分隔。
```
<!DOCTYPE html>
<html>
	<head>
		<meta charset=‘utf-8‘>
	</head>
	<body>
		<script>
			var a;  //声明一个变量
			var a,b,c;  //声明多个变量
			var b = 1; //声明并赋值
			console.log(a);  //返回 undefined
			console.log(b);  //返回 1
		</script>
	</body>
</html> 
```
案例2：在 js中，可以重复声明同一个变量，也可以反复初始化变量的值。
```
<!DOCTYPE html>
<html>
	<head>
		<meta charset=‘utf-8‘>
	</head>
	<body>
		<script>
			var a = 1;
			var a = 2;
			var a = 3;
			console.log(a);
		</script>
	</body>
</html> 
```
友情提示：

? 在非严格模式下，JavaScript 允许不声明变量就直接为其赋值，这是因为 JavaScript 解释器能够自动隐式声明变量。隐式声明的变量总是作为全局变量使用。

? 在严格模式下，变量必须先声明，然后才能使用。
变量的命名规范
- 构造变量名称（唯一标识符）的通用规则是：
  - 名称可包含字母、数字、下划线和美元符号
  - 名称必须以字母开头
  - 名称也可以 $ 和 _ 开头（逗比写法）
  - 名称对大小写敏感（Animal和 animal 是不同的变量）
  - 保留字（比如 JavaScript 的关键词）无法用作变量名称
  提示：JavaScript 标识符对大小写敏感。
- js标识符
  
  系统征用的有特殊功能的单词.
  - 标识符指的是变量、函数、属性的名字，或者函数的参数。
  - 标识符命名规范
    - 第一个字符必须是一个字母、下划线（_）或一个美元符号（$），其他字符可以是字母、下划线、美元符号或数字
    - 不能含有空格不能以关键字或保留字命名
    - 保留关键字
      
      *标记的关键字是 ECMAScript5 中新添加的。
    - 应该避免使用 JavaScript 内置的对象、属性和方法的名称作为 Javascript 的变量或函数名：
- 命名规范
  
  标识符命名要做到顾名思义。
  
  起一个有意义的名字，尽量做到看一眼就知道是什么意思(提高代码可读性) 比如: 名字就定义为 name , 定义学生用 student
```
a = "zhangsan"  # bad
name = "zhangsan"  # good
b = 23   # bad
age = 23 # good
```
  遵守一定的命名规范。
  - 驼峰命名法，又分为大驼峰命名法和小驼峰命名法
  - 小驼峰式命名法（lower camel case）：第一个单词以小写字母开始；第二个单词的首字母大写，例如：myName、aDog
  - 大驼峰式命名法（upper camel case）：每一个单字的首字母都采用大写字母，例如：FirstName、LastName.
  - 下划线 user_name

赋值变量

使用等号=运算符可以为变量赋值，等号左侧为变量，右侧为被赋的值。

<!DOCTYPE html>
<html>
	<head>
      这是一个赋值变量的一个案例
	</head>
	<body>
		<script>
			var name = ‘Barry‘;
			console.log(name);
		</script>
	</body>
</html>

变量提升

JavaScript 在预编译期会先预处理声明的变量
```
<!DOCTYPE html>
<html>
	<head>
		<meta charset=‘utf-8‘>
	</head>
	<body>
		<script>
			console.log(a_name);
			a_name = ‘Barry‘
			console.log(a_name);
			var a_name;
		</script>
	</body>
</html> 
```
注意：声明变量放在最后，赋值操作放在前面。由于 JavaScript 在预编译期已经对变量声明语句进行了预解析，所以第一行代码读取变量值时不会抛出异常，而是返回未初始化的值 undefined。第三行代码是在赋值操作之后读取，故显示为Barry。JavaScript 引擎的解析方式是：先解析代码，获取所有被声明的变量，然后再一行一行地运行。这样，所有声明的变量都会被提升到代码的头部，这就叫作变量提升。

练习1：看看结果是什么？

<!DOCTYPE html>
<html>
	<head>
		<meta charset=‘utf-8‘>
	</head>
	<body>
		<script>
			console.log(a);
			var a = 100;
			console.log(a);
		</script>
	</body>
</html>

练习2：将两个变量a,b的值交换，var a = 1; var b = 2;

方案1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset=‘utf-8‘>
	</head>
	<body>
		<script>
			var a = 1,
				b = 2,
				tmp;
			tmp = a;
			a = b;
			b = tmp;
			console.log(a);
			console.log(b);
		</script>
	</body>
</html>

方案2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset=‘utf-8‘>
	</head>
	<body>
		<script>
			var a = 1,
				b = 2;
			a = a + b;
			b = a - b;
			a = a - b;
			console.log(a);
			console.log(b);
		</script>
	</body>
</html>

6. JavaScript的变量类型

JavaScript的数据类型分为两种：

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、未定义（Undefined）、空（Null）、Symbol。

注：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。
引用数据类型：对象(Object)、数组(Array)、函数(Function)。

字符串

字符串可以是引号中的任意文本。您可以使用单引号或双引号：
- var name = "张三"
- var name = ‘李四‘
特殊书写方式-俗称:屌丝写法
- var name = ‘王二"麻子"‘
- var name = "你是‘小淘气‘"
- 不允许var name = ‘田七"
- 不允许var name = "田七‘
- 不允许var name = ""田"七"
- 不允许var name = ‘‘田‘七‘
- 如果某屌丝就想写，可以使用转义字符var name = "\"田\"七"
思考：两次结果一致吗？
```
var name = "谢广坤"；
alert(name)；
alert(‘name‘)；
```
数字

JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：
- 整数：
  - var a = 1;
- 浮点数：
  - var a = 1.2;
科学计数法
- var a = 123e5; var b = Number.MAX_VALUE
- var a = 123e-5; var b = Number.MIN_VALUE
布尔

布尔（逻辑）只能有两个值：true 或 false。
- var b = true
- var b = false
Undefined
- var u；
null
- var n = null
- 类型是object，用来表示一个空的对象

7. JavaScript的变量类型高级

字符串

JavaScript字符串(String)就是由零个或多个Unicode字符组成的字符序列。零个字符表示空字符串。

字符串字面量/字符串直接量
- 字符串必须包含在单引号或双引号中
- 如果字符串包含在双引号中,则字符串内可以包含单引号;反之,也可以在单引号中包含双引号
- 在ECMAScript 3中,字符串必须在一行内表示,换行表示是不允许的，如果要换行显示字符串,可以在字符串中添加换行符(\n)
- 在ECMAScript 5中,字符串允许多行表示.实现方法:在换行结尾处添加反斜杠(\).反斜杠和换行符不作为字符串直接量的内容
- 在字符串中插入特殊字符,需要使用转义字符,如单引号,双引号等
- 字符串中每个字符都有固定的位置.第1个子符的下标位置为0,第2个字符的下标位置为1...···以此类推,最后一个字符的下标位置是字符串长度减1
```
<!DOCTYPE html>
<html>
	<head>
   
    </head>
	</head>
	<body>
		<script>
			var str1 = ‘09328"4yrc091708)("*&(^&(*&T‘;
			var str2 = "kajhx  askjh &*(";
			var str3 = ‘9287O&*b‘;
			var str4 = "小王他妈妈说：‘他要把翠花嫁给我‘";
			console.log(str4);

			var str5 = "今天天气\n真好"
			console.log(str5);

			var str6 = "今天天气				真好";
			console.log(str6);  
		</script>
	</body>
</html> 
```

转义字符

转义字符是字符的一种间接表示方式。在特殊语境中,无法直接使用字符自身
```
var str = "请看\"这个是一个双引号";
console.log(str);
```

如果在一个正常字符前添加反斜杠,JavaScript会忽略该反斜杠

<!DOCTYPE html>
<html>
	<head>
		<meta charset=‘utf-8‘>
	</head>
	<body>
		<script>
			var str = "小明妈妈说:\"今天天气真好\"";
			console.log(str);
			var str2 = "小明妈妈说:\"\今\天\天\气\真\好\"";
			console.log(str2);
			var str3 = "看我斜杠：\\"
			console.log(str3);
		</script>
	</body>
</html>

字符串操作

借助String类型的原型方法,可以灵活操作字符串（后面各章节中详细介绍）
在JavaScript中,可以使用加号(+)运算符连接两个字符串
使用字符串的length属性获取字符串的字符个数(长度）

在ES5中，字符串可以作为只读数组使用，可以通过中括号运算符添加下标访问某一个值。下标从0开始，最大位置的下标是length-1

<!DOCTYPE html>
<html>
	<head>
		<meta charset=‘utf-8‘>
	</head>
	<body>
		<script>
			var str = "老师说";
			var say = "你好啊";
			console.log(str+say);
			console.log(str + 666);
			console.log(str + 888);
			console.log(1 + 1);
			console.log("1" + 1);
			console.log(1 + "1");
			var str1 = "今天是个好天气123 b5";
			console.log(str1.length);
			console.log(str1[0]);
			//获取最后一个字符
			console.log(str1[str1.length-1]);
		</script>
	</body>
</html>

String方法

String方法是可以将其他类型转换成字符串类型

<!DOCTYPE html>
<html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Title</title>
          </head>
          <body>
              <script>
                  //1.null类型的转换
                  console.log(String(null));//字符串的 ‘null‘

                  //2.undefined转换
                  console.log(String(undefined));//字符串的‘undefined‘

                  //3.number类型的转换
                  //转换规则：普通数字直接变成字符串  其他进制先转换成10进制然后在转换成相应的字符串 无穷大无穷小NaN都直接变成字符串
                  console.log(String(123));//‘123‘
                  console.log(String(-123));//‘-123‘
                  console.log(String(4E-5));//‘0.00004‘
                  console.log(String(Infinity));//‘Infinity‘
                  console.log(String(-Infinity));//‘-Infinity‘
                  console.log(String(12.3));//‘12.3‘
                  console.log(String(NaN));//‘NaN‘

                  //4.布尔值的转换
                  console.log(String(true));//‘true‘
                  console.log(String(false));//‘false‘
              </script>
          </body>
</html>

toString方法
- 我们的代码中有+（加号）运算符的情况下，它在这种情况下（字符串 + 其它什么东西），会调用toString()方法，将其它类型的东西转化为字符串，再和原始字符串拼接成一个字符串
- 除了null和undefined之外，其他的类型(数值、布尔、字符串)都有toString()方法，它返回相应值的字符串表现(并不修改原变量)。
- 每个对象都有一个toString()方法。
- 当该对象被表示为一个文本值时，或者一个对象以预期的字符串方式引用时自动调用。
```
<!DOCTYPE html>
<html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Title</title>
      </head>
      <body>
          <script>
              console.log((1).toString());     // "1"
              console.log(true.toString());    // "true"
              console.log(null.toString());    // Uncaught TypeError: Cannot read property ‘toString‘ of null
              console.log(undefined.toString());// Uncaught TypeError: Cannot read property ‘toString‘ of null
          </script>
      </body>
</html>
```

数字

数字（Number）也称为数值或者数

当数字直接出现在程序中时，被称为数值直接量。在 JavaScript程序中，直接输入的任何数字都被视为数值直接量。

JavaScript 中的所有数字都是以 64 位浮点数形式存储，包括整数。例如，2 与 2.0 是同一个数。

浮点数溢出

执行数值计算时，要防止浮点数溢出。例如，0.1+0.2 并不等于 0.3。

num = 0.1+0.2; //0.30000000000000004

这是因为 JavaScript 遵循二进制浮点数算术标准（IEEE 754）而导致的问题。这个标准适合很多应用，但它违背了数字基本常识。

解决方法：浮点数中的整数运算是精确的，所以小数表现出来的问题可以通过指定精度来避免。例如，针对上面的相加可以这样进行处理。

a = (1+2)/10; //0.3

这种处理经常在货币计算中用到。例如，元可以通过乘以 100 而转成分，然后就可以准确地将每项相加，求和后的结果可以除以 100 再转换回元

特殊数值

技术分享图片

Infinity

计算超出范围会得到无穷大(infinity)或者无穷小(-infinity)
分母为0会构成无穷大Infinity 或负无穷大-Infinity
关于Infinity的运算，无法计算加减乘除一个数字都是Infinity，Infinity和Infinity计算，加法乘法为Infinity，其他为NaN

Infinity和自身相等其他比较正常

<!DOCTYPE html>
<html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
            <script>
                // 分母为0会构成无穷大Infinity 或负无穷大-Infinity
                var num6 = 5/0;
                console.log(num6);//Infinity

                var num7 = -5/0;
                console.log(num7);//-Infinity

                console.log(typeof (Infinity));//无穷大和无穷小都是属于number类型

                // 关于Infinity的运算， 无法计算 加减乘除一个数字都是Infinity，Infinity和Infinity计算，加法乘法为Infinity，其他为NaN
                console.log(Infinity + 1);//Infinity
                console.log(Infinity - 1);//Infinity
                console.log(Infinity - 1000000000000000000000);//Infinity
                console.log(Infinity - Infinity);//NaN
                console.log(Infinity * Infinity);//Infinity
                console.log(Infinity + Infinity);//Infinity
                console.log(Infinity / Infinity);//NaN

                //Infinity和自身相等  其他比较正常
                console.log(Infinity > 1);//true
                console.log(Infinity < 1);//false
                console.log(Infinity == 1);//false
                console.log(Infinity > Infinity);//false
                console.log(Infinity == Infinity);//true
                console.log(Infinity < Infinity);//false
                console.log(Infinity > -Infinity);//true
            </script>
        </body>
</html>

NaN

NaN,即非数值(Not a Number)是一个特殊的数值
这个数值用于表示一个本来要返回数值的操作数未返回数值的情况(这样就不会抛出错误了)

NaN特点：无论和谁比较都是fasle 无论和谁计算都是NaN

<!DOCTYPE html>
<html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Title</title>
      </head>
      <body>
          <script>
              var num8 = "红浪漫"-1;
              console.log(num8)//NaN

              // NaN特点：无论和谁比较都是fasle  无论和谁计算都是NaN
              console.log(NaN+1);//NaN
              console.log(NaN>1);//fasle
              console.log(NaN==1);//fasle
              console.log(NaN<1);//fasle
          </script>
      </body>
</html>

isNaN

isNaN方法检测一个值是不是非纯数字 , 如果非纯数字就返回true 如果是纯数字就返回false

<!DOCTYPE html>
<html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Title</title>
      </head>
      <body>
          <script>
                  document.write(isNaN(123));
                  document.write(isNaN(-1.23));
                  document.write(isNaN(5-2));
                  document.write(isNaN(0));
                  document.write(isNaN("Hello"));
                  document.write(isNaN("2005/12/12"));
          </script>
      </body>
</html>

最大值最小值

在js中数字也是有最大值和最小值的支持的，如果超过最大值或最小值，就可能计算有误

// 在js中数字也是有最大值和最小值的支持的，如果超过最大值或最小值，就可能计算有误
console.log(Number.MIN_VALUE);//5e-324  支持数字的最小值
console.log(Number.MAX_VALUE);//1.7976931348623157e+308 支持数字的最大值

正无穷负无穷

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <script>
            console.log(Number.POSITIVE_INFINITY);
            console.log(Number.NEGATIVE_INFINITY);
        </script>
    </body>
</html>

布尔

布尔类型仅包含两个固定的值：true和false。其中true代表真，false代表假。

在一些判断等操作中，需要使用布尔值

<!DOCTYPE html>
<html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Title</title>
      </head>
      <body>
          <script>
              //1、null
              console.log(Boolean(null));//false
              //2.undefined
              console.log(Boolean(undefined));//false
              //3.number
              //数字转布尔值   非0为true  0为false NaN为false
              console.log(Boolean(123));//true
              console.log(Boolean(-123));//true
              console.log(Boolean(0));//false
              console.log(Boolean(1.23));//true
              console.log(Boolean(NaN));//false
              console.log(Boolean(Infinity));//true
              //4.string
              //空为false  非空为true
              console.log(Boolean("123"));//true
              console.log(Boolean(""));//false
              console.log(Boolean("    "));//true
          </script>
      </body>
</html>

Undefined

变量被声明了，但没有赋值时，就等于undefined

//打印a的时候，找到a了 但是找不到a的值，所以返回一个undefined
var a;
console.log(a);
console.log(a+1);//undefined+1  计算不了

//不声明b，直接使用b，js直接报错  ReferenceError(引用错误)： b is not defined
//说明完全没有找到b这个变量 代码报错停止运行
console.log(b)

null
- null 类型是第二个只有一个值的数据类型，这个特殊的值是 null。
- 从逻辑角度来看，null 值表示一个空对象指针，而这也正是使用 typeof 操作符检测null时会返回"object"的原因
扩展：

  1. Undefined派生自Null，两者都是表示空缺值，转换成布尔值都是假值，可以相等
  2. 但是Undefined和Null属于两种不同的类型
  3. Undefined隐含着意外的空值，而Null隐含着意料之中的空值。因此设置一个变量、参数为空的时候，建议使用null而不是undefined

8. JavaScript判断数据类型

友情提示:

基本数据类型：Undefined、Null、Boolean、Number、String，Symbol

引用数据类型：Object

typeof

typeof可以识别出基本类型boolean,number,undefined,string,symbol，但是不能识别null。不能识别引用数据类型，会把null、array、object统一归为object类型,但是可以识别出function。

所以typeof可以用来识别一些基本类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        var bool = true;
        var num = 1;
        var str = ‘abc‘;
        var und= undefined;
        var nul = null;
        var s1 = Symbol();

        console.log(typeof bool); //boolean
        console.log(typeof num);//number
        console.log(typeof str);//string
        console.log(typeof und);//undefined
        console.log(typeof nul);//object
        console.log(typeof s1); //symbol
    </script>
</body>
</html>

instanceof

instanceof不能识别出基本的数据类型 number、boolean、string、undefined、null、symbol。

但是可以检测出引用类型，如array、object、function，同时对于是使用new声明的类型，它还可以检测出多层继承关系。

其实也很好理解，js的继承都是采用原型链来继承的。比如Dog instanceof Animal ，其实就是看objA的原型链上是否有A的原型，而A的原型上保留A的constructor属性。

所以instanceof一般用来检测对象类型，以及继承关系.

<!DOCTYPE html>
<html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
            <script>
                var bool = true;
                var num = 1;
                var str = ‘abc‘;
                var und= undefined;
                var nul = null;
                var s1 = Symbol();

                console.log(bool instanceof Boolean);// false
                console.log(num instanceof Number);// false
                console.log(str instanceof String);// false
                console.log(und instanceof Object);// false
                console.log(nul instanceof Object);// false
                console.log(s1 instanceof Symbol);// false
            </script>
        </body>
</html>

constructor

null、undefined没有construstor方法，因此constructor不能判断undefined和null。

<!DOCTYPE html>
<html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Title</title>
      </head>
      <body>
          <script>
              var bool = true;
              var num = 1;
              var str = ‘abc‘;
              var und= undefined;
              var nul = null;
              var s1 = Symbol();

              console.log(bool.constructor === Boolean);// true
              console.log(num.constructor === Number);// true
              console.log(str.constructor === String);// true
              console.log(s1.constructor === Symbol);//true
          </script>
      </body>
</html>

toString

此方法可以相对较全的判断js的数据类型。

<!DOCTYPE html>
<html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Title</title>
      </head>
      <body>
          <script>
              var bool = true;
              var num = 1;
              var str = ‘abc‘;
              var und= undefined;
              var nul = null;
              var s1 = Symbol();

              console.log(Object.prototype.toString.call(bool));//[object Boolean]
              console.log(Object.prototype.toString.call(num));//[object Number]
              console.log(Object.prototype.toString.call(str));//[object String]
              console.log(Object.prototype.toString.call(und));//[object Undefined]
              console.log(Object.prototype.toString.call(nul));//[object Null]
              console.log(Object.prototype.toString.call(s1)); //[object Symbol]
          </script>
      </body>
</html>

总结：至于在项目中使用哪个判断，还是要看使用场景，具体的选择，一般基本的类型可以选择typeof，引用类型可以使用instanceof。

9. JavaScript数据类型转换

Number方法

Number()方法将其他类型转换成number类型 Number方法会返回一个转换后的值

<!DOCTYPE html>
<html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Title</title>
      </head>
      <body>
          <script>
              // 1、Number转  数字转数字  还是原来的值
              console.log(Number(666));
              // 2、字符串转数字
              console.log(Number(""));//0 空字符串-->0
              console.log(Number("   "));//0 都是空格的字符串-->0
              console.log(Number("123"));//0 纯数字的字符串-->相对应的数字
              console.log(Number("1a23"));//0 非纯数字的字符串-->NaN

              //3、布尔值转数字
              console.log(Number(true));//1  true-->1
              console.log(Number(false));//0  false-->0

              // 4、undefined转数字
              console.log(Number(undefined));//NaN  undefined-->NaN

              // 5、null转数字
              console.log(Number(null));// 0   null--->0
          </script>
      </body>
</html>

parseInt

parseInt是一个全局方法,它可以把值转换为整数

第1步,先解析位置0处的字符,如果不是有效数字,则直接返回 NaN。
第2步,如果位置0处的字符是数字,或者可以转换为有效数字,则继续解析位置1处的字符,如果不是有效数字,则直接返回位置0处的有效数字。
第3步,以此类推,按从左到右的顺序,逐个分析每个字符,直到发现非数字字符为止。
第4步,parseInt()将把前面分析合法的数字字符全部转换为数值并返回。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <script>
            console.log(parseInt(123));//123
            console.log(parseInt("a123"));//NaN
            console.log(parseInt("1a123"));//1
            console.log(parseInt("10a23"));//10
            console.log(parseInt("100px"));//100
            console.log(parseInt(12.3));//12
            console.log(parseInt(null));//NaN
            console.log(parseInt(true));//NaN
        </script>
    </body>
</html>

parseFloat

parseFloat()也是一个全局方法，它可以把值转换成浮点数，即它能够识别第一个出现的小数点，而第二个小数点视为非法。解析过程和parseInt相同。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <script>
            console.log(parseFloat(123));//123
            console.log(parseFloat(12.3));//12.3
            console.log(parseFloat("12.3.3"));//12.3
            console.log(parseFloat("a12.1"));//NaN
        </script>
    </body>
</html>

运算符转换

如果变量乘以1，则变量会被JS自动转换成数值，如果无法转换成合法数值，则返回NaN

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <script>
            /*如果说变量乘以1  变量就会被自动隐式转换为数字类型，如果转不了就变成NaN*/
            var a = "1";
            console.log(a * 1);//number类型的  1
            var b = "1a";
            console.log(b * 1);//NaN

            /*减法也可以*/
            var c = "1";
            console.log(c - 0);//number类型的  1
            var d = "1a";
            console.log(d - 0);//NaN

            /*除1也可以*/
            var e = "1";
            console.log(e / 1);//number类型的  1
            var f = "1a";
            console.log(f / 1);//NaN
        </script>
    </body>
</html>

10. JavaScript运算符

JS中为我们定义了一套对数据进行运算的运算符,共定义了47个运算符。

1. 算数运算符

技术分享图片

说明：

递增(++)和递减(--)运算就是通过不断地加1或减1,然后把结果赋值给左侧，以实现改变自身结果的一种简洁方法
递增和递减在运算之前都会试图转换值为数值类型,如果失败则返回 NaN。
根据位置不同,可以分为4种运算方式
- 前置递增(++n):先加一,再赋值
- 前置递减(--n):先减一,再赋值
- 后置递增(n++):先赋值,再加一
- 后置递减(n--):先赋值,再减一
一元运算符：一个操作数 ++ --

前++(--)或者后++(--)都是自身+1(-1)再给自身赋值

对于a，前++(--)和后++(--)都是自身+1(-1)再赋值给自己

对于b，前++(--),a先+1(-1)赋值给自己后再参与后面的计算。后++(--)，要看后面的算式是否再次用到a，如果用到，才把之前的后++(--)算上。

<!DOCTYPE html>
<html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Title</title>
      </head>
      <body>
          <script>
              // 无论是  ++a；  还是 a++；  都是让 a每次加1，如果两个代码都是独立运行，那么两个代码没有区别
              var a = 1;
              a ++;//a++是让a  每次加1
              a ++;//a++是让a  每次加1
              a ++;//a++是让a  每次加1
              console.log(a);

              var b = 1;
              ++ b;//让b每次加1
              ++ b;//让b每次加1
              ++ b;//让b每次加1
              ++ b;//让b每次加1
              console.log(b);

              //c++不是单独运行的时候，也就是有赋值操作的时候，那么是先执行赋值，然后再去加1
              //c++ 就是先赋值 后加1
              var c = 2;
              var d = c ++;
              console.log(c);
              console.log(d);

              //++c  先加一 后赋值
              var c = 2;
              var d = ++ c;
              console.log(c);
              console.log(d);
          </script>
      </body>
</html>

练习：

var a = 1;
var b = ++a;
console.log(a);
console.log(b);

var a = 1;
var b = a++;
console.log(a);
console.log(b);

var a = 1;
var b = ++a + a;
console.log(a);
console.log(b);

var a = 1;
var b = ++a + ++a + a;
console.log(a);
console.log(b);

var a = 1;
var b = a + ++a + 1 + a + ++a;
console.log(a); 
console.log(b);

var a = 1;
var b = a + a + ++a + 1 + a + ++a
console.log(a);
console.log(b);

var a = 1;
var b = a++ + 1 + a++;
console.log(a);
console.log(b);

var a = 1;
var b = a++ + a++ + a + 1 + a++ + 1;
console.log(a);
console.log(b);

var a = 1;
var b = a++ + ++a + a + a++;
console.log(a);
console.log(b);

var b = ++a + a++ + a++ + a + ++a + a++ + a;
console.log(a);
console.log(b);

<!DOCTYPE html>
<html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Title</title>
      </head>
      <body>
          <script>
              var a = 1;
              b = a++ + (a++) + 1 + (++a) + (a++) + (++a) + a + (++a);
              console.log(a);
              console.log(b);
          </script>
      </body>
</html>

#### 2. 赋值运算符

![10](.\img\10.png)

#### 3. 字符串运算符

+ 运算符也可用于对字符串进行相加（concatenate，级联）。

```html
a = "hello";
b = "red romance";
c = a + " " + b;

+= 赋值运算符也可用于相加（级联）字符串：
```
a = "ok ";
a += "three man! go go go"; 
```
相加两个数字，将返回和，但对一个数字和一个字符串相加将返回一个字符串：
```
x = 7 + 8;
y = "7" + 8;
z = "Hello" + 7;
```

4. 比较运算符

技术分享图片

5. 逻辑运算符

&& 当多个条件时,必须所有条件都是true,整个结果才是true,只要有一个条件时false,整个结果就是false

|| 当多个条件时,只要有一个条件是true,整个结构就是true,只有所有条件都是false时,整个结果才是false

! 取反

技术分享图片

6. 逗号运算符

逗号运算符是二元运算符，它能够先执行运算符左侧的操作数，然后再执行右侧的操作数，最后返回右侧操作数的值。

var a = 1,b = 2,c = 3,d = 4;

等价于

var a = 1;
var b = 2;
var c = 3;
var d = 4;

练习：观察结果

a = (b = 1,c = 2);
console.log(a);
console.log(b); 
console.log(c);

a = b = 1,c = 2;
console.log(a);  
console.log(b);  
console.log(c);

7. 特殊情况:比较不同的类型

如果将字符串与数字进行比较，那么在做比较时 JavaScript 会把字符串转换为数值。空字符串将被转换为 0。非数值字符串将被转换为始终为 false 的 NaN。

技术分享图片

8. 案例练习

优先级

技术分享图片

任意数据类型和NaN做数学运算,结果都是NaN,但是注意只要是字符串在和任意数据类型做相加+的运算,都是字符串拼接。
字符串类型的数据:在进行数学运算(- * / %)时,会先将自身隐式转换(Number)成数值类型再进行计算
在进行+操作时,是字符串的拼接

console.log(‘2‘ - ‘1‘)；
console.log(‘2‘ - 1)；
console.log(‘2‘ * 1)；
console.log(‘2‘ / 3)；
猜测一下取余结果的符号和除数，被除数哪个有关？
console.log(‘2‘ % 3)；
console.log(‘2‘ + ‘1‘)；
console.log(‘1‘ + 3)；
console.log(‘2‘ - ‘嘿嘿‘)；
console.log(‘1‘ - ‘2abc‘)；
console.log(‘嘿嘿‘ + ‘1a‘)； 
console.log(‘嘿嘿‘ + NaN)；
console.log(‘嘿嘿‘ + 5 * ‘6‘)； 
console.log((‘嘿嘿‘ + 5) * ‘6‘)；

布尔类型的数据:在进行数学运算(+ - * / %)时,会先将自身隐式转换(Number)成数值类型再进行计算

console.log(true + true); 
console.log(true + 5); 
console.log(true + ‘8‘); 
console.log(true - ‘8‘);
console.log(false - 3);
console.log(false - 3 * ‘哈哈‘);

未定义类型的数据:在进行数学运算(+ - * / %)时,会先将自身隐式转换(Number)成数值类型再进行计算
```
console.log(undefined + undefined);
console.log(undefined + 1);
console.log(undefined + ‘5‘ + ‘哈哈‘);
```
空类型的数据:在进行数学运算(+ - * / %)时,会先将自身隐式转换(Number)成数值类型再进行计算
```
console.log(null + true); 
console.log(null + 5);
console.log(‘null‘ + (null - 3) + undefined);
```

任意数据类型在进行关系运算时,会先将自身隐式转换(Number)成数值,在进行比较字符串与字符串之间的比较< > <= >=,比较的是ascii码,一位一位的去比

console.log(5 > 3);
console.log(5 > ‘3‘);
console.log(‘5‘ < true);
console.log(5 > ‘6哈哈‘);
console.log(‘a‘ < ‘ab‘);
console.log(‘ac‘ > ‘ab‘);
console.log(‘ab‘ < ‘bz‘);
// console.log(NaN < NaN)
console.log(‘100‘ < ‘a‘);
console.log(‘5‘ == 5);
console.log(1 == true);
console.log(1 === true);
console.log(0 == false);
console.log(null < 1);

//特殊的
console.log(null == 0);
console.log(null == ‘ ‘);
console.log(null == ‘‘);
console.log(null == false);
console.log(null == undefined);

练习题

console.log(undefined + null * ‘-10‘ + 100 > 90); 

console.log(null * undefined + null + ‘嘿嘿‘);

console.log(true + ‘undefined‘ - undefined + ‘5‘);

console.log((5 + true > true) + 5 > true);

console.log(!true - ‘5‘ + 8 + parseInt(‘4嘿嘿‘));

console.log((!false - !null) * parseInt(‘3.14‘) + ‘‘);

规则: 数学运算转Number, 字符串与任意类型数据相加都是拼接

? 关系运算转Number,字符串与字符串转Ascii码

? 逻辑运算转Boolean

短路表达式:

? && 与如果前面的表达式结果是true,返回的是后面表达式的数据，如果前面的表达式结果是false,直接返回数据

? || 或如果前面的表达式是ture,直接返回数据，如果前面的表达式是false,返回的是后面表达式的数据

? ! 取反

console.log(5 > 3 && 5 > 4);
var a = 5 > 3 && 5 > 4 && 5 > 6;
console.log(a);
console.log(5 > 3 && 5 < 4 && 5 > 6);
console.log(5 > 3 || 5 > 6);
console.log(5 < 3 || 5 < 6 || 5 < 8);
console.log(5 && 8);
console.log(Boolean(5) && Boolean(8));
console.log(null && ‘红浪漫‘);
console.log(5 + 3 && 5 + 4);
console.log(true == 5 > 3);
console.log(‘‘ && NaN);
console.log(‘ ‘ && NaN);
console.log(‘红浪漫‘ && 10 + false && ‘张三‘);

console.log(‘ ‘ && 10 + ‘红浪漫‘ && 5 > null);

console.log(‘ ‘ && 10 - ‘红浪漫‘ && 1.3245644564464 + 2.14335334533553 + 32.433433533535);

console.log(5 || 3);

console.log(‘ ‘ || 10 + ‘红浪漫‘ || 5 > null);

console.log(‘‘ || 10 - ‘红浪漫‘ || 5 > null);

var b;
console.log(5 - undefined || 10 + undefined * null || 5 * b);

console.log(!(5 > 3));
console.log(!5);
console.log(!‘哈哈‘);
console.log(!undefined);
console.log(!5 > 3);

console.log(!‘‘ + 5 + !null); 

console.log(5 || 3 && ‘哈哈‘);
console.log((5 || 3) && ‘哈哈‘);

var f;
console.log(!‘红浪漫‘ + NaN || !10 + null * ‘5‘ && ‘8‘ * !f);

console.log(‘ ‘ + true && !(‘红浪漫‘ - 8) || ‘ ‘ - 1 && !undefined + null); 

console.log(!Number(‘ ‘) + true && Boolean(‘红浪漫‘) - 8 || ‘ ‘ - 1 && !undefined+ !(5+ 3));

JS基础

原文：https://www.cnblogs.com/Listener-wy/p/14669943.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)