html、css、js、ts基础

HTML相关

a标签

<a href="index.html">此窗口打开</a>、<a href="index.html" target="_self">此窗口打开</a>
这两个是等价的，a标签默认的target属性就是_self，这表示该链接在当前页面打开（跳转）

<a href="index.html" target="_blank">新窗口打开</a>：这表示该链接在新页面打开（跳转）

CSS相关

1.标签的style属性

style属性的值是由多个对象组成的，对象之间使用“;”（英文分号）分割开来，如下所示。

style="margin-top:15px;margin-bottom:500px"

js相关

1.常用js的骚操作

1.1.基础语法

let arr = [{name:"xiaolin",age:20},{name:"zhangsan",age:22}]
for (const item of arr){
	item.firstName=item.name;
}
结果：
arr[
{name:"xiaolin",age:20,firstName:"xiaolin"},
{name:"zhangsan",age:22,firstName:"zhangsan"}
]

js声明的对象是弱类型的
例如：
let a ={};
let b=[{"name":1,"value":2}];
a = b;
console.log(a); //结果a就变成了跟b一样的数组
同理如果 a声明的是数组，而b是对象，执行 a=b，a会变成跟b一样的对象


js的for循环，有for of 循环，for in 循环
for in是ES5标准，遍历key.
for (var key in arr){
    console.log(arr[key]);
}

for of是ES6标准，遍历value.
for (var value of arr){
    console.log(value);
}

说明：可以很清楚的看到数组arr中的对象都增加了一个属性；这种操作的原理就是const关键字；如果const变量指向的是基础数据类型，那么该变量值就不可变化，如果指向的是引用数据类型，那么该引用对象的地址不可变，但是，该引用对象的值（内容或者属性）是可以改变的

1.2.jquery对象和dom对象

jquery对象和dom对象不相同，当然jquery的函数dom对象也不能使用，要想使用jquery的函数，则需要将dom对象转化成jquery对象；

//获取id为 "testId"的dom对象
var documentObject = document.getElementById('testId');
将dom对象转化为jquery对象：$(documentObject)

//直接根据id获取jquery对象
$("#testId")

1.2.对象常用操作

  myheader.headers['login-type'] = 1：假如myheader是请求头，这一行则表示给请求头加了一个自定义（login-type）的字段
  delete myheader.headers['login-type']：将myheader请求头中新加的自定义字段（login-type）删除

2.常用js库函数

2.1.数据类型转化

JSON.stringify()：将js对象转换成json串
JSON.parse()：将json串转化为js对象
对象和数组相互转化：https://blog.youkuaiyun.com/petertanjinjie/article/details/110102932

2.2.字符串处理

indexOf()：获取指定字符在字符串中的位置
substring()：从指定位置开始到指定位置结束，截取字符串
应用
这两个函数组合，可以实现从字符串中的以某个特定字符串为分界线截取字符串，类似与java的split()方法

2.3js中的Map

（1）一般都是vue项目，所以在生命map类型的变量时，可以直接这样写

data(){
	return{
		map: new Map(),
	}
}

（2）常见用法

赋值：map.set(key,value);
注意：key是字符串类型

取值：map.get(key);

判断某个key是否存在：map.has(key)
注意：存在返回true，不存在返回false

删除某个key：map.delete(key)
删除某个key也就代表，key以及key对应的value都被删除了

清空：map.clear()，也就是删除map中所有的内容

//遍历map，打印内容
map.forEach(key=>{
　　console.log(“key”,key) //输出的是map中的value值
})

2.4.链接跳转

（1）在当前页面跳转

window.location.href="http://www.baidu.com"可以写成self.location.href="http://www.baidu.com"
等价于：<a href="baidu.com" target="_self">go baidu</a>

（2）新打开页面跳转

window.open("http://www.baidu.com") 
等价于：<a href="baidu.com" target="_blank">go baidu</a>

（3）跳转链接返回上一页

window.history.back(-1)：应该是跳转到上一个页面。例如，从a.html进入到了b.html，在b.html中使用这个，应该会跳转到a.html中

（4）获取当前页面的url（只有域名，不包括后面的uri）

