jquery加载页面的几种方法(页面加载完成就执行)如何去掉css 渐变时的锯齿效果AJAX请求以及解决跨域的问题浅析Vue3动态组件怎么进行异常处理html+css+js写的AI五子棋游戏(附源码)基于jquery 实现导航条高亮显示的两种方法EasyUI使用DataGrid实现动态列数据绑定Vue怎么通过JSX动态渲染组件JS 获取当前日期、时间、星期聊一聊Node.js中的 GC(垃圾回收)机制Ajax 请求队列解决方案并结合elementUi做全局加载状态前端代码风格规范总结JS Generator函数yield表达式示例详解javascript子窗口父窗口相互操作 取值赋值的问题CSS如何实现波浪效果ECharts实现数据超出Y轴最大值max但不隐藏CSS样式穿透的几种方法JavaScript 类型转换CSS 设置页面缩放如何在Vue3+Vite中使用JSXlinux平台下node cnpm的安装方法vue中v-if和v-for的区别是什么详解Vue PC端如何实现扫码登录功能CSS 网格(Grid)布局JavaScript 请求服务端接口Angular开发问题记录:组件拿不到@Input输入属性聊一聊CSS中的盒模型和box-sizing属性vue3.0对服务端进行渲染Web 页面如何实现动画效果移动端 H5 实现拍照功能的几种方法CSS 样式优先级HTML 块级元素、行内元素和行内块级元素深入聊一聊vue3中的reactive()CSS 媒体查询Angular中的路由(Routing)原理怎么移除css的hover事件让交互更加生动!巧用CSS实现鼠标跟随 3D 旋转效果Web页面的几种布局方式JavaScript 评测代码运行速度的几种方法优化jQuery性能的多种方法(整理总结)说一下Vue组件中的自定义事件和全局事件总线列举一下JavaScript中对数组进行合并的几种方法JavaScript 对象合并带你深入了解一下vue.js中的this.$nextTick!如何在JavaScript中对文件进行处理Vue.js 前端项目在常见 Web 服务器上的部署配置vue中$set的实现方法CSS 实现文本装饰效果JavaScript 高阶函数History 和 Hash 路由模式Vue3学习之深度剖析CSS Modules和ScopeCSS 清除浮动CSS 设置背景图片【整理分享】一些常见Vue面试题(附答案解析)CSS里面的transform 属性CSS中的几种尺寸单位总结JavaScript中的条件判断与比较运算uni-app 滚动通知组件的实现JavaScript 执行上下文与作用域前端兼容性问题总结前端性能优化——图片优化JS中数组去重的几种方法JavaScript里实现继承的几种方式JavaScript使用reduce方法实现简单的 i18n 功能JavaScript 日期和时间的格式化大汇总(收集)JS里的原始值与引用值JavaScript 文件处理检测js代码中可能导致内存泄漏的工具Angular学习之ControlValueAccessor接口详解uni-app 日历组件的实现Vue 组件之间传值JavaScript里的回调函数属于闭包吗?JavaScript 解决冒泡事件导致的性能问题总结一下JavaScript中的一些奇怪问题简单说一下JavaScript中的事件冒泡和事件捕获关于 WebpackJavaScript中的循环类型5个实用的TypeScript操作符,助你提升开发能力!HTML img 元素无法显示 base64 图片的可能原因jQuery 遍历方法总结前端性能优化——内存问题javascript中脚本加载和执行机制Web 页面之间传递参数的几种方法解释一下JavaScript中0.1+0.2不等于0.3的问题总结一下JavaScript 中apply、call、bind的使用方法什么是EventLoop?怎么测试Node或页面的性能JavaScript 中 new Date(time).getTime() 获取时间戳方法在 iOS 中的兼容性问题JS里数组合并的几种方法详解vue各种权限控制与管理的实现思路uni-app 弹出层组件的实现用JavaScript实现文件的上传与下载前端性能优化总结简单说一下JavaScript中的事件委托JavaScript如何删除css总结一下JS中的排序算法关于js中的作用域和闭包让页面元素居中的一些方法【javascript算法】二分查找法如何在前端实现上万行大量数据的秒级响应?CSS中父元素被子元素的margin-top影响的解决方法js使用splice方法删除数组元素可能导致的问题如何运行vue项目(超详细图解)js隐式类型转换的副作用了解js的原型和原型链js中的循环引用js判断变量类型的方法web页面最常用的正则校验规则总结js内存管理和垃圾回收js中this关键字的作用和如何改变其上下文JS中的操作符和运算符大总结Vue3 watch 监听对象数组中对象的特定属性总结一下js的浅拷贝和深拷贝JavaScript中的异步编程JavaScript使用一个数组对另一个对象数组进行过滤一个基于Vue3实现的简单日历组件CSS实现磨砂玻璃(毛玻璃)效果样式解决“Vue3调用本地服务接口失败,老是提示下载并安装本地服务”的办法vue3基于组合式API使异步获取的数据对象具有响应性ASP.NET给前端动态添加修改CSS样式JS 标题 关键字在js中如何获取对象的长度了解一下js中的函数式编程Vue框架中监测数组变化的方法VUE html里的文本框只允许输入数字的两种方法分享几种js格式化金额的方法JavaScript的Promise同步处理js中的简写语法JavaScript 面向切面编程(AOP,装饰者模式)了解一下js的跨域问题谈一谈Vue怎么用extend动态创建组件Vue3实现印章徽章组件js中断 forEach 循环的几种方法vue3组件间怎么通信?简述一下通信方式CSS 设置文字间距CSS 网格(Grid)布局Vue3 实现模态框组件js处理扁平数组和树结构相互转换使用Vue和jsmind如何实现思维导图的历史版本控制和撤销/重做功能?Vue.js与ASP.NET的结合,实现企业级应用的开发和部署检查js中的字符串是否可以成为回文Vue.nextTick函数的用法及在异步更新中的应用关于js中0.1+0.2不等于0.3的问题使用JavaScript开发网页地图导航js中如何使用可选函数参数Vue与js的融合,如何编写现代化的前端应用关于Vue与服务器端的通信:如何实现登录鉴权Vue.js的响应式原理如何使用 FabricJS 禁用椭圆的居中旋转?使用JavaScript实现页面滑动切换效果移动端H5页面的缓存问题js里base64与file之间的转换分享一下利用Vue表单处理实现复杂表单布局如何使用CSS创建渐变阴影?如何在 JavaScript 中查看结构体数组?css的弹性布局(Flex布局)Vue统计图表的数据标签和数值显示技巧js实用工具方法库大总结使用Angular和MongoDB来构建具有登录功能的博客应用程序如何在Vue表单处理中实现表单字段的文件下载使用js开发交互式地图应用Vue.component函数的使用及如何创建局部组件css实现三角形的几种方法移动端H5实现自定义拍照界面如何在js中遍历对象jquery如何修改选中状态如何使用js对图像进行压缩js如何计算base64编码图片的大小关于Vue双向数据绑定原理详解Vue.filter函数及如何自定义过滤器列举一下js数组的reduce方法的一些应用如何在Vue表单处理中实现表单的条件渲染vue中的canvas插件js数组的reduce方法的一些应用VUE里使用虚拟DOM来优化更新流程canvas对象有哪些方法js中URL查询字符串(query string)的序列与反序列化如何使用 JavaScript/jQuery 为网站创建暗/亮模式?总结html5中常见的选择器Vue组件开发:工具提示组件的实现方法总结js中常见的层次选择器利用Vue2实现印章徽章组件Vue组件实战:列表组件开发js中如何将对象转换为数组Vue组件开发:地图组件实现方法如何将数据存储到 DOM 中?Vue实战:图片上传组件开发如何使用Vue实现可视化界面设计?vite+TypeScript+vue3+router4+Pinia+ElmPlus+axios+mock项目基本配置Vue组件库推荐:Ant Design Vue深度解析使用Vue实现弹窗效果React Query 数据库插件:与分布式系统的协作指南如何使用vue ui创建vue项目使用CSS的Positions布局打造响应式网页无感刷新页面(附可运行的前后端源码,前端vue,后端node)Css Flex 弹性布局中的换行与溢出处理方法Vue组件库推荐:Element UI深度解析分享一个用HTML、CSS和jQuery构建的漂亮的登录注册界面如何利用React和Sass实现可定制的前端样式如何在Vue中实现拖拽上传文件vue3+TypeScript全局事件总线mitt分享一个Pinia存储的数据持久化插件HTML、CSS和jQuery:实现图片折叠展开的效果如何使用HTML和CSS创建动画条形图?如何利用React和Flutter构建跨平台移动应用用html、css和jQuery实现图片翻页的特效利用Promise优化Vue异步操作的方法CSS Positions布局与网页导航的优化技巧js多图合成一张图CSS3实现动态旋转加载样式使用Velocity.js将动画添加到网页使用FabricJS创建Image对象的JSON表示vue3递归组件---树形组件vue3+TypeScript全局事件总线mitt在Vue中实现可编辑的表格vue3+TypeScript自定义指令:长按触发绑定的函数Vue中如何处理表单数据的双向绑定和验证Vue 简介Vue 安装Vue 常用指令Vue 实例Vue 计算属性Vue 动态样式绑定Vue 事件处理Vue 侦听器Vue 数据双向绑定Vue过渡 & 动画Vue 实例生命周期Vue 插槽的使用Vue 组件基础Vue动态组件 & keep-aliveVue 组件间通信Vue 过滤器Vue 自定义指令Vue 混入 MixinsVue 插件Vue 渲染函数VueRouter 编程式导航VueRouter 路由嵌套VueRouter 基础应用VueRouter 命名视图VueRouter 命名路由Vuex 简介、安装VueRouter 路由传参VueRouter 路由别名、重定向Vuex GetterVuex StateVuex ActionVuex MutationVue-Cli & VueDevTools安装Vuex ModulesVue 第三方库的使用Vue-Cli 项目文件结构分析Vue 本地 Mock 数据Vue 项目打包部署Element 美化 TODO 项目

