JavaScript 温故而知新（一）语法

文章目录

javaScript的组成
在HTML中使用JavaScript
JavaScript的注释与分号
JAVAScript的语法
JAVAScript的标识符
JAVAScript的变量
JavaScript的数据类型
操作符 typeof
undefined 数据类型
null数据类型
Number数据类型
isNaN()方法
数值转换
String类型
String字符串的转换
Boolean 布尔类型
类型转换
表达式
操作符的分类
算数操作符
递增和递减
赋值操作符
比较操作符
三元操作符
JavaScript逻辑操作符

最近听到一句话本人小狮觉得很有道理：
"把js学好才是硬道理！不要老是想着学各种框架，框架的本身都离不开JavaScript。
"所以就好好的温故而知新吧~

javaScript的组成

完整的javaScript是由ECMAScript(语法)+Browser Objects(DOM、BOM)（特性）组成的。

ECMAScript(语法) ，是核心语言的功能；
DOM ，是提供访问和操作网页内容的方法和接口；
BOM ，是提供与浏览器交互的方法和接口；

在HTML中使用JavaScript

\\可以在head或者body中使用<script>嵌入Javascript脚本。

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>引入JS</title><!--head标签中嵌入脚本js--><script></script>
</head>
<body><!--body标签中引入外部脚本js--><script src="js文件"></script>
</body>
</html>

JavaScript的注释与分号

// 单行注释
/* */ 多行注释
语句结束使用分号，如果省略，则由解析器确定语句的结尾添加分号。（建议语句结束后主动加分号）

JAVAScript的语法

变量、函数名和操作符都区分大小写。

JAVAScript的标识符

标识符：变量、函数、属性的名字，或者函数的参数。

标识符的命名规则：

由字母、数字、下划线（_）或美元符号（$）组成。
不能以数字开头。
不能使用关键字、保留字等作为标识符。

JAVAScript的变量

变量是松散类型的。
松散类型：可以用来保存任何类型的数据。
每个变量是一个用于保存的值的占位符。
变量使用驼峰命名。（两个英文单词，第二个单词的首字母大写。例如isName）

变量声明：

要使用var操作符。
语法：var 变量名。

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>变量的声明</title>
</head>
<body><script>//声明保存用户名的变量var name;</script>
</body>
</html>

变量赋值：

声明的同时赋值：var 变量名=值
先声明后赋值：变量名=值

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>变量赋值</title>
</head>
<body><script>//声明保存用户名的变量var name;//变量赋值name = "marry";//声明保存年龄的变量var age = 18; //声明的同时赋值//声明保存邮箱的变量并赋值var email = "marry@Sina.com.cn"</script>
</body>
</html>

一次声明多个变量，用逗号隔开。

var id,sex,age,name="marry";

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>一次声明多个变量</title>
</head>
<body><script>//有的变量在声明的时候就赋值了，有的并没有赋值var name = "marry", age = 18, email = "marry@Sina.com.cn", address;</script>
</body>
</html>

说明：
省略var声明的变量是全局变量。
不推荐省略var操作符来定义全局变量。

JavaScript的数据类型

简单数据类型（也称基本数据类型）

Undefined（未定义）
Null（空）
Boolean（布尔）
Number（数字）
String（字符串）

复杂数据类型（ECMAScript6新增了symbol数据类型）

Object（）

操作符 typeof

功能：检测变量（参数）类型 (变量本身没有类型，变量的类型取决于变量的值)。
语法：typeof 变量或 typeof(变量)。
返回值：string类型，有可能是：string、number、boolean、object、undefined、function。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script>var name = "marry", age = 18, email = "marry@Sina.com.cn", address;console.log(name); //在控制台中打印变量name的值</script>
</body>
</html>

两种写法：
console.log(typeof name); \\ 检测 name变量是什么类型
console.log(typeof (age));  \\ 检测 age变量是什么类型

undefined 数据类型

defined 定义。
undefined 没有定义。
undefined 类型只有一个值，即特殊的undefined。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script>var name = "marry", age = 18, email = "marry@Sina.com.cn", address;console.log(typeof (address)); //打印只声明 未赋值的address变量</script>
</body>
</html>

说明：当声明一个变量并没有跟它赋值，这个变量的类型就是undefined未定义。

null数据类型

