Javascript

第六次网页前端培训（JS）

本文主要是介绍第六次网页前端培训（JS），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

   学习网址：【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibilin

1.安装编译器

  • HBuilder X:HBuilderX-高效极客技巧

2.基本内容

①运算符 

  • 算术运算符：+、-、*、/、%、++、--
  • 赋值运算符：=、+=、-=、*=、/=
  • 字符串运算符：+、+=
  • 比较运算符：>、<、>=、<=、==、!=、===、!==
  • 逻辑运算符：&&、||、!
  • 三元运算符：？：

 ②数组

  • 定义：（1）隐式定义：

                                  var 数组名 = [ ] ;

                                  var 数组名 = [值1,值2,值3,...] ;

            (2)  直接实例化：var 数组名 = new Array(值1，值2，值3,...) ;

            (3) 定义数组并设置长度：var 数组名 = new Array(size) ;       

  •  数组提供的操作方法：
push添加元素到最后
unshift添加元素到最前
pop删除最后一项
shift删除第一项
reverse数组翻转
join数组转换成字符串
indexof数组元素索引
slice截取（切片）数组，原数组不发生变化
splice剪接数组，原数组变化，可以实现前后删除效果
concat数组合并
  •  数组的遍历
//获取数组的属性
console.log(aee3["name"]) ;

console.log("==========") ;

/*数组的遍历*/

console.log(arr3) ;
console.log("---for循环遍历---") ;

//for 循环遍历
for (var i = 0;i < arr3.length ; i++) {
    console.log("下标: "+ i +" , ",值" + arr3[i]) ;
}

//for ... in
console.log("--- for ... in ---") ;
for(var i in arr3) {
    console.log("下标: "+ i +" , ",值" + arr3[i]) ;
}

// forEach
console.log("--- forEach ---") ;
arr3.forEach(function(element,index) {
    console.log("下标: "+ index +" , ",值" + element) ;
})

③函数的定义

函数有三种定义方式：函数声明豫剧、函数定义表达式、Function构造函数

(1)函数声明语句：function 函数名 ( [参数列表] ) {   }

(2)函数定义表达式：var 变量名/函数名 = function ( [参数列表] ) {   }

(3)Function构造函数：var 函数名 = new Function ( [参数列表] , 函数体) ；

//函数声明语句

function 函数名（[参数列表]）{

}
例如：
function foo() {
         console.log(1) ;
}
foo() ;


//变量声明提升
console.log( a ) ;
var a = 2 ;

④函数的调用

  • 作为函数调用
function myFunction(a, b) {
    return a * b;
}
myFunction(10, 2);           // myFunction(10, 2) 返回 20

// 构造函数:
function myFunction(arg1, arg2) {
    this.firstName = arg1;
    this.lastName  = arg2;
}
 
// This    creates a new object
var x = new myFunction("John","Doe");
x.firstName;                             // 返回 "John"
  •  全局对象
function myFunction() {
    return this;
}
myFunction();                // 返回 window 对象
  • 函数作为方法调用
var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
myObject.fullName();         // 返回 "John Doe"

3.代码实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>函数</title>
	</head>
	<body>
		<script type="text/javascript">
		
		/*函数的定义*/
		//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;');
		//相当于
		function fn04(a,b) {
			return a+b ;
		}
		
		console.log("===========");
		
		function test01(x,y) {
			console.log(x+y);
		}
		
		test01(); //NaN
		test01(1);//NaN
		test01(1,2);// 3
		
		function test02(x,x) {
			console.log(x);
		}
		test02(1,2); // 2
		
		function test03(x) {
			x = x || "x" ;
			console.log(x);
		}
		test03(10);// 10
		test03();  // x
		
		function test04(x) {
			(x != null || x == undefined) ? x = x : "x" ;
		}
		test04(); //x
		test04("Hello");
		
		
		var num = 10;
		function test05() {
			num = 20
		}
		test05(num); // 实参史定义的变量
		console.log(num);
		
		
		//引用传递
		var obj = {name:"zhangsan"};
		console.log(obj);
		function test06(o) {
			o.name = "list";
		}
		test06(obj);
		console.log(obj);
		
		</script>
	</body>
</html>

这篇关于第六次网页前端培训（JS）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航