JS基础 1

导读:本篇文章讲解 JS基础 1,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

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 (变量) {
   case1...
        break;
   case2...
        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对象的常用方法:

函数名 作用
indexOf: 获取指定内容在字符串中的位置
substring(): 获取指定开始位置和结束位置的子串
charAt(): 获取指定下标的字符
lastIndexOf(): 获取指定下标的字符
toUpperCase() 把字符串转换大写
toLowerCase(): 把字符串转换成小写

4.3 Date对象

Date对象代表日期和时间。

创建日期:

var d = new Date();

Date对象常用方法:

方法名 作用
setFullYear 设置Date对象的年份
setMonth 设置Date对象的月份
setDate 设置Date对象的日
setHours 设置Date对象的小时
setMinutes 设置Date对象的分钟
setSeconds 设置Date对象的秒
getFullYear 获取Date对象的年份
getMonth 获取Date对象的月份,月份从0开始
getDate 获取Date对象的日
getHours 获取Date对象的小时
getMinutes 获取Date对象的分钟
getSeconds 获取Date对象的秒
getTime 获取Date对象距离1970年1月1日相差的毫秒数

例如:

<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对象的常用方法:

方法名 作用
reverse() 翻转数组
shift() 删除并返回数组的第一个元素
pop() 删除并返回数组的最后一个元素
push() 向数组的末尾添加一个新元素,并返回新数组的长度
sort() 对数组进行排序,默认升序
join() 把数组中所有元素放入到一个字符串中,可以指定分隔符
splice() 删除元素,然后可以在删除位置添加新

代码:

<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对象提供一些简化数学运算的方法。

方法名 功能
abs() 绝对值
ceil() 向上取整
floor() 向下取整
random() 生成[0, 1)之间的随机数
round() 四舍五入
max()和min() 求最大值

代码:

<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 注释

单行注释: //注释内容

多行注释:/* 多行注释 */

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/81675.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!