[day1]JavaScript 基础语法—从零开始:1.语句、语法、变量 2.数据类型和类型转换3.运算符与表达式

[day2]JavaScript 流程控制

1. 语句、语法、变量

1.1 JavaScript在HTML中的使用

​ 1）直接在页面上嵌入JavaScript代码；

<script type="text/javascript">
	document.write('hello');
	document.getElementById('p1').style.color="blue";
	console.log('111');
</script>

​ 2）引用独立的js文件；

<script type="text/javascript" src="demo.js"></script>

1.2 JavaScript代码调试方法

1.2.1 三种调试方式

​ 1）使用alert()弹出警告框；

<script type="text/javascript">
	var name = "kevin";
	acert(name);
</script>

​ 2）使用document.write()方法将内容写到HTML文档中；

<script type="text/javascript">
	var name = "kevin";
	document.write(name);
</script>

​ 3）使用console.log()写入到浏览器控制台；

<script type="text/javascript">
	var name = "kevin";
	console.log(name);
</script>

点击f12在console中查看。

1.2.2 三种调试方式比较

（1）如果在文档已完成加载后执行document.write，整个HTML页面将被覆盖，对程序执行造成不便;

（2）alert()函数会阻断JavaScript程序的执行，从而造成副作用，而且使用alert()方法需要点击弹窗的确认按钮操作麻烦，最重要的是alert()只能输出字符串;

（3）console.log()仅在控制台打印相关信息，不会对JavaScript程序执行造成阻隔，此外，console.log()可以接受任何字符串、数字和JavaScript对象，可以看到清楚的对象属性结构，在ajax返回json数组对象时调试很方便;

1.3 语句

Javascript语句是向浏览器发出的命令：

var a = 1+2; //一个语句
var a = 1+2;var b = 'abc'; //两个语句

1.4 变量

1.4.1 变量的概念及命名

1）变量以字母开头；

2）变量也能以$和_开头（但不推荐）；

3）变量名不能包含空格或其他标点符号；

4）变量名称对大小写敏感（a和A是不同的变量）；

var a; //声明变量a
a = 1; //给变量a赋值1

1.4.2 变量作用域

1）全局变量：大家都可以同时使用的；

2）局部变量：函数内使用，函数外不可使用；

<script type="text/javascript">
	var a = 'global';
	b = 'global';
	function testaFunction(){
        var a = 'local';
        return a;
    }
	
	function testbFunction(){
        b = 'local';
        return b;
    }
	console.log(a); //global
	console.log(testaFunction()); //local
	console.log(b); //global
	console.log(testbFunction()); //local
	console.log(b); //local
</script>

1.4.3 变量提升

Javascript引擎工作方式是：先解析代码，获取所有被声明的变量，然后再一行一行的运行代码。这样所有变量声明语句都会被提升到代码头部执行。这就叫做变量提升。

var c;
console.log(c); //undefined

没有定义c，打印c后没有报错，打印出 undefined，说明刚才变量进行的提升。

注：只能提升变量的声明，无法提升变量的值，且只能提升var标识的变量。

<script type="text/javascript">
    var a,b;
	(function(){
        console.log(a); //undefined
        console.log(b); //undefined
        var a=b=3; 
        //实际上：b=3;  var a=b; 
        console.log(a); //3
        console.log(b); //3
    })();
		console.log(a); //undefined
        console.log(b); //3
	
</script>

2. 数据类型与类型转换

2.1 数据类型

2.1.1 基本数据类型

1）String类型；

//字符串类型
var name = "Hello World";
var sex = '男';
var hrml = "";
html += '<div style="text-align:center;">1234</div>'; //嵌套
document.getElementById('content').innerHTML=html;

2）Number类型；

//数值类型
//整型
var age = 50; //十进制
var height = 070; //八进制表示，第一位一定要为0
var width = 0xA;//十六进制表示，前两位必须为0x
//浮点型
var float num = 1.1;
var float num1 = .1; //表示0.1
//非数值NaN
//任何涉及到NaN的操作，都返回NaN。
//NaN与任何值都不相等，包括它本身NaN!=NaN。
alter(NaN==NaN); //false