总结一下JavaScript中的一些奇怪问题

JavaScript 在开发过程中可能会出现很多奇怪的问题,以下是一些示例:

1、变量提升问题

变量提升是 JavaScript 中一个常见的问题,特别是当没有充分理解变量作用域和声明提升时。以下是一个变量提升导致的问题示例:

var a = 1;
function foo() {
  console.log(a);
  var a = 2;
}
foo(); // 输出:undefined

 

预期输出是 1,但实际上输出的是 undefined。这是因为在函数内部声明了一个同名变量 a,函数作用域内的变量声明被提升到了函数开头,所以 console.log(a) 实际上输出的是 undefined。

解决该问题的方法是使用 let 或 const 关键字声明变量,这样可以避免变量提升和作用域污染:

let a = 1;
function foo() {
  console.log(a);
  let a = 2;
}
foo(); // 输出:报错 Uncaught ReferenceError: Cannot access 'a' before initialization

 

2、this 指向问题

this 关键字在 JavaScript 中非常重要,但也很容易导致问题。this 关键字的指向是动态的,它的值取决于函数的调用方式。以下是一个 this 关键字导致的问题示例:

var name = "John";

var person = {
  name: "Bob",sayName: function () {
    console.log("name",this.name);
  },};

var sayName = person.sayName;

sayName();

 

预期输出是 "Bob",但实际上输出的是 "John"。这是因为在全局作用域中调用 sayName 函数时,this 指向的是全局对象 window,而全局作用域中定义的 name 变量值为 "John"。

解决该问题的方法是使用 call、apply 或 bind 方法来改变 this 的指向:

sayName.call(person);

 3、===== 比较问题

console.log(false == "0"); // 输出 true
console.log(false === "0"); // 输出 false

 

在第一行中,"0" 被转换为 false,因此 false == false,结果为 true。在第二行中,使用了严格相等运算符 ===,它不会自动转换类型,因此 false 和 "0" 不相等,结果为 false。

JavaScript 中的 ===== 都是比较运算符,用于比较两个值是否相等。它们之间的主要区别在于它们在比较时进行的类型转换的方式不同。

== 比较运算符会进行类型转换,它在比较之前会尝试将两个操作数转换为相同的类型。具体来说,如果比较的两个操作数的类型不同,则会按照一定的规则进行类型转换,转换后再进行比较。以下是 == 运算符的类型转换规则:

  • 如果比较的两个操作数都是字符串,则将它们转换为数字进行比较。
  • 如果其中一个操作数是数字,另一个操作数是字符串,则将字符串转换为数字进行比较。
  • 如果其中一个操作数是布尔值,则将其转换为数字进行比较。
  • 如果其中一个操作数是对象,另一个操作数是原始类型,则将对象转换为原始类型再进行比较。

