面试题整理

三七安

于 2021-05-19 11:12:20 发布

阅读量226

点赞数

分类专栏：前端 es6 笔记

本文链接：https://blog.csdn.net/weixin_43314255/article/details/116896532

版权

前端同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

es6

9 篇文章 1 订阅

订阅专栏

笔记

4 篇文章 0 订阅

订阅专栏

1.es6新增了哪些语法?

1.let关键字，const关键字（const生命的是一个常量）
2数组解构，数组以序号位置一一对应
3.对象解构，根据属性名一一对应
4.解析嵌套结构

let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};
let { p: [x, { y }] } = obj;
// 注意，这时p是模式，与obj字段对应
// 继续解构
// let x="Hello";y = "World";
console.log(x,y);  //Hello World

5.函数参数的解构

function demo(a, b, {c , d} = {}){  // 第三个参数默认值为 {}
    console.log(a, b, c, d)
}
demo(1, 2, {c : "c", d:"d"});   //1,2,c,d

6.字符串的解构
7.模板字符串
8.展开运算符
9.箭头函数
10.对象字面量的增强写法
11.class类
12.Set和Map

2.数组常用的方法有哪些?

pop push shift unshift splice slice concat join resverse sort

3.数组扁平化的方法

扁平化的概念就是把多维数组转成一维数组.

## 1.使用generator
主要核心:Array.isArray(item)

function *flatten(arr) {
  for (const item of arr) {
    if (Array.isArray(item)) {
      yield *flatten(item)
    } else {
      yield item
    }
  }
}
const newArr = [...flatten([1, true, {isNewHero: true, name: '阿古朵'}, [2, {name: ['韩信', '赵云']}, [3]]])]
console.log(newArr)

2. reduce+concat

function flatten(arr) {  
    return arr.reduce((result, item)=> {
        return result.concat(Array.isArray(item) ? flatten(item) : item);
    }, []);
}
const newArr = [...flatten([1, 2, 3, [4, 5, [6]]])]
console.log(newArr) // [1, 2, 3, 4, 5, 6]

3.数组falt()方法
无视数据类型，推荐指数5颗星

[1, 2, 3, [4, 5, [6]]].flat(Infinity)

可指定深度，默认深度为1，传Infinity表示彻底扁平化

4.react组件三大核心属性state,props,refs

1、state
state是组件对象中非常重要的属性，值以对象的形式进行存储。
通过state更改，从而更新页面显示的内容。
组件中render方法中的this指向实例对象，调用了1+n次，其中1是初始时调用。
state改变状态不能直接修改，要通过setState()进行状态变更。

2.props
props属性是只读的，不能对他进行修改。
通过Person.propTypes/static propTypes对标签属性进行类型、必要性限制，其中Person为class类。
通过Person.defaultProps/static defaultPropTypes设置属性默认值
const p = { name: “tom” }; <Person {…p},通过{…p}进行传值
3、refs
1、字符串形式

<input ref="input1" type="text" placeholder="点击按钮提示数据" />

//获取数据
this.refs.input1.value

2、回调形式

<input ref={c => { this.input1 = c }} type="text" placeholder="点击按钮提示数据" />

//获取数据
this.input1.value

3、createRef的使用

// react.createRef被调用后，会返回一个容器，该容器可以存储被Ref标识的节点,该容器专人专用
myRef = React.createRef()
<input ref={this.myRef} type="text" placeholder="点击按钮提示数据" />

//获取数据
this.myRef.current.value

h5语义化标签有哪些为什么要用语义化标签

代码结构清晰，可读性高，减少差异化，便于团队开发和维护。
在页面没有加载CSS的情况下，也能呈现良好的内容结构，提升用户体验。
对搜索引擎友好，良好的结构和语义，有助于爬虫抓取更多的有效信息。

语义化标签
header/nav/main/article/section/aside/footer/title/h1-h6/ul/ol/strong/em/p

