水文|杂乱的知识点

程序员_Mr_Shan
55 阅读8分钟

水文|杂乱的知识点

1. 一张图搞懂Spring源码

image-20220915094906748.png

2. git命令

（通过idea连接Gitee）配置用户名、邮箱

1.git安装
https://git-scm.com/ 

2.安装成功之后查看git版本，若出现结果，证明安装正确！！！
git --version 

结果：git version 2.37.3.windows.1

3.在使用git前，需要告诉git你是谁，在向git仓库中提交时需要用到。
	1.配置提交人姓名：git config--globa1 user.name 提交人姓名
	2.配置提交人姓名：git config--globa1 user.emai1 提交人邮箱
	3.查看git配置信息：git config--1ist

3.Vue

  1. 引入Vue
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  1. 在body中写代码
<body>
   <div id="app">{{msg}}</div>
    
   <script type="text/javascript">
    // 当我们导入包以后，在浏览器的内存中多了一个vue构造函数
   var vm=new Vue({
    el:'#app',
    data:{
        msg:'hello vue.js'
   	 }
   })
   
   </script> 
</body>

4.箭头函数

a. 认识箭头函数

es6 新增了使用胖箭头（=>）语法定义函数表达式的能力，很大程度上，箭头函数实例化的函数对象与正式的函数表达式创建的函数对象行为是相同的。任何可以使用函数表达式的地方，都可以使用箭头函数：

// 普通函数
let sum = function(a, b) {<!-- -->
	return a + b;
}

// 箭头函数
let sum1 = (a, b) => {<!-- -->
	return a + b;
}

箭头函数简洁的语法对开发者来说是十分友好的，从上面的例子可以得知箭头函数的简单用法： (参数) => { 函数体 }

b. 箭头函数的一些用法

1. 省略包含参数的小括号

如果只有一个参数，那也可以不用括号。只有没有参数，或者多个参数的情况下，才需要使用括号：

// 有效
let sum = (x) => {<!-- -->
	return x;
};
// 有效
let sum1 = x => {<!-- -->
	return x;
};
// 没有参数需要括号
let sum2 = () => {<!-- -->
	return 1;
};
// 有多个参数需要括号
let sum3 = (a, b) => {<!-- -->
	return a + b;
};
2. 省略包含函数体的大括号

箭头函数也可以不用大括号，但这样会改变函数的行为。使用大括号就说明包含“函数体”，可以在一个函数中包含多条语句，跟常规的函数一样。

  • 省略大括号箭头后面就只能有一行代码；- 省略大括号会隐式返回这行代码的值；- 省略大括号不能写return。
// 有效
let sum = (a, b) => {<!-- -->
	return a + b;
};
// 有效
let sum1 = (a, b) => a + b; // 相当于 return a + b;
// 无效的写法
let sum2 = (a, b) => return a + b;
3. 嵌入函数

箭头函数简洁的语法非常适合嵌入函数的场景：

let arr = [1, 2, 3, 4, 5];
arr.map(val => val * 2); // [2, 4, 6, 8, 10]

c. 箭头函数不能使用arguments

如果函数是使用箭头语法定义的，那么传给函数的参数将不能使用 arguments 关键字访问：

// 普通函数
let sum = function() {<!-- -->
	return arguments.length;
}
sum(1, 2, 3); // 3

// 箭头函数
let sum1 = () => {<!-- -->
	return arguments.length;
}

sum1(1, 2); // Uncaught ReferenceError: arguments is not defined

虽然箭头函数中没有 arguments 对象，但可以在包装函数中把它提供给箭头函数：

function foo() {<!-- -->
	let bar = () => {<!-- -->
		console.log(arguments.length);
	}
	bar(); 
}
foo(5, 5, 5);  // 3

d. 箭头函数中this 指向

let num = 11;
const obj1 = {<!-- -->
	num: 22,
	fn1: function() {<!-- -->
		let num = 33;
		const obj2 = {<!-- -->
			num: 44,
			fn2: () => {<!-- -->
				console.log(this.num);
			}
		}
		obj2.fn2();
	}
}
obj1.fn1(); // 22

fn2中得到的结果为：22

原因箭头函数没有this，箭头函数的this是继承父执行上下文里面的this ，这里箭头函数的执行上下文是函数fn1()，所以它就继承了fn1()的this，obj1调用的fn1，所以fn1的this指向obj1， 所以obj1.num 为 22。 注意：简单对象（非函数）是没有执行上下文的！

如果fn1也是个箭头函数呢？

let num = 11; // 
const obj1 = {<!-- -->
	num: 22,
	fn1: () => {<!-- -->
		let num = 33;
		const obj2 = {<!-- -->
			num: 44,
			fn2: () => {<!-- -->
				console.log(this.num);
			}
		}
		obj2.fn2();
	}
}
obj1.fn1();

上述结果为undefined，因为fn1也是一个箭头函数，所以它就只能继续向上找也就是window了。

那为什么是undefined而不是11呢？

这里涉及到var和let声明变量的一个区别：使用 let 在全局作用域中声明的变量不会成为 window 对象的属性，var 声明的变量则会(不过，let 声明仍然是在全局作用域中发生的，相应变量会在页面的生命周期内存续，所以使用window访问会为undefined)：

var a = 1;
window.a; // 1

let b = 1;
window.b; // undefined

将let改成var后：

var num = 11; // 
const obj1 = {<!-- -->
	num: 22,
	fn1: () => {<!-- -->
		let num = 33;
		const obj2 = {<!-- -->
			num: 44,
			fn2: () => {<!-- -->
				console.log(this.num);
			}
		}
		obj2.fn2();
	}
}
obj1.fn1();

此时结果为window.num => 11