例如:

1 == "1"; // true
true == 1; // true
null == undefined; // true

 

=== 恒等运算符不会进行类型转换,它仅在两个操作数严格相等时返回 true。两个操作数严格相等的定义是它们的类型和值都相等。以下是 === 运算符的比较规则:

  • 如果比较的两个操作数类型不同,则返回 false。
  • 如果比较的两个操作数都是对象,则仅当它们引用同一个对象时才返回 true。
  • 如果比较的两个操作数都是原始类型,则仅当它们的类型和值都相等时才返回 true。

例如:

1 === "1"; // false
true === 1; // false
null === undefined; // false

 

因为 === 恒等运算符不会进行类型转换,所以它通常比 == 比较运算符更加严格和安全。在比较两个值时,建议优先使用 === 运算符。只有在明确需要进行类型转换时,才应该使用 == 运算符。

4、循环中的异步问题

异步操作是 JavaScript 中一个重要的特性,但也容易导致一些问题。以下是一个异步操作导致的问题示例:

for (var i = 0; i < 5; i++) {
  setTimeout(function () {
    console.log(i);
  },1000);
}
// 输出 5、5、5、5、5

 

预期输出是 0、1、2、3、4,但实际上输出的是 5、5、5、5、5。因为 setTimeout 函数是一个异步操作,它会在循环结束后再执行。当 setTimeout 函数被调用时,i 的值已经变成了 5,因此它会输出 5,而不是预期的 0、1、2、3 和 4。为了解决这个问题,可以使用立即调用的函数表达式(IIFE) 或 let 关键字来解决变量作用域的问题。

通过使用 IIFE 来来解决该问题:

for (var i = 0; i < 5; i++) {
  (function (j) {
    setTimeout(function () {
      console.log(j);
    },1000);
  })(i);
}
// 输出 0、1、2、3、4

 

5、引用类型比较问题

在 JavaScript 中,引用类型(如数组和对象)的比较可能导致一些奇怪的问题。以下是一个引用类型比较导致的问题示例:

console.log([] == []); // 输出 false
console.log([] === []); // 输出 false

 

这是因为 JavaScript 中比较引用类型时,比较的是它们在内存中的地址,而不是它们的内容。因此,两个空数组虽然看起来相同,但它们在内存中的地址不同,因此比较结果为 false。

6、变量命名问题

不恰当的变量命名可能导致一些问题。以下是一个变量命名导致的问题示例:

var NaN = "not a number";
console.log(NaN); // 输出 NaN
console.log(typeof NaN); // 输出 "number"

 

因为 NaN 是 JavaScript 中一个关键字,表示 Not a Number,不应该被用作变量名。因为变量名和关键字相同,所以 typeof 操作符返回了 "number",而不是预期的 "string"。

7、数据类型转换问题

JavaScript 中有很多不同的数据类型,类型转换可能导致一些奇怪的问题。以下是一个数据类型转换导致的问题示例:

console.log(1 + "2" + "2"); // 输出 "122"
console.log(1 + +"2" + "2"); // 输出 "32"
console.log(1 + -"1" + "2"); // 输出 "02"
console.log(+"1" + "1" + "2"); // 输出 "112"
console.log("A" - "B" + "2"); // 输出 "NaN2"
console.log("A" - "B" + 2); // 输出 NaN

 

这些奇怪的输出都是因为类型转换造成的,例如在第一行中,数字 1 和字符串 "2" 相加,得到字符串 "12",然后再和字符串 "2" 相加,得到字符串 "122"。

8、NaN 的比较问题

NaN 是一种特殊的数值,表示 "Not a Number"。在 JavaScript 中,NaN 与任何值都不相等,包括它自己。以下是一个 NaN 比较导致的问题示例:

console.log(NaN == NaN); // 输出 false
console.log(NaN === NaN); // 输出 false

 解决该问题的方法是使用全局函数 isNaN() 来判断一个值是否为 NaN:

console.log(isNaN(NaN)); // 输出 true

 

9、0.1 + 0.2 不等于 0.3 问题

在 JavaScript 中,使用浮点数进行计算时,可能会出现精度问题。例如,0.1 + 0.2 的结果并不是 0.3。以下是一个精度问题导致的问题示例:

console.log(0.1 + 0.2 == 0.3); // 输出 false

 解决该问题的方法是将浮点数转换为整数进行计算,最后再将结果除以 10。或者使用 Number.EPSILON 来比较两个浮点数是否相等:

console.log(Math.abs(0.1 + 0.2 - 0.3) < Number.EPSILON); // 输出 true

 

10、最大整数问题

在 JavaScript 中,最大整数可以通过访问 Number.MAX_SAFE_INTEGER 属性来获取。这个属性的值为 9007199254740991,它是 JavaScript 中可安全表示的最大整数。超过这个值的整数将不再被准确表示。例如,9007199254740992 将被表示为 9007199254740992,但是 9007199254740993 将被表示为 9007199254740992,因为它超出了 JavaScript 可以准确表示的整数范围。

11、布尔值的算术运算问题

在 JavaScript 中,当对布尔值使用算术运算符时,它们会被自动转换为数字类型。true 被转换为数字 1,false 被转换为数字 0。

console.log(true + true); // 输出:2

 

console.log(true - true); // 输出:0

12、闭包导致的问题

12.1、内存泄漏问题

闭包中引用的外部变量不会被垃圾回收,可能导致内存泄漏。以下是导致内存泄漏的示例代码:

function outerFunction() {
  var bigArray = new Array(1000000);

  return function innerFunction() {
    console.log(bigArray);
  };
}

var inner = outerFunction();

// 忘记释放 inner 函数会导致内存泄漏

 

解决方法:

在使用闭包时,确保在不再需要它时释放它。在此示例中,可以将 inner 变量设置为 null 以释放闭包。

function outerFunction() {
  var bigArray = new Array(1000000);

  return function innerFunction() {
    console.log(bigArray);
  };
}

var inner = outerFunction();

// 使用完 inner 函数后释放它
inner = null;

 

12.2、意外的变量共享

如果多个闭包共享同一个外部变量,它们可能会意外地修改该变量的值,导致意想不到的结果。以下是示例代码:

function createFunctions() {
  var result = [];

  for (var i = 0; i < 5; i++) {
    result[i] = function () {
      console.log("Index: " + i);
    };
  }

  return result;
}

var functions = createFunctions();

// 所有函数输出的值都是 5,而不是预期的 0、1、2、3、4
functions[0](); // 输出 "Index: 5"
functions[1](); // 输出 "Index: 5"
functions[2](); // 输出 "Index: 5"
functions[3](); // 输出 "Index: 5"
functions[4](); // 输出 "Index: 5"

 

解决方法:

在循环中使用闭包时,需要创建一个新的作用域来存储循环变量的值。可以使用立即调用的函数表达式(IIFE)来创建一个新的作用域。以下是修改后的代码:

function createFunctions() {
  var result = [];

  for (var i = 0; i < 5; i++) {
    (function (i) {
      result[i] = function () {
        console.log("Index: " + i);
      };
    })(i);
  }

  return result;
}

var functions = createFunctions();

// 此时,每个函数都输出正确的值
functions[0](); // 输出 "Index: 0"
functions[1](); // 输出 "Index: 1"
functions[2](); // 输出 "Index: 2"
functions[3](); // 输出 "Index: 3"
functions[4](); // 输出 "Index: 4"

 

12.3、循环中的问题

在循环中使用闭包时,可能会出现问题。如果在闭包中使用循环变量,它们将共享同一个值,可能导致错误结果。以下是示例代码:

for (var i = 1; i <= 5; i++) {
  setTimeout(function () {
    console.log(i);
  },1000);
}

 上述代码属于闭包情况。

解决方法:

与上一个示例类似,可以使用 IIFE 创建一个新的作用域来存储循环变量的值。以下是修改后的代码:

for (var i = 1; i <= 5; i++) {
  (function (i) {
    setTimeout(function () {
      console.log(i);
    },1000);
  })(i);
}

 或者可以使用 let 关键字声明循环变量,它会在每次迭代中创建一个新的变量,从而避免共享变量的问题。以下是使用 let 关键字的代码:

for (let i = 1; i <= 5; i++) {
  setTimeout(function () {
    console.log(i);
  },1000);
}

 使用 let 关键字是更加简单和可读性更高的方法,因为它会自动解决共享变量的问题。但是在一些较老的浏览器版本中可能不支持 let 关键字,因此使用 IIFE 是更通用的解决方法。