ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

第六次网页前端培训(JS)

2022-02-10 23:57:59  阅读:179  来源: 互联网

标签:function console log JS 网页 数组 var 第六次 函数


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


1.安装编译器


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>

标签:function,console,log,JS,网页,数组,var,第六次,函数
来源: https://blog.csdn.net/qq_59470001/article/details/122870709

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有