3）Boolean类型；

var a,b;
(function(){
    var a = true;
    var b = false;
    var c = 'true';
    alert(a==c); //false
})();

4）Undefined类型；

var a,b;
(function(){
    var message;
    alert(message); //undefined
})();

​ 声明了但没有赋值，就是undefined。

5）Null类型；

var a,b;
(function(){
    var a = null;
    console.log(a); //null
    a = 1;
    console.log(a); //1
})();

​ 声明一个空类型，使用的时候可以直接赋值。

2.1.2 引用数据类型

1）Object类型；

(function(){
    //第一种写法
    var person = new Object();
    person.name = 'kevin';
    person.age=20;
    console.log(person.name); //kevin
    console.log(person);//Object{name:"kevin",age:20}
    
    //第二种写法
    var person1={
        name:'tom',
        age:'30'
    }
    console.log(person1);//Object{name:"tom",age:30}
    
    //第三种写法
    var person2 = {}
    person2.name = 'david';
    person2.age=25;
    console.log(person2); //Object{name:"david",age:25}
})();

2）Array类型；

(function(){
    //Array数组
    var fruits1 = new Array();
    var fruits2 = new Array(2);
    var fruits3 = new Array('kevin',123);
    
    var animal = [];
    var animal1 = ['kevin',134];
    animal[0]=1;
    animal[1]=2;
    console.log(animal); //[1,2]
    console.log(animal.length); //长度：2
    //使用长度
    for(var i=0;i<animal.length;i++){
        console.log(animal[i]);
    }
})();

3）Date类型；

(function(){
	var date = now Date();
    console.log(date); //当前的标准时间
    
    //方法
    console.log(date.getDate()); //获得一个月中的某一天
    console.log(date.getDay());//获得一周的某一天
    console.log(date.getMonth());//获得月份（从零开始计数）
})();

4）RegExp类型；

RegExp对象用于存储检索模式。

(function(){
    var express = /hello/gi;
    
    var pattern =new RegExp("hello","i");//将找寻的是"hello"。g : 全局搜索 i : 不区分大小写
   
    //test()方法检索字符串中的指定值，返回的值是true或false
    console.log(pattern,test("hello1111111"));//true
    console.log(pattern,test("helslo1111111"));//false
    
    //exec()方法检索字符串中的指定值，返回值是被找到的值，如果没有发现匹配，则返回null。
    console.log(pattern,exec("hello1111111"));//["hello",index:0,input:"hello1111111"]
    console.log(pattern,exec("helslo1111111"));//null
    
    //compile()方法用于改变RegExp。既可以改变检索模式，也可以添加或删除第二个参数
    var patt1 = new RegExp("e");
    console.log(patt1.text("The best things in life are free"));//true
    patt1.compile("d");
    console.log(patt1.text("The best things in life are free"));//false
})();

5）Function类型；

(function(){
    //方式1
	function sum(num1,num2){
		return num1+num2;
	}
	//方式2
	var sum = function(num1,num2){
		return num1+num2;
	}
	//方式3
    var sum = new Function("num1","num2","return num1+num2");
	
})();

2.1.3 区别

1）声明变量时不同的内存分配；

2）不同的内存分配机制也带来了不同的访问机制；

3）赋值变量时的不同；

4）参数传递的不同；

2.2 数据类型转换

判断数据类型：

var str = 123;
console.log(typeof str);//Number

2.2.1 利用转换函数；

var str = "123.12"; //String类型
var a = parseInt(str);//转换
var b = parseFloat(str);
console.log(typeof a);//number类型
console.log(a);//123
console.log(b);//123.12

2.2.2 强制类型转换；

console.log(Boolean("s")); //true
console.log(Boolean(0)); //false
console.log(Boolean(1)); //true
console.log(Boolean(-1)); //true

console.log(Number(false));//0
console.log(Number(true));//1
console.log(Number(null));//0
console.log(Number("12.1"));//12.1
console.log(Number(new Object()));//NaN

console.log(String(null));//null
console.log(String(1));//1
console.log(String(true));//true

2.2.3 利用JavaScript变量弱类型转换；

