web04.JavaScript概述(一)

最新推荐文章于 2023-09-04 15:24:24 发布

qvwvq

最新推荐文章于 2023-09-04 15:24:24 发布

阅读量108

点赞数

分类专栏： WEB前端学习笔记

本文链接：https://blog.csdn.net/qvwvq/article/details/118960013

版权

WEB前端学习笔记专栏收录该内容

18 篇文章 2 订阅

订阅专栏

web04.JavaScript概述(一)

1. JavaScript概述

1.1. JavaScript的历史

JavaScript诞生于1995年。网景公司的员工布兰登 • 艾奇（Brendan Eich，1961年～）在1995年开发出了 JavaScript 语言。
JavaScript是由网景公司（Netscape）发明，最初命名为LiveScript；1995年12月与SUN公司合作，SUN公司就是开发了Java语言的公司，因市场宣传需要，改名为 JavaScript。

1.2.JavaScript特点

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
- 1.是一种解释性脚本语言。
- 2.主要用来向HTML页面添加交互行为。
- 3.可以直接嵌入HTML页面。
- 4.跨平台特性。

1.3.JavaScript的使用方法

1.HTML 中的脚本必须位于 <script> 与 </script> 标签之间。脚本可被放置在 HTML 页面的<body> 和 <head> 部分中。
- ```
<head>
<script>
	alert("我的第一个 JavaScript");
</script>
</head>
```

2.JavaScript 会在页面加载时向 HTML 的写文本

<!DOCTYPE html>
<html>
<body>
    <script>
	document.write("<h1>这是一个标题</h1>");
	document.write("<p>这是一个段落</p>");
	</script>
</body>
</html>

3.通过 <script src="style.js" type="text/javascript"></script> 的方法向页面中引入外联的JavaScript脚本文件，这种方法也是应用最多的。

<!DOCTYPE html>
<html>
<head>
<script src="style.js" type="text/javascript"></script>
</head>
<body>
<script>
document.write("<h1>这是一个标题</h1>"); document.write("<p>这是一个段落
</p>");
</script>
</body>
</html>

1.4.JavaScript的语法

JavaScript的语法和Java语言类似，每个语句以 ; 结束，语句块用 {…} 。但是，JavaScript并不强制要求在每个语句的结尾加 ; ，浏览器中负责执行JavaScript代码的引擎会自动在每个语句的结尾补上 ; 。
注意：让JavaScript引擎自动加分号在某些情况下会改变程序的语义，导致运行结果与期望不一致。大家在使用JavaScript的时候都要加上结尾的分号。
语句块是一组语句的集合。
遇到这种情况，需要把部分代码抽出来，作为函数来调用，这样可以减少代码的复杂度。

1.5. JavaScript的注释

1.以 // 开头直到行末的字符被视为行注释，注释是给开发人员看到，JavaScript引擎会自动忽略
2.另一种块注释是用 /…/ 把多行字符包裹起来，把一大“块”视为一个注释

2. JavaScript脚本执行的位置

2.1. `<script>` 元素

8个属性
- 1.async：可选。表示应该立即开始下载脚本，但不能阻止其他页面动作，比如下载资源或等待其他脚本加载。只对外部脚本文件有效。
- 2.defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。在 IE7 及更早的版本中，对行内脚本也可以指定这个属性。
- 3.charset：可选。使用 src 属性指定的代码字符集。这个属性很少使用，因为大多数浏览器不在乎它的值。
- 4.crossorigin：可选。配置相关请求的CORS（跨源资源共享）设置。默认不使用CORS。
  - crossorigin= "anonymous"配置文件请求不必设置凭据标志。crossorigin="use-credentials"设置
  - 凭据标志，意味着出站请求会包含凭据。
- 5.integrity：可选。允许比对接收到的资源和指定的加密签名以验证子资源完整性（SRI，Subresource Integrity）。如果接收到的资源的签名与这个属性指定的签名不匹配，则页面会报错，脚本不会执行。这个属性可以用于确保内容分发网络（CDN，Content Delivery Network）不会提供恶意内容。
- 6.language：废弃。最初用于表示代码块中的脚本语言（如"JavaScript"、“JavaScript 1.2"或"VBScript”）。大多数浏览器都会忽略这个属性，不应该再使用它。
- 7.src：可选。表示包含要执行的代码的外部文件。
- 8.type：可选。代替 language，表示代码块中脚本语言的内容类型（也称 MIME 类型）。按照惯例，这个值始终都是"text/javascript"，尽管"text/javascript"和"text/ecmascript" 都已经废弃了。JavaScript 文件的 MIME 类型通常是"application/x-javascript"，不过给 type 属性这个值有可能导致脚本被忽略。在非 IE 的浏览器中有效的其他值还有"application/javascript"和"application/ecmascript"。如果这个值是 module，则代码会被当成ES6 模块，而且只有这时候代码中才能出现 import 和 export 关键字。

2.2. 文件解析的要求

外部 JavaScript 文件的扩展名是.js，这不是必需的
服务器经常会根据文件扩展来确定响应的正确 MIME 类型。如果不打算使用.js 扩展名，一定要确保服务器能返回正确的 MIME 类型。
使用了 src 属性的 <script> 元素不应该再在 <script>和</script> 标签中再包含其他JavaScript 代码。如果两者都提供的话，则浏览器只会下载并执行脚本文件，从而忽略行内代码。
不管包含的是什么代码，浏览器都会按照 <script> 在页面中出现的顺序依次解释它们，前提是它们没有使用 defer 和 async 属性。第二个 <script> 元素的代码必须在第一个 <script> 元素的代码解释完毕才能开始解释，第三个则必须等第二个解释完，以此类推。

2.3. 标签位置

现代 Web 应用程序，通常将所有 JavaScript 引用放在 <body> 元素中的页面内容后面，（页面会在处理 JavaScript 代码之前完全渲染页面。用户会感觉页面加载更快了）

2.4. 推迟执行脚本

这个属性表示脚本在执行的时候不会改变页面的结构。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。相当于告诉浏览器立即下载，但延迟执行
第一个推迟的脚本会在第二个推迟的脚本之前执行，因此最好只包含一个这样的脚本。
defer 属性只对外部脚本文件才有效，支持 HTML5 的浏览器会忽略行内脚本的 defer 属性
把要推迟执行的脚本放在页面底部比较好。

2.5. 异步执行脚本

HTML5 为 <script> 元素定义了 async 属性，只适用于外部脚本
与 defer 不同的是，标记为 async 的脚本并不保证能按照它们出现的次序执行
异步脚本不应该在加载期间修改 DOM，异步脚本保证会在页面的 load 事件前执行，但可能会在 DOMContentLoaded之前或之后

2.6. 动态加载脚本

JavaScript 可以使用 DOM API，通过向 DOM 中动态添加 script 元素同样可以加载指定的脚本。只要创建一个 script 元素并将其添加到DOM即可。
- ```
let script = document.createElement('script');
script.src = 'gibberish.js';
document.head.appendChild(script);
```
把 HTMLElement 元素添加到 DOM 且执行到这段代码之前不会发送请求。以这种方式创建的 <script> 元素是以异步方式加载的，相当于添加了 async 属性，不是所有浏览器都支持 async 属性，因此，如果要统一动态脚本的加载行为，可以明确将其设置为同步加载
- ```
let script = document.createElement('script');
script.src = 'gibberish.js';
script.async = false;
document.head.appendChild(script);
```
以这种方式获取的资源对浏览器预加载器是不可见的，这会严重影响它们在资源获取队列中的优先级。要想让预加载器知道这些动态请求文件的存在，可以在文档头部显式声明它们
- ```
<link rel="preload" href="gibberish.js">
```

3. JavaScript变量与常量

3.1. JavaScript的组成部分

1.ECMAScript：JavaScript的核心，描述了语言的基本语法(var、for、if、array等)和数据类型(数字、字符串、布尔、函数、对象(obj、[]、{}、null)、未定义)。
2.文档对象模型：DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。DOM 将把整个页面规划成由节点层级构成的文档。
3.浏览器对象模型：BOM（浏览器对象模型）对浏览器窗口进行访问和操作。例如弹出新的浏览器窗口，移动、改变和关闭浏览器窗口等等。

3.2. JavaScript关键字和保留字

JavaScriptScript全部关键字

break 	else	 new 	var
case 	finally 	return	 void
catch 	for	 switch 	while
continue 	function	 this	 with
default 	if	 throw
delete 	in	 try
do 	instanceof 	typeof

JavaScriptScript全部保留字

abstract 	enum	 int	 shortboolean	 export	 interface 	staticbyte	 extends	 long 	superchar	 final	 native synchronizedc	lass 	float 	package	 throwsconst 	goto 	private transientdebugger 	implements 	protected 	volatiledouble 	import	 public

3.3. JavaScript变量

什么是变量？
- 1.在JavaScript中，变量指的是一个可以改变的量。也就是说，变量的值在程序运行过程中是可以改变的。
- 2.变量是用于存储数据的"容器"。我们通过「变量名」获取数据，甚至可以修改数据。
- 3.变量的本质是程序在内存中申请的一块用来存放数据的空间。
变量的命名规则
- 变量必须以字母开头
- 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
- 变量名称对大小写敏感（y 和 Y 是不同的变量）
- JavaScript 语句和 JavaScript 变量都对大小写敏感
- 变量的声明不能使用保留字和关键字
变量的使用
- 1.定义变量时要使用var操作符（var是关键），后面跟一个变量名（变量名是标识符）var a = 100;
- 2.一个var也可以同时声明多个变量名，其中变量名之间必须用英文逗号（,）隔开 var a=10,b=20,c=30;

3.4. JavaScript的常量

常量的值从定义开始就是固定的，一直到程序结束都不会改变。
可以把常量看成是一种特殊的变量，因为它的值是不会变的，常量名全部大写，如：var DEBUG = 1

4. JavaScript数据类型

4.1. 介绍

1.数据类型其实就是变量的值的类型。
2.在JavaScript中，数据类型可以分为两种：一种是“基本数据类型”；另外一种是“引用数据类型”。

4.2. 数据类型

基本数据类型
- 数字(Number)、
- 字符串(String)、
- 布尔值(Boolean）、
- 未定义值(undefined)、
  - 1.在使用var声明变量，但没有对其初始化时，会返回undefined
  - 2.获取一个对象的某个不存在的属性时，会返回undefined。
  - 3.函数没有明确的返回值，却在其他地方使用了返回值，会返回undefined。
  - 4.函数定义使用了多个形式参数，而在调用是传递的参数数量少于形参的数量，那么未匹配上的参数就为undefined。
- 空值(Null)
  - 1.是一个只有一个值的数据类型，它表示一个空对象引用(指针)，而typeof操作符检测null会返回object
  - 2.null出现的情况
    - 数字、字符串等数据在定义的时候，系统都会分配一定的内存空间
    - JavaScript在获取DOM元素时，没有获取到指定的元素对象，就会返回null。
    - 在使用正则表达式进行捕获时，如果没有捕获结果，就会返回null。
  - 3.null和undefined的异同
    - 相同点
      - null类型和undefined两种类型只有一个字面值。
      - null类型和undefined两种类型在转换为boolean类型时都会转为false，所以通过非运算符！获取结果是true时，不能区分是null类型或undefined类型。
      - 在两者要转换成对象是都会抛出引用异常。
      - 两者是相等的 null == undefined。
    - 不同点
      - null是JavaScript中的关键字，undefined是JavaScript中的一个全局变量，挂载在window对象上的一个变量，并不是关键字。
      - 使用typeof运算符检测时，undefined类型的值会返回undefined，null类型会返回object。
      - 在进行字符串类型转换时null会转换成null，undefined会转换成undefined。
      - 在进行运算时，undefined会转换成NaN无法参与运算，null会转换成0可以参加运算。
  - 4.JavaScript 数字（Number）类型，JavaScript 只有一种数字类型。数字可以带小数点，也可以不带
  - 5.JavaScript中的数字类型可以采用八进制或十六进制的方式表示数值。
  - 6.JavaScript 字符串,字符串是存储字符的变量。字符串可以是引号中的任意文本。可以以使用单引号或双引号
  - 7.JavaScript 布尔类型布尔（逻辑）只能有两个值：true 或 false。
  - 8.Object类型，也是引用数据类型，数组和对象都是Object类型
引用类型数据
- 统称为 Object 类型 ,细分的话，有：Object 类型、Array 类型、Date 类型、RegExp 类型、Function 类型等。

5. JavaScript type of 操作符

5.1. typeof操作符

1.用来检测变量的数据类型的操作符，有两种形式：
- typeof operand
- typeof (operand)
2.operand表示需要返回的数据类型可以是引用类型也可以是基本数据类型
3.括号有时候是必须的，如果不加上括号将会因为优先级的问题得不到我们想要的结果。
- 类型结果
  undefined “undefined”
  boolean “boolean”
  string “string”
  number “number”
  任何其他对象 “object”
  函数对象 “function”
4.处理Undefined类型的值
- 虽然Undefined的值只有一个undefined，但是typeof运算符在处理以下3种值时都会返回undefined。
  - undefined本身。
  - 未声明的变量。
  - 已声明未初始化的变量。
5.处理Boolean类型的值
- typeof运算符在处理这两个值以及它们的包装类型时会返回Boolean，但是不推荐使用包装类型的写法。
- ```
typeof true =='boolean';
typeof false =='boolean';
typeof Boolean(true) ==='boolean'; //不推荐
```
6.处理Number类型的值
- typeof运算符在处理时会返回"number"
- 数字，如1,123,345。
- Number类型的静态变量，如Number.MAX_VALUE。
- Math对象的静态变量值，如Math.PI。
- NaN，虽然NaN是Not aNumber的缩写，但是他是number类型。
- Infinity和-Infinity，表示的是无穷大和无穷小的数。
- 数值类型的包装类型Number(1)不推荐
- ```
typeof 37 === 'number';
typeof 3.14 === 'number';
typeof Math.LN2 === 'number';
typeof Infinity === 'number';
typeof NaN === 'number';
typeof Number(1) === 'number'; //不推荐
```
7.处理String类型的值
- typeof运算符在处理时会返回"string"
  - 任何类型的字符串，包括空字符串和非空字符串。
  - 返回值为字符串类型的表达式。
  - 字符串类型的包装类型不推荐
  - ```
  typeof "" === 'string';
  typeof "str" === 'string';
  typeof (typeof 1) === 'string';
  typeof String("abc") === 'string'; //不推荐
```
8.处理Function类型的值
- typeof运算符在处理时会返回"function"
- 函数的定义，包括函数的声明和函数表达式。
- 使用class关键字定义的类。
- 某些内置对象的特定函数。
- ```
var foo = function(){};
function foo2(){}
typeof foo === 'function';
typeof foo2 === 'function';
typeof Class C{} === 'function';
typeof Math.sin === 'function';
typeof new Function() === 'function';
```
9.处理Object类型的值
- typeof运算符在处理时会返回"object"。
  - 对于字面量的形式，例如{name:‘kingx’}。
  - 数组，例如[1,2,3,]和Array(1,2,3)。
  - 所有构造函数通过new操作符实例化后得到的对象，例如new Date()，但是 newFunction(){}除外。
  - typeof{a:1} === ‘object’;
    typeof[1,2,4] === ‘object’;
    typeof new Date()=== ‘object’;
10.处理null类型的值
- typeof处理null类型，返回的是’Object’，why?
  - 在JavaScript中每种数据类型都会使用3 bit表示：
    - 000表示Object类型的数据。
    - 001表示Int类型的数据。
    - 010表示Double类型的数据。
    - 100表示String类型的数据。
    - 110表示Boolean类型的数据。
- 由于null代表的是空指针，大多数平台中值为 0x00，因此null类型的标签就成了0，所以使用type of运算符判断时就会为Object类型。
11.typeof相关的语法括号问题
- JavaScript优先级的存在不加括号可能会导致运算结果的差异。

6. JavaScript隐式转换

6.1. JavaScript类型转换

JavaScript 变量可以转换为新变量或其他数据类型：
- 1.通过 JavaScript 自身自动转换（隐式转换）。
- 2.通过使用 JavaScript 函数（强制转换）。

6.2.JavaScript其他类型转换为Boolean类型

数据类型转换为true的值转换为false的值
Boolean true false
String 任何非空字符串空字符串
Number 任何非零数字值(包括无穷大) 0和NaN
Object 任何对象 null
Undefined undefined

数据类型	转换为true的值	转换为false的值
Boolean	true	false
String	任何非空字符串	空字符串
Number	任何非零数字值(包括无穷大)	0和NaN
Object	任何对象	null
Undefined		undefined

6.3. JavaScript其他类型转换为number类型

数据类型转换的值

Undefined NAN

Null 0

true 1

False 0

字符串转换为数字或者NaN

其他对象转换为NaN

6.4. JavaScript其他类型转换为字符串类型

数据类型转换的值

Undefined Undefined

Null null

true True

False False

Number NaN，0或者数值对应的字符串

其他对象转换为toString（）否则转换为Undefined

7. JavaScript强制转换Boolean()函数

7.1. JavaScript强制转换

JavaScript 变量可以转换为新变量或其他数据类型
- 通过 JavaScript 自身自动转换（隐式转换）。
- 通过使用 JavaScript 函数（强制转换）。

7.2.JavaScript其他类型转换为Boolean类型

数据类型转换为true的值转换为false的值

Boolean true false

String 任何非空字符串空字符串

Number 任何非零数字值(包括无穷大) 0和NaN

Object 任何对象 null

Undefined undefined

8. JavaScript强制转换number()函数

数据类型转换的值

数值数值

字符串转换为数字或者NaN或者0

true 1

False 0

Undefined NaN

Null 0
number()函数可以用于将任何数据类型转换为Number类型，它在转换时遵循以下的规则：
如果是数字，会按照对应的进制格式，统一转换成十进制并返回。
如果是Boolean类型的值，true将返回1，false将返回0。
如果值是null，则返回0
如果只是undefined,则返回NaN
如果只是字符串类型则遵循以下规则
- 1.该字符串只包含数字，则会转换成十进制数，如果数字前面有0则会忽略这个0。
- 2.字符串是有效的浮点数形式，则会转换成对应的浮点数，前置的多个0会被清空
- 3.字符串是有效的十六进制形式，则会转换成十进制数值。
- 4.字符串是有效的八进制形式，则不会按照八进制转换，而是直接转换成十进制数值，并且前置0会被忽略。
- 5.字符串为空，即字符串不包含任何字符，或者是连续的多个空格，则会转换为0
- 6.字符串包含了任何不是以上5种情况的其他格式的内容，则会返回NaN。
- 7.结果值为对象类型，则会先调用valueOf()函数获取返回值，再按照上述的方式进行转换,如果都不满足，则会调用对象的toString函数获取函数返回值，并将返回值重新按照步骤判断能否转换成Number类型，如果也不满足，则会返回NaN
  - ```
  var obj = {
  age:21,
  valueOf:function(){
  return this.age;
  },
  toString:function(){
  return 'good';
  }
  };
  Number(obj); //21
```
- ```
var obj = {
age:21,
valueOf:function(){
return [];
},
toString:function(){
return this.age;
}
};
Number(obj); //21
```
  - ```
  var obj = {age:21,valueOf:function(){return 'a';},toString:function(){return 'b';}};Number(obj); //NaN
```

9. JavaScript强制转换parseInt()函数

9.1. parseInt()函数

parseInt()函数用于解析一个字符串，并返回指定的基数对应的整数值。

1.非字符串类型转换为字符串类型

parseInt('0x12',16); //18，转一次，1x16+2 =18。
parseInt(0x12,16); //24,转两次，1x16+8=24。

2.数据截取的前置匹配原则
- 从第一个字符开始匹配，如果处于基数的范围，则保留继续往后匹配满足条件的字符，直到某个字符不满足指定技术的范围，从该字符开始，舍去后面的字符，在获得满足的字符之后，将这些字符转换为整数
  - ```
  parseInt("fg123",16); //15
  parseInt("0x12",16); //18=16+2
  parseInt("0x12",10); //0
```
3.对包含字符e的不同数据处理差异
- 当传入的参数本身就是Number类型时，会将e按照科学计数法转换成字符串，然后再按照对应的技术转换成最终的结果
- 当传入的字符串中包含e时，并不会按照科学计数法计算，而是判断字符e是否包含在可处理的进制范围内
4.对浮点类型的处理
- 若传入浮点类型，则会忽略小数点及后面的数，直接取整

10. JavaScript强制转换parseFloat()函数

10.1. parseFloat()函数

用于解析一个字符串，返回对应的浮点数，
1.遇到正负号，数字0-9，如果不能转换则返回NaN,则会忽略从该字符开始至结束的所有字符，然后返回当前已解析的字符
- ```
parseFloat("+1.2"); //1.2
parseFloat("-1.2"); //-1.2
parseFloat("++1.2"); //NaN
parseFloat("--1.2"); //NaN
parseFloat("1+1.2"); //1
```
2.字符串前面的空白符会被直接忽略，如果第一个字符无法解析，就返回NaN。
- ```
parseFloat(' 1.2'); //1.2
parseFloat('f1.2'); //NaN
```
3.字符串中出现的合法科学运算符e，进行运算处理后会转换成浮点型数，这点与parseInt()函数的处理有很大的不同。
- ```
parseFloat('4e3'); //4000;
parseInt('4e3',10); //4;
```
4.对于小数点只能正确匹配第一个，第二个小数点是无效的。
- ```
parseFloat('11.20'); //11.2
parseFloat('11.2.10'); //11.2
```
Number(),parseInt(),parseFloat()函数都能用于Number类型的转换，注意差异
- Number()函数转换的是传入的整个值，并不会像parseInt()和parseFloat()一样从首位开始匹配符合条件的值。
- parseInt()函数在遇到小数点时会停止解析，parseFloat()函数在解析小数点时，会将第一个小数点作为有效字符，第二个和之后的小数点忽略。
- parseFloat()函数在使用时只需要传递字符串，parseInt()函数在使用时需要添加指数。

11. JavaScript强制转换字符串

数据类型转换的值

数值数值本身

字符串字符串本身

true True

False False

Undefined Undefined

Null Null

数字转换为字符串的两种方式

1.与空字符串相加

var a = 2018 + "";
var b = a + 1000;
console.log(b);

2.toString()函数
- var a = 2018; var b = a.toString() + 1000; console.log(b);
3.使用string函数强制转换string（）
- var a = 2018; var b = string(a) + 1000; console.log(b);
4.string（）和to string（）区别
- 1.toString()方法一般是不需要传参的
- 2.如果在转型之前不知道变量是否是null或者undefined的情况下，我们还可以使用转型函数String()，这个函数能够将任何类型的值转换为字符串。

12. JavaScript算数运算符

12.1. JavaScript算术运算符

定义了5个算术运算符，加减乘除，取余。如果在算术运算的值不是数值，那么后台会先使用Number()转型函数将其转换为数值(隐式转换)。
- 1.加法
  
  -var box = 1 + 2; //等于3 var box = 1 + NaN; //NaN，只要有一个NaN就为NaN
- 2.减法
  - var box = 100 - 70; //等于30 var box = -100 - 70 //等于-170
- 3.乘法
  - var box = 100 * 70; //7000
  - var box = 100 * NaN; //NaN，只要有一个NaN即为NaN
- 4.除法
  - var box = 100 / 70; //1.42.... var box = 100 / NaN; //NaN
- 5.取余
  - var box = 10 % 3; //1，余数为1 var box = 100 % NaN; //NaN
- 6.递增++和递减–
  - ```
  var box = 100;
  ++box; //把box累加一个1，相当于box = box+1--box;
  box--; //把box累减一个1，相当于box = box-1box++;
```
- 7.前置和后置的区别
  - 没有赋值操作，前置和后置是一样的
  - 在赋值操作时，如果递增或递减运算符前置，那么前置的运算符会先累加或累减再赋值，如果是后置运算符则先赋值再累加或累减。
  - ```
  var box = 100;
  var age = ++box; //age值为101
  var height = box++; //height值为100
```
- 8.+号的两种作用
```
var a = 1+1; //纯数值 就是加法
alert(a);
var a = 1+'123abc'; //数值和字符串 连接符作用1123abc
alert(a);
```

12.2. 判断一个数是整数，还是小数？

对于一个“数字型字符串”，
- 如果这个数字是整数，则parseInt()和parseFloat()两个方法返回的结果是一样的
- 如果这个数字是小数，则parseInt()和parseFloat()两个返回的结果是不一样的
- ```
<script>
var n = 3.14;
if (parseInt(n.toString()) == parseFloat(n.toString()))
{
document.write(n+ "是整数")
}
else
{
document.write(n + "是小数")
}
</script>
```

13. JavaScript比较和条件运算符

13.1. JavaScript比较运算符

比较运算符：小于(<)、大于(>)、小于等于(<=)、大于等于(>=)、相等 () 、不等(!=)、全等(恒等)(=) 、不全等(不恒等)(!==)。

13.2. JavaScript条件运算符

条件运算符，也叫“三目运算符”。在JavaScript中，条件运算符用英文问号（?）表示。

var a = (2 > 1) ? "小芳" : "小美";
document.write(a);//小芳

13.3.比较运算符操作非数值时规则

1.两个操作数都是数值，则数值比较；
2.两个操作数都是字符串，则比较两个字符串对应的字符编码值；
3.两个操作数有一个是数值，则将另一个转换为数值，再进行数值比较；
4.两个操作数有一个是对象，则先调用valueOf()方法或toString()方法，再用结果比较；

13.4.非数值相等和不等比较时规则

1.一个操作数是布尔值，则比较之前将其转换为数值，false转成0，true转成1；
2.一个操作数是字符串，则比较之前将其转成为数值再比较；
3.一个操作数是对象，则先调用valueOf()或toString()方法后再和返回值比较；
4.不需要任何转换的情况下，null和undefined是相等的；
5.一个操作数是NaN，则==返回false，!=返回true；并且NaN和自身不等
6.两个操作数都是对象，则比较他们是否是同一个对象，如果都指向同一个对象，则返回true，否则返回false。
7.在全等和全不等的判断上，比如值和类型都相等，才返回true，否则返回false。

14. JavaScript赋值和逻辑运算符

14.1. JavaScript赋值运算符

赋值运算符：等于(=) 加等于(+=) 减等于（-=）乘等于（*=）除等于（/=）取于等于（%=）

14.2. JavaScript逻辑运算符

逻辑运算符通常用于布尔值的操作，一般和关系运算符配合使用，有三个逻辑运算符：逻辑与(AND)、逻辑或(OR)、逻辑非(NOT)。
- 1.逻辑与(AND) ：&&
  - var box = (5 > 4) && (4 > 3) //true，两边都为true，返回true。
- 2.逻辑或(OR)：||
  - var box = (9 > 7) || (7 > 8); //true，两边只要有一边是true，返回true
- 3.逻辑非(NOT)：!
  - 逻辑非运算符可以用于任何值。无论这个值是什么数据类型，这个运算符都会返回一个布尔值。它的流程是：先将这个值转换成布尔值，然后取反，规则如下：
    - 1.操作数是一个对象，返回false；
    - 2.操作数是一个空字符串，返回true；
    - 3.操作数是一个非空字符串，返回false；
    - 4.操作数是数值0，返回true；
    - 5.操作数是任意非0数值(包括Infinity)，false；
    - 6.操作数是null，返回true；
    - 7.操作数是NaN，返回true；
    - 8.操作数是undefined，返回true；

15. JavaScript判断语句

1. 条件分支语句if () {} else {}

语法：if (条件表达式) {语句;} else if (条件表达式) {语句;} … else {语句;}

2. 多重分支语句switch(){case 1:…break;case 2:…break;default}

语法：switch () { case n : …};switch语句是多重条件判断，用于多个值相等的比较。

16. JavaScript 循环语句

16.1. JavaScript 循环语句

1.do…while语句是一种先运行，后判断的循环语句。也就是说，不管条件是否满足，至少先运行一次循环体。
2.while语句是一种先判断，后运行的循环语句。也就是说，必须满足条件了之后，方可运行循环体。
3.for语句也是一种先判断，后运行的循环语句。但它具有在执行循环之前初始变量和定义循环后要执行代码的能力。
4.for…in语句是一种精准的迭代语句，可以用来枚举对象的属性。
5.break和continue语句用于在循环中精确地控制代码的执行。其中，break语句会立即退出循环，强制继续执行循环体后面的语句。而continue语句退出当前循环，继续后面的循环。

16.2. 找出“水仙花数”

所谓“水仙花数”是指一个3位数，其各位数字的立方和等于该数的本身。例如153就是一个水仙花数，因为153 = 13 + 53 + 33

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
//定义一个空字符串，用来保存水仙花数
var str = "";
for (var i = 100; i < 1000; i++)
{
var a = i % 10; //提取个位数
var b = (i / 10) % 10 //提取十位数
b = parseInt(b); //舍弃小数部分
var c = i / 100; //提取百位数
c = parseInt(c); //舍弃小数部分
if (i == (a * a * a + b * b * b + c * c * c))
{
str = str + i + "、";
}
}
document.write("水仙花数有：" + str);
</script>
</head>
<body>
</body>
</html>

条件是否满足，至少先运行一次循环体。

2.while语句是一种先判断，后运行的循环语句。也就是说，必须满足条件了之后，方可运行循环体。
3.for语句也是一种先判断，后运行的循环语句。但它具有在执行循环之前初始变量和定义循环后要执行代码的能力。
4.for…in语句是一种精准的迭代语句，可以用来枚举对象的属性。
5.break和continue语句用于在循环中精确地控制代码的执行。其中，break语句会立即退出循环，强制继续执行循环体后面的语句。而continue语句退出当前循环，继续后面的循环。

16.2. 找出“水仙花数”

所谓“水仙花数”是指一个3位数，其各位数字的立方和等于该数的本身。例如153就是一个水仙花数，因为153 = 13 + 53 + 33

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
//定义一个空字符串，用来保存水仙花数
var str = "";
for (var i = 100; i < 1000; i++)
{
var a = i % 10; //提取个位数
var b = (i / 10) % 10 //提取十位数
b = parseInt(b); //舍弃小数部分
var c = i / 100; //提取百位数
c = parseInt(c); //舍弃小数部分
if (i == (a * a * a + b * b * b + c * c * c))
{
str = str + i + "、";
}
}
document.write("水仙花数有：" + str);
</script>
</head>
<body>
</body>
</html>

qvwvq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web04.JavaScript概述(一)

web04.JavaScript概述(一)1. JavaScript概述1.1. JavaScript的历史JavaScript诞生于1995年。网景公司的员工布兰登 • 艾奇（Brendan Eich，1961年～）在1995年开发出了 JavaScript 语言。JavaScript是由网景公司（Netscape）发明，最初命名为LiveScript；1995年12月与SUN公司合作，SUN公司就是开发了Java语言的公司，因市场宣传需要，改名为 JavaScript。1.2.JavaSc
复制链接

扫一扫