Java教程

javascript (二) 基本语法

本文主要是介绍javascript (二) 基本语法,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

1、函数

函数定义:
定义函数的关键词 function,函数内的代码块,包裹在花括号中:

<script type="text/javascript">

			// 使用function定义函数
			function test(){
				console.log("hello word")
			}
			test() //函数调用
</script>

提示:JavaScript 对大小写敏感。关键词 function 必须是小写的
函数参数:

<script type="text/javascript">

			// 使用function定义函数
			function test(x,y){
				console.log(x+y)
			}
			test(1,2) //函数调用
</script>

函数返回值:

<script type="text/javascript">

			// 使用function定义函数
			function test(x,y){
				return (x+y)
			}
			test(1,2) //函数调用
</script>

使用 return 来返回值。在使用 return 语句时,函数会停止执行,并返回指定的值。

<script type="text/javascript">

            // 使用function定义函数
			function test(x,y){
				return x+y // 返回值
			}
			var res = test(1,2) // 接收返回值
			console.log(res)
</script>

2、对象

创建对象
对象由花括号分隔。在括号内部

方式一:

<script type="text/javascript">

			var person = new Object();
			// 定义对象的属性
			person.name = 'test'
			person.age = '18'
			// 定义对象的方法
			person.work = function(){
				console.log("work 方法")
			}
</script>

方式二:类似于python中的字典

<script type="text/javascript">

				var person = {
					// 定义对象的属性
					name: 'test',
					age: 18,
					//定义对象的方法 方式1
					work: function(){
						console.log("work 方法")
					},
					//定义对象的方法 方式2
					work2(){
						console.log("work2 方法")
					},
					//定义对象的方法 方式3,箭头函数
					work2(){
						console.log("work2 方法")
					}
				}
</script>

获取对象属性可以通过:对象.属性、对象[属性]
在这里插入图片描述
创建对象的方法
方式一:

<script type="text/javascript">
			var person = {
			// 定义对象的方法
			work : function(){
				console.log("work 方法")
			}
</script>

方式二:

<script type="text/javascript">
			var person = {
			// 定义对象的方法
			work(){
				console.log("work 方法")
			}
</script>

方式三:箭头函数

<script type="text/javascript">
			var person = {
			// 定义对象的方法
			work:()=>{
				console.log("work 方法")
			}
</script>

调用对象的方法:
在这里插入图片描述
如果在对象中调用对象的属性或者方法时,需要通过this(代表的对象本身,类似于python中的self):

	<script type="text/javascript">
		
				var person={
					//定义对象属性
					name:'test',
					age:18,
					//定义对象方法
					work:function(){
						console.log(this.name)
						}						
					}
</script>

在这里插入图片描述
注意:箭头函数中的this并不代表对象本身,而是外层作用域的对象
举例:

<script type="text/javascript">
		var name = 'hello'
		var person = {
				// 定义对象的属性
				name: 'test',
				age: 18,
				//定义对象的方法,箭头函数
				work:()=> {
						console.log(this.name)
					}
				}
</script>

在这里插入图片描述

3、循环

while循环

while  条件语句{
	循环体
}
<script type="text/javascript">

			var a = 0;
			while(a<3){
				console.log(a)
				a++
			}
</script>

在这里插入图片描述
for循环

for in循环:

for ( i in Array ){
 			循环体代码
 }

遍历数组: 结果为下标

<script type="text/javascript">
			var li = [11,22,33];
			for (i in li){
				console.log(i)
			}
</script>

需要注意for循环遍历数组的
在这里插入图片描述
获取值:

<script type="text/javascript">
			var li = [11,22,33];
			for (i in li){
				console.log(li[i])
			}
</script>

在这里插入图片描述
遍历对象:结果为属性的名字

<script type="text/javascript">
			var li={
				a:11,
				b:22,
				c:33
			}
			for (i in li){
				console.log(i)
			}
</script>

在这里插入图片描述
获取值:

<script type="text/javascript">
			var li={
				a:11,
				b:22,
				c:33
			}
			for (i in li){
				console.log(li[i])
			}
</script>

在这里插入图片描述
for条件循环

for (语句1;语句2;语句3 ){
 			循环体代码
 }
<script type="text/javascript">
			// 初始值;条件;循环体
			for (a = 0; a < 5; a++) {
				console.log(a)
			}
</script>

forEach() : 遍历列表,接收一个处理的回调函数

<script type="text/javascript">
		
		var li = [11,22,33,44]
		li.forEach(function(value,index,array){
			console.log('value:',value)
			console.log('index:',index)
			console.log('array:',array)
		})			
</script>

在这里插入图片描述
filter方法:返回值与索引,对数组进行过滤

<script type="text/javascript">
		var li = [11,22,33,44]
		var res = li.filter(function(value,index){
			return value>33
		})
		console.log(res)
</script>

在这里插入图片描述
find 方法:返回符合条件的第一个元素

<script type="text/javascript">

		var li = [11,22,33,44]
		var res = li.find(function(value,index){
			return value>22
		})
		console.log(res)
</script>

在这里插入图片描述
findInex方法:返回符合条件的值的索引

<script type="text/javascript">

		var li = [11,22,33,44]
		var res = li.findIndex(function(value,index){
			return value>22
		})
		console.log(res)
</script>

在这里插入图片描述

这篇关于javascript (二) 基本语法的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!