一、JS常用数组和字符串函数:
(1)数组
1、Array.map():此方法是将数组的每个元素调用一个提供的函数,结果作为一个新的数组返回,没有改变原来的数组。
2、Array.forEach():此方法是将数组中的每个元素执行传进提供的函数,没有返回值,注意和map方法的区分。
3、Array.filter():此方法是将所有元素进行判断,将满足条件的原色作为一个新的数组返回。
4、Array.every():此方法是将所有元素进行判断返回一个布尔值,如果所有元素都满足判断条件,则返回true,否则为false。
5、Array.some():此方法是将所有元素进行判断返回一个布尔值,如果存在元素都满足判断条件,则返回true,若所有元素都不满足判断条件,则返回false。
6、Array.reduce():此方法是所有元素调用返回函数,返回值为最后结果,传入的值必须是函数类型。
7、Array.push():此方法是在数组的后面添加新加元素,此方法改变了数组的长度。
8、Array.pop():此方法在数组后面删除最后一个元素,并返回数组,此方法改变了数组的长度。
9、Array.shift():此方法是将一个或多个元素添加到数组的开头,并返回新数组的长度。
10、Array.isArray():判断是不是一个数组,返回布尔值。
11、Array.toString():此方法将数组转化为字符串。
12、Array.join():此方法也是将数组转化为字符串。
13、Array.splice:开始位置, 删除的个数,元素):万能方法,可以实现增删改。
14、Array.slice:slice() 方法与 splice() 方法功能相近,但是它仅能够截取数组中指定区段的元素,并返回这个子数组。该方法包含两个参数,分别指定截取子数组的起始和结束位置的下标。
(2)String字符串
属性:
属性 | 描述 |
---|---|
constructor | 对创建该对象的函数的引用 |
length | 字符串的长度 |
prototype | 允许您向对象添加属性和方法 |
函数:
方法 | 描述 |
---|---|
charAt() | 返回在指定位置的字符。 |
charCodeAt() | 返回在指定的位置的字符的 Unicode 编码。 |
concat() | 连接两个或更多字符串,并返回新的字符串。 |
fromCharCode() | 将 Unicode 编码转为字符。 |
indexOf() | 返回某个指定的字符串值在字符串中首次出现的位置。 |
includes() | 查找字符串中是否包含指定的子字符串。 |
lastIndexOf() | 从后向前搜索字符串,并从起始位置(0)开始计算返回字符串最后出现的位置。 |
match() | 查找找到一个或多个正则表达式的匹配。 |
repeat() | 复制字符串指定次数,并将它们连接在一起返回。 |
replace() | 在字符串中查找匹配的子串, 并替换与正则表达式匹配的子串。 |
search() | 查找与正则表达式相匹配的值。 |
slice() | 提取字符串的片断,并在新的字符串中返回被提取的部分。 |
split() | 把字符串分割为字符串数组。 |
startsWith() | 查看字符串是否以指定的子字符串开头。 |
substr() | 从起始索引号提取字符串中指定数目的字符。 |
substring() | 提取字符串中两个指定的索引号之间的字符。 |
toLowerCase() | 把字符串转换为小写。 |
toUpperCase() | 把字符串转换为大写。 |
trim() | 去除字符串两边的空白 |
toLocaleLowerCase() | 根据本地主机的语言环境把字符串转换为小写。 |
toLocaleUpperCase() | 根据本地主机的语言环境把字符串转换为大写。 |
valueOf() | 返回某个字符串对象的原始值。 |
toString() | 返回一个字符串。 |
二、数组去重
1、利用ES6 Set去重(ES6中最常用)
function unique (arr) {
return Array.from(new Set(arr))
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]
[...new Set(arr)]
//代码就是这么少
不考虑兼容性,这种去重的方法代码最少。这种方法还无法去掉“{}”空对象,后面的高阶方法会添加去掉重复“{}”的方法。
2、利用for嵌套for,然后splice去重(ES5中最常用)
function unique(arr){
for(var i=0; i<arr.length; i++){
for(var j=i+1; j<arr.length; j++){
if(arr[i]==arr[j]){ //第一个等同于第二个,splice方法删除第二个
arr.splice(j,1);
j--;
}
}
}
return arr;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
//[1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}] //NaN和{}没有去重,两个null直接消失了
双层循环,外层循环元素,内层循环时比较值。值相同时,则删去这个值。
方法很多,两种思维:唯一key替换、双循环判断。
三、div垂直水平居中
1、绝对定位:利用position和transform。
.curr_div{
background:red;
position: absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
}
2、flex布局方法:在当前div的父级添加flex css样式。
.parent_div{
height:800px;
-webkit-display:flex;
display:flex;
-webkit-align-items:center;
align-items:center;
-webkit-justify-content:center;
justify-content:center;
border:1px solid #ccc;
}
.curr_div{
width:600px;
height:600px;
background-color:red;
}
3、table-cell实现水平垂直居中: table-cell middle center组合使用。
.curr_div {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 240px;
height: 180px;
border:1px solid #666;
}
四、JS中var和es6的let和const的不同点?
1、let是es6新增的声明变量的方式 :
(1)作用域是块级作用域
(2)不存在变量提升
(3)不能重复定义,否则会报错
(4)存在暂时性死区(在声明之前引用的话会产生死区)
2、 const:
用来声明常量,且声明的常量是不允许改变的(否则会报错),只读属性,因此就要在声明的同时赋值。const与let一样,都是块级作用域,存在暂时性死区,不存在变量声明提前,不允许重复定义
3、 var 是es6之前 js用来声明变量的方法,其特性是:
(1)var的作用域是函数作用域,在一个函数内利用var声明一个变量,则这个变量只在这个函数内有效
(2)存在变量声明提前(虽然变量声明提前,但变量的赋值并没有提前,若是在声明前用到变量的话,值为undefined)
五、Promise是同步还是异步?有什么特点?
Promise 是一个 ECMAScript 6 提供的类,目的是更加优雅地书写复杂的异步任务。
六、Cookie、localStorage、sessionStorage的区别?
特性 | Cookie | localStorage | sessionStorage |
---|---|---|---|
数据的生命期 | 一般由服务器生成,可设置失效时间。如果在浏览器端生成Cookie,默认是关闭浏览器后失效 | 除非被清除,否则永久保存 | 仅在当前会话下有效,关闭页面或浏览器后被清除 |
存放数据大小 | 4K左右 | 一般为5MB | |
与服务器端通信 | 每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题 | 仅在客户端(即浏览器)中保存,不参与和服务器的通信 | |
易用性 | 需要程序员自己封装,源生的Cookie接口不友好 | 源生接口可以接受,亦可再次封装来对Object和Array有更好的支持 |
七、Vue常用的指令?
1、v-if:根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
2、v-show:根据表达式之真假值,切换元素的 display CSS 属性。
3、v-for:循环指令,基于一个数组或者对象渲染一个列表,vue 2.0以上必须需配合 key值 使用。
4、v-bind:动态地绑定一个或多个特性,或一个组件 prop 到表达式。
5、v-on:用于监听指定元素的DOM事件,比如点击事件。绑定事件监听器。
6、v-model:实现表单输入和应用状态之间的双向绑定
7、v-pre:跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
8、v-once:只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
9、v-html:指定内容会以html标签的方式写入。
八、Vue父子组件如何传递数据?
1、父传子:可以通过子组件中,props中的入参传入。
2、子传父:$emit(name,data),的方式暴露。
九、请写出vue的生命周期?
1、new Vue()
2、beforeCreate()
3、created()
4、beforeMount()
5、mounted()
5.1、beforeUpdate()
5.2、update()
6、beforeDestroy()
7、destory()
十、路由的生命周期
1、全局守卫
router.beforeEach((to, from, next) => {
// 全局前置守卫
// if(to.fullPath === '/shoppingCart'){
// //如果没有登录?对不起先去登录一下
// next('/login')
// }
console.log('1 beforeEach', to, from)
next()
})
// 时间触发比 全局前置守卫慢些
router.beforeResolve((to, from, next) => {
// 全局解析守卫
console.log('3 beforeResolve', to, from)
next()
})
router.afterEach((to, from) => {
// 全局后置守卫、钩子
console.log('4 afterEach', to, from)
})
2、路由独立守卫router.js
{
path: '/a',
name: 'pageA',
components:{
default:pageA,
ppp:Test
},
beforeEnter:(to,from,next)=>{
console.log('2 beforeEnter',to,from)
next()
},
},
3、组件内守卫xxx.vue
export default {
beforeRouteEnter(to,from,next){
//这里 拿不到this
// 路由跳转,使用此组件时触发
console.log('beforeRouteEnter',to,from)
next()
},
beforeRouteUpdate(to,from,next){
//可以获取 this
// /a/123 /a/456 当 组件被复用时,触发此方法
console.log('beforeRouteUpdate',to,from)
next()
},
beforeRouteLeave(to,from,next){
//可以获取this
//路由跳转,不适用此组件时触发
console.log('beforeRouteLeave',to,from)
next()
}
}