5.vue中splice(),includes(),filter(),push()等方法的使用

a.push()和splice()

push()使用

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

注意：1. 新元素将添加在数组的末尾。 2.此方法改变数组的长度。

在这里插入图片描述

数组中添加新元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
console.log(fruits); 
//["Banana", "Orange", "Apple", "Mango","Kiwi"];

splice()使用

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目 注意：这种方法会改变原始数组

语法：

array.splice(index,len,item1,.....,itemX)

index: 必需，数组开始下标 （必须是数字）

len: 替换/删除的长度（必须是数字，但可以是 “0”；如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。）

item: 替换的值，删除操作的话 item为空 说明： 如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。

删除

//删除起始下标为1，长度为1的一个值(len设置1，如果为0，则数组不变)

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(1,1);
console.log(fruits); 
//["Banana", "Apple", "Mango"];

//删除起始下标为1，长度为2的一个值(len设置2)

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(1,2);
console.log(fruits); 
//["Banana", "Mango"];

替换

//替换起始下标为1，长度为1的一个值为‘ttt’，len设置的1

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(1,1,'ttt');
console.log(fruits); 
//["Banana", 'ttt',"Apple", "Mango"];

//替换起始下标为1，长度为2的两个值为‘ttt’，len设置的1

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(1,2,'ttt');
console.log(fruits); 
//["Banana", 'ttt', "Mango"];

添加

//在下标为1处添加一项’ttt’

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(1,0,'ttt');
console.log(fruits); 
//["Banana", 'ttt', "Orange", "Apple", "Mango"];

向数组中间添加元素

var items = ["1", "2", "3", "4"];
items.splice(items.length / 2, 0, "hello");
console.log(items);
// ["1", "2", "hello", "3", "4"]

b.includes用法

includes()的使用场景和作用。

  • 学习

includes() 方法用于判断字符串是否包含指定的子字符串，或者判断数组中是否有指定的元素。 例如：[‘hellow’,‘world’].includes(‘hellow’) ,如果数组存在指定元素就会返回true，没有就返回false。

  • 问题：

当在做逻辑判断的时候，发现不同状态下，会执行这个状态对应的操作，如果非常乱的时候，可以使用includes()来判断什么状态下应该执行什么样的操作。

  • 场景：

应用场景:发送请求从后端拿到一个数据(状态),根据这个数据的数据(状态)来进行对应的操作.

	<script>
	/*	
	*/
		var num = 7;//假设这是一个从后端拿到的数据，表示星期几
		
		if([1,3,5].includes(num)){<!-- -->//如果星期一、三、五吃饭堂
			console.log('吃饭堂');
		}
		else if([2,4,6].includes(num)){<!-- -->//如果星期二、四、六吃外卖
			console.log('吃外卖');
		}
		else{<!-- -->console.log('吃大餐');}//其他的就是星期日吃大餐

	</script>
</html>

总结：

假设num是一个状态，根据这个状态来执行不同的操作。上述例子是比较简单的情况，毕竟一周只有七天，但是如果是月呢？如果一个月30天，不同的日子吃什么。这种情况下如果写逻辑判断||的话就要写很多，而使用includes可以写出更加简洁的代码（优雅）。 。。。有的人会想switch不也可以实现吗？当然可以，喜欢就好。

c.filter用法

在Vue中filter过滤器是一个非常强大的功能。 个人觉得称它为加工车间会更加贴切一些。 过滤器可以用来筛选出符合条件的，丢弃不符合条件的； 加工车间既可以筛选，又可以对筛选出来的进行加工。

一、filter的作用是：对值进行筛选加工。 二、使用的地方有两个位置，和两个方式。

1 {<!-- -->{ msg | filterA }}双括号插值内。

2 <h1 v-bind:id=" msg | filterA">{<!-- -->{ msg }}</h1>v-bind绑定的值的地方。 （msg为需要filter处理的值，filterA为过滤器。） 方式

3 {<!-- -->{ msg | filterA }}单个使用。

4 {<!-- -->{ msg | filterA| filterB }}多个连用。

Vue.js 过滤器的基本使用（filter） vue中的过滤器分为两种：局部过滤器和全局过滤器

1、定义无参全局过滤器

<div id="app">
   <p>{<!-- -->{<!-- --> msg | msgFormat}}</p>
</div>

<script>
    // 定义一个 Vue 全局的过滤器，名字叫做  msgFormat
    Vue.filter('msgFormat', function(msg) {<!-- -->
        // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
        return msg.replace(/单纯/g, 'xx')
    })
</script>

2、定义有参全局过滤器

<div id="app">
  <p>{<!-- -->{<!-- --> msg | msgFormat('疯狂','--')}}</p>
</div>

<script>
    // 定义一个 Vue 全局的过滤器，名字叫做  msgFormat
    Vue.filter('msgFormat', function(msg, arg, arg2) {<!-- -->
        // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
        return msg.replace(/单纯/g, arg+arg2)
    })
</script>

3、局部过滤器

局部过滤器的有参和无参的定义和使用方法与全局的过滤器一样。唯一的区别在于局部过滤器是定义在vue的实例中。其作用的区域也是vue实例【#app】控制的区域

// 创建 Vue 实例，得到 ViewModel
 var vm = new Vue({<!-- -->
      el: '#app',
      data: {<!-- -->
          msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'
      },
      methods: {<!-- -->},
      //定义私用局部过滤器。只能在当前 vue 对象中使用
      filters: {<!-- -->
          dataFormat(msg) {<!-- -->
              return msg+'xxxxx';
          }
      }
  });

注意：

1、 当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！

2、 一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右

注：本文大量内容来自csdn，侵删！！！

avatar
文章
阅读
粉丝