第六次网页前端培训笔记（JavarScript基本语法）

2.6.运算符和控制语句（这个python也都讲过，我就不细讲了，讲点JS新增的）

2.6.1.运算符

（1）比较运算符

console.log(1=="1");//==判断值是否相等
console.log(1==="1");//===判断类型是否相等

效果如图

（2）三目运算符

 效果如下

 2.6.2.控制语句

像if语句、ifelse语句 swtich语句，while语句，do while语句，for循环这些pyhton中都有讲到，只不过与之不同的是，这些语句后面要加（），括号里面的是条件。

比较特殊的是for循环，举个例子：

 for(i=1;i<=10;i++)
			console.log(i)

 2.7.数组

2.7.1.数组的定义

（1）隐式定义

            var arr1 =[]//空数组
			console.log(arr1)
			var arr2 =[1,2,3,4]
			console.log(arr2)

效果如图

（2）直接实例化

var arr3 =new Array(1,2,3)
			console.log(arr3)

效果如图

（3）定义数组并设置长度

var arr4 =new Array(5)
			console.log(arr4)

 

2.7.2.数组的操作 

1.数组下标（从零开始）

arr2 = [1,2,3]
console.log(arr2[1])//获取指定下标值
			console.log(arr2[10])//如果下标值不存在，那显示undefined
			arr2[1] = 10//设置指定下标值
			console.log(arr2[1])
			arr2[10] = 100//如果设定的下标值不存在，则自动扩容

效果如图

 2.数组长度

console.log(arr2)//获取数组的长度
			console.log(arr3.length)
			arr3.length = 5//设置数组的长度
			console.log(arr3.length)

效果如图

3.数组属性 

arr3.name="liudehua"//设置属性
			console.log(arr3)
			arr3["LOL"] = "EDG"//设置属性
			console.log(arr3)
			console.log(arr3["LOL"])//获取属性

 注：如果设置非整数型的下标，则会成为数组的属性，不会增加数组的长度

2.7.3.数组遍历（3种遍历方法）

（1）for循环

for(var i=0;i<arr3.length;i++)
			{
				console.log("下标"+i+"，值"+arr3[i])
			}

效果如图 

 

（2）for in 循环

for(var i in arr3)
			{
				console.log("下标"+i+"，值"+arr3[i])
			}

 效果如图

（3）forEach循环

arr3.forEach(function(element,i){
				console.log("下标"+i+"，值"+element)
			})

 效果如图

 2.7.4.数组提供的方法

举几个例子：

<script>
//push  添加元素到最后
			arr5[arr5.length]='d';
			console.log(arr5);
			arr5.push('e');
			console.log(arr5);
			//indexOf 数组元素索引
			console.log(arr5.indexOf('a'));
			console.log(arr5.indexOf('t'));//如果找不到元素则为-1
			// join 数组转化成字符串
			console.log(arr5.join('-'));
			//split 字符串转化成数组
			var str = "1,2,3,4";
			console.log(str.split(","));
</script>

 效果如图

 2.8.函数

2.8.1函数的定义

（1）函数说明语句

function fn01(a,b)
			{
				console.log(a+b)
				
			}
			console.log(fn01)

（2）函数定义表达式

var fn02 = function(a,b)
			{
				console.log(a+b)
				
			}
			console.log(fn02)

（3）Function构造函数（了解）

var fn03 = new Function('a','b','return(a+b);')
			console.log(fn03)
			//等于
			function fn03(a,b)
			{
				return a+b;
			}

2.8.2.函数的参数

            //1.实参可以省略，则形参为undefined
			function test01(x,y){
				console.log(x+y)
			}//调用函数，未设置实参
			test01()
			test01(1)
			test01(1,2)
			//2.如果形参名相同，则以最后一个为准
			function test02(x,x){
				console.log(x)
			}
			test02(1,2)
			// 3.可以设置参数的默认值
			function test03(x){
				//如果形参x有值，则值为x传递的值；否则为‘x’
				x = x||"x"
				console.log(x)
			}
			test03(10)
			test03()
			//4.参数为值传递，传递副本；参数是引用传递，则传递的是地址，操作是同一个对象
			//值传递
			var num =10;
			function test05(num){
				num = 20;
			}
			test05(15)
			console.log(num)
			//引用传递
			var obj = {name:"liudehua"}
			console.log(obj)
			function test06(o){
				o.name = "EDG"
			}
			test06(obj)
			console.log(obj)
			

效果如图

 2.8.3.函数的调用

（1）常用调用模式

function f1()
			{
				console.log("常用调用模式")
			}
			f1();

效果如图

  

（2）函数调用模式

function f2(a)
			{
				console.log("函数调用模式")
				return a
			}
			var num1 = f2(1)
			console.log(num1)

效果如图

（3）方法调用模式

var obj = {
				name:"刘德华",
				age:48,
				sex:true,
				dogs:["二哈","柴犬"],
				sayhello:function ()
				{
					console.log("你好我是刘德华");
				}
			}
			console.log(obj)
			console.log(obj.dogs)
			console.log(obj.sayhello)
			obj.sayhello()

效果如图

2.8.4.return 

function a1()
			{
				console.log("无返回值")
				return;
				console.log("...")
			}
            console.log(a1())

效果如图

function a2()
			{
				console.log("有返回值")
				return "test";
				console.log("..")
			}
			console.log(a2())

 效果如图

 2.8.5.函数的作用域

1.函数中存在全局变量和局部变量

2.函数中，声明变量未用var修饰符，则该变量是全局变量

var pp = "Hello"//全局变量
			function qq()//函数中用var定义的变量为局部变量
			{
				var box = 10//局部变量
				box1 = 20//全局变量（不用var修饰）
			}
			qq()
			console.log(pp)//全局变量
			console.log(box1)//全局变量
			//console.log(box)//局部变量，会报错