亲临面试题目

chengwy_1

于 2021-09-14 08:04:21 发布

阅读量216

点赞数

文章标签： javascript 面试正则表达式

本文链接：https://blog.csdn.net/chengwy_1/article/details/120277960

版权

1、判断其是否是数组的函数是：
（1）用Array对象isArray方法来判断
（2）用instanceof判断
（3）object.prototype.tostring

2、js获取URL参数值得两种方式：
方法一：采用正则表达式获取地址栏参数：（强烈推荐，既实用又方便！）
//截取url数据方法
var getParam = function (name) {
var search = document.location.search;
//alert(search);
var pattern = new RegExp("[?&]" + name + “=([^&]+)”, “g”);
var matcher = pattern.exec(search);
var items = null;
if (null != matcher) {
try {
items = decodeURIComponent(decodeURIComponent(matcher[1]));
} catch (e) {
try {
items = decodeURIComponent(matcher[1]);
} catch (e) {
items = matcher[1];
}
}
}
return items;
};

方法二：split拆分法
function GetRequest() {
var url = location.search; //获取url中"?“符后的字串
var theRequest = new Object();
if (url.indexOf(”?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for(var i = 0; i < strs.length; i ++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
return theRequest;
}
var Request = new Object();
Request = GetRequest();
// var 参数1,参数2,参数3,参数N;
// 参数1 = Request[‘参数1’];
// 参数2 = Request[‘参数2’];
// 参数3 = Request[‘参数3’];
// 参数N = Request[‘参数N’];

3、vueX的存储数据是存储在哪里

1.区别：vuex存储在内存，
localstorage（本地存储）则以文件的方式存储在本地,永久保存；sessionstorage( 会话存储 ) ,临时保存。
localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理

2.应用场景：vuex用于组件之间的传值，localstorage，sessionstorage则主要用于不同页面之间的传值。

3.永久性：当刷新页面（这里的刷新页面指的是 --> F5刷新,属于清除内存了）时vuex存储的值会丢失，sessionstorage页面关闭后就清除掉了，localstorage不会。

4.如何统计一个字符串重复的次数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
 
<script>
  var str = 'abccbaaab'
  var obj = {}
  for(var i =0 ; i < str.length ; i++){
    if(obj[str.charAt(i)]){
      obj[str.charAt(i)] ++
    }else{
      obj[str.charAt(i)] = 1
    }
  }
  console.log(obj)
</script>
</body>

5、settimeout的返回值是什么

返回整型数值id,是setTimeout的唯一标识符,可用于取消setTimeout设置的函数

6、判断其数据类型的方法有哪些

（1）typeof

这个方法很常见，一般用来判断基本数据类型，如：string，number，boolean，symbol，bigint（es10新增一种基本数据类型bigint，详细介绍），undefined等。
typeof 目前能返回string，number，boolean，symbol，bigint，unfined，object，function这八种判断类型，无法判断其NULL

（2）instanceof
一般用来判断引用数据类型的判断，如：Object，Function，Array，Date，RegExp等
/s/g instanceof RegExp true
new Date(‘2019/01/05’) instanceof Date true
[1,2,3] instanceof Array true

instanceof 主要的作用就是判断一个实例是否属于某种类型，例如：
let animal = function () {}
let monkey = new animal()
monkey instanceof animal true

（3）constructor

当执行 var f = new F() 时，F被当成了构造函数，f是F的实例对象，此时F原型上的constructor传递到了f上，因此f.constructor == F
可以看出，JS在函数F的原型上定义了constructor，当F被当作构造函数用来创建对象时，创建的新对象就被标记为了“F” 类型，使得新对象有名有姓，可以追溯。

同理,JS中的数据类型也遵守这个规则：
细节问题：
1.null和undefined是无效的对象，因此是不会有constructor存在的
2.JS对象的constructor是不稳定的，这个主要体现在自定义对象上，当开发者重写prototype后，原有的constructor会丢失，constructor会默认为Object

（4）Object.prototype.toString（这个是判断类型最准的方法）
toString是Object原型对象上的一个方法，该方法默认返回其调用者的具体类型，更严格的讲，是 toString运行时this指向的对象类型, 返回的类型格式为[object,xxx]，xxx是具体的数据类型，其中包括：String,Number,Boolean,Undefined,Null,Function,Date,Array,RegExp,Error,HTMLDocument,… 基本上所有对象的类型都可以通过这个方法获取到。

7、继承什么是继承及其方法
什么是继承
js中的继承就是获取存在对象已有属性和方法的一种方式.
构造函数的属性继承：借用构造函数

function Person (name, age) {
  this.type = 'human'
  this.name = name
  this.age = age
}

function Student (name, age) {
  // 借用构造函数继承属性成员
  Person.call(this, name, age)
}

var s1 = Student('张三', 18)
console.log(s1.type, s1.name, s1.age) // => human 张三 18

原型继承

function Person (name, age) {
  this.type = 'human'
  this.name = name
  this.age = age
}

Person.prototype.sayName = function () {
  console.log('hello ' + this.name)
}

function Student (name, age) {
  Person.call(this, name, age)
}

// 利用原型的特性实现继承
Student.prototype = new Person()
var s1 = Student('张三', 18)
console.log(s1.type) // => human
s1.sayName() // => hello 张三

构造函数的原型方法继承：拷贝继承（for-in）

function Person (name, age) {
  this.type = 'human'
  this.name = name
  this.age = age
}
Person.prototype.sayName = function () {
  console.log('hello ' + this.name)
}
function Student (name, age) {
  Person.call(this, name, age)
}

// 原型对象拷贝继承原型对象成员
for(var key in Person.prototype) {
  Student.prototype[key] = Person.prototype[key]
}

var s1 = Student('张三', 18)

s1.sayName() // => hello 张三

8、Vue.js 是什么

Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API；

9、箭头函数和普通函数的区别：
1、箭头函数是匿名函数，不能作为构造函数，不能使用new
2、箭头函数不绑定arguments，取而代之用rest参数…解决
3、箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值
4、箭头函数通过 call() 或 apply() 方法调用一个函数时，只传入了一个参数，对 this 并没有影响。
5、箭头函数没有原型属性
6、箭头函数不能当做Generator函数,不能使用yield关键字

10.、fetch和ajax的认识和区别
fetch
fetch是基于promise实现的，也可以结合async/await。
fetch请求默认是不带cookie的，需要设置fetch（URL，{credentials:’include’})。
Credentials有三种参数：same-origin，include，*
服务器返回400 500 状态码时并不会reject，只有网络出错导致请求不能完成时，fetch才会被reject。
所有版本的 IE 均不支持原生 Fetch。
fetch是widow的一个方法；

ajax
是XMLHTTPRequest的一个实例；
只有当状态为200或者304时才会请求成功；

11、promise原理以及实现
promise的原理

12、解决谷歌浏览器字体12px 限制后各种问题解决方案

定了一个scale的标准属性，来实现元素的放大和缩小。scale是缩写，它完整名字是transform:scale(x);

13、如何理解其Promise.all方法

Promise.all()实现根据传入url顺序, 返回按序结果

这里可以使用Promise.all()方法实现, 异步网络请求, 返回的数据也是按序的.

14、原型链是什么
什么是原型链？

原型链通俗易懂的理解就是可以把它想象成一个链条，互相连接构成一整串链子！
而原型链中就是实例对象和原型对象之间的链接。每个函数都有一个prototype属性，这个prototype属性就是我们的原型对象，我们拿这个函数通过new构造函数创建出来的实例对象，这个实例对象自己会有一个指针(proto)指向他的构造函数的原型对象！这样构造函数和实例对象之间就通过( proto )连接在一起形成了一条链子。

为什么要使用原型链呢？
1.为了实现继承，简化代码，实现代码重用！
2.只要是这个链条上的内容，都可以被访问和使用到！

原型链的特点
1、就近原则，当我们要使用一个值时，程序会优先查找离自己最近的，也就是本身有没有，如果自己没有，他就会沿着原型链向上查找，如果还没有找到，它还会沿着原型链继续向上查找，找到到达Object
2、引用类型，当我们使用或者修改原型链上的值时，其实使用的是同一个值！
3、JS中每个函数都存在原型对象属性prototype。并且所有函数的默认原型都是Object的实例。
4、每个继承父函数的实例对象都包含一个内部属性_proto_。该属性包含一个指针，指向父函数的prototype。若父函数的原型对象的_proto_属性为再上一层函数。在此过程中就形成了原型链。

15、vue中router传参如何进行传输

Router传参的方式

16、数组有哪些方法

1、push();在数组尾部添加一个或者多个元素，并且返回数组的新长度。
2、unshift();在数组头部添加一个或者多个元素，并且返回数组的新长度。
3、pop();删除数组尾部的最后一个元素，并且将这个被删除的元素返回。
4、shift();删除数组的第一个元素，并且返回被删除的元素。
5、concat();合并两个或更多的数组，并返回新数组。
6、join();就是将数组的每个元素以指定的字符连接，形成新字符串返回。
7、splice() 插入，删除，替换元素。
8、slice();按指定位置截取复制数组的内容。
9、indexOf 从前向后查找。
10、lastIndexOf 从后向前查找。
11、forEach用于遍历数组。
12、map会返回一个与原数组长度相等的新数组。
13、sort();对数组的元素进行排序（仅适用于数值)。
语法：数组.sort(function(后一项,前一项){});仅适用于数值。
14、some();对数组的每个元素判断是否满足条件，如果都不满足就返回false，如果有一个满足的就返回true，并且不再判断后面的内容。
15、every();对数组的每个元素判断是否满足条件，如果有一个不满足条件就返回为false，全部满足时返回true。
16、filter();方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
17、reduce();方法对累计器和数组中的每个元素（从左到右）应用一个函数，将其简化为单个值。
18、Array.isArray();判断元素是否是数组，如果是数组返回true，否则返回false。

17、push中可否进行添加一个数组

将一个数组push到另一个数组中

 
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>将一个数组push到另一个数组中去</title>
</head>
 
<body>
    <script>
        /*
        将arr1数组里面的值复制到arr数组里面，
        生成一个新的数组。['apple', 'banana', 'pear']
        */
        const arr= ['apple', 'banana', 'pear','orange', 'maongo'];
        const arr1= ['orange', 'maongo'];
 
 
        // //你可能会使用：push()方法
        // arr.push(arr1);
        // console.log(fruit)//(6) ["apple", "banana", "pear", "orange", "maongo", Array(2)]
 
 
        // //当你使用push()方法的时候你发现，并没有我们想的形式,这个时候我们需要apply()方法
        // arr.push.apply(arr,arr1);
        // console.log(fruit)//(7) ["apple", "banana", "pear", "orange", "maongo", "orange", "maongo"]
 
 
        //其实没有必要这么麻烦，直接用...就可以替代apply()方法
        // ... 是ES6的语法 解析的意思
         arr.push(...arr1);
        console.log(arr)//(7) ["apple", "banana", "pear", "orange", "maongo", "orange", "maongo"]
 
 
    </script>
</body>

18、vue懒加载的流程是什么样的
VUE懒加载

19、vue中watch和computed的区别
watch和computed的区别

20、CSS权重有哪些？

根据选择器的种类可以分为四类，也决定了四种不同的等级
1.行内样式，指的是html中定义的style --1000
2.ID选择器 --100
3.类，属性，和伪类选择器 --10
注这一类的选择器如：:hover，:focus，伪类选择器表示的是一种状态。
4.元素和伪元素–1
伪元素选择器如：before，：after

21、如何让CSS只在当前组件中起作用?
将当前组件的style修改为style scoped
原理：vue通过在DOM结构以及css样式上加上唯一的标记，保证唯一，达到样式私有化，不污染全局的作用，如图，样式属性上也会多一个该字符，以保证唯一
在这里插入图片描述
22、minx函数如果跟引入的函数同名的话会出现什么情况

MINX的混入和讲解
*23、vue data和methods可以重名嘛？

不可以的，重名会报错

24、VUE 自定义组件如何进行书写

25、vue2.0和vue3.0双向绑定有什么差异
1.Vue2.0通过Object.definePropety来劫持对象属性的getter和setter操作，当数据发生变化时通知
2.Vue3.0通过Proxy来劫持数据，当数据发生变化时发出通知

26、vue3.0相对于vue2.0增加了哪些功能

区别

27、常见的垂直居中的布局方式有哪些

	/* 1. 绝对定位 + margin(1) */
		/*.parent {
			position: relative;
		}
		.child {
			position: absolute;
			left: 50%;
			top: 50%;
			margin-left: -150px;
			margin-top: -100px;
		}*/

		/* 2. 绝对定位 + margin(2) */	
		/*.parent {
			position: relative;
		}	
		.child {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto; /* 吸收剩余空间 
		} */
		/* top > bottom, left > right */
		/* 3. flex */
		/*.parent {
			display: flex;
			justify-content: center;
			align-items: center;
		}*/
		/* 4. 绝对定位 + transform */
		/*.parent {
			position: relative;
		}
		.child {
			position: absolute;
			transform: translate(-50%, -50%);
		}*/

28、vue 绑定事件最晚是在什么时候进行

29、VUE 如何解决跨域

方案一

如果是通过vue-cli脚手架工具搭建项目，我们可以通过webpack为我们起一个本地服务器作为请求的代理对象

通过该服务器转发请求至目标服务器，得到结果再转发给前端，但是最终发布上线时如果web应用和接口服务器不在一起仍会跨域

在vue.config.js文件，新增以下代码

amodule.exports = {
devServer: {
host: ‘127.0.0.1’,
port: 8084,
open: true,// vue项目启动时自动打开浏览器
proxy: {
‘/api’: { // ‘/api’是代理标识，用于告诉node，url前面是/api的就是使用代理的
target: “http://xxx.xxx.xx.xx:8080”, //目标地址，一般是指后台服务器地址
changeOrigin: true, //是否跨域
pathRewrite: { // pathRewrite 的作用是把实际Request Url中的’/api’用""代替
‘^/api’: “”
}
}
}
}
}
通过axios发送请求中，配置请求的根路径

axios.defaults.baseURL = ‘/api’
方案二

此外，还可通过服务端实现代理请求转发

以express框架为例

var express = require(‘express’);
const proxy = require(‘http-proxy-middleware’)
const app = express()
app.use(express.static(__dirname + ‘/’))
app.use(’/api’, proxy({ target: ‘http://localhost:4000’, changeOrigin: false
}));
module.exports = app
方案三

通过配置nginx实现代理

server {
listen 80;
# server_name xxx.xxx.com;
location / {
root /var/www/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://127.0.0.1:3000;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}

30、为什么v-for和v-if不能进行连用
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。这意味着 v-if 将分别重复运行于每个 v-for 循环中，即先运行 v-for 的循环，然后在每一个 v-for 的循环中，再进行 v-if 的条件对比，会造成性能问题，影响速度。

31、理解为何需要清除浮动及清除浮动的方法

清除浮动流

32、BFC是什么
BFC的理解

33、 for in 和 for of的区别

（1）、for…in…的作用
1.1.1 可枚举对象
1.1.2 可枚举数组
1.1.3 可枚举数组的原型对象
（2）、forEach的作用
1.2.1 可遍历数组
1.2.2 无法break
（3）、 for…of…的作用
1.3.1可遍历数组
1.3.2 可中断
1.3.3 可迭代字符串
1.3.4可迭代arguments类数组对象
1.3.5 可迭代map和set
1.4 总结
for in 适用于纯对象的遍历，并且只能输出可枚举属性
forEach适用于需要知道索引值的数组遍历，但是不能中断
for of适用于无需知道索引值的数组遍历，因为可以中断。另外对于其他字符串，类数组，类型数组的迭代，for of也更适用