当前位置: 首页 > news >正文

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

相关文章:

  • 【前端Vue】Vue3+Pinia小兔鲜电商项目第3篇:静态结构搭建和分类实现,1. 整体结构创建【附代码文档】
  • 一键部署开源舆情系统
  • 开源博客项目Blog .NET Core源码学习(11:App.Core项目结构分析)
  • React 18中hook函数详解之useState和useEffect
  • Leetcode第35题:搜索插入位置
  • 【漏洞复现】WordPress Plugin NotificationX 存在sql注入CVE-2024-1698
  • Vue2(十一):全局事件总线、消息订阅与发布pubsub、TodoList的编辑功能、$nextTick、过渡与动画
  • 3-26 备赛
  • Java内存模型简述
  • 前段项目结构
  • 7-24 约分最简分式(PTA)
  • ES聚合查询
  • Vue3更新Package.json版本号
  • 海外云手机如何帮助亚马逊引流?
  • 自定义类型(2)
  • Android优雅地处理按钮重复点击
  • CentOS7 安装JDK
  • conda常用的命令
  • CSS实用技巧
  • docker-consul
  • Elasticsearch 参考指南(升级前重新索引)
  • HTML中设置input等文本框为不可操作
  • iOS筛选菜单、分段选择器、导航栏、悬浮窗、转场动画、启动视频等源码
  • java概述
  • mysql外键的使用
  • nodejs调试方法
  • python3 使用 asyncio 代替线程
  • React+TypeScript入门
  • ViewService——一种保证客户端与服务端同步的方法
  • 大型网站性能监测、分析与优化常见问题QA
  • 前端js -- this指向总结。
  • 使用Tinker来调试Laravel应用程序的数据以及使用Tinker一些总结
  • 使用前端开发工具包WijmoJS - 创建自定义DropDownTree控件(包含源代码)
  • 适配iPhoneX、iPhoneXs、iPhoneXs Max、iPhoneXr 屏幕尺寸及安全区域
  • 微服务入门【系列视频课程】
  • ​HTTP与HTTPS:网络通信的安全卫士
  • (3)STL算法之搜索
  • (仿QQ聊天消息列表加载)wp7 listbox 列表项逐一加载的一种实现方式,以及加入渐显动画...
  • (附源码)ssm高校升本考试管理系统 毕业设计 201631
  • (十六)一篇文章学会Java的常用API
  • (实战)静默dbca安装创建数据库 --参数说明+举例
  • (一)插入排序
  • (转)关于多人操作数据的处理策略
  • (轉貼) 寄發紅帖基本原則(教育部禮儀司頒布) (雜項)
  • .NET BackgroundWorker
  • .NET Core/Framework 创建委托以大幅度提高反射调用的性能
  • /使用匿名内部类来复写Handler当中的handlerMessage()方法
  • [20170705]diff比较执行结果的内容.txt
  • [AAuto]给百宝箱增加娱乐功能
  • [BZOJ 4129]Haruna’s Breakfast(树上带修改莫队)
  • [BZOJ1089][SCOI2003]严格n元树(递推+高精度)
  • [BZOJ5125]小Q的书架(决策单调性+分治DP+树状数组)
  • [c++] 单例模式 + cyberrt TimingWheel 单例分析
  • [C进阶] 数据在内存中的存储——浮点型篇
  • [Docker]三.Docker 部署nginx,以及映射端口,挂载数据卷