前端笔试题（七）

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;j<i;j++){
 ? ? ? ? ? ?//4.如果j位置比j+1位置的数据大，那么就交换
 ? ? ? ? ? ?if(array[j]>array[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 或其他文本格式