JavaScript
文章平均质量分 57
网络点点滴
一点一滴汇聚成江流河海
展开
-
JavaScript转换和校验数字
● 除了这些,也可以解析浮点数。但是这种解析必须开头是数字。● 判断一个数值是不是数字。原创 2024-04-30 21:57:01 · 41 阅读 · 0 评论 -
JavaScript代码挑战#4
/ 编程挑战 #4/* 朱莉亚和凯特仍在研究狗,这次她们研究的是狗是否吃得太多或太少。吃得太多意味着狗当前的食物份量比推荐份量大,吃得太少则相反。吃得适量意味着狗当前的食物份量在推荐份量的正负 10% 的范围内(参见提示)。祝你好运😀 */原创 2024-04-29 22:09:05 · 480 阅读 · 0 评论 -
JavaScript数组方法练习
注: ++count不要写成了count++,很好理解,++count是先运算后赋值,而count++先赋值后运算!● 将一段话的首字母转换为大写字母,其他都是小写,但是请注意,有一些字符不需要进行转换。● 计算所有账号中大于1000存款的有多少笔?接着我们来改进一下上面的代码。● 分别计算存款和取款之和。可以将计数的代码改进一下。原创 2024-04-28 21:50:00 · 108 阅读 · 0 评论 -
总结-要使用哪种数组方法
● 从原始数组中计算得出。● 将原始内容添加到其他。● 使用条件进行过滤。● 基于分隔符字符串。原创 2024-04-27 20:42:37 · 138 阅读 · 0 评论 -
JavaScript创建和填充数组的更多方法
● fill方法虽然很好用,但是如果想创建[1,2,3,4,5,6,7]这样的数组的话,还是要使用Array.from方法更为简单。通过map方法去填充整个数组,但是这个并做不到,因为map方法只能有有值的情况进行替换,未定义的无法替换。● fill方法和slice方法类似,我们也可以传入参数,让他知道替换数组中的哪些值。● 首先Array.from方法也可以简答的填充数组,和fill类似。● 我们之前创建数组的方式都是手动去创建去一个数据,例如。● 当然,我们也可以生成我们1-7的那种数组。原创 2024-04-26 21:53:57 · 616 阅读 · 3 评论 -
(八)小案例银行家应用程序-排序-数组排序
之后我们写一个一个movs变量,如果sort值为ture的话,对数据进行渐层拷贝,防止对原始数据产生影响,,然后再对拷贝后的数据进行一个降序排序,如果sort为false的话就直接使用未排序的movments数组;● 这个通过点击事件使用,来修改sort的值来进行排序,但是当我们再次点击sort按钮时,并不会回复数组的排序,还是进行从小到大排序,这个事情就需要我们来设置一个状态变量。因为首先设置为false,点击时候,进行取反,就是true,就会继续排序,然后通过sorted =!原创 2024-04-25 20:39:09 · 401 阅读 · 0 评论 -
flat和flatMap方法
flatMap() 方法是 JavaScript 数组的一个方法,它结合了 map() 和 flat() 两个方法的功能。flat() 方法是 JavaScript 数组的一个方法,用于将多维数组(嵌套数组)转换为一维数组。○ 当然之前我们讲过方法链条,这些都可以用方法链来简化代码量。○ 然后我们再通过flat方法将其合并未一个数组。○ 然后通过reduce方法进行累计。○ 我们还可以设置flat的深度。原创 2024-04-24 20:42:20 · 146 阅读 · 0 评论 -
(七)小案例银行家应用程序-申请贷款-some方法和every方法
● 而some方法只要达成某一个条件就会返回true,否则就返回flase。只要数组中存在-130这个值,就会返回true,否则就会返回flase。every方法需要所有数组都满足条件才返回true,否则返回flase。● 我们现在利用some方法去实现应用程序中申请贷款的功能。● 我们先回顾一下includes方法。原创 2024-04-23 21:17:35 · 258 阅读 · 0 评论 -
(六)小案例银行家应用程序-删除账号-findindex方法
● 当用户登录成功之后,可以在下方输入自己的用户名和密码,然后提交,接着用户就会被删除,用户就无法登录了。● 之后我们应该清楚UI,并将输入框内容清空。之后删除的用户将无法登录;原创 2024-04-22 20:27:28 · 294 阅读 · 0 评论 -
(五)小案例银行家应用程序-实现转账
因此,在btnTransfer的事件监听器中,无法访问到balance,导致条件判断中的currentAccount.balance始终为undefined,从而影响了if条件的判断结果。修改后的代码balance是赋值给了账户对象(acc)的balance属性,而acc是calcDisplayBalance函数的参数,在函数外部定义的。● 我们获取到用户输入钱的值和收款方之后,我们还要去判断用户输入值是否大于0,当前转帐房的余额是否大于用户输入值,用户输入的账户名是否存在,等等。原创 2024-04-21 13:01:27 · 263 阅读 · 0 评论 -
(四)小案例银行家应用程序-实现登录功能
● 之后我们在显示用户的账号变化、总余额,取钱数,存钱数,利息啥的调用一下,之前函数都写过了,调用该一下即可。● 但是不知道小伙伴记不记得,当时我们写计算利息的时候,所有账号的利息都是1.2,但是实际每个账号的利率都。未登录下面的页面是看不到的,然后通过输入用户名和pin来实现登录,之后才能看到用户的银行数据;● 现在用户登录逻辑出来了,我们只需要在用户正确输入用户名和密码之后显示UI和欢迎信息就可以了。● 但是又强迫症患者还可以看到,有些浏览器虽然输入框清空了,但是还是有光标。原创 2024-04-18 21:40:35 · 203 阅读 · 0 评论 -
find方法
看上去好像find方法和filter方法类似,只不过find方法只会返回数组第一个符合条件的元素;其次filter方法会返回一个新的数组,而find方法只会返回元素本身;find() 方法用于在数组中查找符合条件的第一个元素,并返回该元素。如果找到匹配的元素,则返回该元素的值;如果未找到匹配的元素,则返回 undefined。● 除此之外,使用find方法也可以去获取你想要的账户名。● 当然上述的方法也可以使用for of来实现。原创 2024-04-17 21:47:48 · 155 阅读 · 0 评论 -
JavaScript代码挑战3
重写上一个挑战中的 "calcAverageHumanAge "函数,但这次改为箭头函数,并使用链式连接!测试数据 1: [5, 2, 4, 1, 15, 8, 3] 测试数据 2: [16, 6, 10, 5, 6, 1测试数据 2:[16,6,10,5,6,1,4]祝你好运。原创 2024-04-16 11:32:26 · 329 阅读 · 0 评论 -
JavaScript方法链的魔力
const calcDisplaySummary = function (movements) { //创建一个函数,接受一个数组参数。● 但是如果存款的每一笔利息如果小于1的话,就会被银行给过滤掉,所以我们还需要在利息的函数中添加一个过滤条件。● 上图显示的是用户的存款数,我们使用方法链的方式去实现它。● 按照上面的方法,我们可以继续我们的银行家应用程序了。● 同样的操作,我们计算除取款和银行的利息。原创 2024-04-15 13:23:43 · 572 阅读 · 0 评论 -
JavaScript代码挑战
让我们回到朱莉娅和凯特关于狗的研究。这次,他们想把狗的年龄转换成人的年龄,并计算出研究中狗的平均年龄。原创 2024-04-13 22:52:55 · 259 阅读 · 0 评论 -
reduce方法
● 例如上述这个列表存储了一个用户每次取钱和存钱的一个过程,我们要将这个数组中所有的数组加起来,来了解他的余额到底有多少钱,这就需要用到reduce方法。● 累加器(accumulator):累加器是reduce函数的第一个参数,它是上一次回调函数的返回值,或者是初始值(如果没有提供初始值的话)。● 当前索引(current index):当前正在处理的数组元素的索引。● 当前元素(current element):当前正在处理的数组元素。● 上面的reduce方法我们也可以使用箭头函数的方式来简化代码。原创 2024-04-12 09:28:36 · 430 阅读 · 0 评论 -
filter方法
● 当然,如果没有这个数组方法的话,我们只能使用for循环来执行上述操作。顾名思义,filter方法是过滤用的,过滤一定的条件下;原创 2024-04-11 09:21:41 · 204 阅读 · 0 评论 -
(三)小案例银行家应用程序-计算账户所有者
● 但是这个只能将一个名字生成出来,为了方便,我们将这个功能写成一个函数,将名字传入的话,就能实现还能生成用户名。● 但是现在我们只能一个一个传参数,现在我们想要传入多个账号来生成用户名。● 我们以上述的这个账号来举例子,这个用户名就是缩写stw。● 为了精简代码,我们将上述代码改写为箭头函数。原创 2024-04-10 09:59:33 · 400 阅读 · 0 评论 -
map方法
● 为了简化代码,我们可以将map方法中的回调函数改写为箭头函数。例如我们将上述的钱转换一种货币形式,例如汇率是1.1。● 我们还可以进一步简化代码,使用三元运算符。原创 2024-04-09 16:11:30 · 304 阅读 · 0 评论 -
数据转换_映射、过滤、缩减简述
后面的文章会对这三种方法进行详细的解释已经案例、使用方法的展示!● filter 方法用于从数组中筛选出符合指定条件的元素,并返回这些元素组成的新数组。● map 方法用于对数组中的每个元素执行指定的操作,并返回操作后的结果组成的新数组。● 它可以接受一个初始值,并对数组中的每个元素和上一次的累积值执行指定的操作。● reduce 方法对数组中的元素进行累积计算,最终得到一个值。● 它也不会改变原始数组,而是返回一个新的数组。● 它不会改变原始数组,而是返回一个新的数组。原创 2024-04-08 13:56:54 · 174 阅读 · 0 评论 -
JavaScript代码小挑战
朱莉娅和凯特正在做一项关于狗的研究。于是,她们分别询问了 5 位狗主人他们的狗的年龄,并将数据存储到一个数组中(每人一个数组)。目前,她们只想知道一只狗是成年狗还是小狗。如果狗的年龄至少为 3 岁,那么它就是成年狗;如果狗的年龄小于 3 岁,那么它就是小狗。原创 2024-04-07 16:00:15 · 1359 阅读 · 0 评论 -
(二)小案例银行家应用程序-创建DOM元素
insertAdjacentHTML(‘afterbegin’, html) 的含义是将指定的 HTML 字符串 html 插入到 containerMovements 元素的开头部分(即作为其第一个子元素),而不会替换原有的内容。● 上图的数据很明显是从我们账户数组中拿到了,我们刚刚学习了forEach,所以我们使用forEach来创建我们的DOM元素;● ‘afterbegin’:在元素内部的开头部分插入。● ‘beforeend’:在元素内部的结尾部分插入。● ‘afterend’:在元素之后插入。原创 2024-04-06 22:38:55 · 181 阅读 · 0 评论 -
forEach用于Maps和集合
● forEach同样适用于集合。使用forEach循环Maps。● 首先我们构造一个Maps。原创 2024-04-02 14:34:05 · 375 阅读 · 0 评论 -
循环数组_forEach
for…of 循环:○ for…of 是一种 ES6 引入的迭代器,用于遍历可迭代对象(如数组、字符串、Map、Set 等)。○ 可以直接访问数组元素的值,而不需要索引。○ 不能中途跳出循环(除非使用 break 或 return),会一直遍历到数组的末尾。forEach 方法:○ forEach 是数组的原生方法,用于遍历数组中的每个元素,并对每个元素执行提供的回调函数。○ 无法中途跳出循环,会遍历整个数组。break或者return也无法打断。原创 2024-03-29 09:00:00 · 486 阅读 · 0 评论 -
新的at方法
或者也可以使用slice方法去获取一个新的数组,再从新的数组中去除数组中的数据。● 我们如果想从数组中取出一个字的话,传统的方式我们可以这么写。● 但是使用at方法就会使得更加容易的获取数组中最后一个数据。● 现在我们可以用一种比较新的方式去写。原创 2024-03-28 09:42:29 · 137 阅读 · 0 评论 -
JavaScript简单数组方法
● 将数组中的所有元素连接成一个字符串。● 切片(不会改变原有数组)当然我们也可以使用扩展运算符。● 拼接(会改变原有数组)● 反转(会改变原有数组)原创 2024-03-11 10:16:20 · 168 阅读 · 0 评论 -
JavaScript编码小挑战
这与其说是编码挑战,不如说是思维挑战 🤓以下面的 IIFE 为例,在函数的末尾附加一个事件侦听器,每次单击 BODY 元素时,该侦听器都会将所选 h1 元素(“标头”)的颜色更改为蓝色。不要再次选择 h1 元素!现在向你自己(或你周围的人)解释为什么这有效!花所有你需要的时间。想想回调函数的确切执行时间,以及这对本例中涉及的变量意味着什么。祝你好运 😀。原创 2024-03-11 10:14:10 · 226 阅读 · 0 评论 -
JavaScript闭包的实例
在调用 boardPassengers(180, 3) 函数时,会先执行 console.log 打印出“Will start boarding in 3 seconds”这句话,然后等待 3 秒后再执行 setTimeout 中的函数。接着调用 f() 函数时,它会执行之前在 g() 函数中定义的函数,并打印出 a 的两倍值。因此,在调用 boardPassengers 函数后,程序会继续向下执行,直到等待时间结束后才会执行 setTimeout 中的函数。这个新函数打印出变量 a 的两倍值。原创 2024-03-09 09:00:00 · 273 阅读 · 0 评论 -
JavaScript闭包
● 闭包是在其中创建函数的执行上下文的封闭变量环境,即使在该执行上下文消失之后;● 更加通俗的说,闭包允许函数访问父函数的所有变量,即使在父函数返回后也是如此。该函数保留对其外部作用域的引用,从而在整个时间内保留作用域链。● 闭包确保函数不会与函数诞生时存在的变量断开连接;例如,你和你的家,你就相当于一个功能,这个功能不会因为你离开了家就会与你的家断开联系,即使你离开了(函数被返回了),你仍然和你的家有关联;● 在类比一下,一个闭包就像一个背包,一个功能随身携带,无论它走到哪里。原创 2024-03-08 09:00:00 · 244 阅读 · 0 评论 -
立即调用函数表达式(简称IIFE)
● 当然IIFE也可以用箭头函数的方式展现出来。● 如果想立刻调用它,写法如下。原创 2024-03-07 10:02:41 · 224 阅读 · 0 评论 -
JavaScript代码小挑战
该方法将一个字符串作为输入(称为 “类型”),可以是 "字符串 "或 “数组”。如果类型为 “字符串”,则显示类似 "Poll results are 13, 2, 4, 1 "的字符串。附加:使用 "displayResults "方法显示测试数据中的两个数组。同时使用 "数组 "和 "字符串 "选项。一个投票包含一个问题、一个供用户选择的选项数组,以及一个包含每个选项回复数的数组。1.在 "poll "对象上创建一个名为 "registerNewAnswer "的方法。您最喜欢的编程语言是什么?原创 2024-03-05 13:48:42 · 378 阅读 · 0 评论 -
bind方法
bind 方法与 call 和 apply 不同,它不会立即执行函数,而是返回一个新的函数,并将指定的对象作为新函数中的 this 值。bind 方法在实际使用中常用于创建一个指定上下文的函数,以便稍后调用。● 我们实现执行参数的一部分,只传入部分参数即可● 和监听事件一起这个问题涉及 JavaScript 中的上下文和 this 关键字。在给 addEventListener 方法传递事件处理程序时,lufthansa.buyPlane 会丢失其原始上下文。原创 2024-03-05 13:45:17 · 385 阅读 · 0 评论 -
JavaScript中call和apply函数方法
两者都是用来调用函数并指定函数内部的 this 值。两者都可以传递参数给被调用的函数。不同之处:语法不同:call 方法接受一个指定的 this 值,后面是按参数列表传递的一系列参数;而 apply 方法接受一个指定的 this 值,后面是一个包含参数的数组或类数组对象。参数传递方式不同:call 方法是按参数列表传递的,每个参数都需要单独列出;apply 方法是将参数放在一个数组或类数组对象中传递给函数。原创 2024-03-04 16:35:50 · 764 阅读 · 0 评论 -
接受回调函数的函数
点击之后就会调用函数。原创 2024-02-27 14:04:22 · 163 阅读 · 0 评论 -
一阶函数与高阶函数
● JavaScript将函数视为一等公民;● 这意味着函数只是简单的值;● 函数只是另一种对象的“类型”原创 2024-02-26 09:36:18 · 242 阅读 · 0 评论 -
JavaScript函数默认参数
● 这种给参数默认值的方法是ES5提供的,但是这种太过于繁重和丑陋,在ES6中,我们可以直接使用这种方式。● 因为我们没有给后面两个参数传值,所有会显示undefined,当然我们可以给参数设置一个初始值;● 除此之外,默认的参数也可以随其他的参数而变动,如果价格按照人数来。● 当然,我们给函数传参的话,当然不会再是默认值了。● 如果我想跳过人数,给价格赋值,可以这样。原创 2024-02-23 09:56:06 · 188 阅读 · 0 评论 -
字符串方法练习
● 看到上面from和to的 重复代码了,之前我们说过,重复的代码我们一般通过函数的方式去调用。● 现在就还有最后一个问题了,那就是尾部他们都是对齐的,用我们之前说的padStart。● 然后我们发现他都是通过;去隔离各个信息的,而我们要获得信息需要将他拆分。● 现在由上面的想法, 我们通过for循环将字符串中的每个都打印出来。● 我们看上述的字符串是通过+进行连接的,我们通过分割来看看效果。● 这时我们肯定能够想到通过解构的方法将各个信息给提取出来。● 接着我们看fao后面有一大堆数字,咱们将他给干掉。原创 2024-02-22 10:02:05 · 414 阅读 · 0 评论 -
字符串方法挑战
编写一个程序,接收一个使用下划线命名法(underscore_case)编写的变量名列表,并将它们转换为驼峰命名法(camelCase)。提示4:这个挑战是故意设定为困难的,所以如果你卡住了,开始观看解决方案。输入将来自插入到DOM中的文本区域(请参见下面的代码),在按下按钮时进行转换。提示2:解决方案只需要适用于由两个单词组成的变量,例如a_b。应该输出以下内容(5个独立的console.log输出)提示1:记住哪个字符定义了文本区域中的新行😉。之后,可以使用您自己的测试数据进行测试!原创 2024-02-21 15:03:47 · 683 阅读 · 0 评论 -
使用字符串-第三部分
● 可以使用函数让输入的字符首字母都大写● 除此之外,还可以使用另外一种方法。原创 2024-02-19 09:18:57 · 309 阅读 · 0 评论 -
使用字符串-第二部分
● 我们可以用两个方法,将字符串全部变成大写或者小写,例如● 例如,现在有个乘客,名字写错了,我们需要将他名字第一个字母改成大写,第二个字母改成小写● 处理用户输入的邮件。原创 2024-02-18 10:45:19 · 223 阅读 · 0 评论