JS——9大陷阱

一、警惕A>X>B写法

  3>2>1  返回值为false(原因:3>2为true,会默认转成数字1,1>1为false)

  1<4<3  返回值为true(原因:1<4为true,会默认转成数字1,1<3为true)

  2<1<2  返回值为true(原因:2<1为false,会默认转成数字0,0<2为true)

处理办法:这类写法拆开单独判断

 案例:   1>X&&X>3         这样可以避免首次判断后直接把true或者false转为1或者0。

二、你是否尝试过对数组元素进行排序?

JavaScript默认使用字典序(alphanumeric)来排序。因此, [1,2,5,10].sort()的结果是[1, 10, 2, 5]。

如果你想正确的排序,应该这样做: [1,2,5,10].sort((a, b) => a - b)

三、new Date() 十分好用

new Date()可以接收:

  • - 不接收任何参数:返回当前时间;
  • - 接收一个参数`x`: 返回1970年1月1日 + `x`毫秒的值。
  • - `new Date(1, 1, 1)`返回1901年2月1号。
  • - 然而...., `new Date(2016, 1, 1)`不会在1900年的基础上加2016,而只是表示2016年。

四、替换函数没有真的替换?

1

2

3

4

let s = "bob"

const replaced = s.replace('b', 'l')

replaced === "lob" // 只会替换掉第一个b

s === "bob" // 并且s的值不会变

如果你想把所有的b都替换掉,要使用正则:

1

"bob".replace(/b/g, 'l') === 'lol'

五、谨慎对待比较运算

1

2

3

4

5

6

7

// 这些可以

'abc' === 'abc' // true

1 === 1 // true

// 然而这些不行

[1,2,3] === [1,2,3] // false

{a: 1} === {a: 1} // false

{} === {} // false

因为[1,2,3]和[1,2,3]是两个不同的数组,只是它们的元素碰巧相同。因此,不能简单的通过`===`来判断。

六、数组不是基础类型

1

2

3

4

5

typeof {} === 'object' // true

typeof 'a' === 'string' // true

typeof 1 === number // true

// 但是....

typeof [] === 'object' // true

如果要判断一个变量`var`是否是数组,你需要使用`Array.isArray(var)` 。

七、闭包

这是一个经典的JavaScript面试题:

1

2

3

4

5

6

7

const Greeters = []

for (var i = 0 ; i < 10 ; i++) {

 Greeters.push(function () { return console.log(i) })

}

Greeters[0]() // 10

Greeters[1]() // 10

Greeters[2]() // 10

虽然期望输出0,1,2,...,然而实际上却不会。知道如何Debug嘛?

有两种方法:

  • - 使用`let`而不是`var`。 (备注:可以参考这篇文章 ES6深入理解之“let”能替代”var“吗?_javascript技巧_脚本之家)
  • - 使用`bind`函数。(备注:可以参考这篇文章 JavaScript基础之this详解_基础知识_脚本之家)

1

Greeters.push(console.log.bind(null, i))

当然,还有很多解法。这两种是我最喜欢的!

八、关于bind

下面这段代码会输出什么结果?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

class Foo {

 constructor (name) {

 this.name = name

 }

 greet () {

 console.log('hello, this is ', this.name)

 }

 someThingAsync () {

 return Promise.resolve()

 }

 asyncGreet () {

 this.someThingAsync()

 .then(this.greet)

 }

}

new Foo('dog').asyncGreet()

如果你说程序会崩溃,并且报错:Cannot read property 'name' of undefined 。

因为第16行的`geet`没有在正确的环境下执行。当然,也有很多方法解决这个BUG!

- 我喜欢使用`bind`函数来解决问题:

1

2

3

4

asyncGreet () {

 this.someThingAsync()

 .then(this.greet.bind(this))

}

这样会确保`greet`会被Foo的实例调用,而不是局部的函数的`this`。

- 如果你想要`greet`永远不会绑定到错误的作用域,你可以在构造函数里面使用`bind`来绑定。

1

2

3

4

5

6

class Foo {

 constructor (name) {

 this.name = name

 this.greet = this.greet.bind(this)

 }

}