vue和react的区别之我见

1.react是单项数据流的，推崇结合immutable来实现数据的不可变，react’在setState之后会重新走渲染流程，利用shouldComponentUpdate或者是Pure Component来决定要不要重新render，Pure Component就是重写了shouldComponentUpdate然后在里面做了props喝state的浅层比较。
vue是响应式的,也就是基于数据是可变的,通过对每一个属性简历watch来监听,当属性发生变化是,响应式的更新到对应的虚拟dom中

总之,react的性能优化需要手动去做,而vue的性能优化是自动的,但是vue的响应式机智也有问题,就是当state特别多的时候watch也会特别多,会导致卡顿,所以大型应用状态特别多的,一般用 react,更加可控.
2.通过js来操作一切，还是用各自的处理方式
react的思路是all in js,哦通过js来生成html,所以设计了jsx,还有通过js来设计css,社区的styled-component,jss等
vue是把html，css，js组合到一起，用各自的处理方式，vue有单文件组件，可以把html、css、js写到一个文件中，html提供了模板引擎来处理

3.react可以通过高阶组件来扩展,而vue是通过mixins来扩展

watch/computed的不同

computed有缓存机制,不能接受参数,可以依赖其他componented,甚至是其他组件中的data,不能与data中的属性重复.
watch可以接受两个参数,监听是可以触发一个回调函数,并做一些事情监听的属性必须存在,允许异步,watch配置, handler,deep/是否深度,immediate,是否立即实行
比如监听路由的变化

watch:{
  $route:{
    handler: function(val, oldVal){
      console.log(val);
    },
    // 深度观察监听
    deep: true
  }  
}

**总结:**当有一些数据需要随着另外一些数据变化是,建议使用computed
当有一个通用的响应式数据变化的时候,要执行一些业务逻辑或异步操作的时候建议使用watch

检测数据类型的方法

1.typeof,typeof可以检测基本数据类型,但是彭代引用数据类型都是返回object
2.instanceof instanceof可以用于检测引用类型,但是对基本数据类型不生效,另外不能用于检测null和undefined
3.constructor 撇去null和undefined,似乎说constructor能用于检测js的基本数据类型和引用数据类型,但是涉及到原型
和继承的时候便出了问题
4.Object.prototype.toString.call() Object.prototype.toString.call()可用于检测js所有的数据类型。

具体查看链接

常用JS——string字符串方法

1.slice(start,end)
2.substr(start,length)
3.substring(start,end)
如果参数 start 与 end 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。
如果 start 比 end 大，那么该方法在提取子串之前会先交换这两个参数。
4.**charAt（pos）**返回指定位置（如上pos）的字符。如果pos小于0或者大于等于字符串的长度string.length，它会返回空字符串。
5.**concat（string…）**用于连接两个或者多个字符串。相较于数组Array.concat()。其实字符串到是用的不多，主要是之前使用加号（+）会更方便一些，新语法时一步优化字符串拼接的操作.
6.**indexOf（searchString，position）**在string内查找另一个字符串searchString。如果它被找到，就返回第1个匹配字符的位置，否则返回-1。
7.match（regexp）
8.replace（searchValue，replaceValue）

React事件监听三种写法

方式一：在constructor中使用bind绑定，改变this的指向
方式二：通过箭头函数改变this指向
方式三:在绑定事件里面使用箭头函数调用的方式

前端页面性能优化

主要包括网络加载类、页面渲染类、CSS优化类、JavaScript执行类、缓存类、图片类、架构协议类等几类；

