JavaScript基础语法
HTML：标记语言JavaScript：编程语言
序言
JavaScript发展历史（JS）
1. 1994年，网景公司(Netscape)发布了Navigator浏览器0.9版，这是世界上第一款比较成熟的网络浏览器，轰动一时。但是这是一款名副其实的浏览器--只能浏览页面，浏览器无法与用户互动,当时解决这个问题有两个办法，一个是采用现有的语言,许它们直接嵌入网页。另一个是发明一种全新的语言。
liveScript ==> javaScript ==> ECMAscript
2. 1995年Sun公司将Oak语言改名为Java，正式向市场推出。Sun公司大肆宣传，许诺这种语言可以"一次编写，到处运 行"(Write Once, Run Anywhere)，它看上去很可能成为未来的主宰。
3. 网景公司动了心，决定与Sun公司结成联盟
4. 34岁的系统程序员Brendan Eich登场了。1995年4月，网景公司录用了他,他只用10天时间就把Javascript设计出来了。（多肽语言）
5.
(1)借鉴C语言的基本语法
(2)借鉴Java语言的数据类型和内存管理
(3)借鉴Scheme语言，将函数提升到"第一等公民"(first class)的地位
(4)借鉴Self语言，使用基于原型(prototype)的继承机制
*6. ES6版本(ECMAScrip的第六个版本) 对于 JavaScript功能提升最大
JavaScript能干什么
1. 常见的网页效果【表单验证，轮播图。。。】
2. 与H5配合实现游戏【水果忍者： http://www.jq22.com/demo/html5-fruit-ninja/】
3. 实现应用级别的程序【http://naotu.baidu.com】
4. 实现统计效果【http://echarts.baidu.com/examples/】
5. 地理定位等功能【http://lbsyun.baidu.com/jsdemo.htm#i4_5】
6. 在线学编程【https://codecombat.163.com/play/】
7. js可以实现人工智能【面部识别】
8. 。。。
JavaScript的组成
1. ECMASCRIPT: 定义了javascript的语法规范,描述了语言的基本语法和数据类型
2. BOM (Browser Object Model): 浏览器对象模型
- 有一套成熟的可以操作浏览器的 API，通过 BOM 可以操作浏览器。比如： 弹出框、浏览器跳转、获取分辨率等
3. DOM (Document Object Model): 文档对象模型
- 有一套成熟的可以操作页面元素的 API，通过 DOM 可以操作页面中的元素。比如： 增加个 div，减少个 div，给 div 换个位置等
总结： JS 就是通过固定的语法去操作 浏览器 和 标签结构 来实现网页上的各种效果
JavaScript的主要功能
1.交互
人机操作的交互
页面的特效
页面内容的动态渲染生成
2.数据的交互
前端程序和后端数据库的数据交互
JavaScript代码的书写位置
- 和
css一样，我们的js也可以有多种方式书写在页面上让其生效 js也有多种方式书写，分为 行内式， 内嵌式，外链式
行内式 JS 代码（不推荐）
- 写在标签上的 js 代码需要依靠事件（行为）来触发
<!-- 写在 a 标签的 href 属性上 -->
<a href="javascript:alert('我是一个弹出层');">点击一下试试</a>
<!-- 写在其他元素上 -->
<div onclick="alert('我是一个弹出层')">点一下试试看</div>
<!--
注：
1.onclick 是一个事件（点击事件），当点击元素的时候执行后面的 js 代码
2.a标签二阶段定义和一阶段不同，如果是超链接没有固定的url地址，同时要执行JavaScript操作，必须要设定href属性为JavaScript:;（href属性给#表示跳转当前页面本身）
如：<a href="JavaScript:;">超链接</a>
-->
内嵌式 JS 代码
- 内嵌式的 js 代码会在页面打开的时候直接触发
<!-- 在 html 页面书写一个 script 标签，标签内部书写 js 代码 -->
<script type="text/javascript">
alert('我是一个弹出层')
</script>
<!--
注：
script标签可以放在head里面也可以放在body里面，理论上script标签是可以写在任意位置的，但是实际操作中因为要操作html标签，且代码有从上往下的执行顺序 因此script标签一般写在body标签内,html标签的最下方。
-->
外链式 JS 代码（推荐）
- 外链式 js 代码只要引入了 html 页面，就会在页面打开的时候直接触发
- 新建一个
.js后缀的文件，在文件内书写js代码，把写好的js文件引入html页面
// 我是 index.js 文件
alert('我是一个弹出层')
<!-- 我是一个 html 文件 -->
<!-- 通过 script 标签的 src 属性，把写好的 js 文件引入页面 -->
<script src="index.js"></script>
<!-- 一个页面可以引入多个 js 文件 -->
<script src="./index1.js"></script>
<script src="./index2.js"></script>
<script src="./index3.js"></script>
<!--
注：
1.同级文件 也就是在同一个文件夹中的文件 导入路径是 ./文件名称。
直接写文件名到数据交互的时候会出问题。
*2.只要定义了scr属性（不管是否给值）,script标签就只会执行外部导入的程序,内部式的程序就不会再执行了。
<script src>
// JavaScript内部式代码程序，这里不会执行了。
window.alert('我是js程序的弹窗');
</script>
JavaScript三大调试方式
目的：将JavaScript执行结果做输出展示，不是JavaScript操作的最终目的， 只是在展示程序的执行结果。
1.警告框
window.alert('内容');
2.控制台输出
console.log('内容');
浏览器f12控制台中console功能，是浏览器提供的显示JavaScript程序执行结果的功能。
3.向页面输出
document.write('内容');
<script>
// 警告框
window.alert('我是JavaScript弹出的警告框内容');
// 控制台输出
console.log('我是向控制台输出的内容');
console.log() //输出数据
console.dir() //输出属性等
// 页面输出
document.write('我是向页面输出的');
document.write('<h1>我是输出的h1标签</h1>');
</script>
JS 中的注释
- 学习一个语言，先学习一个语言的注释，因为注释是给我们自己看的，也是给开发人员看的
- 写好一个注释，有利于我们以后阅读代码
单行注释
- 一般就是用来描述下面一行代码的作用
- 可以直接写两个
/，也可以按ctrl + /
// 我是一个单行注释
// 下面代码表示在浏览器里面出现一个弹出层
alert('我是一个弹出层')
多行注释
- 一般用来写一大段话，或者注释一段代码
- 可以直接写
/**/然后在两个星号中间写注释- 各个编辑器的快捷键不一样，
vscode是alt + shift + a
- 各个编辑器的快捷键不一样，
/*
我是一个多行注释
*/
/*
注释的代码不会执行
alert('我是一个弹出层')
alert('我是一个弹出层')
*/
alert('我是一个弹出层')
变量（重点）
- 概念：存储在内存中的带有名称的数据信息，其中存储的数据信息在程序的执行过程中可以改变。
- 本人理解：变量是指在程序中用来存储数据的一个容器。
- 在 html程序中，存储数据的容器就是标签name属性的属性值。
- 变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据。也就是说，我们向内存中存储了一个数据，然后要给这个数据起一个名字，为了是我们以后再次找到他。
- 语法：
var 变量名 = 值
定义变量及赋值
// 定义一个变量，var是定义变量的关键词。
var num;
// 给一个变量赋值
num = 100;
// 定义一个变量的同时给其赋值
var num2 = 200;
- 注意：
- 一个变量名只能存储一个值
- 当再次给一个变量赋值的时候，前面一次的值就没有了
- 变量名称区分大小写（
JS严格区分大小写） - = 是赋值运算符。将运算符右侧的表达式(有数值结果的公式) 结果赋值给左侧变量储存。
如var int = 50+50 ; 指的是将右侧表达式 50+50的运算结果100 赋值给左侧变量int 存储。
变量的命名规则和命名规范
-
规则： 必须遵守的，不遵守就是错
- 一个变量名称可以由 数字、字母、英文下划线（_）、美元符号（$） 组成
- 严格区分大小写
- 不能由数字开头
- 不能是 保留字 或者 关键字
- 不要出现空格
-
规范： 建议遵守的（开发者默认），不遵守不会报错
- 变量名尽量有意义（语义化）
- 遵循驼峰命名规则，由多个单词组成的时候，从第二个单词开始首字母大写
- 不要使用中文
数据类型（重点）
- 是指我们存储在内存中的数据的类型
- 我们通常分为两大类 基本数据类型 和 复杂数据类型
基本数据类型（5种）
-
数值类型（number）
-
一切数字都是数值类型（包括二进制，十进制，十六进制等）
-
NaN（not a number），一个非数字1.数值类型---整数 <script> /*JavaScript整数 integer/int 包括：正整数、0、负整数。 其他进制整数 二进制 0 1 八进制 0 1 2 3 4 5 6 7 十进制 0 1 2 3 4 5 6 7 8 9 十六进制 0 1 2 3 4 5 6 7 8 9 a b c d e f 其他进制整数的存储方式 十进制数值，直接存储、直接输出，JavaScript程序默认的进制格式 就是十进制 二进制数值，储的数值前添加0b/0B，avaScript程序会将数值按照二进制数值格式存储，但是二进制100100会默认换算成十进制数值36输出。 如果要按照指定的进制输出，语法是变量.toString(进制)，将变量中存储的不管是什么进制的数值，按照 () 中设定的进制输出，进制的范围是2 - 36。 八进制数值存储的数值前添加 0o / 0O 十六进制数值存储的数值前添加 0x / 0X */ // 十进制直接存储数值 var int1 = 100 ; // 二进制存储数值前添加 0b / 0B //将数值100100按照二进制数值形式存储 var int2 = 0b100100 ; //输出会自动换算为十进制数值形式输出 console.log( int2 ); //八进制数值前添加 0o var int3 = 0o123 ; //十六进制 数值前 添加 0b var int4 = 0x123 ; console.log( int2.toString(2) ); //输出二进制 console.log( int3.toString(8) ); //输出八进制 console.log( int4.toString(16) ); //输出十六进制 </script> 2.数值类型---浮点数 <script> /*JavaScript浮点数 float，浮点数就是小数 1）有效数值 在数学中小数位数可以是无穷多位，但在计算机程序中对于存储浮点数的位数有限制，在JavaScript程序中 有效数值最多17位。 有效数值：从左起第一个非零数字开始计算有效数值。超出17位有效数字的内容不会被存储。 0.001 1位有效数字 1.001 4位有效数字 2）浮点数的误差/浮点数的溢出 因为计算机本身的存储原理，浮点数在计算机中存储的是近似值，而不是准确数值，使用JavaScript中的浮点数直接执行运算或者比较执行结果一定会存在误差/溢出。 实际项目中对于浮点数的运算或者比较需要做专门的处理。 3）科学计数法 是计算机程序中数字的一种语法，语法是：数e数。如： 2e3 --- 2乘以10的3次方 --- 2000 2e-3 --- 2乘以10的-3次方 --- 2除以10的3次方 --- 0.002 使用科学计数法表示的数值即使结果是一个整数，其数据类型仍然是浮点数类型。 */ // var a = 123.456789012345678901234567890123456789 ; console.log( a ); //只会输出17位小数。 // 浮点数的误差 console.log( 8 === 8 ) ; //输出true console.log( 0.8*10 === 0.8*10 ) ; //输出true console.log( (0.1+0.7)*10 === 8 ) ; //输出false(0.1其实是0.100000...0000001) console.log( (0.6+0.3)*10 === (0.7+0.2)*10 ) ; //输出true // 科学计数法 console.log( 2e3 ); //输出2000 console.log( 2e-3 ); //输出0.002 </script>
-
-
字符串类型（string）
-
被引号包裹的所有内容（可以是单引号也可以是双引号）
<script> /*JavaScript 字符串类型string/str，是一串由数字符号汉字等组成的数据，使用定界符（ ' ' " " ` `）包裹的内容就是字符串。 最初，我们拼接字符串的时候，是通过连接符”+”来接的，并且如果换行等需要使用转义字符，否则就会报错。这样让我们书写十分不便。所以，ES6中就引入了模板字符串，帮助我们解决这一问题。 如果没有变量解析，字符串定界符使用单引号或者双引号(效率比``高) 1. '' "" 单引号双引号功能类似 1）不能换行 2）单引号、双引号不能嵌套本身，但双引号是可以嵌套单引号的。 3）单引号、双引号不能解析变量 如果非要在字符串中输出变量的数值数据，必须要使用字符串拼接语法将变量和字符串拼接在一起。 2. ` ` 反引号 模板字符串,是ES6新增的语法形式 低版本IE浏览器不支持。 1）不能嵌套本身 2）支持换行 3）反引号中可以解析变量/表达式，需要使用 ${ } 包裹变量/表达式 4）``先是看{}里面有没有变量，没有变量的话执行，有变量的话还要先解析，所以他的执行效率要低于''与"" 3.补充知识点 `${5+7}` 模板字符串解析变量/表达式 但是最终的输出结果还是字符串类型 eval('5+7') 解析执行字符串中定义的JavaScript程序，不能解析变量，但是可以将字符串按照 JavaScript程序执行，结果是什么数据类型就解析成什么数据类型。*/ // 变量a中存储布尔值true，结果显示的true是蓝色; var a = true ; console.log( a ); // 变量b中存储字符串true，结果显示的true是黑色 var b = 'true' ; console.log( b ); // 单引号双引号 不能换行 var a = '北 京'; // 单引号，双引号不能嵌套本身 var a = '北京'今天'天气挺好的' ; var b = "北京"今天"天气挺好的" ; // 定义一个变量，模拟存储数据库返回的数据 var t = 15 ; // 单引号，双引号不会解析输出变量中的数值。 // 定义在字符串串中的变量，输出的是变量名称t，输出结果：北京:t摄氏度 console.log( '北京:t摄氏度' ); console.log( "北京:t摄氏度" ); // 字符串拼接语法 // 字符串北京:拼接上变量t解析的数据15再拼接上字符串摄氏度 // 字符串拼接执行会先解析变量中存储的数据，使用数据和字符串进行拼接，成功输出北京:15摄氏度 console.log( '北京:' + t + '摄氏度' ); console.log( "北京:" + t + "摄氏度" ); //都是数值执行加法运算 var a = 100 + 100 ; console.log( a ); //输出200 // 有一个是字符串就执行字符串拼接操作 var b = 100 + '100' ; console.log( b ); //输出100100 // 反引号不能嵌套自身 var a = `北京`今天`天气不错` ; // 反引号支持换行 var a = `北 京`; console.log( a ); // 反引号解析变量/表达式 var a = `${5+7}`; console.log( a ); //输出12，执行结果仍然是字符串类型 // eval( '5+7' )的执行结果 console.log( eval( '5+7' ) ); //输出12，执行结果是对应的数据类型，不是字符串 // 反引号解析变量 var b = 17 ; console.log( `北京现在的温度是${b}℃` ); //输出：北京现在的温度是17℃ </script>
-
-
布尔类型（boolean）
-
只有两个（
true或者false） -
常见的布尔 “属性”：checked（选中）、multiple（多选）、readonly（只读）、disabled（禁用）、selected（下拉菜单默认选中）。
<script> /*JavaScript 布尔类型 boolean / bool，只有两个数值 true / false。 布尔类型往往是 比较判断的结果 true 表示真/正确 false 表示假/错误 在JavaScript程序中可以直接将关键词 true/false 赋值给变量储存，示存储布尔类型的数值，true/false作为数值数据必须要小写*/ // 变量a 存储 表达式 50 > 40 的执行结果 // 50 > 40 的结果是 真/正确 // 在 JavaScript程序中 使用 关键词 true 表示 真/正确 // 最终 变量a 中 存储 50 > 40 的执行结果 也就是 true var a = 50 > 40 ; console.log( a ); // 变量b 存储 表达式 50 < 40 的执行结果 // 50 < 40 的执行结果是 假/错误 // 在 JavaScript程序中 使用 关键词 false 表示 假/错误 // 最终 变量b 存储 50 < 40 的执行结果 也就是 false var b = 50 < 40 ; console.log( b ); // 将 关键词 true false 作为 数值数据 直接赋值给变量 // 两个关键词 都必须小写 var c = true ; var d = false ; console.log( c ); console.log( d ); </script>
-
-
null类型（null）
-
只有一个，就是
null，表示空值的意思 -
null这个值专门用来表示一个为空的对象，所以用typeof检查一个null值的时候，会返回object。
// null是专门赋值的数值，表示 有值 但是是 空值 var b = null ; console.log( b ); //输出null
-
-
undefined类型（undefined）
-
只有一个，就是
undefined，表示变量只定义没有被赋值。在JavaScript程序执行规范中定义没有被正确赋值的变量后，JavaScript程序会自动给变量赋值undefined。 // 声明定义变量，同时给变量赋值存储数据100 var int = 100 ; // ！！只是声明定义了一个变量，但是没有给变量赋值！！，那么JavaScript程序会自动给变量储存数据undefined。 var a ; console.log( a ) //输出undefined
-
复杂数据类型（暂时先不讲）
- 对象类型（object）
- 函数类型（function）
- 数组类型
- …
判断数据类型
- 既然已经把数据分开了类型，那么我们就要知道我们存储的数据是一个什么类型的数据
- 使用
typeof关键字来进行判断
// 第一种使用方式
var n1 = 100;
console.log(typeof n1); //=> number
// 第二种使用方式
var s1 = 'abcdefg';
console.log(typeof(s1)); //=> string
var a1 = null;
console.log(typeof a1); //=> object
var b;
console.log(typeof b); //=> undefined
var a = NaN; //NaN是一个特殊的数字，表示Not A Number
console.log(typeof a); //=> number
function fun(){
}
console.log(typeof fun); //=> function
判断一个变量是不是数字
- 可以使用
isNaN这个方法来判断一个变量是不是数字 isNaN：is not a number
// 如果变量是一个数字
var n1 = 100;
console.log(isNaN(n1)); //=> false
// 如果变量不是一个数字
var s1 = 'Jack'
console.log(isNaN(s1)); //=> true
var b = 100 - '北京' ;
console.log( b ); //输出：NaN
// 两个 NaN 的 比较判断
console.log( NaN > NaN ); //输出：false
console.log( NaN < NaN ); //输出：false
console.log( NaN === NaN ); //输出：false
/*
补充：
throw( 内容 )
JavaScript的报错程序
1.向控制台输出设定的内容
2.终止之后程序的执行
if( isNaN( res ) ){
// 抛出报错信息 终止之后程序的执行
throw('输入的数据格式不符合');
}
*/
数据类型转换
-
数据类型之间的转换，比如数字转成字符串，字符串转成布尔，布尔转成数字等
-
数据类型转换分类：
1.自动转换：计算机程序执行过程中自动完成的转化，不需要程序员参与
关键点：什么时候触发自动转化，自动转化原则。
<script> /* 其他数据类型自动转化为字符串类型 1.什么时候触发 字符串拼接时，其他数据类型会先转化为字符串类型，再执行字符串拼接操作 2.转化原则 其他数据类型转化为对应的字符串内容 */ var a = '北京'; // 都是字符串，直接执行字符串拼接操作 var b = a + '上海'; //结果：北京上海 // 先自动将数值100转化为字符串'100'，再执行字符串拼接操作 var c = a + 100 ; //结果：北京100 // 数值100.123 转化为字符串'100.123'，再执行字符串拼接操作 var d = '北京' + 100.123; //结果：北京100.123 // 将2e3转化为数值2000，在字符串北京后拼接数值2000转化成的字符串'2000' var e = '北京' + 2e3; //结果：北京2000 // NaN --- 'NaN' var f = '北京' + NaN; //结果：北京NaN // null --- 'null' var g = '北京' + null; //结果：北京null // undefined --- 'undefined' var h = '北京' + undefined; //结果：北京undefined // true --- 'true' var i = '北京' + true; //结果：北京true // false --- 'false' var g = '北京' + false; //结果：北京false </script><script> /* 其他数据类型自动转化为数值类型 1.什么时候触发 执行算数运算时触发。 2.转化原则 先将其他数据类型转化为对应的数值，在执行运算。 */ // true --- 1 console.log( 100 - true ); //输出：99 // false --- 0 console.log( 100 - false ); //输出：100 // null --- 0 console.log( 100 - null ); //输出：100 // '' 、 ' ' --- 0 console.log( 100 - '' ); //输出：100 console.log( 100 - ' ' ); //输出：100 // 符合数字规范的字符串内容，会先转化为对应的数值，在执行运算 console.log( 100 - '5' ); //输出：95 console.log( 100 - '50.123' ); //输出：49.877 console.log( 100 - '2e3' ); //输出：-1900 // 不符合数字规范的字符串，会先转化为NaN，在执行运算，又因为有NaN参与的运算，最终结果是NaN,所以以下几个输出结果全是NaN。 console.log( 100 - '5a' ); console.log( 100 - 'a100' ); console.log( 100 - '2w3' ); console.log( 100 - undefined ); console.log( undefined + null ); //undefined转化为NaN,null转化为0,最终结果NaN </script> **特别注意： 如果有字符串参与 加法 运算，执行结果的是字符串拼接。若是 + 号两侧没有字符串，那么会执行加法运算。 例如： console.log( undefined + 'null' ); //结果是 undefinednull console.log( 100 + 100 ); //结果是200<script> /* 其他数据类型自动转化为布尔类型 1.什么时候触发 if语句 逻辑运算符 三元运算符 2.转化原则 false: 0 0.0000 '' NaN null undefined true: 其他情况都转化为 true */ // 自动转化为布尔类型 // 转化为 false if( 0 ){ console.log(111); }else{ console.log(222); //输出222 } if( 0.000 ){ console.log(111); }else{ console.log(222); //输出222 } if( '' ){ console.log(111); }else{ console.log(222); //输出222 } if( NaN ){ console.log(111); }else{ console.log(222); //输出222 } if( null ){ console.log(111); }else{ console.log(222); //输出222 } if( undefined ){ console.log(111); }else{ console.log(222); //输出222 } // 转化为 true if( 0.00000001 ){ console.log(111); //输出111 }else{ console.log(222); } if( ' ' ){ console.log(111); //输出111 }else{ console.log(222); } </script>拓展----输入框 <script> /* window.prompt('提示信息') 也可直接写成：prompt('提示信息') 作用：通过弹出的输入框输入数据，输入的数据结果可以存储在变量中。 输入的所有数据都是以字符串形式存储，如果是数值数据，需要转化为对应的数值类型。 */ var res = window.prompt('请您输入数据'); console.log( res + 100 ); //假如输入500，会输出500100 </script>2.强制转化：程序员自己执行的转化
<script> /* 强制转化为布尔类型，使用JavaScript定义的函数方法 Boolean( 变量 / 表达式 ) 转化原则和自动转化原则完全相同 false : 0 0.000 '' null NaN undefined true : 其他情况都转化为true *不会改变变量中存储的原始数据 */ var a = 100 ; console.log( Boolean( a ) ); //强制将a转换成布尔类型，输出true console.log( a ); //输出100，并没有改变a中存储的原始数据 var b = null; console.log(Boolean(b)); //强制将a转换成布尔类型，输出false console.log(b); //输出null var c = 'dkfoqjfqojrqoqjrqqohr'; console.log(Boolean(c)); //输出true console.log(c); //输出dkfoqjfqojrqoqjrqqohr var d = dkfoqjfqojrqoqjrqqohr; console.log(Boolean(d)); //报错Uncaught ReferenceError: console.log(d); //dkfoqjfqojrqoqjrqqohr is not defined </script><script> /* 强制转化为字符串类型 1.String( 变量 / 表达式 ); 转化原则和自动转化原则完全相同 不会改变变量中存储的原始数据 2.变量.toString( 进制 ) ; 转化原则和自动转化原则完全相同 不会改变变量中存储的原始数据 如果是整数类型可以设定转化的进制 变量存储 null 或者 undefined */ var a = 100; console.log( String( a ) ); //输出黑色的100(黑色表示字符串类型) console.log( a ); //输出蓝色的100(蓝色表示数值类型) console.log( a.toString() ); //输出黑色的100 console.log( a.toString(8) ); //输出黑色的144(先被转化成八进制的数值，后又转换为字符串类型) console.log( a ); //输出黑色的100 // 变量中存储的数值是 null 或者 undefined时，变量.toString() 不支持 //报错Uncaught TypeError: Cannot read properties of undefined (reading 'toString') var b = undefined ; console.log( b.toString() ); //报错Uncaught TypeError: Cannot read properties of null (reading 'toString') var c = null ; console.log( c.toString() ); </script><script> /* 强制转化为数值类型 1.Number() 转化原则和自动转化完全相同 不会改变变量中存储的原始内容 2.parseInt() 从左侧起获取符合整数语法规范的内容部分 如果左起第一个字符就不符合整数语法规范，执行结果是 NaN 3.parseFloat() 从左侧起获取符合浮点数语法规范的内容部分 如果左起第一个字符就不符合浮点数语法规范，执行结果是 NaN */ // Number() console.log( Number( true ) ); //输出蓝色的1 console.log( Number( false ) ); //输出蓝色的0 console.log( Number( null ) ); //输出蓝色的0 console.log( Number( '' ) ); //输出蓝色的0 console.log( Number( ' ' ) ); //输出蓝色的0 console.log( Number( '100' ) ); //输出蓝色的100 console.log( Number( '100.123' ) ); //输出蓝色的100.123 console.log( Number( '2e3' ) ); //输出蓝色的2000 console.log( Number( undefined ) ); //输出蓝色的NaN console.log( Number( '100a' ) ); //输出蓝色的NaN console.log( Number( 'a100' ) ); //输出蓝色的NaN // parseInt() console.log( parseInt( true ) ); //输出蓝色的NaN console.log( parseInt( false ) ); //输出蓝色的NaN console.log( parseInt( null ) ); //输出蓝色的NaN console.log( parseInt( undefined ) ); //输出蓝色的NaN console.log( parseInt( '' ) ); //输出蓝色的NaN console.log( parseInt( ' ' ) ); //输出蓝色的NaN console.log( parseInt( 'a100' ) ); //输出蓝色的NaN console.log( parseInt( '100' ) ); //输出蓝色的100 console.log( parseInt( '100.123' ) ); //输出蓝色的100 // '2e3' 是字符串 parseInt() 直接获取整数部分(就是 2) console.log( parseInt( '2e3' ) ); //输出蓝色的2 // 2e3 是数值的语法规范,会先转化为对应的数值2000,再获取整数部分 console.log( parseInt( 2e3 ) ); //输出蓝色的2000 console.log( parseInt( '100a' ) ); //输出蓝色的100 // parseFloat() console.log( parseFloat( '2e3' ) ); //输出蓝色的2000 console.log( parseFloat( '100.123' ) ); //输出蓝色的100.123 </script>***强制转化为数值类型应用！！！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width: 100px; height: 200px; } </style> </head> <body> <div></div> <script> // 通过输入框输入数据转化为对应的数值类型，默认输入的数据以字符串类型存储 var res = window.prompt('请您输入数值'); console.log( res ); // 转化为数值类型方法1---使用 Number()方法强制转化为数值类型 var res = Number( window.prompt('请您输入数值') ) ; console.log( res ); // 转化为数值类型方法2---使用算数运算符自动转化 // 输入的数据就会自动转化为数值类型，执行 -0 运算 // 最终的效果就是输入的数据转化为数值类型 // 还可以使用-0、*1、/1。不可以使用 +0，用了+号就变成了字符串拼接 var res = window.prompt('请您输入数值') - 0 ; console.log( res ); var res = window.prompt('请您输入数值') * 0 ; console.log( res ) var res = window.prompt('请您输入数值') / 0 ; console.log( res ) // 获取css样式的属性值 const oDiv = document.querySelector('div'); // 获取的css样式，带有px单位，需要通过parseInt()获取整数部分，去掉px单位 var res = parseInt( window.getComputedStyle(oDiv).width ) ; console.log( res ); </script> </body> </html>
其他数据类型转成数值
-
Number(变量)可以把一个变量强制转换成数值类型
可以转换小数，会保留小数
可以转换布尔值
遇到不可转换的都会返回
NaN -
parseInt(变量)从第一位开始检查，是数字就转换，直到一个不是数字的内容
开头就不是数字，那么直接返回
NaN不认识小数点，只能保留整数
-
parseFloat(变量)从第一位开始检查，是数字就转换，直到一个不是数字的内容
开头就不是数字，那么直接返回
NaN认识一次小数点
-
除了加法以外的数学运算
运算符两边都是可运算数字才行
如果运算符任何一遍不是一个可运算数字，那么就会返回
NaN加法不可以用（涉及字符串拼接）
其他数据类型转成字符串
-
变量.toString()有一些数据类型不能使用
toString()方法，比如undefined和null -
String(变量)所有数据类型都可以
-
使用加法运算
在 JS 里面，
+由两个含义字符串拼接： 只要
+任意一边是字符串，就会进行字符串拼接加法运算：只有
+两边都是数字的时候，才会进行数学运算
其他数据类型转成布尔
-
Boolean(变量)在 js 中，只有
''、0、null、undefined、NaN，这些是false其余都是
true
运算符
- 就是在代码里面进行运算的时候使用的符号，不光只是数学运算，我们在
js里面还有很多的运算方式
数学运算符
-
+只有符号两边都是数字的时候才会进行加法运算
只要符号任意一边是字符串类型，就会进行字符串拼接
-
-会执行减法运算
会自动把两边都转换成数字进行运算
-
*会执行乘法运算
会自动把两边都转换成数字进行运算
-
/会执行除法运算
会自动把两边都转换成数字进行运算
-
%会执行取余运算
会自动把两边都转换成数字进行运算
<script> /* % 求模运算符，是两个数相除的余数 1.余数的符号和被除数(除号前面的数)相同 2.整除余数是0 */ // 余数的符号 和 被除数相同 console.log( 10 % 4 ) ; //输出2 console.log( 10 % -4 ) ; //输出2 console.log( -10 % 4 ) ; //输出-2 console.log( -10 % -4 ) ; //输出-2 // 输入一个数值，判断这个数值是 奇数还是偶数 // 偶数: 可以被2整除的数值， //可以被2整除，也就是除以2余数是0 // 也就是 % 2 结果是 0 // 也就是 和 0 全等判断 的结果是 true // 偶数的判断就是 数值 % 2 === 0 全等比较判断 的结果是 true // 通过输入框输入的数据，需要转化为数值类型 var res = Number( window.prompt('请您输入数据') ); // 判断res中存储的数值是不是偶数 if( res % 2 === 0 ){ // res除以2余数如果和0进行全等比较，结果是true，证明res是偶数 console.log( `${res} 是 偶数` ); }else{ // res除以2余数如果和0进行全等比较，结果是false，证明res是奇数 console.log( `${res} 是 奇数` ); } // 三元运算符 console.log( `${res} 是 ${ res % 2 === 0 ? '偶数' : '奇数' }` ); </script>
赋值运算符
-
=就是把
=右边的赋值给等号左边的变量名var num = 100就是把 100 赋值给 num 变量
那么 num 变量的值就是 100
-
+=在左侧变量储存原始数据的基础上，累加右侧表达式的执行结果，再将最终结果赋值给左侧变量储存。
var a = 10; a += 10; console.log(a); //=> 20 var b = 100 ; // b 存储原始数值100，在 100 的基础上累加右侧的执行结果200，最终的结果300赋值给左侧变量b存储 // 展开 b = b + (150+50) ; b += 150+50 ; console.log( b ); //=>300 /* 加号如果有字符串参与执行的是字符串拼接运算 += 符号，如果有字符串参与，执行的也是字符串拼接操作 */ var str = '北京' ; str += '上海' ; //str = str + '上海' ; console.log( str ); //=>北京上海 var str = '<div>' ; str += '我是div的内容'; str += '<span>我是span标签的内容</span>'; str += '</div>' ; console.log( str ); //=><div>我是div的内容<span>我是span标签的内容</span></div>a += 10等价于a = a + 10 -
-=var a = 10; a -= 10; console.log(a); //=> 0 var b = 100; // 展开 b = b - (100+100) ; b -= 100+100 ; console.log( b ); //=>-100a -= 10等价于a = a - 10 -
*=var a = 10; a *= 10; console.log(a); //=> 100 var c = 100; // 展开 c = c * (2+3) ; c *= 2+3 ; console.log( c ); //=> 500a *= 10等价于a = a * 10 -
/+var a = 10; a /= 10; console.log(a); //=> 1 var d = 100; // 展开 d = d / (2+3) ; d /= 2+3 ; console.log( d ); //=> 20a /= 10等价于a = a / 10 -
%=左侧变量储存的原始数值作为被除数，右侧表达式的执行结果(10)作为除数，将余数赋值给变量储存
var a = 10; a %= 10; console.log(a); //=> 0 var e = 100; // 展开 e = e % (2+3) ; e %= 2+3 ; console.log( e ); //=> 0a %= 10等价于a = a % 10
比较运算符
-
==- 比较符号两边的值是否相等，不管数据类型
1 == '1'两个的值是一样的，所以得到
true
- 比较符号两边的值是否相等，不管数据类型
-
===- 比较符号两边的值和数据类型是否都相等
1 === '1'两个值虽然一样，但是因为数据类型不一样，所以得到
false
- 比较符号两边的值和数据类型是否都相等
-
!=- 比较符号两边的值是否不等
1 != '1'因为两边的值是相等的，所以比较他们不等的时候得到
false
- 比较符号两边的值是否不等
-
!==- 比较符号两边的数据类型和值是否不等
1 !== '1'因为两边的数据类型确实不一样，所以得到
true
- 比较符号两边的数据类型和值是否不等
-
>=- 比较左边的值是否 大于或等于 右边的值
1 >= 1结果是true1 >= 0结果是true1 >= 2结果是false
- 比较左边的值是否 大于或等于 右边的值
-
<=- 比较左边的值是否 小于或等于 右边的值
1 <= 2结果是true1 <= 1结果是true1 <= 0结果是false
- 比较左边的值是否 小于或等于 右边的值
-
>- 比较左边的值是否 大于 右边的值
1 > 0结果是true1 > 1结果是false1 > 2结果是false
- 比较左边的值是否 大于 右边的值
-
<- 比较左边的值是否 小于 右边的值
1 < 2结果是true1 < 1结果是false1 < 0结果是false
- 比较左边的值是否 小于 右边的值
/*
1.比较运算符执行结果一定是布尔类型。
2.比较运算符只能执行一个比较判断的条件，多个比较判断的条件需要使用逻辑运算符。
== 等于判断，宽松比较
比较两个变量存储数据的数值，只比较数据，数据类型可以不同
JavaScript中的等于判断，所谓的'数据'判断依据比较混乱，实际项目中不要使用。
=== 全等判断，严格比较
比较两个变量储存的数据的数据类型和数值，数据类型和数值都相同才可以。
实际项目中要使用 === 全等判断
!= 不等判断
执行原理和 == 等于判断相同
执行结果和 == 等于判断相反，也就是如果 == 判断结果是true，那么 != 判断结果是false
!== 不全等判断
执行原理和 === 全等判断相同
执行结果和 === 全等判断相反，也就是如果===判断结果是true，那么!==判断结果是false
*/
console.log( 5 == 5 ); //=> true
console.log( 5 == '5' ); //=> true
// 数值5 和 字符串5，JavaScript判断数据都是5，等于判断结果是true。
console.log( 5 === '5' ); //=> false
// 数值5 和 字符串5 数据类型不同，全等判断结果是false。
逻辑运算符
-
&&逻辑与- 进行 且 的运算
符号左边必须为
true并且右边也是true，才会返回true只要有一边不是
true，那么就会返回falsetrue && true结果是truetrue && false结果是falsefalse && true结果是falsefalse && false结果是false
- 进行 且 的运算
-
||逻辑或- 进行 或 的运算
符号的左边为
true或者右边为true，都会返回true只有两边都是
false的时候才会返回falsetrue || true结果是truetrue || false结果是truefalse || true结果是truefalse || false结果是false
- 进行 或 的运算
-
!逻辑非- 进行 取反 运算
本身是
true的，会变成false本身是
false的，会变成true!true结果是false!false结果是true
- 进行 取反 运算
/*逻辑运算符一定是两个表达式的结果共同决定最终的结果
逻辑运算符如果两个表达式的最终结果不是布尔类型，会自动转化为布尔类型*/
/*
一、逻辑运算符的短路求值---计算机程序为了提高执行效率的一种执行方式。
逻辑与、逻辑或最终的结果应该是由两个表达式的结果来决定。如果第一个表达式已经可以决定整个逻辑运算符的最终结果，那么第二个表达式不会被触发执行。
1、逻辑与 第一个表达式如果是 false，那么第二个表达式的结果不管是true还是false，逻辑与的最终结果肯定是false，第二个表达式就不会触发执行。
2、逻辑或 第一个表达式如果是 true ，那么第二个表达式的结果不管是true还是false，逻辑或的最终结果肯定是 true，第二个表达式就不会触发执行。
总结:
逻辑与 第一个是 false 第二个不执行
逻辑或 第一个是 true 第二个不执行
*/
var a = 100 ;
var b = 200 ;
a > 10 && b++ > 10 ;
console.log( b ); //=> 201
// 第一个表达式结果是true，第一个表达式结果不能决定整个运算符的执行结果，第二个表达式 b++ > 10要执行，b就会自增1。
var c = 100 ;
var d = 200 ;
c < 10 && d++ > 10 ;
console.log( d ); //=> 200
// 第一个表达式结果是 false，第一个表达式结果已经可以决定整个逻辑运算符与的最终结果，第二个表达式 d++ > 10 不会执行，d 不会自增1。
var e = 100 ;
var f = 200 ;
e > 10 || f++ > 10
console.log( f ); //=> 200
// 第一个表达式结果是 true，可以决定整个逻辑或的结果是true，第二个表达式 f++ > 10 不会执行。
/*
二、逻辑运算符的赋值操作
var 变量 = 表达式1 && 表达式2 ;
逻辑与
表达式1可以转化为false，逻辑运算符最终的结果是表达式1的数值，也就是变量存储表达式1的数值。
表达式1可以转化为true，逻辑运算符最终的结果是表达式2的数值，也就是变量存储表达式2的数值。
var 变量 = 表达式1 || 表达式2 ;
逻辑或
表达式1可以转化为true，逻辑运算符最终的结果是表达式1的数值，也就是变量存储表达式1的数值。
表达式1可以转化为false逻辑运算符最终的结果是表达式2的数值，也就是变量存储表达式2的数值。
*/
// 逻辑与 第一个转化为true，存储第二个数值
var res1 = 100 && 200 ;
console.log( res1 ); //=> 200
// 逻辑与 第一个转化为false，存储第一个数值
var res2 = 0 && 200 ;
console.log( res2 ); //=> 0
// 逻辑或 第一个转化为true，存储第一个数值
var res3 = 100 || 200 ;
console.log( res3 ); //=> 100
// 逻辑或 第一个转化为false，存储第二个数值
var res4 = 0 || 200 ;
console.log( res4 ); //=> 200
/*
要求：通过输入框输入数据，如果res中存储的是''，证明res中没有输入数据，赋值默认值 '男'。
分析：如果用户不输入数据，res中存储''，会自动转换成false，根据逻辑或 的赋值操作，执行第二个表达式，给res赋值男。如果用户输入其他自动转换为true的数据，给变量res赋值用户输入的数据。
var res = window.prompt('请您输入性别');
res = res || '男' ;
console.log( res )
*/
//逻辑非
/*
数值范围是 1 - 99 之外
方法一：
数值 < 1 || 数值 > 99
方法二：
1-99之内的判断取反 就是 1-99 之外
!(数值 >= 1 && 数值 <= 99)
*/
自增自减运算符（一元运算符）
-
++-
进行自增运算
-
分成两种，前置++ 和 后置++
-
前置++，会先把值自动 +1，在返回
/*自增自减运算符++ -- 1.每次执行,变量存储的数值就会累加1或者累减1。 执行效果也就是变量+= 1或者变量-= 1 2.若变量存储的是其他数值，那么只要能转化为数值类型就可以执行 ++ -- 操作；不能转化为数值类型执行结果是NaN */ var a = 10; console.log(++a); // 会返回 11，并且把 a 的值变成 11 /* 3.不管是前置还是后置语法，变量都会累加1或者累减1。 4.如果不是单独执行自增自减，而是和程序一起执行。 前置语法 ++变量 --变量 a、先执行累加/累减操作 b、使用累加/累减之后，新的数值参与程序的执行 后置语法 变量++ 变量-- a、先获取变量中存储的原始数值，使用原始数值参与程序的执行 b、之后再执行累加/累减操作 */ // 独立执行没有区别 var a = 100 ; a++; var b = 100 ; ++b; console.log(a); //=> 101 console.log(b); //=> 101 // 和程序一起执行 //a 和 b 的值一定会累加1，一定是101。影响的是只是变量res1和res2中存储的数值。 var a = 100 ; var res1 = a++; console.log(a); console.log(res1); // 后置语法先获取变量a存储的原始数值100参与程序的执行，也就是res1赋值存储的是变量a的原始数值100，赋值之后再执行累加操作，a变成101。 var b = 100 ; var res2 = ++b; console.log(b); console.log(res2); // 前置语法先执行累加操作,累加之后b是101，使用新的数值101参与程序的执行，也就是将新的数值101赋值给变量res2存储。 -
后置++，会先把值返回，在自动+1
var a = 10; console.log(a++); // 会返回 10，然后把 a 的值变成 11
-
-
--- 进行自减运算
- 分成两种，前置– 和 后置–
- 和
++运算符道理一样
3.应用
var a = 100;
var b = 100 + a++;
console.log( a , b ); //=> 101 200
// a++是后置语法，使用原始值100参与程序运算，也就是b=100 + a++; 就是100 + 100，b也就是200。
// a原始值是100，执行了一次a的累加操作，a一定会变成101。
var a = 100 ;
var b = ++a + 100 ;
console.log( a , b ); //=> 101 201
// ++a是前置语法，使用累加之后的数值101参与程序运算，b = ++a + 100; 也就是 101 + 100，结果是201。
// a原始值是100，累加1次一定是101。
var a = 0 ;
var b = ++a + a++ ;
console.log( a ) ; //=> 2
console.log( b ) ; //=> 2
// ++a原始值是0，前置使用新的数值1参与运算，a++原始值是1，后置使用原始值1参与运算，b = ++a + a++ 也就是 1 + 1 结果是 2 。
var a = 0 ;
var b = ++a + a++ + ++a + a++ ;
console.log( a ); //=> 4
console.log( b ); //=> 8
/*
原始值 0 1 2 3
前/后 前 后 前 后
参与 1 1 3 3
公式 1 + 1 + 3 + 3
结果 1 2 3 4
*/
三元运算符/三目运算符
表达式 ? 程序1 : 程序2 ;
表达式结果是 true，执行程序1
表达式结果是 false，执行程序2
程序执行的逻辑和简单的if…else是相同的
<script>
// if语句
if( true ){
console.log(111);
}else{
console.log(222);
}
// 三元运算符 语法1 执行程序
true ? console.log(111) : console.log(222) ;
// 三元运算符 语法2 赋值操作
// 如果 表达式 是 true，给 变量 赋值 100
// 如果 表达式 是 false，给 变量 赋值 200
var a = true ? 100 : 200 ;
var b = false ? 100 : 200 ;
console.log( a ); //输出蓝色的100
console.log( b ); //输出蓝色的200
// 三元运算符 语法3 模板字符串解析
// 表达式 为 true ${} 解析三元运算符的执行结果是 10
// 表达式 为 false ${} 解析三元运算符的执行结果是 20
console.log( `北京今天的天气是 ${ true ? 10 : 20 } ℃` ); //=>北京今天的天气是 10 ℃
console.log( `北京今天的天气是 ${ false ? 10 : 20 } ℃` ); //=>北京今天的天气是 20 ℃
</script>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