- 你也可以使用箭头函数(=>)来防止作用域被修改。 (备注:可以参考这篇文章 JavaScript箭头(arrow)函数详解_基础知识_脚本之家)  

1

2

3

4

5

6

asyncGreet () {

 this.someThingAsync()

 .then(() => {

 this.greet()

 })

}

九、Math.min()比Math.max()大

1

Math.min() < Math.max() // false

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/772644.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Leetcode第35题:搜索插入位置

代码实现 class Solution:def searchInsert(self, nums: List[int], target: int) -> int:if target in nums:return nums.index(target)index0for num in nums:if target>num:index1else:nums.insert(index,target)breakreturn index解题思路:先判断target是否在nums中…

【简单随机抽样】

文章目录 什么是简单随机抽样&#xff1f;简单随机抽样的步骤简单随机抽样的优点简单随机抽样的缺点 什么是简单随机抽样&#xff1f; 简单随机抽样是指从总体中以相同的概率随机选择一定数量的样本单元组成样本的一种方法。它要求每个样本单元被抽中的机会是均等的。每一个样…

滴滴出行高级Node.js开发工程师笔试题2024

今天参加了一个滴滴出行的Node.js岗位面试&#xff0c;一面为腾讯视频面试&#xff0c;俩个面试官。面试官比较深入问一些你过去做个的项目&#xff0c;问你解决了哪些棘手的问题。 还有就是他们比较关注性能优化&#xff0c;会问你们现在项目的峰值QPS是多少&#xff0c;如何进…

ChatGPT之道:AI与编程的完美融合

ChatGPT无限次数:点击直达 ChatGPT之道&#xff1a;AI与编程的完美融合 引言 随着人工智能技术的发展&#xff0c;AI在各个领域都展现出了惊人的应用潜力。在编程领域&#xff0c;AI的应用也是愈发广泛。其中&#xff0c;ChatGPT作为一种基于大型神经网络的自然语言生成模型&…

2024第二届经济管理、贸易与信息技术创新国际会议(ICEMITI2024)

2024第二届经济管理、贸易与信息技术创新国际会议&#xff08;ICEMITI2024&#xff09; 会议简介 2024第二届经济管理、贸易与信息技术创新国际会议&#xff08;ICEMITI2024&#xff09;将在中国郑州举行。这是一个重要的学术会议&#xff0c;旨在讨论当前经济管理、贸易和信…

[DDD] ValueObject的一种设计落地及应用

目录 前言一、ValueObject二、设计2.1 接口2.2 单一值ValueObject2.3 单一字符串ValueObject 三、实现3.1 示例3.1.1 PhoneNumber3.1.2 SocialCreditCode 四、使用4.1 异常处理4.2 Json 反/序列化4.2.1 请求体4.2.2 HTTP接口4.2.3 用例 4.3 JPA/MyBatis4.3.1 Converter或TypeHa…

vue响应式基础

声明响应式状态​ ref()​ 在组合式 API 中&#xff0c;推荐使用 ref() 函数来声明响应式状态&#xff1a; import { ref } from vueconst count ref(0) ref() 接收参数&#xff0c;并将其包裹在一个带有 .value 属性的 ref 对象中返回&#xff1a; const count ref(0)c…

202449读书笔记|《悦读诗 乐生活》——跌倒,是生活的偶然 发光,是生命的态度

202449读书笔记|《悦读诗 乐生活》——跌倒&#xff0c;是生活的偶然 发光&#xff0c;是生命的态度 第一篇 全都喜欢上第二篇 生如夏花第三篇 “希望”是带有羽毛之物第四篇 我来到这世界…… 《悦读诗 乐生活&#xff1a;小学生经典现代诗歌鉴赏集》赵迁编著&#xff0c;是小…

【JavaEE初阶系列】——多线程案例三——定时器

目录 &#x1f6a9;定时器是什么 &#x1f6a9;标准库中的定时器 &#x1f6a9;自定义定时器 &#x1f388;构造Task类 &#x1f4dd;相对时间和绝对时间 &#x1f388;构造MyTime类 &#x1f4dd;队列空和队列不为空 &#x1f4dd;wait(带参)解决消耗资源问题 &#…