null值表示一个空对象指针。
如果定义的变量准备在将来用于保存对象，那么最好将变量初始化为null而不是其他值。

var settings = null； // 变量settings 保存一个空对象

说明：undefined值是派生自null值的，所以undefined == null 的返回结果是true。

Number数据类型

Number：表示整数和浮点数。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script>var name = "marry", age = 18, email = "marry@Sina.com.cn", address;var distance = 12.67980;console.log(typeof (age)); //打印age是number类型的整数console.log(typeof(distance)); //打印distance是number类型的浮点数</script>
</body>
</html>

NaN：即非数值（Not a Number）是一个特殊数值。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script>var name = "marry", age = 18, email = "marry@Sina.com.cn", address;var distance = 12.67980;console.log(age - "abc"); // number - string = nan 非数字类型</script>
</body>
</html>

说明：
任何涉及NaN的操作（例如NaN/10）都会返回NaN。
NaN与任何值都不相等，包括NaN本身。

isNaN()方法

语法：isNaN(参数n)。
功能：检测参数n是否是" 非数值 "。
返回值：boolean类型。（真或假）。
参数：参数n可以是任何类型。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script>var name = "marry", age = 18, email = "marry@Sina.com.cn", address;var distance = 12.67980;console.log(isNaN(age)); // 检测age是不是非数值类型 age是数值类型 所以falseconsole.log(isNaN(email)); //检测email是不是非数值类型 email是非数值类型 所以true</script>
</body>
</html>

var id = " 16 "; // 加了" "的数字都是是string类型 不是number类型
console.log(isNaN(id)); // 首先是true是非数值型， 但是isNoN()这个方法会先尝试转成数值型， id = " 16 " 可以转成数值型， 所以是false

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>数据类型之NaN</title>
</head>
<body><script>var a = null;var b = 10;var c = "我是字符串";var d = "10";var e;console.log(isNaN(a)); //false 是数值类型 numberconsole.log(isNaN(b)); //false 是数值类型 numberconsole.log(isNaN(c)); //true 是非数值类型 NaNconsole.log(isNaN(d)); //false 是数值类型 numberconsole.log(isNaN(e)); //true 是非数值类型 NaN</script>
</body>
</html>

说明：
isNaN()对接收的数值，先尝试转为数值，再检查是否为非数值。

数值转换

有3个函数可以把非数值转换为数值：

Number()方法是将值强制转成数值类型。
parseInt()方法是将值转成整型。
- 会忽略字符串前面的空格，直至找到第一个非空格字符。（必须是以数字开头才可以转，否者非数字开头返回的就是NaN非数值类型）。
- 说明：
- parseInt()：转换空字符串返回NaN。
- parseInt()：提供第二个参数：转换时使用的基数（多少进制）。
parseFloat() 是将值转成浮点数。可以是整数也可以是浮点数（小数）。
- 从第一个字符开始解析每个字符，直至遇见一个无效的浮点数为止。（但是只会拿第一个小数点的值，第二个小数点的省略）。
- 说明：
- 除了第一个小数点有效外，parseFloat()与parseInt()的第二个区别在于它始终都会忽略前导的零。
- 如果字符串中包含有效的十六进制格式，parseInt(" 0xf “)将” 0xf “转换为相同大小的十进制数值，而parseFloat(” 0xf ")只会输出0。

var id = " 16 "；
console.log(typeof (id) ); // srting
id = Number(id);
console.log(typeof (id) ); // number

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>parseInt</title>
</head>
<body><script>var topval = "28px";console.log(topval - 10); //返回的是NAN 非数值类型//这个时候就要28px转成数值类型var topval = parseInt("28px"); //parseInt 是整型 将topval转成整型 console.log(topval); // 返回28console.log(topval - 10); //返回10</script>
</body>
</html>

console.log(parseInt(" 0xf ")); // 返回是15，因为把0xf，转换成16进制了

var c = "abc58";
console.log(parseInt(c)); //parseInt()方法必须是以数字开头才可以转 否则返回NaN

var d = parseFloat("12.34px");
console.log(d); //返回的是12.34

var d = parseInt("12.34px");
console.log(d); //返回的是12

var d = parseFloat("12.34.56px");
console.log(d); //返回的是12.34 第二个小数点不会被截取出来

var e = parseInt("0123");
console.log(e); //返回的是123, 0去掉了，因为0123不是一个有效的数字

