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>
标签的底部,以尽量减少对整个页面下载的影响。
- 浏览器对html页面内容的加载是顺序加载,也就是在html页面中前面先加载。当浏览器加载html文件并解析到
-
-
引入外部脚本文件
- 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
- 可以向HTML输出流中插入你传入的内容,浏览器会按着HTML元素依次顺序依次解析它们,并显示出来。
<!DOCTYPE html> <html> <body> <script> document.write(‘从出生那年就飘着‘); </script> </body> </html>
- 需要注意的是,如果在文档加载完成后(即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));