多列数据表,复制插入一条有唯一索引限制的数据

假如你有一张表&#xff08;列简单列举四个&#xff0c;实际可能十好几二十好几的字段&#xff09; idnameagesex1zhangsan10男2lisi20男3wangermazi30男4xiaotaoqi40男 你想复制id4的数据&#xff0c;只把id变为6其他信息不变&#xff0c;来给自己用&#xff0c;只有主键变更…

docker配置镜像加速后容器和镜像消失

一、问题描述 根据阿里云给docker配置镜像加速器 sudo mkdir -p /etc/docker sudo tee /etc/docker/daemon.json <<-EOF {"registry-mirrors": ["https://gt6j98xi.mirror.aliyuncs.com"] } EOF sudo systemctl daemon-reload sudo systemctl rest…

NO9 蓝桥杯单片机串口通信之进阶版

1 回顾 串口通信的代码编写结构还是与中断一样&#xff0c;不同的是&#xff1a; 初始中断函数条件涉及到串口通信相关的寄存器和定时器1相关的寄存器&#xff08;定时器1用于产生波特率&#xff09;&#xff0c;但初始条件中的中断寄存器只考虑串口通信而不考虑定时器1。 v…

基于springboot+vue+Mysql的网上图书商城

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…

多功能的RSS工具RSS Funnel

什么是 RSS Funnel &#xff1f; RSS Funnel 是一个模块化的 RSS 处理管道系统。它可以以多种方式操作 RSS/Atom 源。 例如&#xff1a; 提取完整内容从 HTML 页面生成 RSS 订阅删除不需要的元素和文本使用正则表达式进行文字编辑或替换保留或删除与关键词或模式匹配的文章突出…

微服务篇:设计一个注册中心和配置中心需要从哪些方面入手

注册中心 设计一个注册中心时&#xff0c;需要关注多个关键方面&#xff0c;以确保其稳定性、可靠性、性能和可扩展性。以下是一些重要的考虑因素&#xff1a; 服务发现机制&#xff1a;注册中心的核心功能是允许服务相互发现。这意味着当一个服务实例启动时&#xff0c;它需…

2024年【熔化焊接与热切割】考试报名及熔化焊接与热切割找解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 熔化焊接与热切割考试报名考前必练&#xff01;安全生产模拟考试一点通每个月更新熔化焊接与热切割找解析题目及答案&#xff01;多做几遍&#xff0c;其实通过熔化焊接与热切割实操考试视频很简单。 1、【单选题】 下…

SE注意力模块学习笔记《Squeeze-and-Excitation Networks》

Squeeze-and-Excitation Networks 摘要引言什么是全局平均池化&#xff1f; 相关工作Deep architectures Squeeze-and-Excitation Blocks3.1. Squeeze: Global Information Embedding3.2. Excitation: Adaptive Recalibration3.3. Exemplars: SE-Inception and SE-ResNet 5. Im…

docker部署nacos(单机与集群)

拉去nacos镜像 [rootlocalhost keepalived]# docker search nacos NAME DESCRIPTION STARS OFFICIAL nacos/nacos-server This project contains a Docker image meant t… 464 …

2024.3.26学习笔记

今日学习韩顺平java0200_韩顺平Java_对象机制练习_哔哩哔哩_bilibili 今日学习p273-p285 包 包的本质实际上就是创建不同的文件夹/目录来保存类文件 包的三大作用 区分相同名字的类 当类很多时&#xff0c;可以很好的管理类 控制访问范围 包的基本语法 package com.xx…

物理研究思想(1)——朗道力学第一版序

朗道是苏联的全才式科学家&#xff0c;大科学家的这篇序言值得我们搞研究的人仔细研读&#xff0c;如果能够参透&#xff0c;必将受益终生&#xff01; 众所周知&#xff0c;物理学是由实验物理和理论物理两个学科组成的.我们已知的大量物理定律可以由为数不多的最一般规律推演…