完整的 JavaScript 是由 ECMAScript(语法)、Browser Objects(DOM、BOM)(特性)组成的。
JavaScript 的组成. jpg
单行://
多行:/**/
语句结束使用分号,如果省略,则由解析器确定语句的结尾
2. 标识符注:ECMAScript 中的一切(变量、函数和操作符)都区分大小写
变量、函数、属性的名字或者函数的参数即标识符
命名规则:
(1) 由字母、数字、下划线(_)或美元符号($)组成
(2) 不能以数字开头
(3) 不能使用关键字、保留字等作为标识符。
3. 变量ECMAScript 的变量是松散类型
松散类型:可以用来保存任何类型的数据
换句话说,每个变量仅仅是一个用于保存值的占位符而已。
1. 变量声明:
变量的声明要使用 var 操作符,
语法:var 变量名
2. 变量赋值:
声明的同时赋值:var 变量名 = 值
先声明后赋值: 变量名 = 值
一次声明多个变量,用逗号隔开,如:var id,sex,age,name="marry"; 省略 var 声明的变量是全局变量 不推荐省略 var 操作符来定义全局变量
4.JavaScript 数据类型
- <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>
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
5. 数值转换
- 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
有 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
将同类型的数据(如常量、变量、函数等),用运算符号按一定的规则连接起来的、有意义的式子称为表达式。
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);//及格
来源: http://www.jianshu.com/p/9d402df36ab9