var e = parseFloat("0123");
console.log(e); //返回的是123, 0去掉了，因为0123不是一个有效的数字

var e = parseFloat("0.123abc");
console.log(e); //返回的是0.123

说明：
Number()可以用于任何数据类型。
parseInt()和parseFloat()则专门用于把字符串转换成数据类型。

String类型

用于表示由0或多个16位Unicode字符组成的字符序列，即字符串。
字符串可以由双引号（" "）或单引号（’ '）表示。

var name = " liling "
这里的liling就是字符串，所以要用引号引起来。

String字符串的转换

语法：str.toString()。
功能：将str转换为字符串。要转换谁就写在前面.toString()。
返回值：str的一个副本。
参数：str是要转换的内容，可以是数值、布尔值、对象和字符串。

说明：在不知道要转换的值是不是null或undefined的情况下，还可以使用String()函数，它能够将任何类型的值转换为字符串。

     var ids = 78965;var idstr = ids.toString(); //将数字类型转换成字符串console.log(idstr); console.log(typeof(idstr));

     var ids = 78965;console.log(String(ids)); //可以直接用String()转成字符串

Boolean 布尔类型

用于表示真假的类型，即true表示真，false表示假。

    var isStudent = true;var isChild = false;//打印出来都是布尔类型console.log(typeof (isStudent));console.log(typeof (isChild));

布尔类型也可以转成字符串：

    var isChild = false;console.log(isChild.toString());

类型转换

1、除0之外的所有数字，转换为布尔型都为true。
2、除" "之外的所有字符，转换为布尔型都为true。
3、null和undefined转换为布尔型为false。

    var x = 1; //变量x 是number类型console.log(Boolean(x)); //转成布尔类型Boolean() 结果为true

表达式

将同类型的数据（如常量、变量、函数等），用运算符号按一定的规则连接起来的，有意义的式子称为表达式。

操作符的分类

1、算数操作符
2、逻辑操作符
3、赋值操作符
4、比较操作符
5、三元操作符

算数操作符

+：加
-：减
*：乘
/：除
%：取余
算数运算符最后的返回结果都是number类型

     var num1 = 10,num2 = 20;console.log(num1 + num2); //结果是10+20=30console.log(num2 - num1); //结果是20-10=10console.log(num1 / num2); //结果是10/20=0.5

var num1 = 10,num2 = "5"; //string类型console.log(num1 + num2); //结果是15 这里浏览器自动把“5” 转成 5,隐式类型转换

递增和递减

1、递增
++a 与a++都是对a进行递增的操作
区别：
++a先返回递增之后的a的值
a++先返回a的原值，再返回递增之后的值

2、递减同理

     var num1 = 10,num2 = 5;num3 = ++num1 + num2; //++num1 num1=num1+1console.log(num1); // 11console.log(num3); // 11 + 5 =16

     var num1 = 10,num2 = 5;num3 = num1++ - num2; //num1的原值 num1=10console.log(num1); // 原值num1 + 1 = 11console.log(num3); // 原值num1 10-5 = 5，++后就先拿原值运算

     var x1 = 20,x2 = 30;x3 = --x1 + x2--; console.log(x1); // 19 console.log(x2); // 29console.log(x3); // 19 + 30 = 49

赋值操作符

1、简单赋值：=
2、复合赋值：+=、-=、*=、/=、%=

     var a = 10;var b = 20;var str = "hello"a+=5   //a = a+5;b%=4; //b = b%4str = str+"World" // 如果是其中一个是string相加那+号就是拼接//str+="world"console.log(str); //helloworld

比较操作符

大于  >
小于  <
大于等于 >=
小于等于 <=
相等 == ，只比较值是否相等
全等 ===，比较值的同时比较数据类型是否相等
不相等 !=，比较值是否不相等
不全等 !==，比较值的同时比较数据类型是否不相等

返回值：boolean型

     var x = 10;var y = "10";var z=x==y;//== 判断值是否相等console.log(z);//打印返回true 说明值相等

     var x = 10;var y = "10";var z=x===y;//== 判断是否全等（值要相等、数据类型要相同）console.log(z);//打印返回false 说明不是全等，值是相等的，但是数据类型不相同。

     var y = "10";var m = 15;var n = y!=m; //判断y不等于m console.log(n); //返回值true 说明y!=m 判断值不相同

     var x = 10;var y = "10";var n = x!=y; //判断x不等于y,!=只比较了值,没有比较数据类型console.log(n); //返回值true 说明y!=m 的值不相同

     var x = 10; //number类型var y = "10"; //string类型var n = x!==y; //判断x是不是全等于y,!==比较值和数据类型console.log(n); //返回值true 说明y!==m 的值不相同,数据类型也不相同

