JavaScript语法

JavaScript语法

一、JavaScript的组成

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

JavaScript的组成.jpg

二、javaScript的语法规则

1.注释：

单行：//
多行：/**/
语句结束使用分号，如果省略，则由解析器确定语句的结尾

注：ECMAScript中的一切（变量、函数和操作符）都区分大小写

2.标识符

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

命名规则：
(1)由字母、数字、下划线（_）或美元符号（$）组成
(2)不能以数字开头
(3)不能使用关键字、保留字等作为标识符。

3.变量
ECMAScript的变量是松散类型
松散类型：可以用来保存任何类型的数据
换句话说，每个变量仅仅是一个用于保存值的占位符而已。
1.变量声明：
变量的声明要使用var操作符，
语法：var 变量名

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

一次声明多个变量，用逗号隔开，如：var id,sex,age,name=“marry”;
省略var声明的变量是全局变量
不推荐省略var操作符来定义全局变量

<script>
    //声明保存用户名的变量
    var name;
    name="marry";
    //声明保存年龄的变量
    var age = 18;
    //声明保存邮箱的变量
    var email="marry@sina.com.cn";
    //一次声明多个变量
    var name_1="tom",age1=19,email1="tom@sohu.com",address;
</script>

4.JavaScript数据类型

ECMAScript中有5种简单数据类型（也称为基本数据类型）：
Undefined、Null、Boolean、Number和String。
还有1种复杂数据类型：Object。

JavaScript数据类型.jpg typeof.jpg

<script>
    //声明保存用户名的变量
    var name;
    name="marry";
    //声明保存年龄的变量
    var age = 18;
    //声明保存邮箱的变量
    var email="marry@sina.com.cn";
    //一次声明多个变量
    var name_1="tom",age1=19,email1="tom@sohu.com",address;
    console.log(name)
    console.log(age)
    console.log(typeof name) //string
    console.log(typeof(age)) //number
</script>

(1)undefined
undefined类型只有一个值，即特殊的undefined。

说明：一般而言，不存在需要显式地把一个变量设置为undefined值的情况。

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

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

(3)Number
Number：表示整数和浮点数
NaN：即非数值（Not a Number）是一个特殊的数值

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

var age = 18;
console.log(age-3); //15
console.log(age-"abc") //NaN
console.log(typeof(age-"abc"));//number

isNaN():
语法：isNaN(n)
功能：检测n是否是“非数值”
返回值：boolean
参数：参数n可以是任何类型
说明：isNaN()在接收到一个值之后，会尝试将这个值转换为数值。
某些不是数值的值会直接转换为数值。

var age = 18;
var email="marry@sina.com.cn";
var id = "16";
console.log(isNaN(age));//false
console.log(isNaN(email));//true
console.log(isNaN(id));//false

(4)String
String类型用于表示由零或多个16位Unicode字符组成的字符序列，即字符串。字符串可以由双引号（”）或单引号（’）表示。

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

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

var ids = 78965;
var idstr = ids.toString();
console.log(typeof idstr) //string 78965
console.log(String(ids)); //78965

var m;
console.log(String(m));//不清楚m为什么类型，尽量使用String();

(5)Boolean
用于表示真假的类型，即true表示真，false表示假

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

var isStudent=true;
var isChild=false;
console.log(typeof isStudent);//boolean

console.log(isChild.toString());//false 此时的false是一个字符串

var x=1;
console.log(Boolean(x));//true
var y=12343
console.log(Boolean(y));//true
var z=0;
console.log(Boolean(z));//false

var strings="welcome";
console.log(Boolean(strings));//true

var strings1="";
console.log(Boolean(strings1));//false

var strings2=" ";
console.log(Boolean(strings2));//true

var h;
console.log(Boolean(h));//false

var timer=null
console.log(Boolean(timer));//false

5.数值转换
有3个函数可以把非数值转换为数值：Number()、parseInt()和
parseFloat()。
其中Number()可以用于任何数据类型，而parseInt()和parseFloat()则专门用于把字符串转换成数值。

(1)parseInt()：会忽略字符串前面的空格，直至找到第一个非空格字符。

说明：
1、parseInt()：转换空字符串返回NaN。
2、parseInt()这个函数提供第二个参数：转换时使用的基数(即多少进制)

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

var name="tom"
name = Number(name);
console.log(name);//NaN

// var topVal="28px";
var topVal=parseInt("28px");
console.log(topVal);//28

var c="abc58"; //非数字开头
console.log(parseInt(c));//NaN  parseInt转换的必须以数字开头

console.log(parseInt("0xf"));//15  把0xf转化为16进制

(2)parseFloat：从第一个字符开始解析每个字符，直至遇见一个无效的浮点数字符为止

说明：
除了第一个小数点有效外，parseFloat()与parseInt()的第二个区别在于它始终都会忽略前导的零。

var a = parseFloat("12.34px");
console.log(a);//12.34

var b = parseInt("12.34px");
console.log(b) //12

var c = parseFloat("12.34.56px");
console.log(c);//12.34 第二个小数点会忽略

var e = parseInt("0123");
console.log(e);//123

var f = parseFloat("0123");
console.log(f);//123

var g = parseFloat("0.123abc");
console.log(g);//0.123

三、JavaScript操作符

1.表达式

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

2.JavaScript操作符分类

1、算数操作符

+ ：加
- ：减
* ：乘
/ ：除
%：取余

递增和递减
(1)递增
++a与a++都是对a进行递增的操作
区别：
++a先返回递增之后的a的值
a++先返回a的原值，再返回递增之后的值
(2)递减同理

var num1=10,num2="abc";
console.log(num1*num2); //NaN

var num1=10,num2="5";
console.log(num1*num2); //50 隐式类型转换


var a=10,b=5,
    c=++a+b;
console.log(a);//11
console.log(c);//16

var a=10,b=5,
    c=a++-b;
console.log(a);//11
console.log(c);//5

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

2、逻辑操作符
逻辑操作符：
①&&：与
&& 与 （只要有一个条件不成立，返回false）

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

var num1=10,
    num2=20,
    num3=30,
    str="welcome",
    bool=true,
    n=null,
    m;
console.log(num1<num2 && num2<num3);//true
console.log(num1<num2 && num2==num3);//false
console.log(num1<num2 && num3>num1 && false);//false

console.log(str && num3);//30
console.log(80 && 50);//50
console.log("hello" && 65 && "abc");//abc 多个时返回最后一个操作数的值

console.log(0 && 88);//0
console.log("" && 0 && 30>20);//空

console.log(n && num3);//null  操作数中只要有一个是null 结果就是null
console.log(33*"abc" && 55);//NaN
console.log(m && true); //undefined

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

说明：在有一个操作数不是布尔值的情况，逻辑与操作就不一定返回
值，此时它遵循下列规则：
1、如果第一个操作数隐式类型转换后为true，则返回第一个操作数
2、如果第一个操作数隐式类型转换后为false，则返回第二个操作数
3、如果两个操作数是null，则返回null
4、如果两个操作数是NaN，则返回NaN
5、如果两个操作数是undefined，则返回undefined

console.log(55>88 || 33<66);//true
console.log(55!="55" || 88==="88");//false
console.log("hello" || 0);//hello
console.log(99 || 0 || "abc");//99
console.log("" || 88 || true);//88
console.log("" || 0 || "abc");//abc
console.log("" || 0 || null);//null
console.log("" || 0 || null || "hello");//hello
var m;
console.log(m || NaN);//NaN
console.log(m || NaN || 99);//99
console.log("" || m);//undefined
console.log(30*"abc" || 55-"def");//NaN

③！：非
! 非

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

console.log(!false);//true
console.log(!88);//false
console.log(!0);//true
console.log(!"red");//false
console.log(!NaN);//true
console.log(!null);//true

console.log(!!"");//false
console.log(!!"blue");//true

3、赋值操作符
简单赋值：=
复合赋值：+=、-=、*=、/=、%=

var a=10;
var b=20;
a+=5;
b%=4;
console.log(a);//15
console.log(b);//0

var str="hello ";
str+="world"//连接符 str=str+"world";
console.log(str); //hello world

4、比较操作符

>、<、>=、<=、==、===、!=、！==
==：相等，只比较值是否相等
===：相等，比较值的同时比较数据类型是否相等
！=：不相等，比较值是否不相等
！==：不相等，比较值的同时比较数据类型是否不相等
返回值：boolean型

例：

var x=10,
    y="10",
    c=x==y;//值是否相等
console.log(c);//true

z=x===y;//全等
console.log(z);//false

var m=15,
    n=y!=m;
console.log(n);//true
k=x!=y;
console.log(k);//false
j=x!==y;
console.log(j);//true

console.log(null==undefined);//true
console.log(null===undefined);//false

5、三元操作符
语法：
条件 ? 执行代码1：执行代码2

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

var score=85;
var result=(score>=60)?"及格":"不及格";
console.log(result);//及格