网页前端培训笔记6

知识点来源

代码1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
	
	/**
		== 		相等,比较值是否相等
		=== 	全等,比较值和类型是否相等
	 */	
	var a = 1; // 数值型
	var b = '1'; // 字符串
	console.log(a==b);
	console.log(a===b);
		
	</script>
</html>

结果1

 代码2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组</title>
	</head>
	<body>
	</body>
	<!-- 
		数组
			数组的定义
				var arr = [值1,值2,值3];  // 隐式创建
				var arr = new Array(值1,值2,值3); // 直接实例化
				var arr = new Array(size); // 创建数组并指定长度
			
			数组的特点	
				1. 长度可变
				2. 数组中数据类型任意
				3. 索引从0开始
				4. 可以使用任意字符当作数组的索引,如果索引是非正整数,我们称之为数组的属性,属性不影响数组的长度。
				
			基本操作
				1. 数组的长度可以通过length属性获取,长度可以任意修改
					获取长度:数组.length
					设置长度:数组.length = 新长度
				2. 获取数组中元素通过索引获取,索引可以越界
					获取元素:数组[下标]
					设置元素:数组[下标] = 值
					
			数组的遍历
				1. 普通的for循环遍历
					for(var i=0; i<=数组.length-1; i++){
						
					}
				2. for...in..
					for(var 下标(名称任意) in 数组名){ 
						数组名[下标]是获取元素
					} // 下标(名称任意)
				3. forEach
					数组名.forEach(function(element,index){
							element表示当前元素
							index表示索引
					}
					
			了解内容:
				如果下标:
					1.为非负整数(包括整数字符串):自动从0开始,不存在添加 undefined
					2.为负数、小数、非数字符串:这些内容不计算在长度内,当成"属性"处理,相当于自定义属性。
				
				数组非常灵活,使用数组元素
					1.下标: 非负整数(包括整数字符串): 
						数组.下标
						数组[下标]
					2.下标:负数、小数、非数字字符串:
				    	数组[属性]
				
				* for ——> 不遍历属性
				* foreach ——>不遍历属性和索引中的undefined
				* for in ——>不遍历索引中的undefined
			
	 -->
	 <script type="text/javascript">
	 	
		/* 数组的定义 */
		// 隐式创建
		var arr = [];
		console.log(arr);
		var arr2 = [1,'a',true];
		console.log(arr2);
		
		// 直接实例化
		var arr3 = new Array(1,2,3);
		console.log(arr3);
		
		// 创建数组并指定长度
		var arr4 = new Array(5);
		console.log(arr4);
		
		/* 基本操作 */
		
		// 获取数组的长度
		console.log(arr2.length);
		// 设置数组的长度
		arr2.length = 5;
		console.log(arr2);
		
		// 获取数组的元素
		console.log(arr2[0]);
		console.log(arr2[10]);
		// 设置元素
		arr2[4] = 'zhangsan';
		console.log(arr2);
		// 设置属性
		arr2['uname'] = "admin";
		console.log(arr2);
		
		console.log("=========");
		
		/* 数组的遍历 */
		// 普通的for循环遍历
		for (var i = 0; i < arr2.length; i++) {
			console.log(arr2[i]);
		}
		
		console.log("==========");
		// for... in 
		for(var index in arr2) {
			console.log(index);
			console.log(arr2[index]);
			console.log("-------");
		}
		console.log("=========");
		// forEach
		arr2.forEach(function(element,index){
			console.log(element);
			console.log(index);
			console.log("-------");
		})

		
		
	 </script>
</html>

结果2

 代码3

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组方法</title>
	</head>
	<body>
	</body>
	<!-- 
		push          添加元素到最后 
		unshift       添加元素到最前 
		pop           删除最后一项 
		shift         删除第一项 
		reverse       数组翻转 
		join          数组转成字符串 
		indexOf       数组元素索引 
		slice         截取(切片)数组,原数组不发生变化 
		splice        剪接数组,原数组变化,可以实现前后删除效果 
		concat        数组合并
		
	 -->
	 
	 <script type="text/javascript">
	 	// 定义数组
		var arr = [1,2,'a',3,'b'];
		
		// push          添加元素到最后
		arr.push('c');
		// unshift       添加元素到最前 
		arr.unshift(0);
		// pop           删除最后一项 
		arr.pop();
		//  shift         删除第一项 
		arr.shift();
		// reverse       数组翻转 
		var arr2 = arr.reverse();
		// join          数组转成字符串 
		var str = arr.join('-');
		// indexOf       数组元素索引 
		var index = arr.indexOf('a');
		// slice         截取(切片)数组,原数组不发生变化 
		var arr3 = arr.slice(2,5);
		// splice        剪接数组,原数组变化,可以实现前后删除效果 
		var arr4 = arr.splice(1,2,'aa','bb')
		//  concat        数组合并
		var arr5 = [100,200];
		var arr6 = arr.concat(arr5);
		
		
		console.log(arr);
		console.log(arr2);
		console.log(str);
		console.log(index);
		console.log(arr3);
		console.log(arr4);
		console.log(arr6);
		
		
	 </script>
	 
</html>

代码结果3

 代码4

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>函数</title>
	</head>
	<body>
	</body>
	
	<!-- 
		函数
			函数的定义
				有三种函数定义的方式:函数声明语句、函数定义表达式、Function构造函数
				1. 函数声明语句
					function 函数名([参数列表]) {
						
					}
				2. 函数定义表达式
					var 变量名 = function([参数列表]) {
						
					}
				3. Function构造函数
					var 变量名 = new Function('a','b','return (a+b)');
					
				注:
					1.如果使用函数声明语句这种方式声明函数,会具有函数名提升的效果。
					2.JS中方法没有重载,如果出现同名方法则覆盖。
					
			函数的参数
				- 实参可以省略,那么对应形参为undefined
				- 若函数形参同名(一般不会这么干):在使用时以最后一个值为准。
				- 可以给参数默认值:当参数为特殊值时,可以赋予默认值。
				- 参数为值传递,传递副本  ;引用传递时传递地址,操作的是同一个对象。
				
			函数的调用
				1. 常用调用方式:函数名([参数列表]);
				2. 函数调用模式
				3. 对象调用模式
				
			函数的返回
				1. 如果函数有返回值,需要通过return返回
				2. 如果函数不需要返回数据时,则无返回值,或者说返回undefinded
				3. 如果函数不需要返回值时,使用return,则表示结束方法
				作用:
					1.返回结果给调用者
					2.结束语句
			函数的作用域 (在JS中只有函数有作用域)
				1. 全局变量与局部变量同名问题
				2. 在函数中定义变量时,若没有加var关键字,使用之后自动变为全局变量
					
						
		
	 -->
	 <script type="text/javascript">
		
	 	/* 函数的定义 */
		// 1. 函数声明语句
		function test() {
			console.log("函数声明语句...");
		}
		test(); // 调用函数
		function test2(a) {
			console.log(a);
		}
		test2(1);
		
		// 2. 函数定义表达式
		var test3 = function(){
			console.log("函数定义表达式...");
		}
		test3();
		var test4 = function(a,b) {
			console.log(a,b);
		}
		test4(2,20);
		
		// Function构造函数
		var test5 = new Function('a','b','c','return (a+b);');
		var num = test5(1,2,3);
		console.log(num);
		
		
		console.log("=======函数的参数========");
		// 实参可以省略,那么对应形参为undefined
		function fn(str) {
			console.log(str); // undefined
		}
		fn();
		// 若函数形参同名(一般不会这么干):在使用时以最后一个值为准。
		function fn2(a,a) {
			console.log(a);
		}
		fn2(1,2);
		
		// 可以给参数默认值:当参数为特殊值时,可以赋予默认值。
		function fn3(a) {
			a = a || "a";
			return a;
		}
		var a1 = fn3();
		console.log(a1);
		var a2 = fn3(100);
		console.log(a2);
		
		// 参数为值传递,传递副本  ;引用传递时传递地址,操作的是同一个对象。
		// 值传递
		var n = 10;
		function fn4(num) {
			num = 20;
		}
		fn4(n);
		console.log(n);
		
		// 引用传递
		var obj = {
			uname:"zhangsan",
			upwd:"123456"
		};
		function fn5(o){
			o.uname = "lisi"; // 修改对象中的属性值
		}
		fn5(obj);
		console.log(obj);
		
		
		console.log("========函数的调用========");
		// 函数调用模式
		function add(a,b) {
			return a+b;
		}
		var sum = add(10,20);
		console.log(sum);
		
		// 对象调用对象
		var ob = {
			name:"zs",
			age:18,
			sex:true,
			test:function(){
				console.log("对象调用对象...");
			}
		};
		ob.test();
		
		console.log("======函数作用域=======");
		if (true) {
			var aa = 1;
		}
		if (true){
			console.log(aa);
		}
		
		// 1. 全局变量与局部变量同名问题
		// 2. 在函数中定义变量时,若没有加var关键字,使用之后自动变为全局变量
		var bb = 10; // 全局变量
		function abc(b) {
			var b = 100;  // 局部变量
			var bb = 200; // 局部变量 与全局变量bb没有关系,相当于新声明的变量
			console.log(bb); // 就近原则
			c = 12; // 没有var修饰符,则是全局变量
		}
		abc(bb);
		// console.log(b); //  b is not defined
		console.log(bb); // 只能获取全局变量
		console.log(c);
	 </script>
</html>

结果4

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值