目录
2.vue 在 created 和 mounted 这两个生命周期中请求数据有什么区别呢？
10.正则表达式构造函数var reg=new RegExp(“xxx”)与正则表达字面量var reg=//有什么不同？匹配邮箱的正则表达式？
1.微信小程序跳转的几种方式
1.使用导航组件，标签，页面链接来实现（可以发现点击时有背景）
2.给页面布局加监听bindtap事件，然后在方法里面，通过wx.navigatorTo来实现跳转（保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面）
3.通过wx.redirectTo实现跳转（关闭当前页面，跳转到应用内某个页面）
4.通过wx.navigateBack返回上一级（关闭当前页面。返回上一页面或多级页面）
2.vue 在 created 和 mounted 这两个生命周期中请求数据有什么区别呢？
看实际情况，一般在 created（或 beforeRouter） 里面就可以，如果涉及到需要页面加载完成之后的话就用 mounted。在 created 的时候，视图中的 html 并没有渲染出来，所以此时如果直接去操作 html 的 dom 节点，一定找不到相关的元素而在 mounted 中，由于此时 html 已经渲染出来了，所以可以直接操作 dom 节点，（此时 document.getelementById 即可生效了）
3.闭包是什么？有什么特性？对页面会有什么影响
闭包可以简单理解成：定义在一个函数内部的函数。其中一个内部函数在包含它们的外部函数之外被调用时，就会形成闭包。
特点：
1.函数嵌套函数。
2.函数内部可以引用外部的参数和变量。
3.参数和变量不会被垃圾回收机制回收。
使用：
1.读取函数内部的变量；
2.这些变量的值始终保持在内存中，不会在外层函数调用后被自动清除
优点：
1:变量长期驻扎在内存中；
2:避免全局变量的污染；
3:私有成员的存在 ；
缺点：会造成内存泄露
4.常见的CSS布局单位
1.像素（px）是页面布局的基础，一个像素表示终端（电脑、手机、平板等）屏幕所能显示的最小的区域，像素分为两种类型：CSS像素和物理像素：
-
CSS像素：为web开发者提供，在CSS中使用的一个抽象单位；
-
物理像素：只与设备的硬件密度有关，任何设备的物理像素都是固定的。
2.百分比（%），当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。一般认为子元素的百分比相对于直接父元素。
3.em和rem相对于px更具灵活性，它们都是相对长度单位，它们之间的区别：em相对于父元素，rem相对于根元素。
-
em： 文本相对长度单位。相对于当前对象内文本的字体尺寸。如果当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸(默认16px)。(相对父元素的字体大小倍数)。
-
rem： rem是CSS3新增的一个相对单位，相对于根元素（html元素）的font-size的倍数。作用：利用rem可以实现简单的响应式布局，可以利用html元素中字体的大小与屏幕间的比值来设置font-size的值，以此实现当屏幕分辨率变化时让元素也随之变化。
4.vw/vh是与视图窗口有关的单位，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。
-
vw：相对于视窗的宽度，视窗宽度是100vw；
-
vh：相对于视窗的高度，视窗高度是100vh；
-
vmin：vw和vh中的较小值；
-
vmax：vw和vh中的较大值；
5.vw/vh 和百分比很类似，两者的区别：
-
百分比（
%）：大部分相对于祖先元素，也有相对于自身的情况比如（border-radius、translate等) -
vw/vm：相对于视窗的尺寸
5.水平垂直居中的实现
- 利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心。该方法需要考虑浏览器兼容问题。
.parent { position: relative;} .child { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);} - 利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。该方法适用于盒子有宽高的情况：
.parent { position: relative; } .child { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } - 利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。该方法适用于盒子宽高已知的情况
.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; margin-top: -50px; /* 自身 height 的一半 */ margin-left: -50px; /* 自身 width 的一半 */ } - 使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。该方法要考虑兼容的问题，该方法在移动端用的较多：
.parent { display: flex; justify-content:center; align-items:center; }
6.如何用CSS实现0.5px的直线
- box-shadow阴影实现的答案
<style> div { box-sizing: border-box; background-color: blueviolet; width: 200px; height: 200px; margin: 100px auto; /* border: 1px solid red; */ box-shadow: 0px 0px 0px 0.5px green; } </style> </head> <body> <div></div> </body> - ::after定位伪类实现的答案
<style> div { position: relative; box-sizing: border-box; background-color: blueviolet; width: 200px; height: 200px; margin-top: 10px; /* box-shadow: 0px 0px 0px 0.5px green; */ } div::after { position: absolute; content: ""; background-color: red; width: 100%; height: 0.5px; bottom: 0px; } </style> </head> <body> <div></div> </body> - transform 缩放实现的答案
<style> div { position: relative; box-sizing: border-box; background-color: blueviolet; width: 200px; height: 200px; margin-top: 10px; /* box-shadow: 0px 0px 0px 0.5px green; */ } div::after { position: absolute; content: ""; width: 200%; height: 200%; border: 1px solid red; transform-origin: 0 0; transform: scale(0.5); } </style> </head> <body> <div></div> </body> - border-image: linear-gradient 边框线性渐变的答案
<style> div { position: relative; box-sizing: border-box; background-color: blueviolet; width: 200px; height: 200px; margin-top: 10px; /* box-shadow: 0px 0px 0px 0.5px green; */ } div::after { display: block; position: absolute; content: ""; width: 100%; height: 1px; bottom: 0px; background-color: red; background: linear-gradient(to bottom, transparent 50%, red 50%); } </style> </head> <body> <div></div> </body>
7.js+html实现99乘法口诀
var i; //定义行数
var j; //定义列数
document.write("<table align='center' cellspacing='0'>"); //使用table标签包裹住循环体
for (i = 1;i <= 9;i++){ //循环9行
document.write("<tr>") //使用tr包裹住一行
for(j = 1;j <= i;j++){ //循环9列 j <= i时循环
document.write("<td>");
//输出“列*行=结果”
document.write(j + "*" + i + "=" + i*j + " ");
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table>");
使用css给每个td添加一个边框
td{
border: black solid 1px;
}
8.javascript 常用数组函数
数组常用属性：
length：返回数组长度。
一、一般方法
join：合并数组并转换为字符串。参数代表以其分隔，一般为空时给一个空字符串。
pop：删除数组末尾的元素。
push：向数组末尾添加元素。
shift:删除数组第一个元素。
unshift：向数组的头部添加一个或多个元素，返回值为长度。
reverse：颠倒数组内元素。
slice：从数组内截取数组。第一个参数为开始下标，第二个参数为结束下标（不包含）。
concat：连接两个或以上的数组。
splice：删除或修改添加数组。
splice（开始下标，删除数量，[删除的内容替换为的新内容]）//第三个参数可选。
toString：把数组转换为字符串，返回值结果。
indexOf：查找数组是否包含值，返回值为查找到值的下标。
includes：返回是否包含参数。
二、复杂方法（参数为回调函数）
map：数组循环，遍历。
let num=[1,2,3,5,7,8,10];
num.map((item,index)=>{
//此处写需要执行的代码 item:每一项的值，index：每一项的下标
});
some：数组循环，遍历，返回值为判断结果。当条件只要有一个成立，就返回true，反之false。
let num=[1,2,3,5,7,8,10];
let result=num.some((item,index)=>{
return item===7;//判断是否存在值，存在就返回true
});
every：数组循环，遍历，返回值为判断结果。当条件全部成立，就返回true，反之false。
let num=[1,2,3,5,7,8,10];
let result=num.every((item,index)=>{
return item>0;//全部满足这个条件，就返回true。
});
filter：数组循环，遍历，返回值为满足条件的数组元素。当条件为true时，当前数组元素就能被返回。
let num=[1,2,3,5,7,8,10];
let num2=num.filter((item,index)=>{
return item%2===0;//返回所有偶数
});
console.log(num2);//num2是一个数组，元素为所有满足条件的元素
sort：对数组进行排序。参数为闭包函数，以什么方式排序。
9.javascript 常用的字符串函数
定义一个字符串
var str = "Aheloworld";
1、获取字符串的长度 length
var str = "Aheloworld";
console.log("str变量中字符串的长度为："+str.length)
2、charAt()方法可返回指定位置的字符
var str = "Aheloworld";
var str1 = str.charAt(3)
console.log("通过charAt()方法指定下标返回字符为："+str1)
3、 charcodeAt() 方法可返回指定位置的字符的 Unicode 编码 语法string.charCodeAt(index)
var str = "Aheloworld";
var str1 = str.charCodeAt(0)
console.log("通过charCodeAt()方法指定下标返回指定位置的字符的 Unicode 编码为："+str1)
4、fromcharcode() 可接受一个指定的 Unicode 值，然后返回一个字符串
var str = "Aheloworld";
var str1 = String.fromCharCode(65)
console.log("fromcharcode()指定的 Unicode 值，然后返回一个字符串"+str1)
5、concat() 拼接字符串 可同时拼接过个字符串 作用等同于+
var str = "Aheloworld";
var str1 = str.concat("二傻子","三傻子")
console.log("concat() 拼接字符串后的结果为："+str1)
6、indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
如果没有找到匹配的字符串则返回 -1
string.indexOf(searchvalue,start)
var str = "heloworld"
var str1 = str.indexOf("l");
console.log("通过indexOf()查找指定字符串第一次出现的位置的下标："+str1)
var str1 = str.indexOf("l",3);
console.log("通过indexOf()查找指定字符串规定字符串查找位置的开始地点，返回出现的位置的下标："+str1)
var str1 = str.indexOf("l");
console.log("通过indexOf()查找指定字符串如果字符串不存在，返回-1："+str1)
7、lastindexof() 从后往前找，下标从0往后数
var str = "abcABCabc"
var str1 = str.lastIndexOf("a")
console.log("通过lastIndexOf()查找指定字符串最后一次出现的位置的下标【从后往前找，下标从0往后数】："+str1)
8、 slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。 不改变源数组
参数1：开始位置的索引（包含了开始位置）
参数2：结束位置的索引（不包含结束位置）
注意：
1- 如果省略第二个参数，则会截取后面所有的字符串
2- 如果传递一个负数，会从后面开始计算
var str = "abcABCabc"
var str1 = str.slice(1,4)
console.log("slice()方法提取str2字符串中 下标1开始到下标4之前结束的字符串为："+str1)
var str1 = str.slice(1,-3)// bcABC
var str1 = str.slice(0)//bcABCabc
var str1 = str.slice(-3,-1)//ab
console.log(str1)
9、 substring() 方法返回的子串包括 开始 处的字符，但不包括 结束 处的字符。
参数1：开始截取的索引（包含了开始位置）
参数2：结束位置的索引（不包含结束位置）
注意：
1- 如果传递一个负数，默认为0
2- 如果传递的第一个参数大于第二个参数，则自动交换
var str = "aocdefghyjklmn"
// var str1 = str.substring(0,3)
var str1 = str.substring(4,2)
console.log(str1)
10、substr() 方法可在字符串中抽取从 开始 下标开始的指定数目的字符。
参数1：提取字符串的起始位置 如果为负数，默认从后向前计算
参数2：提取字符串的数量
注意：
无论是正数还是负数 都从左向右计算
var str = "aocdefghyjklmn"
var str1 = str.substr(2,3)
var str1 = str.substr(-3,3)
console.log(str1)
11、split() 方法用于把一个字符串分割成字符串数组。
如果不指定拆分的字符，则每个字符为一个数组元素
如果指定拆分的字符，则以指定字符拆分为数组元素
var str = "aocdefghyjklmn"
var arr = str.split("")
var arr = str.split("f")
console.log(arr)
12、 toUpperCase() 转为大写 toLowerCase() 转为小写
var str6 = "abcABC"
console.log("转为大写"+str6.toUpperCase())
console.log("转为小写"+str6.toLowerCase())
10.正则表达式构造函数var reg=new RegExp(“xxx”)与正则表达字面量var reg=//有什么不同？匹配邮箱的正则表达式？
当使用RegExp()构造函数的时候，不仅需要转义引号（即\”表示”），并且还需要双反斜杠（即\\表示一个\）。使用正则表达字面量的效率更高
邮箱的正则匹配：
var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;
11.node.js中的同步和异步如何理解？
同步逐条执行- 调用一旦开始，调用者必须等到方法调用返回后，才能继续后续的行为。
异步跳过执行- 调用一旦开始，方法调用就会立即返回，调用者就可以继续后续的操作。