前端常见知识归纳

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

  • 什么是伪数组(类数组):

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

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

  • 如何转换为标准数组?

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

    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() 方法

    var arr = Array.from(arguments);

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

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

数组去重与排序

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

    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. 去重之二:创建一个新对象

    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. 数组排序

    一般使用 Array 的原生方法 sort() 方法排序。
    1. 排序顺序可以是字母和数字,并按升序或降序。
    2. 默认排序是字母升序。
    3. 在原始数组上排序,不会生成数组副本。
    
    使用数字排序,你必须通过一个函数作为参数来调用。
    函数指定数字是按照升序还是降序排列。

    数组数字升序排序,例:

    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 的作用及优缺点

reduxstate 的变化变得可预测、可回溯。

三个原则:

  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标签,而@importcss提供的.
  2. 页面在加载的时候,link会同时被加载;而@import引用的CSS会在页面加载完成后加载。
  3. @import只在IE5以上才能生效;而linkXHTML标签,无兼容性问题.
  4. link方式引进的样式比 @import方式引进的样式权重高.

谈一下对HTML语义化的理解

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

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