25.谈一谈箭头函数与普通函数的区别,箭头函数主要解决什么问题?
箭头函数与普通函数的区别:
⚫ 语法简洁性:
◼ 箭头函数使用=>符号定义,省略了 function 关键字,使得语法更为紧凑。 ◼ 对于单行函数体,可以进一步简化,省略花括号和 return 语句。⚫ 词法作用域内的 this:
◼ 主要区别:箭头函数不绑定自己的 this 值,它会捕获其所在上下文的 this 值作为 自己的 this,这解决了长期以来关于函数内部 this 指向不确定的问题。 ◼ 在普通函数中,this 的值取决于函数如何被调用(例如,作为对象方法、构造函数 或者简单函数调用)。⚫ 没有自己的 arguments:
◼ 箭头函数没有自己的 arguments 对象,但可以通过扩展运算符...或其他方法间接访 问外部作用域的 arguments。 ◼ 普通函数有自己的 arguments 对象来访问传入的参数。⚫ 不能作为构造函数:
◼ 箭头函数不能用作构造函数,即不能使用 new 关键字实例化。 ◼ 普通函数可以作为构造函数创建新对象。⚫ 不能改变 this 的绑定:
◼ 使用 call、apply 或 bind 方法不能改变箭头函数内部的 this 指向。 ◼ 普通函数的 this 可以通过这些方法动态改变。箭头函数主要解决的问题:
⚫ 明确的 this 绑定:
箭头函数最显著的优势在于它消除了 this 的不确定性,使得在回调函数、事件处理器等场景下,this 能保持预期的行为,避免了手动绑定 this 的繁琐。⚫ 代码简洁性:
它的简洁语法减少了代码量,提高了代码的可读性和维护性,特别是在使用高阶函数和函数式编程风格时更为明显。⚫ 减少作用域链查找:
由于箭头函数没有自己的 this、a rguments 等,这可能轻微提升执行效率,尤其是在大量嵌套函数调用时。26.JS 数组和对象的遍历方式,以及几种方式的比较
数组的遍历方式:
⚫ for 循环
◼ 基本用法,适用于所有版本的 JavaScript。 ◼ 可以获取索引和值。⚫ forEach()
◼ ECMAScript 5 引入的方法,直接在数组上操作,无需索引。 ◼ 不支持 break,continue 语句。⚫ for...of
◼ ECMAScript 6 引入,迭代数组的元素值。 ◼ 直观简洁,同样不支持 break,continue(除非配合 label)。⚫ map()
◼ 生成新数组,原数组每个元素经过处理后的结果组成新数组返回。 ◼ 侧重于转换数据。⚫ filter()
◼ 创建一个包含通过测试的所有元素的新数组。 ◼ 侧重于筛选数据。对象的遍历方式:
⚫ for...in
◼ 遍历对象的所有可枚举属性(包括原型链上的)。 ◼ 通常需要检查属性是否属于对象本身(hasOwnProperty)。 for(let key in obj) { if(obj.hasOwnProperty(key)) { console.log(key + ": " + obj[key]); } }⚫ Object.keys()结合 for...of
◼ 获取对象自身可枚举属性的数组,然后遍历。 ◼ 更安全,不涉及原型链。 for(let key of Object.keys(obj)) { console.log(key + ": " + obj[key]); }⚫ Object.entries()结合 for...of
◼ 获取键值对数组,适合同时需要键和值的场景。 for(let [key, value] of Object.entries(obj)) { console.log(key + ": " + value); }⚫ ES2022 的 for...in 改进
◼ ES2022 引入了可选的 enumerable 标志,可以更精确地控制哪些属性可遍历。比较:
⚫ 性能:
◼ 基础的 for 循环通常性能最好,因为它是直接基于索引访问。 ◼ forEach()等方法由于涉及到函数调用,性能略低。不过,在大多数应用场景中,这 种差异微乎其微,可忽略。⚫ 可读性:
for...of、forEach()等现代遍历方法更易于阅读和理解,特别是对于不熟悉传统循环的新手。⚫ 功能:
map()、filter()等方法不仅遍历,还能直接对数据进行转换或筛选,适合处理数据流。⚫ 兼容性:
for...of、Object.entries()等 ES6 及以上特性的方法需要考虑浏览器或环境的兼容性。27.什么是跨域,如何解决跨域的问题,具体说说
跨域本质是浏览器基于同源策略的一种安全手段 同源策略 (Sameoriginpolicy),是一种约定,它是浏览器最核心也最基本的安全功能 协议相同(protocol)、主机相同(host)、端口相同(port) 非同源请求,也就是协议、端口、主机其中一项不相同的时候,这时候就会产生跨域⚫ 使用代理服务器(Proxy Server)
◼ 在开发环境中,可以配置一个代理服务器来转发 API 请求,从而绕过浏览器的同 源策略。这种方法通常使用 webpack-dev-server 或 Vite 的内置代理功能。 ◼ Vue CLI 项目 vue.config.js 文件中进行配置:◼ 对于 Vite 项目 vite.config.js 文件中进行配置: