JavaScript基础语法01

一、js组成

ECMAscript：语法规范，如何定义变量，数据类型有哪些；
DOM：Document Object Model ：文档对象模型；
BOM：Browser Object Model：浏览器对象模型。

注：引号规定 => 外双内单

二、变量

1.外链引用css和js

css:<link rel="stylesheet" href="demo.css">
js:<script src="demo.js">

2.变量命名规范

变量以字母，数字，下划线，$组成。（但不能以数字开头）
驼峰命名法：第一个单词首字母小写，其他单词首字母大写。

3.变量交换

var a=10 , b=20;
3.1 借助第三方变量：temp=a ; a=b ; b=temp;
3.2 用于数字交换：a=a+b ; b=a-b ; a=a-b;

4.基本数据类型

number , string , boolean , null , undefined ;

5.typeof 变量名获取数据类型

获取变量的数据类型：typeof (变量 ) 或 typeof 变量名 ----- 推荐使用；
注：用typeof 返回null得到的是object类型；

---

---

test：
undefined和一个数字进行相加计算，结果是NaN；
undefined和一个字符串进行相加计算，结果是undefined和字符串的拼接；

var num;
console.log(num);		//undefined
console.log(num + 10);	//NaN
console.log(num + "String");	//undefinedString

var age;
console.log(age + 'string');//undefinedstring
console.log(age + '10');//undefined10
console.log(age + true);//NaN
console.log(age + false);//NaN
console.log(age + null);//NaN
console.log(age + undefined);//NaN

总结：undefined 与 五种数据类型进行"+"，除了string进行拼接，其他都为NaN。

---

不要拿小数和小数相加得到的结果去验证小数：

var x = 0.1;
var y = 0.2;
var sum = x + y;
console.log(sum);//0.3000000004
console.log(sum == 0.3);//false
console.log(0.3 == 0.3);//true

不要拿NaN验证是否是NaN：

var age;
console.log(age + 10 == NaN);//false
console.log(age + 10 == age + 10);//false
console.log(NaN == NaN);//false

三、数据类型

NaN:not a number 不是一个数字
is NaN：是，不是一个数字

<script>
    var number;
    document.write(isNaN(number));//true
    document.write(isNaN(10));//false
</script>

转义字符：
\t：tab键，制表位
\n：换行
\ ： 转实际意义

var str1="我还想再活\"五百年\"";
var str2="我在\"中职通\'挖矿\'\"";
console.log(str1);//我还想再活“五百年”
console.log(str2);//我在“中职通‘挖矿’”

拼接：
两边数字，相加做算术运算；
两边字符串，进行拼接；
规律：字符相连，数值相加

注：“ + ”进行拼接，“-” “ * ” “%” “/” 会进行隐式转换，自动把字符串转为数字类型

var a=10;
var b="5";
console.log(a-b);//输出结果：5

数据类型转换：
parseInt() 从左到右依次进行转换，且只转换整数，遇到字母即停止，已转换好的则返回，若第一位不是数字则返回NaN；

parseFloat() 从左到右依次进行转换，可转换成小数，遇到字母即停止，已转换好的则返回，若第一位不是数字则返回NaN；
若paseFloat() 出现两个小数点，则第二个小数点及其后面的数据将被舍弃；
parseFloat() 不能使用八进制和十六进制，否则其前导0被舍弃；
若小数点后面全为0，则输出时，小数点及其后面的0被舍弃；

console.log(parseInt("10"));//10
console.log(parseInt("10.99"));//10
console.log(parseInt("dbcusdbc"));//NaN
console.log(parseInt("10mclkds"));//10
console.log(parseInt("10.99dsedn"));//10

console.log(parseFloat("10"));//10
console.log(parseFloat("10.99"));//10.99
console.log(parseFloat("dbcusdbc"));//NaN
console.log(parseFloat("10mclkds"));//10
console.log(parseFloat("bfs10sfwn"));//NaN
console.log(parseFloat("10.99dsedn"));//10.99

console.log(parseFloat("10"));//10
console.log(parseFloat("10.5.6"));//10.5
console.log(parseFloat("0806"));//806
console.log(parseFloat("10.00"));//10

