JS基础 1

1 变量

js变量的声明式为var，语法格式如下：

var 变量名 [ = 默认值];//var也可以不写

1.1 数据类型

1. number：数值，包括整数，小数，NAN(非数字)
2. string：字符串
3. object：对象类型，例如：日期，数组，自定义类型等等
4. undefined：未初始化
5. function：函数类型
6. boolean：布尔类型

注意事项：

1. 变量的具体数据类型是由值来决定
2. var也可以不写，但是建议写上
3. 字符串可以使用单引号，也可以使用双引号

1.2 生命周期

js变量分为：全局变量和局部变量。

全局变量：在整个html文件中有效，所有全局变量都是保存window对象中。

局部变量：在函数体中有效。

注意事项：

​ 定义局部变量的时候，如果没有使用var，那么解析器先从当前函数中查找是否存在该变量，如果没有，那么就会在全局对象中查找。如果全局对象中也没有该变量，那么解析器就会在全局对象中创建该变量。

所以，定义局部变量的时候使用var修饰。

<script>
	//全局变量
	var a = 10;
			
	function print() {
        //alert(window.a);
        alert(a);

        // 局部变量，只在print函数中有效
        // var b = 10;

        // 如果变量赋值的时候没有使用var，那么首先在当前函数中查询该变量的声明
        // 如果没有找到，就会去全局中查找是否存在变量的声明
        // 如果全局中也没有找到，那么就会在全局对象中声明该变量，然后再执行赋值
        b = 10;
    }

	print();

	alert(window.b);
</script>

2 流程控制

2.1 条件判断

语法格式：

if (条件表达式) {
    
} else if (条件表达式) {
        
} ... {
    
} else {
    
}

2.2 选择

语法格式：

switch (变量) {
   case 值1：
        ...
        break;
   case 值2：
        ...
        break;
   case ...
   default
}

2.3 循环

（1）while

语法格式：

while (条件表达式) {
    循环体...
}

（2）do…while

do {
    循环体...
} while (条件表达式);

（3）普通for循环

for (变量声明; 条件表达式; 循环体语句) {
    循环体...
}

例如：

var total = 0;
			
// 计算1~10的总和
for (var i = 1; i <= 10; i++) {
	total += i;
}
document.write("结果：" + total);

（4）for-in循环

类似java的foreach循环。

语法格式：

# java
for (数据类型 变量名 : 数组或集合) {
    
}

# javascript
for (var 下标 in 数组或对象) {
    
}

例如：

var arr = [10, 20, 30, 40, 55];
for (var i in arr) {
    document.write(arr[i] + "<br/>");
}

3 函数

定义格式：

# 定义函数
function 函数名(参数1, 参数2，... ) {
    
}

# 定义函数变量
var 函数变量名 = function(参数1, 参数2， ...) {
    
}

注意事项：

1. 参数不需要写var；
2. 函数不需要声明返回值类型；
3. 如果有返回值可以使用return返回结果；
4. 在一个js文件中，可定义多个同名的函数，最后定义的函数会覆盖前面定义的函数；

<script>
    function sum(a, b) {
        var result = a + b;
        return result;
    }

    function sum(a, b, c) {
        // 注意：undefined与任何数进行运算，返回结果都是NaN。
        var result = a + b + c;
        return result;
    }

    alert(sum(10, 20));
</script>

4 js对象

4.1 Object对象

所有js对象的父对象。Object对象主要提供一些通用属性和方法。例如：prototype 和 valueof

4.2 String对象

创建String对象：

var 变量名 = "字符串"；
var 变量名 = new String("字符串");

String对象的常用方法：

4.3 Date对象

Date对象代表日期和时间。

创建日期：

var d = new Date();

Date对象常用方法：

例如：

<script>
    var d = new Date();
	d.setFullYear(2020);
	d.setMonth(8);
	d.setDate(20);

	// 2019年07月16日 16:25:00
	//document.write(d);

	// 获取年
	//document.write(d.getFullYear());

	// 获取月
	//document.write(d.getMonth() + 1);

	// 获取日
	//document.write(d.getDate());

	// 把一个Date对象转换成指定格式日期字符串
	/*function getDate(date) {
		var year = date.getFullYear();
		var month = date.getMonth() + 1;
		var dd = date.getDate();
		return year + "年" + month + "月" + dd + "日";
	}*/

	document.write(getDate(d));
</script>

4.4 自定义对象

Java可以通过函数创建对象。例如：

<script>
    function Person(name, age) {
        this.name = name;
        this.age = age;

        this.code = function() {
            alert("搬砖");
        }
    }

    var p = new Person("aa", 18);
    document.write("name = " + p.name + ", age = " + p.age +"<br/>");

    p.code();
</script>

还可以通过Object对象自定义对象。

var p = new Object();
p.name = "jacky";
p.age = 20;

document.write("name = " + p.name + ", age = " + p.age +"<br/>");

使用json语法创建对象：

{
    变量名: 值,
    变量名: 值,
    ...
}

变量名是字符串，值是任意类型对象。

例如：

var p = {
    name : "",
    age : 18,

    setName: function(name) {
        this.name = name;
    },

    getName: function() {
        return this.name;
    }
}

p.setName("jacky");
document.write("name = " + p.name + ", age = " + p.age +"<br/>");
alert(p.getName());

4.5 Number对象

Number对象代表一个数值。

new Number(值)
Number(值)

例如：

<script>
    var a = new Number(3.1415666);
    // 把Number转换成字符串，指定保留小数位数
    a = a.toFixed(2)
    document.write("a = " + a + "<br/>");

    var b = Number(10);
    // 把Number转换成二进制字符串
    b = b.toString(2);
    document.write("b = " + b + "<br/>");
</script>

4.6 Array对象

Array代表一个数组对象。

创建数组的方式：

方式一：直接使用方括号。例如：var arr = [10, 20, 30];

方式二：使用new方式创建数组。
new Array();
new Array(值1, 值2, ...);

Array对象属性：

length：返回数组元素个数。

Array对象的常用方法：

代码：

<script>
    // 定义了一个数组
    var arr = new Array("java", "android", "go", "python", "spring");
    document.write("数组的长度：" + arr.length + "<br/>");

    // 翻转数组
    //arr.reverse();
    //document.write(arr);



    // 删除元素
    document.write("删除最后一个元素：" + arr.pop() + "<br/>");
    document.write("删除第一个元素：" + arr.shift() + "<br/>");

    document.write("添加元素后数组的长度：" + arr.push("php") + "<br/>");

    // 把数组转换成字符串
    var str = arr.join(" ");
    document.write(str + "<br/>");

    //			var arr2 = new Array("c", "a", "z", "h", "f", "b");
    var arr2 = new Array(20, 10, 4, 11, 8);
    //			arr2.sort();
    // 可以在sort函数中传入一个function
    // 如果函数返回0，代表a等于b
    // 如果函数返回值小于0，代表a小于b
    // 如果函数返回值大于0，代表a大于b
    arr2.sort(function(a, b) {
    //return a - b;
    return b - a;
    });
    document.write(arr2);
</script>

4.7 Math对象

Math对象提供一些简化数学运算的方法。

代码：

<script>
    var pi = Math.PI;
    document.write("求绝对值：" + Math.abs(-10) + "<br/>");
    document.write("向上取整：" + Math.ceil(pi) + "<br/>");
    document.write("向下取整：" + Math.floor(pi) + "<br/>");
    document.write("生成随机数：" + Math.random() + "<br/>");
    document.write("四舍五入：" + Math.round(pi) + "<br/>");


    // 生成 0 ~ 9 之间的任意整数
    var num = Math.floor(Math.random() * 10)
    document.write("生成0~9之间的任意整数：" + num + "<br/>");

    document.write("返回最大值：" + Math.max(10, 5) + "<br/>");
    document.write("返回最小值：" + Math.min(10, 5) + "<br/>");
</script>

5 注释

单行注释： //注释内容

多行注释：/* 多行注释 */