前端笔试题（七）

1.常用的数组方法

• push()从后面添加元素，返回值为添加完后的数组的长度

• arr.pop()从后面删除元素，只能是一个，返回值是删除的元素

• arr.shift()从前面删除元素，只能删除一个 返回值是删除的元素

• arr.unshift() 从前面添加元素,返回值是添加完后的数组的长度

• arr.splice(i,n) 删除从i(索引值)开始之后的那个元素。返回值是删除的元素

• arr.concat() 连接两个数组 返回值为连接后的新数组

• str.split() 将字符串转化为数组

• arr.sort() 将数组进行排序,返回值是排好的数组，默认是按照最左边的数字进行排序，不是按照数字大小排序的

• arr.reverse()将数组反转,返回值是反转后的数组

• arr.slice(start,end) 切去索引值start到索引值end的数组，不包含end索引的值，返回值是切出来的数组

• arr.forEach(callback) 遍历数组,无return即使有return，也不会返回任何值，并且会影响原来的数组

• arr.map(callback) 映射数组(遍历数组),有return 返回一个新数组

• arr.filter(callback)过滤数组，返回一个满足要求的数组

2.手写数组的冒泡排序和sort排序

// 冒泡排序的方法
function bubbleSort (array){
    // 1.获取数组的长度
    var length = array.length;
    // 2.反向循环，因此次数越来越少
    for (var i =length-1;i>=0;i--){
        // 3.根据i的次数，比较循环到i的位置
        for(var j=0;jarray[j+1]){
                // 交换
                // const temp = array[j+1]
                // array[j+1]= array[j]
                // array[j]= temp
                [array[j+ 1l,array[j]]=[array[j], array[j + 1]];
            }
        }
    }
    return arr;
}
const products =[{price:23,sales:103},{price:22,sales: 101}]
// 根据销量升序
products.sort((p1，p2)=>{
    //比较函数==> 返回数值 如果大于o，p2放在左边
    return p1.sales-p2.sales
}

3.网络请求的方式有哪些，有什么优点

• GET

  • 简单、直观，适用于请求数据或资源(获取数据)

• POST

  • 可以向服务器提交数据，适用于发送大量数据或敏感信息(提交数据)

• DELETE

  • 用于删除服务器上的资源

• PUT

  • 用于更新资源，类似于POST但语义上更强调更新

• PATCH

  • 用于对资源进行局部更新，而不是整个资源

• WebSocket

  • 提供全双工通信，实时性好，减少了HTTP请求的开销

4.在vue3中proxy是如何解决跨域的

Vue3当中的跨域解决方案还是跟Vue2差不多用的都是proxy,而且Vue3的双绑原理也是用的proxy来进行数据的拦截

创建完v3项目之后，手动在根节点上新建一个vue.config.js文件夹

module.exports = {
  // 基本路径
  publicPath: "/",
  // 输出路径
  outputDir: "dist",
  // 静态资源
  assetsDir: "./",
  // eslint-loader是否在保存时候检查
  lintOnSave: true,
  // 服务项配置
  devServer: {
    host: "localhost",
    port: 8080,
    https: false,
    open: true, // 设置代理proxy
    proxy: {
      "/api": {
        target: "http://192.168.213.181:8080/",
        changeOrigin: true, //表示是否跨域，
        pathRewrite: {
          //表示需要rewrite重写的
          "^/api": "  ",
        },
      },
    },
  },
};

5.原生JS和Ajax的区别

• 原生JS是JavaScript语言的基础，用于构建前端交互和用户界面。

  原生JS是浏览器的脚本语言，用于操作 DOM（文档对象模型）和处理用户交互。它不涉及直接的服务器通信，而是主要关注于前端的用户界面和用户交互

• Ajax是一种基于原生JS的技术，用于实现异步数据交互，通过后台与服务器进行数据交换，更新页面内容

  Ajax通常涉及使用 XMLHttpRequest 对象或者现代浏览器中的 fetch API，通过异步请求向服务器发送数据请求并接收响应。虽然名字中包含 "XML"，但实际上，Ajax 的数据传输格式可以是 XML、JSON 或其他文本格式