单选题
-
关于Vue组件的生命周期说法错误的是( C )
A. mounted钩子函数中,可以直接获取DOM元素
B. beforeMount钩子函数中,不可以直接获取DOM元素
C. beforeDestroy钩子函数中,不可以直接获取DOM元素
D. destroyed钩子函数中,不可以直接获取DOM元素注:
mounted一直到beforeDestroy都可以获取DOM元素
-
关于Vue组件的生命周期说法错误的是( C )?
A. 在data中的对象的某个属性和input双向绑定,修改input的值,在deforeDestroy中获取的值是修改过后的值
B. 父子组件生命周期的执行顺序是父亲beforecreate、父亲created、父亲beforeMount、孩子beforecreate、孩子created、孩子beforeMount、父亲mounted、孩子mounted、父亲beforeDestroy、孩子beforeDestroy、孩子destroyed、父亲destroyed
C. 在created钩子函数中操作DOM,可以将语句放在$nextTick中
D. ajax请求可以放在created钩子函数中注:
加载渲染:
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
更新:
子组件更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated
父组件更新过程
父beforeUpdate->父updated
销毁:
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed -
关于v-model的修饰符说法错误的是( C )
A. lazy修饰符让内容在“change”事件时而非“input”事件时更新
B. v-model添加number修饰符,可以自动将用户的输入值转为数值类型
C. 可以给v-model添加trim修饰符,自动过滤用户输入的首尾空白字符
D. v-model添加number修饰符,如果这个值无法被parseFloat()解析,则会返回null注:
v-model添加number修饰符,如果值不是数字,将不会有任何效果,直接返回输入值
-
下列关于v-for说法错误的是( C )
A. v-for指令基于一个数组来渲染一个列表
B. v-for指令需要使用item in items形式的特殊语法,其中items是源数据数组,而item则是被迭代的数组元素的别名
C. 不可以用v-for来遍历一个对象的property
D. v-for在使用的时候最好添加key,且key最好不是索引注:
user: {name: 'HerayChen'} <div v-for='(value, key, index) in user'>{{value}} {{key}} {{index}}</div> 输出为:HerayChen name 0
-
关于Vue组件化说法错误的是( B)
A. 所谓组件化,就是把页面拆分成多个组件 (component),每个组件依赖的 CSS、JavaScript、模板、图片等资源放在一起开发和维护
B. 组件是资源独立的,组件在系统内部可复用,但是组件和组件之间不可以嵌套
C. vue的组件之间可以进行通信
D. 组件化能提高开发效率,方便重复使用,简化调试步骤,提升项目可维护性,便于多人协同开发注:
组件是资源独立的,组件在系统内部可复用,但是组件和组件之间可以嵌套
-
关于Vue中的diff算法说法错误的是( D )
A. 比较只会在同层级节点进行比较, 不会跨层级比较
B. 在diff比较的过程中,循环从两边向中间收拢
C. vue的虚拟dom渲染真实dom的过程中首先会对新老VNode的开始和结束位置进行标记oldStartIdx、oldEndIdx、newStartIdx、newEndIdx
D. 当老VNode节点的start和新VNode节点的end满足sameVnode时,新VNode节点会被提到start位置注:
老 VNode 节点的start和新VNode节点的end满足 sameVnode 时,这说明这次数据更新后oldStartVnode已经跑到了oldEndVnode后面去了,这时候在patchVnode后,还需要将当前真实dom节点移动到oldEndVnode的后面,同时老VNode节点开始索引加 1,新VNode节点的结束索引减 1。
不了解的可以多看看diff算法
-
关于Vuex说法错误的是( C )
A. Vuex可以用来管理数据
B. Vuex也可以实现组件间的传值
C. Vuex的属性有state、mutations、actions、setters等
D. mutation中的方法按照规定最好不要涉及异步方法注:
vuex的五个属性:state、mutation、actions、getters, module
-
关于Vue组件间通信说法错误的是( D )
A. Vuex可以实现任何关系的组件间的通信
B. 如果子组件修改,通过props获取的父组件传过去的字符串或数字会报错
C. 子组件可以通过$emit给父组件传值
D. 可以通过context进行组件间传值注:
context是用在react中进行组件间的传值,Vue组件间传值可以通过props,$emit,Vuex, eventBus
-
下列关于Vue内置组件的描述错误的是( D )
A. transition:为组件的载入和切换提供动画效果
B. transition-group:作为多个元素/组件的过渡效果
C. keep-alive:缓存子组件,被包裹的子组件会多出两个生命周期:activated、deactivated
D. 当组件在keep-alive内被切换时,它的mounted和unmounted生命周期钩子也会被调用注:
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 相似, 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在组件的父组件链中。当组件在 内被切换时,它的 mounted 和 unmounted 生命周期钩子不会被调用,取而代之的是 activated 和 deactivated。(这会运用在 的直接子节点及其所有子孙节点。)
-
执行以下程序,输出结果为( C )
function a() {
console.log(this)
}
a.call(null);
---------------------------答案---------------------------
A. document
B. null
C. window
D. a注:
当call和apply的一个参数为null/undefined时函数内的this指向window或者global
-
下面那个方法不能改变自身数组( B )
A. splice
B. concat
C. sort
D. pop注:
concat连接数组但是不改变原数组,splice删除数据会改变数组,sort排序会改变数组,pop出栈返回最后一个改变数组
-
Math.round(-2019.5)的结果是( B )
A. 2019
B. -2019
C. 2020
D. -2020注:
Math.round()函数返回一个数字四舍五入后最接近的整数
如果参数的小数部分大于0.5,四舍五入到相邻的绝对值更大的整数
如果参数的小数部分小于0.5,四舍五入到相邻的绝对值更小的整数
如果参数的小数部分等于0.5,四舍五入到相邻的在正无穷(+∞)方向上的整数。 -
以下代码执行后,输出结果为( A )
let x = 10;
let foo = () => {
console.log(x);
let x = 20;
x++;
}
foo();
---------------------------答案---------------------------
A. 抛出ReferenceError
B. 10
C. 20
D. 21注: > 这题主要是考的let的块级作用域,将上述方法全部改为var就是undefined
-
从字符串 const str = ‘qwbewrbbeqqbbbweebbbbqee’;中能得到结果 [“b”, “bb”, “bbb”, “bbbb”] 以下错误语句是(B)
A. str.match(/b+/g)
B.str.match(/b*/g)
C.str.match(/b{1,4}/g)
D.str.match(/b{1,5}/g)注:
+表示出现至少一次b;*表示可以不出现b,也可以出现一次或多次;
{n,m}表示最少出现n次b,最多出现m次b -
执行下列代码之后,数组myArr的值是什么(C)
var myArr = [1,2,3,4,5]; myArr.shift();
A. [1, 2, 3, 4]
B. [1, 2, 3, 4, 5]
C. [2, 3, 4, 5]
D. []注:
这题主要考了数组的四个方法,
push()在数组的末属添加一个或多个元素
shift()把数组中的第一个元素删除
unshift()在数组的前端添加一个或多个元素
pop()方法把数组中的最后一个元素删除 -
关于javascript模块化,下列描述错误的是( B )
A.AMD推崇依赖前置,CMD推崇依赖就近
B.Sea.js遵循AMD规范,RequireJS遵循CMD规范
C.主流的模块化包括CommonJS/AMD/CMD等
D.模块化有利于管理模块间的依赖,更依赖模块的维护注:
CommonJS是服务器端的同步js模块化规范,由NodeJS实现
amd, cmd是用在浏览器端的异步模块化规范。
AMD依赖 前置书写,由require.js实现。
CMD依赖 就近书写,由sea.js实现。 -
下面这段javascript代码输出的是什么()
var myObject = { foo: 'bar', func: function() { var self = this; console.log(this.foo); console.log(self.foo); (function () { console.log(this.foo); console.log(self.foo); })() } } myObject.func();
A. bar bar bar bar
B. bar bar bar undefined
C. bar bar undefined bar
D. undefined undefined undefined undefined注:
在 func函数中,this 和 self 都指向 myObject,因此输出都是 bar,但在 inner 函式,IIFE 有自己的作用域,因此 this 输出为 undefined,但是 self 保存了 this 的指向,所以输出bar
-
下面这段JS程序的执行结果是( B )
var user = { count: 1, getCount: function () { return this.count; } } var func = user.getCount(); console.log(func);
A. this.count
B. 1
C. 报错
D. undefined -
以下代码执行后,a.x和b.x的结果分别为( C )
function A(x){ this.x = x; } A.prototype.x = 1; function B(x){ this.x = x; } B.prototype = new A(); var a = new A(2), b = new B(3); delete b.x;
A. 2, 3
B. 2, 1
C. 2, undefined
D. 其他几项都不对 -
执行以下程序,下列选项中,说法正确的是()
function Person(age) { this.age = age; } Person.sing = function () { console.log('我会唱歌'); } Person.prototype.getAge = function () { console.log(this.age); } Person.age = 20; var p = new Person(18); console.log(Person.prototype.constructor);
A. 输出结果为undefined
B. 若调用sing方法,可以使用p.sing()
C. 若调用getAge方法,可以使用p.getAge()
D. 若要访问对象p的age属性,可以使用p.age,返回结果为20注:
Person.prototype.constructor返回的是Person函数本身,
p.getAge()传递的参数会被替换所有返回的结果是18 -
以下代码执行后,array的结果是( A )
let array = [1, 2, 3];
array = array.map(i => ++i)A. [2, 3, 4];
B. [NaN, 2, NaN, 3, NaN, 4]
C. [1, 2, 1, 3, 1, 4]
D. [null, 2, null, 3, null, 4]注:
map遍历后会返回一个新数组
-
下面关于JavaScript中call和apply的描述,错误的是( B )
A. apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入
B. call与apply都属于Function.prototype的一个方法,所以每个function实例都有call、apply属性
C. 两者传递的参数不同,call函数第一个参数都是要传入给当前对象的对象,apply不是
D. call传入的则是直接的参数列表。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 -
关于JavaScript里的xml处理,以下说法不正确的是( B )
A. Xml是种可扩展标记语言,格式更规范,是作为未来html的替代
B. Xml一般用于传输和存储数据,是对html的补充,两者的目的不同
C. 在JavaScript里解析和处理xml数据时,因为浏览器的不同,其做法也不同
D. 在IE浏览器里处理xml,首先需要创建ActiveXObject对象注:
-
以下那个语句打印出来的结果是false( A )
A. alert(3 == true)
B. alert(2 == ‘2’)
C. alert(null == undefined)
D.isNaN(‘true’) -
执行以下程序,输出结果为( C )
function outer () { var num = 0; function inner () { num++; console.log(num); } return inner; } var f1 = outer(); f1(); f1(); var f2 = outer(); f2(); f2();
A. 1 2 3 4
B.1 1 1 1
C.1 2 1 2
D.1 1 2 2注:
函数执行完之后是会销毁的
-
在es6中,下面程序运行结果输出为,选项结果正确的是( D )
for (let i = 0; i < 12; i++) {} console.log(i); // 不是var,没有变量提升 所以是 not undefined const a = 12; a = 13; // 这里也会报错,变量没有指定数据类型 console.log(a); // 12 const g = {b: 3}; console.log(g.b); // 3 g.b = 12; console.log(g.b); // 12 let [head, ...tail] = [1, 2, 3, 4] console.log(tail); // [2, 3, 4]
A. 11, 12, 3, 12, [3, 4]
B.i not defined, TypeError, TypeError, 4
C. 11, 12, 3, 3, 4
D.i not defined, TypeError, 3, 12, [2, 3, 4] -
以下JavaScript代码,在浏览器中的运行结果为( B )
function foo () { console.log('first'); setTimeout(() => { console.log('second'); }, 5); } for (let i = 0; i < 4; i++) { foo(); }
A. first, second, first, second…依次顺序输出
B. 首先输出first,然后全部输出second
C. first, second无序输出
D. 首先输出first,超出5ms输出所有second,最后输出余下的first -
下面关于this工作原理的描述哪一个是错误的( C )
A.在全局范围内,this指向全局对象(浏览器下指的window)
B.对象函数调用时,this指向当前对象
C.全局函数调用时,this指向全局函数
D.使用new实例化对象时,this指向新创建的对象注:
全局函数调用时,this指向调用全局函数的那个对象.
多选题
-
下列关于webpack配置的描述正确的是( A B D )
A. module.rules可以指定多个loader,而loader的作用是对模块源码进行转换
B. plugin是一个具有apply方法的JavaScript对象,由于plugin可以携带参数,所以必须在配置中向plugins属性传入一个实例
C. 模块热替换会更替所有模块,立即在浏览器中进行更新
D. webpack开始处理程序时,从入口开始递归构建一个依赖关系图,包含了程序所需的模块,然后打包为少量的bundle,通常只有一个bundle注:
模块热替换:不用刷新浏览器而将新变更的模块替换掉旧的模块
-
关于v-model的修饰符说法正确的是( A B C )
A. lazy修改符让内容在change时间是而非input事件时更新
B. v-model添加number修饰符,可以自动让用户是的输入值转为数值类型
C. 可以给v-model添加trim修饰符,自动过滤用户输入的首尾字符
D. v-model添加number修饰符,如果这个值无法被parseFloat()解析,则会返回nullv-model添加number修饰符,如果这个值无法被parseFloat()解析,则会返回原始值
-
关于vuex说法正确的是( A B C D )
A. 可以使用this.$store.state获取vuex中存储的状态
B.getter的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算
C. 更改vuex的store中的状态的唯一方法是提交mutations中的方法
D. Actions可以包含任意异步操作,可以直接变更状态 -
在ECMAScript中,Promise的状态有( A C D )
A. Pending
B. Pause
C. Resolved
D. Rejected注:
promise 对象仅有三种状态
pending (进行中)
fulfilled (已成功)
rejected (已失败) -
关于正则表达式,下列说法不正确的是 ( A B D )
A. \w用来匹配数字
B. /a?/用来匹配0到多个a
C. i修饰符表示忽略大小写
D. #1表示对一个捕获组的引用注:
\w 匹配字母或数字或下划线或汉字
\s 匹配任意的空白符
\d 匹配数字
\b 匹配单词的开始或结束
^ 匹配字符串的开始
$ 匹配字符串的结束
\w 数字、字符串、下划线
/a?/ ?(0或1) +(一个或多个) *(0个或多个)
i 忽略大小写
?0 1
* 0 多
+ 1或多
\1表示对第一个捕获组的引用
问答题
-
1、 通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域资源共享(CORS)
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域 -
请自己封装一个去重函数,至少使用两种方法,可以用ES6新特性
第一种使用Es6的Set方法:
function getNewArray(arr) { let setArray = new Set(arr); // 将Set转换为一个真正的函数 let newArray = Array.from(setArray); return newArray; }
第二种方法手动过滤重复元素:
function getNewArray(arr) { // 定义一个新数组存储过滤后的元素 let newArray = []; arr.map(item => { // 判断当前元素是否存在在过滤后的数组里面 // 存在不执行,不存在将当前元素添加到过滤数组里面 newArray.includes(item) || newArray.push(item) }) return newArray; }
-
请编写一个JavaScript函数parseQueryString,它的用途是把URL解析为一个对象
function parseQueryString(str){ // url1.replace(/^.*\?/, '')截取url?后面的内容 key0=0&key1=1&key2=2 // .split('&') 按照 & 分隔成数组 ['key0=0', 'key1=1', 'key2=2'] var pairs = str.replace(/^.*\?/, '').split('&'), // 定义一个对象,存储解析后的url res = {}; pairs.map(item => { // item.split('=') 返回 ['key0', '0'] let itemArray = item.split('='); res[itemArray[0]] = itemArray[1]; }) return res; } var url1 = "http://www.taobao.com/index.php?key0=0&key1=1&key2=2"; console.log(parseQueryString(url1)); // 打印输出 {key0: '0', key1: '1', key2: '2'}
-
请封装一个promise1,一个promise2作用分别是延时1s时输出1,延时2s输出2,并让其按顺序执行
/* 第一种 */ function getResult(val) { setTimeout(() => { console.log(val); }, val * 1000); } getResult(1); getResult(2); /* 第二种 */ for (var i = 0; i < 3; i++) { setTimeout(function (j) { console.log(j) }, i * 1000, i); }
-
看看这段代码依次会输出什么
console.log('aaa'); setTimeout(() => { console.log('bbb'); }, 100); const start = new Date(); // 这里会阻塞 bbb 的执行 while(new Date() - start < 3000) { setTimeout(() => { console.log('ccc'); }, 0); } const p1 = new Promise((resolve, reject0) => { console.log('ddd'); resolve(); console.log('eee'); }); p1.then(() => { console.log('ggg'); }); console.log('fff'); // aaa ddd eee fff ggg ccc