前端常见知识归纳

什么是伪数组？如何将其转化为标准数组？

  • 什么是伪数组（类数组）：

    无法直接调用数组方法或期望 `length` 属性有什么特殊的行为，但仍可以使用真正数组遍历方法遍历它们。

    典型的就是 arguments 参数，还有像调用 getElementsByTagName / document.childNodes 之类方法，它们都返回的 NodeList 对象都属于伪数组。

  • 如何转换为标准数组？

    可以使用Array.prototype.slice.call(fakeArray)将伪数组转换为真正的 Array 对象。
    但对于NodeList则不行，其在 IE8 下会报错，只能是 JS 引擎有所限制。因此，如果需要把 NodeList 转换为标准数组，就需要做向下兼容：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function realArray(arr) {
      try {
        return Array.prototype.slice.call(arr)
      } catch {
        var ret = [],
          len = arr.length
        for (; i < len; i++) {
          ret[i] = c[i]
        }
        return ret
      }
    }

    方法二：使用 ES6 数组扩展的 form() 方法

    1
    var arr = Array.from(arguments);

    伪数组转换为标准数组的条件：

    1、伪数组的键值需要为数字，否则转换后数组均无初始值
    2、有 length 属性

数组去重与排序

  1. 去重之一：创建一个新数组，使用 indexOf 判断新数组中是否存在值，例：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    const dedupOne = arr => {
       let ret = [];
       for (let i = 0, len = arr.length; i < len; i++) {
           if (ret.indexOf(arr[i) === -1) {
               ret.push(arr[i]);
           }
       }
       return ret;
    }

  2. 去重之二：创建一个新对象

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    const dedupTwo = arr = > {
        let hash = {},
            len  = arr.length,
            ret  = [];
        for (let i = 0; i < len; i++) {
            if (!hash[arr[i]]) {
                hash[arr[i]] = arr[i];
                ret.push(arr[i]);
            }
        }
        return ret;
    }

  3. 数组排序

    1
    2
    3
    4
    5
    6
    7
    一般使用 Array 的原生方法 sort() 方法排序。
    1. 排序顺序可以是字母和数字，并按升序或降序。
    2. 默认排序是字母升序。
    3. 在原始数组上排序，不会生成数组副本。

    使用数字排序，你必须通过一个函数作为参数来调用。
    函数指定数字是按照升序还是降序排列。

    数组数字升序排序，例：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    let arr = [
      1,
      2,
      1,
      2,
      4,
      4,
      8,
      0,
      3,
      4,
      33,
      45,
      52,
      42,
      332,
      3342,
      33,
      334,
      33,
      3,
      5,
      55,
      55,
      88,
      99,
    ]
    arr.sort(({ a, b }) => a - b)

    异步加载 JS 的方式

  4. async

    1. async 属性是一个布尔值
    2. async 属性一旦脚本可用，则立即异步执行
    3. async 仅适用于外部脚本(只有在使用 src 属性时)

Redux 的作用及优缺点

redux 让 state 的变化变得可预测、可回溯。

三个原则：

  1. 单一数据源
  2. state 是只读的
  3. 使用纯函数来执行修改

Immutable 是一个可实现持续数据结构的 JavaScript 库。

跨域的解决方法

概念：只要协议、域名、端口有任何一个不同，都被当作是不同的域。

1、 JSONP

JSONP 包含两部分：回调函数和数据。

回调函数是当响应到来时要放在当前页面被调用的函数。
数据就是传入回调函数中的 json 数据，也就是回调函数的参数了。
缺点：
  * 安全问题(请求代码中可能存在安全隐患)
  * 要确定 jsonp 请求是否失败并不容易

2、 跨域资源共享（CORS）

CORS（Cross-Origin Resource Sharing）跨域资源共享，定义了必须在访问跨域资源时，浏览器与服务器应该如何沟通。

  CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。

3、 Web Sockets

一种浏览器 API ，它的目标是在一个单独的持久连接上提供全双工、双向通信。（同源策略不适用）

  原理：在 js 创建了 web socket 之后，会有一个 HTTP 请求发送到浏览器以发起连接。
    取得服务器响应后，建立的连接会使用 HTTP 升级从 HTTP 协议交换为 web sockt 协议。
  只有在支持 web socket 协议的服务器上才能正常工作。

什么是服务端渲染？有什么好处？

1、 首次加载页面更快。
2、 SEO

单页面（SPA）是什么？有什么优缺点？

它将所有的活动局限于一个 Web 页面中，仅在该 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成了，SPA 不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用 JavaScript 动态的变换 HTML 的内容，从而实现 UI 与用户的交互。由于避免了页面的重新加载，SPA 可以提供较为流畅的用户体验。

优点：

1、良好的交互体验

用户不需要从新刷新页面，获取数据也是通过 AJAX 异步获取，页面显示流畅

2、良好的前后端分离工作模式
单页 Web 应用可以和 RESTful 规约一起使用，通过 REST API 提供接口数据，并使用 Ajax 异步获取，这样有助于分离客户端和服务器端工作。更进一步，可以在客户端也可以分解为静态页面和页面交互两个部分。
3、减轻服务器压力
服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍；
4、公用一套后端程序代码
不用修改后端程序代码就可以同时用于 Web 界面、手机、平板等多种客户端；

缺点：

1、SEO 难度较高

由于所有的内容都在一个页面中动态替换显示，所以在SEO上其有着天然的弱势，所以如果你的站点对SEO很看重，且要用单页应用，那么就做些静态页面给搜索引擎用吧。

2、前进、后退管理
由于单页 Web 应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理，当然此问题也有解决方案，比如利用 URI 中的散列+iframe 实现
3、初次加载耗时多
为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面可以在需要的时候加载。所以必须对 JavaScript 及 CSS 代码进行合并压缩处理，如果使用第三方库，建议使用一些大公司的 CDN，因此带宽的消耗是必然的。

常用 HTML 状态吗

状态码 含义
200 请求已成功，请求所希望的响应头或数据体将随此响应返回。
400 1、语义有误，当前请求无法被服务器理解。除非进行修改，否则客户端不应该重复提交这个请求。 2、请求参数有误。
403 服务器已经理解请求，但是拒绝执行它。
404 请求失败，请求所希望得到的资源未被在服务器上发现
500 服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器的程序码出错时出现。
  1. link 属于XHTML标签，而@import是css提供的.
  2. 页面在加载的时候，link会同时被加载；而@import引用的CSS会在页面加载完成后加载。
  3. @import只在IE5以上才能生效；而link是XHTML标签，无兼容性问题.
  4. link方式引进的样式比 @import方式引进的样式权重高.

谈一下对HTML语义化的理解

  1. html 语义化让页面的内容结构化，结构更清晰，便于浏览器、搜索引擎解析.
  2. 即使在没有样式的情况下也以一种文档格式显示，并且是容易阅读的.
  3. 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于 SEO.
  4. 使阅读源码的人对网站更容易将网站分块，便以阅读维护理解.
前端

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！