移动端优化策略
1. 首屏数据提前请求
为了进一步提升页面加载速度，可以考虑将页面的数据请求尽可能提前，避免在JavaScript加载完成后才去请求数据，通常数据请求是页面内容渲染中关键路径最长的部分，而且不能并行，所以如果能将数据请求提前，可以极大程度缩短页面内容的渲染完成时间；
2. 首屏加载和按需加载，非首屏内容滚屏加载，保证首屏内容最小化：
由于移动端网络速度相对较慢，网络资源有限，因此为了尽快完成页面内容的加载，需要保证首屏加载资源最小化，非首屏内容使用滚动的方式异步加载，一般推荐移动端页面首屏数据展示延时最长不超过3秒，目前中国联通3G的网络速度为338KB/s (2.71Mb/s)，所以推荐首屏所有资源大小不超过1014KB，即大约不超过1MB
3. 模块化资源并行下载：
4. inline首屏必备的CSS和JavaScript：
通常为了在HTML加载完成时能使浏览器中有基本的样式，需要将页面渲染时必备的CSS和JavaScript通过

<!DOCTYPE html>

<head>
  <meta charset="UTF-8">
  <title>样例</title>
  <meta>
  <style>
    /*必备的首屏CSS*/
    html,
    body {
      margin: 0;
      padding: 0;
      background-color: #ccc;
    }
  </style>
</head>

<body>
</body>

</html>

6.资源预加载：
对于移动端首屏加载后可能会被使用的资源，需要在首屏完成加载后尽快进行加载，保证在用户需要浏览时已经加载完成，这时候如果再去异步请求就显得很慢；
7 .合理利用浏览器缓存：
除了上面所说的Cache-Control、Expires、Etag 和 Last-Modified来设置HTTP缓存外，在移动端还可以使用localStorage等来保存AJAX返回的数据，或者使用localStorage保存CSS或JavaScript静态资源内容，实现移动端的离线应用，尽可能减少网络请求，保证静态资源内容的快速加载；
二.图片类
**（1）图片压缩处理：**在移动端，通常要保证页面中一切用到的图片都是经过压缩优化处理的，而不是以原图的形式直接使用的，因为那样很消耗流量，而且加载时间更长；
（2）使用较小的图片，合理使用base64内嵌图片：在页面使用的背景图片不多且较小的情况下，可以将图片转化成base64编码嵌入到HTML页面或CSS文件中，这样可以减少页面的HTTP请求数，需要注意的是，要保证图片较小，一般图片大小超过2KB就不推荐使用base64嵌入显示了；

.class-name{
    background-image : url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAALCAMAAABxsOwqAAAAYFBMVEWnxwusyQukxQudwQyZvgyhxAyfwgyxzAsUHQGOuA0aJAERGAFIXwSTugyEqgtqhghQZgUwQQIpOQKbuguVtQuKrAuCowp2kQlheghTbQZHWQU7SwVAVgQ6TgQlLwMeKwFOemyQAAAAVElEQVQI1y3JVRaAIAAF0UconXbvf5ei8HfPDIQQhBAAFE10iKig3SLRNN4SP/p+N08VC0YnfIlNWtqIkhg/TPYbCvhqdHAWRXPZSp3g3CWZvVLXC6OJA3ukv0AaAAAAAElFTkSuQmCC');
}

(3) 图片懒加载
为了保证页面内容的最小化，加速页面的渲染，尽可能节省移动端网络流量，页面中的图片资源推荐使用懒加载实现，在页面滚动时动态载入图片；

<img data-src="//cdn.domain.com/path/photo.jpg" alt="懒加载图片" >

更多关于优化的看这里

你了解webpack吗?

这里是有关webpack的详细内容

vue生命周期和使用的场景

beforeCreate：可以在此时加一些 loading 效果，在 created 时进行移除

created：需要异步请求数据的方法可以在此时执行，完成数据的初始化

mounted：当需要操作 dom 的时候执行，可以配合$.nextTick 使用进行单一事件对数据的更新后更新dom

updated：当数据更新需要做统一业务处理的时候使用

beforeCreated阶段：Vue实例的挂载元素$el和数据对象data都为undefined，还未初始化；

created阶段：vue实例的数据对象data有了，$el还没有。

beforeMount阶段：vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换；

mounted阶段：vue实例挂载完成，data.message成功渲染。