window.location.origin（window.origin）这俩暂时未发现区别。例如，我在https://mp.weixin.qq.com/s?
__biz=Mzg5Mjc2NDYwMg==&mid=2247483893&idx=1&sn=e30431100cee1f6ebdfc45787791422e&chksm=c0386920
f74fe0365c2e4c9e921125f729847009bcd925ae617862f861b5e8a2dcf5f4876a59&token=114373383&lang=zh_CN#rd
这个页面的控制台执行"window.location.origin(window.origin)"得到的结果就是"https://mp.weixin.qq.com"

执行"window.location.href"得到的结果就是"https://mp.weixin.qq.com/s?
__biz=Mzg5Mjc2NDYwMg==&mid=2247483893&idx=1&sn=e30431100cee1f6ebdfc45787791422e&chksm=c0386920
f74fe0365c2e4c9e921125f729847009bcd925ae617862f861b5e8a2dcf5f4876a59&token=114373383&lang=zh_CN#rd"

知识扩展：

self：指代当前窗口对象，是window内置对象
location.href：指的是某window对象的url的地址。例如，self.location.href（window.location.href）指的的当前页面的url（就是https://editor.youkuaiyun.com/md/?articleId=113094002，这种的）
top.location.href：为引用当前页面的父页面的url。例如，a.html引用了b.html那么在b.html中使用top.location.href就可以拿到a.html的url（可以用来调跳转或者是做其他的事情）
window.location是一个对象，而window.location.href、window.location.origin这种只是window.location对象的属性而已，有本质的区别

（5）ReturnUrl

常见于登陆的时候，链接的跳转，例如登陆系统的页面的链接为，https://www.mytest.com?ReturnUrl=https://www.test.com
当我在登陆页面，登陆成功的时候，页面就会跳转到https://www.test.com
注意：除了登陆之外的其他场景，暂未见过会用到 ReturnUrl，后续可以留意一下

3.js常用工具（正则表达式）

3.2.正则表达式基本用法

x|y：匹配单个字符x或者单个字符y
[xyz]：匹配指定（xyz）字符的任意一个
[^xyz]：匹配非（xyz）字符的任意一个
[0-9]：匹配范围；表示0到9的所有数字
[^a-z]：匹配范围；表示非小写字母
^：匹配开头；例如 ：^[0-9]：表示以数字开头
$：匹配结尾；例如：[0-9]$：表示以数字结尾
*：匹配0次或多次；例如：[0-9]*：表示匹配0次或多次数字
?：匹配0次或1次；例如：[0-9]?：表示匹配0次或一次数字
+：匹配1次或多次；例如：[0-9]+：表示匹配1次或多次数字
{n}：匹配确定的n次；例如：[0-9]{5}；表示匹配5次数字
{n,m}：（n<=m）至少匹配n次，最多匹配m次；例如；[0-9]{1,2}：表示最少匹配一次数字，最多匹配2次数字

3 3.js常用工具

判断是否式数字

    isNumber(val) {
      var reg = /^[0-9]+$/;
      if (!reg.test(val)) {
        return false;
      } else {
        return true;
      }
    }

判断是否是小数

	isSmallNumber(val){
      let reg=/^[0-9]+\.?[0-9]+?$/;
      if(!reg.test(val)){
        return false;
      }else {
        return true;
      }
    }

4.js数组常用操作

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

结果：["Banana", "Orange", "Lemon","Kiwi", "Mango"];

总结：该函数的作用的是，删除指定位置 指定个数的元素；上面的哪个例子就是删除第二个位置的1个元素（"Apple"），并添加元素（也可以不添加），上面的哪个例子就是添加了两个元素。
fruits.splice(2, 1)：如果是这样写，就表示删除第二个位置的1个元素（"Apple"）

使用场景：在页面选中某一行数据，进行添加，添加的时候，往数组tableData中放了一行记录；添加完成之后，每一行后面都会有一个删除按钮，用这个可以使用数据的删除

5.Axios相关

浏览器默认跨域的请求不会携带cookie（浏览器的同源策略），如果使用Axios发送跨域请求，并且需要携带cookie，那就需要设置withCredentials属性为true（默认是false）
示例：axios.defaults.withCredentials = true
注意：主流浏览器的无痕模式（google、火狐），默认跨域都不会携带cookie，需要在浏览器中手动操作（关闭/开启）

ts相关