console.log(null === undefined); //返回的是false 是完全不相同的类型,null是空,undefined是未定义

三元操作符

语法：
条件？执行代码1：执行代码2
说明：
可代替简单的if语句，
如果条件成立，执行代码1，否则执行代码2

     var soce=85; //变量成绩var result=(soce>=60) ? "及格" : "不及格" //判断成绩如果大于等于60就是返回及格,否则就是不及格console.log(result);//返回的值是及格

JavaScript逻辑操作符

逻辑操作符：
&&：与/并且（只要有一个条件不成立，返回false；所有的条件都是true，返回的就是true。）

    var num1 = 10,num2 = 20,num3 = 30,str = "welcome",bool = true,n = null,m;//所以的比较运算符 返回的都是Boolean布尔值//num1<num2 true,num2<num3 true,所有&&并且成立,返回也是trueconsole.log(num1<num2 && num2<num3); //num1<num2 true,num2==num3 false,所以&&并且不成立,返回也是falseconsole.log(num1<num2 && num2==num3); //num2<num3 true, num3>num1 true,bool==true,所以&&并且成立，返回也是trueconsole.log(num2<num3 && num3>num1 && bool); //因为n是null,所以返回也是nullconsole.log(n && num3);//因为33*“abd”为NaN,所以返回是NaNconsole.log(33*"abc" && num3);//因为m声明了但是未定义,所以返回的是undefinedconsole.log(m && true);

说明：在有一个操作数不是布尔值的情况，逻辑与操作就不一定返回值，此时它遵循下列规则：
① 如果第一个操作数隐式类型转换后为true,则返回第二个操作数。
② 如果第一个操作数隐式类型转换后为false，则返回第一个操作数。
③ 如果有一个操作数是null，则返回null。
④ 如果有一个操作数是NaN，则返回NaN。
⑤ 如果有一个操作数是undefined，则返回undefined。

|| 或（只要有一个条件成立，返回true）

     //逻辑或|| 只要有一个条件成立 就返回true//55>88 是false//33<66 是true//所以返回的是trueconsole.log(55>88 || 33<66);//55!="55" 是false//88==“88” 是true//所以返回的是trueconsole.log(55!="55" || 88=="88");//55!="55" 是false//88==="88" 是false//所以返回的是falseconsole.log(55!="55" || 88==="88");//如果操作数不是布尔值就是true //就返回第一个值helloconsole.log("hello" ||0);//如果操作数不是布尔值就是true //就返回第一个值99console.log(99 || 0 || "abc");//因为第一个操作数为空就是 false//所以就会去找下一个88为true//返回就是88console.log("" || 88 ||true);//因为第一个操作数为空就是false//操作数0也是false//所以再找下一个“abc”为true//返回的就是abcconsole.log("" || 0 || "abc");//第一个操作数为0,false//第二个操作数为空,false//第三个操作数为null,返回nullconsole.log(0 || "" || null);

说明：在有一个操作数不是布尔值的情况，逻辑或操作就不一定返回布尔值，此时它遵循下列规则：
① 如果第一个操作数隐式类型转换后为true，则返回第一个操作数。
② 如果第一个操作数隐式类型转换后为false，则返回第二个操作数。
③ 如果两个操作数是null，则返回null。
④ 如果两个操作数是NaN，则返回NaN。
⑤ 如果两个操作数是undefind，则返回undefined。

！非

    console.log(!false); //trueconsole.log(!88); //falseconsole.log(!0); //trueconsole.log(!"red"); //false//false,两个非取反:空是false,非空就是true,非true就是false。console.log(!!"");//true,两个非取反:"blue"是true,非true就是false,非false就是true。console.log(!!"blue");

说明：
1、无论操作数是什么数据类型，逻辑非都会返回一个布尔值。
2、！！同时使用两个逻辑非操作符时：
2-1、第一个逻辑非操作会基于无论什么操作数返回一个布尔值；
2-2、第二个逻辑非则对该布尔值求反；