Number() 把对象的值转换为数字，若有其他类型则返回NaN；（对象必须先定义，Number ( ) 括号内为对象名）

var test1 = new Boolean(true);
var test2 = new Boolean(false);
var test3 = new Date();
var test4 = new String("999");
var test5 = new String("999 666");
console.log(Number(test1));//1
console.log(Number(test2));//0
console.log(Number(test3));//返回1970.1.1至今的毫秒数
console.log(Number(test4));//999
console.log(Number(test5));//NaN

其他类型转换为字符串：
.toString()
String()
区别：前者不能转换null和undefined，而后者可以。

var a=10;
console.log(a);//10
console.log(a.toString());//10
console.log(typeof a.toString());//string

var a=10;
var b=null;
var c;
console.log(a);//10
console.log(String(a));//10
console.log(String(b));//null
console.log(String(c));//undefined
console.log(typeof a);//number
console.log(typeof b);//object
console.log(typeof c);//undefined

其他类型转换为布尔类型（结果为true或false）：
五种为false的情况：0，“ ”，NaN，null，undefined；其他都为true；

var a="胡歌";
var b=20;
var c=null;
var d;
console.log(Boolean(a));//true 
console.log(Boolean(b));//true
console.log(Boolean(c));//false
console.log(Boolean(d));//false
console.log(Boolean(1));//true
console.log(Boolean(0));//false
console.log(Boolean(-1));//true

四、运算符

1.算术运算符

包括 + ，- ，*， /，%(取余或取模)：

var x = 10;
var y = 5;
console.log(x + y);//15
console.log(x - y);//5
console.log(x * y);//50
console.log(x / y);//2
console.log(x % y);//0
console.log(10 % 3);//1

2.逻辑运算符

包括逻辑与 && 逻辑或 || 逻辑非 ！：

// 逻辑非 !  作用 ---- 取反
console.log(!true);//false
console.log(!false);//true
// 总结：非真即假，非假即真 --- 取反

// 逻辑与 && 
console.log(true && true);//true
console.log(true && false);//false
console.log(false && true);//false
console.log(false && false);//false 
// 总结：逻辑与 && 只要有一个为假false，都为假false，除非两个同时为真true，才会为真true

// 逻辑或 ||
console.log("================");
console.log(true || true);//true
console.log(true || false);//true
console.log(false || true);//true
console.log(false || false);//false 

// 总结：逻辑或 || 只要有一个为真true，都为真true，除非两个同时为假false，才会为false

3.关系运算符或比较运算符

总结：把true当1看，把false当0看；

// test:
console.log(2 == '2')		//true -- 隐式转换
console.log(2 === '2')		//false -- 全等比较的是类型
console.log(3 - '2')		//1 -- 字符串隐式转换为数字
console.log(1 == true)		//true
console.log(2 == true) ->console.log( 2== 1)	//false !!!
console.log(0 == false)		//true

4.一元运算符

++后置：先运算，后自加

var num=10;
var sum=num++ +10;
console.log(sum);//10+10=20
console.log(num);//11

++前置：先自加，后运算

var num=10;
var sum=++num+10;
console.log(sum);//11+10=21
console.log(num);//11

22/11/03 面试：
var a=0;
console.log(a++);
// 0

test:
var a=1;
var b=++a + ++a;
console.log(b);//b=2+3=5

var a=1;
var b=a++ + ++a;
console.log(b);//b=1+ ++2=4

var a=1;
var b=a++ + a++;
console.log(b);//b=1+2=3

var a=1;
var b=++a + a++;
console.log(b);//b=2+2=4

5.复合运算符

赋值运算符：=，+=，-=，*=，/=，%=；

优先级：

1. ()
2. 一元运算符 ++ -- ！
3. 算术运算符 先乘除后加减
4. 关系运算符 > >= < <=
5. 相等运算符 ==  != === !==
6. 逻辑运算符 先&&后|| 
7. 赋值运算符 = += -= *= /= %= 

test:
var a=(4 >= 6 || '人' != '阿凡达' && !(12*2==144) && true);
console.log(a);
// false || true && true && true -> true

var num=10;
var b=(5 == num / 2 && (2 + 2 * num).toString() === '22');
console.log(b);
// true && true -> true