console.log(1+"2"+"2"); //122
console.log(1+ +"2"+"2"); //32
//console.log(1+ (+"2")+"2");

console.log("A"+"B"+2) //AB2
console.log("A"+ +"B"+2)

3. 运算符与表达式

概述：

运算符：通过符号表达特定操作，对数据进行处理。

表达式：通过运算符与数据的有效结合，表达某个特定功能。

语句：通过表达式的组成形成一条完整的高级语言指令。

3.1 运算符

3.1.1 算术运算符

用于执行加、减、乘、除、取余等算术运算。

只使用算术运算符构成的表达为算术表达式。

符号：+、-、*、/、%、++、–

console.log(7/3); //2.3333333333335
console.log(7/0); //Infinity 无限大（有正负）

++在前，先增加，后赋值；++在后，先赋值，再增加。

–在前，先减少，后赋值；–在后，先赋值，再减少。

3.1.2 字符串运算符

用于字符串连接：

​ 1.将两个字符串拼接为一个新的字符串；

​ 2.符号为：+，注意与算术运算符+的区别；

var s1="ab";
var s2="cd";
var s3=s1+s2;
console.log(s3); //"abcd"

var s1="50";
var s2="30";
var s3=s1+s2;
console.log(s3); //"5030"

var s1="50";
var s2=30;
var s3=s1+s2;
console.log(s3); //"5030" 隐式转换

3.1.3 关系运算符

用于比较两个数据之间的大小关系，其结果为true或false。

主要符号包括:>、<、>=、<=、!=、、=、!==

注意：1.===（恒等）只能在两个数据的数据类型和值都相同时结果为true。

​ 2.两个字符串比较时，按照其字符的ASCII码的大小进行比较。

"20"==20; //true
"20"===20; //false
"a">"b"; //false ASCII码值比较
"50">40; //true 将不是字符串的一方自动转换成字符串

3.1.4 逻辑运算符

用于对布尔值进行逻辑运算，得到一个布尔值结果。

符号：！（非）、&&（并且）、||（或者）

注意：&&和||都具备"表达式截断"的特性，当运算符左边的表达式已经能得出整个表达式结果时，右边表达式的执行被截断，不执行。

3.1.5 赋值运算符

将=（赋值运算符）右边表达式的值赋给左边的变量；

可以和算术运算符等组成复合赋值运算符：如+=、*=等；

n += 10; //n=n+10;
n++; //n += 1;   n=n+1;

3.1.6 其他运算符

1）条件运算符（三目运算符）：条件表达式？结果1：结果2

解析：条件表达式：求出表达式的值，其值为true或者false。

​ 结果1：如果条件表达式的值为true，执行结果1；

​ 结果2：如果条件表达式的值为false，执行结果2；

var x = 10;
var y=x==undefined?0:x;
console.log(y) //10

2）逗号运算符

将多个表达式放在一起，用逗号隔开，整个表达式的结果为最后一个表达式的值。

var y=(a=10,b=20,a+b);
console.log(y); //30

3.2 表达式中的类型转换

JavaScript在计算表达式时，会根据运算符自动转换不匹配的数据类型。

3.2.1 转换为数值类型

​ 1）字符串：若其值为数字格式，则转换为对应的数值，否则为NaN；

2）布尔值：true转换为1，false则为0；

3）undefined：转换为NaN；

4）null：转换为0；

5）其他对象：转换为NaN；

3.2.2 转换为字符串类型

1）数值：转换为包含数字字符的字符串；

2）布尔值：转换为"true"或"false"；

3）undefined：转换为"undefined"；

4）null：转换为"null"；

5）其他对象：若对象存在toString()方法，则转换为该方法的返回值，否则为"undefined"；

var obj={name:"tom",age:30}
console.log(obj); //"[object Object]"

var obj1={name:"tom",age:30,toString:function(){return "tom";}}
console.log(obj1); //"tom"

3.2.3 转换为布尔类型

1）字符串：长度为0的字符串转换为false，否则为true；

2）数值：值为0或者NaN时，转换为false，否则为true；

3）undefined、null：转换为false；

4）其他对象：转换为true；