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>

4、js对象与json字符串的转换

json字符串转换为js对象：

<script type="text/javascript">
		var str = '{"name":"test","age":18}'
		var obj =JSON.parse(str)
</script>

js对象转换为json字符串：

<script type="text/javascript">
		var obj = {"name":"test","age":18}
		var str =JSON.stringify(obj)
</script>

指定转换字段：

<script type="text/javascript">
		var obj = {"name":"test","age":18}
		// 转换对象，指定转换的字段，缩进
		var str =JSON.stringify(obj,['name'],2)
</script>