更新前/后：当data变化时，会触发beforeUpdate和updated方法。

销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。
activated：被 keep-alive 缓存的组件激活时调用。
deactivated：被 keep-alive 缓存的组件停用时调用。

ajax和axios、fetch的区别

一.ajax
1.本身是针对MVC的编程,不符合现在前端MVVM的浪潮
2.基于原生的XHR开发，XHR本身的架构不清晰。
3.JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）
4.不符合关注分离（Separation of Concerns）的原则
5.配置和调用方式非常混乱，而且基于事件的异步模型不友好。
二.axios
1.从浏览器中创建 XMLHttpRequest
2.支持 Promise API
3.客户端支持防止CSRF
4.提供了一些并发请求的接口（重要，方便了很多的操作）
5.从 node.js 创建 http 请求
6.拦截请求和响应
7.转换请求和响应数据
8.取消请求
9.自动转换JSON数据
PS:防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。
**防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。
**

3.fetch

try {
  let response = await fetch(url);
  let data = response.json();
  console.log(data);
} catch(e) {
  console.log("Oops, error", e);
}

fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。

常用的深拷贝的四种方法（实用）

1.运用递归方法进行深度拷贝

      //1 .原生的方法写深度拷贝
      function deepClone(obj) {
        // 先判断是数组还是对象，好声明变量接收
        var params = Array.isArray(obj) ? [] : {};
        for (key in obj) {
          if (obj[key] && typeof obj[key] == "object") {
            params[key] = deepClone(obj[key]);
          } else {
            params[key] = obj[key];
          }
        }
        return params;
      }
	//以下是测试用的数据
      var a = {
        name: "zjam",
        obj: {
          am: "zaofnd",
          dvd: "ddddd",
        },
      };

      var b = deepClone(a);
      a.obj.am = "早上";
      console.log(a);
      console.log(b);

2.JSON.对象的方法实现（常用）

function deepClone(obj) {
       return JSON.parse(JSON.stringify(obj));
      } 
	//以下是测试数据
      var a = {
        name: "zjam",
        obj: {
          am: "zaofnd",
          dvd: "ddddd",
        },
      };
      var b = deepClone(a);
      a.obj.am = "早上";
      console.log(a);
      console.log(b);

3.第三方插件Lodash实现深拷贝（方便）

 <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.15/lodash.js"></script>
    var a = {
        name: "我是a中的数据",
        obj: {
          name: "张三",
          age: "40",
        },
      };
      var b = _.cloneDeep(a, {
        obj: {
          name: "李四",
          age: "50",
          sex: "男",
        },
      });
      a.obj.name = "王二";
      console.log(a);
      console.log(b);

hooks useMemo 和 useCallback的区别

useMemo:
用来缓存数据，当组件内部某一个渲染的数据，需要通过计算而来，这个计算是依赖与特定的state、props数据，我们就用useMemo来缓存这个数据，以至于我们在修改她们没有依赖的数据源的情况下，多次调用这个计算函数，浪费计算资源。

useCallback
缓存一个函数，这个函数如果是由父组件传递给子组件，或者自定义hooks里面的函数【通常自定义hooks里面的函数，不会依赖于引用它的组件里面的数据】，这时候我们可以考虑缓存这个函数，好处：

不用每次重新声明新的函数，避免释放内存、分配内存的计算资源浪费
子组件不会因为这个函数的变动重新渲染。【和React.memo搭配使用】

三七安

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
面试题整理

1.es6新增了哪些语法?1.let关键字，const关键字（const生命的是一个常量）2数组解构，数组以序号位置一一对应3.对象解构，根据属性名一一对应4.解析嵌套结构let obj = { p: [ 'Hello', { y: 'World' } ]};let { p: [x, { y }] } = obj;// 注意，这时p是模式，与obj字段对应// 继续解构// let x="Hello";y = "World";console.log(x,y);
复制链接

扫一扫