![](https://img-blog.csdnimg.cn/95cd66019cfb4903a1903cb0451e6cf5.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
JS
文章平均质量分 54
自己学习JS的一些心得体会
A是曾同学呀
never say never
展开
-
为什么“false == []”和“false == ![]”都返回true?
另外,如果抛出异常,即使没有catch子句处理异常,finally子句中的语句也会被执行。有时我真的想不通它是如何工作的,看完这5个奇怪的问题,你就知道我为啥这么说了,你知道这些古怪问题的正确答案吗?请想一想,getName执行返回的是你的好朋友fatfish,还是我们的好朋友medium?JavaScript 是一种非常优秀的编程语言,但与此同时,它也常常让我感到困惑。朋友们,请用“===”代替“==”,这样会让你的工作轻松很多,否则你可能会做噩梦。是的,问题很简单,你会看到fatfish被打印出来了。原创 2023-01-05 16:13:22 · 653 阅读 · 0 评论 -
15个有用的JavaScript技巧
今天这篇文章,是我从网络上整理的一些常见的 JavaScript Tips。我在我的项目中使用了所有这些实用技巧,今天我想把它们分享给你,希望也能够帮助到你。您可以使用 MouseEvent 对象的 clientX 和 clientY 属性的值来获取有关当前鼠标位置坐标的信息。您可以结合扩展运算符使用 Math.min() 或 Math.max() 来查找数组中的最小值或最大值。在 console.log() 中,将参数括在花括号中,以便您可以同时看到变量名和变量值。columns 表示包含列名称的数组。原创 2023-01-05 16:05:03 · 430 阅读 · 0 评论 -
如何在 JavaScript 中的字符串的字符之间添加空格
在空格 (' ') 上调用 trim() 会产生一个空字符串 (''),这在 JavaScript 中不是真值。要在字符串的字符之间添加空格,请对字符串调用 split() 方法以获取字符数组,然后对该数组调用 join() 方法以使用空格分隔符连接字符。这是因为空格 (' ') 也是一个字符,就像一个字母,调用 split() 会使它成为数组中的一个单独元素,该元素将与其他空格组合。如果我们想避免字符的多重间距,我们可以在 split() 和 join() 之间插入对 filter() 方法的调用。原创 2022-12-26 08:48:02 · 5260 阅读 · 0 评论 -
1000个判断条件难道要写了1000个 if ? 一文教你如何实现分支优化
if (name === "小刘") {console.log("刘哥哥");} else if (name === "小红") {console.log("小红妹妹");} else if (name === "陈龙") {console.log("大师");} else if (name === "李龙") {console.log("师傅");} else if (name === "大鹏") {console.log("恶人");} else {原创 2022-12-26 08:46:42 · 120 阅读 · 0 评论 -
三种 js阻止事件的默认行为发生的方式
a标签点击跳转 鼠标右键弹出菜单 滑动滚轮控制滚动条等 这些都是事件的默认行为,某些时候我们不需要这些行为,就需要阻止这些默认行为。使用 事件对象.returnValue = false。使用 事件对象.preventDefault()直接在事件处理函数中return false。用addEventListener绑定事件。用attachEvent 绑定事件。原创 2022-12-21 08:51:40 · 928 阅读 · 0 评论 -
JS实现生产者-消费者模式
1.先创建一个缓冲区(数组)并设置缓冲区的最大容量。2.设定一个锁,用于控制生产者和消费者状态。生产者和消费者的他们有什么特点?怎么实现生产者和消费者?原创 2022-12-19 17:45:09 · 621 阅读 · 0 评论 -
JS 中 Object 的 keys 是无序的吗?
在最开始学习 JavaScript 时,我一直被灌输 Object 中的 Key 是无序的,不可靠的,而与之相对的是 Map 实例会维护键值对的插入顺序。实际上在 ES2015 以后,的规则变了:在一些现代的浏览器中,keys 输出顺序是可以预测的!原创 2022-12-19 11:06:55 · 163 阅读 · 0 评论 -
手写数组方法之数组静态方法
Array.isArray,Array.from,Array.of,原创 2022-12-05 09:07:43 · 290 阅读 · 0 评论 -
手写数组方法之用于遍历的方法
forEach,map,flatMap,find,findIndex,filter,some,every,reduce,reduceRight,原创 2022-12-05 09:02:25 · 309 阅读 · 0 评论 -
手写数组方法之不改变原数组方法
valueOf,join,toString,concat,at,indexOf,lastIndexOf,includes,slice,flat原创 2022-12-05 08:56:52 · 366 阅读 · 0 评论 -
手写数组方法之会改变原数组方法
pop,push,shift,unshift,reverse,sort,splice,fill,copyWithin原创 2022-12-05 08:50:58 · 307 阅读 · 0 评论 -
JS使用“#“声明私有属性
表示私有属性,但它并不靠谱,还是会被外部修改。原创 2022-11-06 21:16:07 · 805 阅读 · 0 评论 -
使用“Object.hasOwn“替代“in”操作符
有时,我们想知道对象上是否存在某个属性,一般会使用“in”操作符或“obj.hasOwnProperty”,但它们都有各自的缺陷。来避免这两个问题,这比“obj.hasOwnProperty”方法更加方便、安全。如果指定的属性位于对象或其原型链中,“in”运算符将返回true。已经可以过滤掉原型链上的属性,但在某些情况下,它还是不安全。中是否具有对应的值(原型链上的属性不会读取)。方法会返回一个布尔值,表示对象。原创 2022-11-06 21:14:28 · 889 阅读 · 0 评论 -
4种JavaScript深拷贝的方法
浅拷贝与深拷贝浅拷贝是创建一个新对象,这个对象有着原始对象属性值的拷贝。如果属性是基本类型,拷贝的就是基本类型的值,如果属性是引用类型,拷贝的是内存地址 。如果不进行深拷贝,其中一个对象改变了对象的值,就会影响到另一个对象的值。深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。1、JSON.parse(JSON.stringify(obj))一般情况下对普通对象需要进行深拷贝,可以使用这种方法进行深拷贝操作,这种是最简单且代码量原创 2022-05-18 13:19:41 · 10196 阅读 · 2 评论 -
js对象属性 通过点(.) 和 方括号([]) 的不同之处
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> </body></html><script> // js对象属性 通过点(.) 和 方括号([]) 的不同之处// 1、点操作符:.原创 2022-05-17 16:20:14 · 193 阅读 · 0 评论 -
单行JS代码实现获取两个数字之间的随机整数、获取两个数字之间的随机整数、获取参数的平均值、将数字截断为固定小数点、计算两个日期相差天数、从日期中获取一年中的哪一天、生成一个随机的十六进制颜色
9、获取两个数字之间的随机整数此方法用于获取两个数字之间的随机整数。const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)random(1, 50) // 25random(1, 50) // 3410、获取参数的平均值我们可以使用 reduce 方法来获取我们在此函数中提供的参数的平均值。const average = (...args) => args.原创 2022-05-01 20:46:15 · 728 阅读 · 0 评论 -
单行JS代码实现生成随机字符串、转义HTML特殊字符、将字符串中每个单词的第一个字符大写、将字符串转换为camelCase、删除数组中的重复值、展平一个数组、从数组中删除虚假值、检查一个数字是偶数还是
1、生成随机字符串我们可以使用 Math.random 生成一个随机字符串,当我们需要一个唯一的 ID 时非常方便。const randomString = () => Math.random().toString(36).slice(2)randomString() // gi1qtdego0brandomString() // f3qixv40motrandomString() // eeelv1pm3ja2、转义HTML特殊字符如果您了解 XSS,其中一种解决方案是转义 HTM原创 2022-05-01 20:42:45 · 393 阅读 · 0 评论 -
JavaScript两个变量的值交换的方式
前言该文是在看别人博客的时候发现的,很有趣的一篇文章,这里摘录到自己的简书中,供给各位读者学习本文主要描述,如何不使用中间值,将两个变量的值进行交换。前三种只适用于number类型的数值交换,第四和第五种适合其他类型。一、普通做法普通的做法就是声明多一个临时变量tmp,进行数据交换过程中的缓存。这样的做法直观,易懂。但是,会增加内存的使用。 1 2 3 4 5 6 7 vara = 1, b =...原创 2022-04-17 22:45:14 · 1399 阅读 · 0 评论 -
vuex中 mutation和action的区别和使用
utations 类似于事件,用于提交 Vuex 中的状态 stateaction 和 mutations 也很类似,主要的区别在于mutations 只能是同步操作,,action 可以包含异步操作,而且可以通过 action 来提交 mutationsmutations 有一个固有参数 state,接收的是 Vuex 中的 state 对象action 也有一个固有参数 context,但是 context 是 state 的父级,包含 state、gettersVuex 的仓库是 st原创 2022-04-17 22:43:48 · 2035 阅读 · 0 评论 -
ES数组新增了哪些扩展?
一、扩展运算符的应用ES6通过扩展元素符...,好比rest参数的逆运算,将一个数组转为用逗号分隔的参数序列console.log(...[1, 2, 3])// 1 2 3console.log(1, ...[2, 3, 4], 5)// 1 2 3 4 5[...document.querySelectorAll('div')]// [<div>, <div>, <div>]主要用于函数调用的时候,将一个数组变为参数序列func..原创 2022-04-10 20:24:45 · 128 阅读 · 0 评论 -
SPA单页面的理解
一、什么是SPASPA(single-page application),翻译过来就是单页应用SPA是一种网络应用程序或网站的模型,它通过动态重写当前页面来与用户交互,这种方法避免了页面之间切换打断用户体验在单页应用中,所有必要的代码(HTML、JavaScript和CSS)都通过单个页面的加载而检索,或者根据需要(通常是为响应用户操作)动态装载适当的资源并添加到页面页面在任何时间点都不会重新加载,也不会将控制转移到其他页面举个例子来讲就是一个杯子,早上装的牛奶,中午装的是开水,晚上装的是茶,我们发现,原创 2022-03-24 20:09:09 · 354 阅读 · 0 评论 -
v-if和v-for的优先级是什么?
一、作用v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回true值的时候被渲染v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item in items形式的特殊语法,其中items是源数据数组或者对象,而item则是被迭代的数组元素的别名在v-for的时候,建议设置key值,并且保证每个key值是独一无二的,这便于diff算法进行优化两者在用法上<Modal v-if="isShow" /><li v-...原创 2022-03-20 21:35:04 · 392 阅读 · 0 评论 -
v-show和v-if有什么区别?使用场景分别是什么?
一、v-show与v-if的共同点我们都知道在vue中v-show与v-if的作用效果是相同的(不含v-else),都能控制元素在页面是否显示在用法上也是相同的<Model v-show="isShow" /><Model v-if="isShow" />当表达式为true的时候,都会占据页面的位置 当表达式都为false时,都不会占据页面位置二、v-show与v-if的区别控制手段不同 编译过程不同 编译条件不同控制手段:v-show...原创 2022-03-20 21:33:01 · 135 阅读 · 0 评论 -
JS中filter()方法的使用
一、作用filter用于对数组进行过滤。它创建一个新数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。注意:filter()不会对空数组进行检测、不会改变原始数组二、语法Array.filter(function(currentValue, indedx, arr), thisValue) 其中,函数 function 为必须,数组中的每个元素都会执行这个函数。且如果返回值为 true,则该元素被保留; 函数的第一个参数 currentValue 也为必须,原创 2022-03-13 20:20:52 · 7920 阅读 · 0 评论 -
js对象属性 通过点(.) 和 方括号([]) 的不同之处
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body></body></html><script>// js对象属性 通过点(.) 和 方括号([]) 的不同之处//...原创 2022-03-13 20:19:26 · 188 阅读 · 0 评论 -
Map和Set对象
1 Set对象介绍: Set数据结构类似数组,但所有成员的值唯一。 Set本身为一个构造函数,用来生成 Set数据结构,使用 add方法来添加新成员。let a = new Set();[1,2,2,1,3,4,5,4,5].forEach(x=>a.add(x));for(let k of a){ console.log(k)};// 1 2 3 4 5基础使用:let a = new Set([1,2,3,3,4]);[...a]; // [1,2,3,4]原创 2022-03-06 11:33:56 · 136 阅读 · 0 评论 -
var 和 let 的区别
1、变量范围当我们在函数外部定义变量时,这些var变量属于全局范围。例如:var counter;在本例中,counter是一个全局变量。这意味着该counter变量可以被任何函数访问。当我们使用关键字在函数内声明变量时var,变量的范围是局部的。例如:function increase() { var counter = 10;}//cannotaccessthecountervariablehere在这个例子中,counter变量是increase()函数的...原创 2022-03-06 11:30:27 · 290 阅读 · 0 评论 -
12种JavaScript中最常用的数组操作整理汇总(2)
7、转换为数组有时我们必须将一些其它数据结构,如集合或字符串转换为数组。类数组:函数参数,dom 集合Array.prototype.slice.call(arguments);Array.prototype.concat.apply([], arguments);字符串:console.log('string'.split('')); // ["s", "t", "r", "i", "n", "g"]console.log(Array.from('string')); // ["原创 2022-02-20 19:25:18 · 306 阅读 · 1 评论 -
12种JavaScript中最常用的数组操作整理汇总(1)
1、数组长度大多数人都知道可以像这样得到数组的长度:const arr = [1, 2, 3]; console.log(arr.length); // 3有趣的是,我们可以手动修改长度。这就是我所说的:const arr = [1, 2, 3]; arr.length = 2; arr.forEach(i => console.log(i)); // 1 2甚至创建指定长度的新数组:const arr = []; arr.length = 100; console.lo原创 2022-02-20 19:22:02 · 449 阅读 · 0 评论 -
JavaScript中attributes获取,设置,移除元素属性的值
Attribute是属性的意思,文章仅对部分兼容IE和FF的Attribute相关的介绍。attributes:获取一个属性作为对象getAttribute:获取某一个属性的值setAttribute:建立一个属性,并同时给属性捆绑一个值createAttribute:仅建立一个属性removeAttribute:删除一个属性getAttributeNode:获取一个节点作为对象setAttributeNode:建立一个节点removeAttributeNode:删除一个节点attribu原创 2022-02-12 19:53:49 · 10319 阅读 · 0 评论 -
JS - 2020-01-01T00:00:00.000000Z 日期格式转换
function rTime(date) { var json_date = new Date(date).toJSON(); return new Date(new Date(json_date) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '') }let date = rTime('2020-06-27T14:20:27.000000Z');console.log(date).原创 2022-02-12 19:15:59 · 1467 阅读 · 0 评论 -
JS 获取滚动条到底部得距离
$(window).scroll(function() { // 变量 scrollHeight 是滚动条的总高度 let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight // 变量 windowHeight 是可视区的高度 let windowHeight = document.documentElement.clientHeight || docume.原创 2022-02-12 18:57:51 · 3567 阅读 · 0 评论 -
如何将一个 JavaScript 数组打乱顺序
当我们想将现有的数组打乱顺序,有两个方法:1. Array.prototype.sort()数组的sort()方法用原地算法对数组的元素进行排序,并返回数组。默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的。var arr = [1,2,3,4,5,'hello','bye',6,8,'yes'];arr.sort(function(){ return Math.random()-0.5})sort()方法如果指定了一个函数,那原创 2022-01-10 20:11:11 · 5753 阅读 · 1 评论 -
JS中的立即执行函数
JS 立即执行函数可以让函数在创建后立即执行,这种模式本质上就是函数表达式(命名的或者匿名的),在创建后立即执行。1、立即执行函数的写法立即执行函数通常有下面两种写法://第一种写法 (function(){ ... })(); //第二种写法 (function(){ ... }()); //错误的写法 function (){ ... }(); //报错: Uncaught SyntaxError: Unexpected token (第三种原创 2022-01-08 19:59:23 · 7362 阅读 · 2 评论 -
你知道的JS迭代器与生成器基础
迭代器(Iterator)有时也称为遍历器 - 迭代器对象作用为各种数据结构提供统一的访问接口 使数据结构的成员按照某种次序排列 统一的迭代方式for...of循环1.可迭代(iterable)iterable:拥有Symbol.iterator属性的数据结构是可迭代的Symbol.iterator:值为迭代器生成函数原生可迭代的数据结构:Array Map Set String TypedArray arguments NodeList 这些数据结构均可以使用fo原创 2021-12-29 20:31:39 · 324 阅读 · 0 评论 -
你知道的 Promise
1.Promise的resolve参数1.1 普通的值或者对象当resolve方法的参数是普通值或对象时,Promise状态是直接改变的。new Promise((resolve, reject) => { // pending -> fulfilled // resolve(基本数据类型或普通对象) resolve('promise'); // resolve({name: 'fct'});}).then(res => { console.log("r原创 2021-12-29 20:00:03 · 366 阅读 · 0 评论 -
VisualStudio Code怎么同时编辑多处?vscode同时编辑多处的三种方法
一、重命名变量1、首先看看自己需要同时修改多处的代码是不是要重命名一个变量,如果是的话,有现成的快捷键f2。选中一个变量,按f2,弹出一个小窗口,在里面输入内容后按回车,所有该变量都会被重命名。2、但是要注意,在js文件中,如果这个变量没有用var或者const或者let声明,会无法重命名。二、多光标1、按住alt,用鼠标左键点击,可以出现多个光标,输入的代码可以在光标处同时增加。2、按住Ctrl + Alt,再按键盘上向上或者向下的键,可以使一列上出现多个光标。3、原创 2021-12-26 15:55:33 · 6390 阅读 · 0 评论 -
xhr对象发送GET、POST请求
//1.创建对象var xhr;if (window.XMLHttpRequest){//普通浏览器 xhr=new XMLHttpRequest();}else{//老版本IE xhr=new ActiveXObject("Microsoft.XMLHTTP");}//3.监听服务器响应xhr.onreadystatechange=function(){ if(xhr.readyState==4&&xhr.status==200){ c.原创 2021-12-23 20:49:24 · 2779 阅读 · 0 评论 -
ajax请求模板
$.ajax()该方法用于执行Ajax请求,常用于其他jQuery Ajax方法不能完成的请求,也许我们可以把它称为"jQuery中Ajax系列方法之母"。形式:$.ajax({name:val, name:val,...});可选字段:1)url:链接地址,字符串表示2)data:需发送到服务器的数据,GET与POST都可以,格式为{A: '...', B: '...'}3)type:"POST" 或 "GET",请求类型4)timeout:请求超时时间,单位为毫秒,数值表示5)cac原创 2021-12-23 20:47:20 · 410 阅读 · 0 评论 -
bootstrap基本使用
在现阶段我们还没有接触JS相关课程,所以我们只考虑使用它的样式库。Bootstrap 使用四步曲: 创建文件夹结构 创建 html 骨架结构 <!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &l...原创 2021-12-19 21:39:01 · 210 阅读 · 0 评论