阿里云-云小站(无限量代金券发放中)
【腾讯云】云服务器、云数据库、COS、CDN、短信等热卖云产品特惠抢购

对于初学者来说 Javascript 也并不简单

277次阅读
没有评论

共计 2184 个字符,预计需要花费 6 分钟才能阅读完成。

这里有一些 Javascript 初学者应该知道的技巧和陷阱。如果你已经是专家了,顺便温习一下。

对于初学者来说 Javascript 也并不简单

Javascript 也只不过是一种编程语言。怎么可能出错嘛?

1. 你有没有尝试给一组数字排序?

Javascript 的 sort() 函数在默认情况下使用字母数字(字符串 Unicode 码点)排序。

所以[1,2,5,10].sort() 会输出 [1, 10, 2, 5].

要正确的排序一个数组, 你可以用 [1,2,5,10].sort((a, b) => a — b)

很简单的解决方案, 前提是你得知道有这么个坑

2. new Date() 很棒

new Date() 可以接受:

  • 没有参数:返回当前时间
  • 一个参数 x:返回 1970 年 1 月 1 日 + x 毫秒。了解 Unix 的人知道为什么。
  • new Date(1, 1, 1) 返回 1901, 二月 , 1 号 /。因为,第一个参数表示 1900 年加 1 年,第二个参数表示这一年的第二个月(因此是二月)— 脑回路正常的人会从 1 开始索引 —,第三个参数很明显是这个月的第一天,所以 1 — 有时候索引确实从 1 开始 —。
  • new Date(2016, 1, 1) 不会给 1900 年加上 2016。它仅代表 2016 年。

对于初学者来说 Javascript 也并不简单

3. Replace 并不“替代”
let s = "bob"
const replaced = s.replace('b', 'l')
replaced === "lob"
s === "bob"

我觉得这是一件好事,因为我不喜欢函数改变它们的输入。你还应该知道 replace 只会替换第一个匹配的字符串:

如果你想替换所有匹配的字符串,你可以使用带 /g 标志的正则表达式 :

"bob".replace(/b/g, 'l') === 'lol' // 替换所有匹配的字符串
4. 比较的时候要注意
// These are ok
'abc' === 'abc' // true
1 === 1         // true
// These are not
[1,2,3] === [1,2,3] // false
{a: 1} === {a: 1}   // false
{} === {}           // false

原因:[1,2,3]和 [1,2,3] 是两个独立的数组。它们只是恰好包含相同的值。它们具有不同的引用,无法用 === 相比较。

5. 数组不是原始数据类型
typeof {} === 'object'  // true
typeof 'a' === 'string' // true
typeof 1 === number     // true
// But....
typeof [] === 'object'  // true

如果你想知道你的变量是不是数组,你仍然可以用Array.isArray(myVar)

6. 闭包

这是一个很有名的面试题:

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…?你知道它为什么不是这样输出的吗? 你会怎样修改让它输出 0, 1, 2…?

这里有两种可能的解决方法:

用 let 替代 var. Boom. 解决了.

阿里云 2 核 2G 服务器 3M 带宽 61 元 1 年,有高配

腾讯云新客低至 82 元 / 年,老客户 99 元 / 年

代金券:在阿里云专用满减优惠券

替代方法: 用 bind:

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

还有很多其他方法。这只是我的两个首选

7. 谈到 bind

你认为这个会输出什么?

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,给你一分。

原因:greet 没有在正确的上下文中运行。同样,这个问题依然有很多解决方案。

我个人喜欢

asyncGreet () {this.someThingAsync()
.then(this.greet.bind(this))
}

这样可以确保类的实例作为上下文调用greet

如果你认为greet 不应该在实例上下文之外运行, 你可以在类的 constructor 中绑定它:

class Foo {constructor (name) {
this.name = name
this.greet = this.greet.bind(this)
}
}

你还应该知道箭头函数(=>)可以用来保留上下文。这个方法也可以:

asyncGreet () {this.someThingAsync()
.then(() => {this.greet()
})
}

尽管我认为最后一种方法并不优雅。

对于初学者来说 Javascript 也并不简单

我很高兴我们解决了这个问题。

总结

祝贺你,你现在可以放心地把你的程序放在互联网上了。甚至运行起来可能都不会出岔子(但是通常会)Cheers \o/

阿里云 2 核 2G 服务器 3M 带宽 61 元 1 年,有高配

腾讯云新客低至 82 元 / 年,老客户 99 元 / 年

代金券:在阿里云专用满减优惠券

正文完
星哥玩云-微信公众号
post-qrcode
 0
星锅
版权声明:本站原创文章,由 星锅 于2024-08-28发表,共计2184字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
【腾讯云】推广者专属福利,新客户无门槛领取总价值高达2860元代金券,每种代金券限量500张,先到先得。
阿里云-最新活动爆款每日限量供应
评论(没有评论)
验证码
【腾讯云】云服务器、云数据库、COS、CDN、短信等云产品特惠热卖中

星哥玩云

星哥玩云
星哥玩云
分享互联网知识
用户数
4
文章数
19351
评论数
4
阅读量
7972196
文章搜索
热门文章
星哥带你玩飞牛NAS-6:抖音视频同步工具,视频下载自动下载保存

星哥带你玩飞牛NAS-6:抖音视频同步工具,视频下载自动下载保存

星哥带你玩飞牛 NAS-6:抖音视频同步工具,视频下载自动下载保存 前言 各位玩 NAS 的朋友好,我是星哥!...
星哥带你玩飞牛NAS-3:安装飞牛NAS后的很有必要的操作

星哥带你玩飞牛NAS-3:安装飞牛NAS后的很有必要的操作

星哥带你玩飞牛 NAS-3:安装飞牛 NAS 后的很有必要的操作 前言 如果你已经有了飞牛 NAS 系统,之前...
我把用了20年的360安全卫士卸载了

我把用了20年的360安全卫士卸载了

我把用了 20 年的 360 安全卫士卸载了 是的,正如标题你看到的。 原因 偷摸安装自家的软件 莫名其妙安装...
再见zabbix!轻量级自建服务器监控神器在Linux 的完整部署指南

再见zabbix!轻量级自建服务器监控神器在Linux 的完整部署指南

再见 zabbix!轻量级自建服务器监控神器在 Linux 的完整部署指南 在日常运维中,服务器监控是绕不开的...
飞牛NAS中安装Navidrome音乐文件中文标签乱码问题解决、安装FntermX终端

飞牛NAS中安装Navidrome音乐文件中文标签乱码问题解决、安装FntermX终端

飞牛 NAS 中安装 Navidrome 音乐文件中文标签乱码问题解决、安装 FntermX 终端 问题背景 ...
阿里云CDN
阿里云CDN-提高用户访问的响应速度和成功率
随机文章
仅2MB大小!开源硬件监控工具:Win11 无缝适配,CPU、GPU、网速全维度掌控

仅2MB大小!开源硬件监控工具:Win11 无缝适配,CPU、GPU、网速全维度掌控

还在忍受动辄数百兆的“全家桶”监控软件?后台偷占资源、界面杂乱冗余,想查个 CPU 温度都要层层点选? 今天给...
星哥带你玩飞牛NAS-16:飞牛云NAS换桌面,fndesk图标管理神器上线!

星哥带你玩飞牛NAS-16:飞牛云NAS换桌面,fndesk图标管理神器上线!

  星哥带你玩飞牛 NAS-16:飞牛云 NAS 换桌面,fndesk 图标管理神器上线! 引言 哈...
自己手撸一个AI智能体—跟创业大佬对话

自己手撸一个AI智能体—跟创业大佬对话

自己手撸一个 AI 智能体 — 跟创业大佬对话 前言 智能体(Agent)已经成为创业者和技术人绕...
免费无广告!这款跨平台AI RSS阅读器,拯救你的信息焦虑

免费无广告!这款跨平台AI RSS阅读器,拯救你的信息焦虑

  免费无广告!这款跨平台 AI RSS 阅读器,拯救你的信息焦虑 在算法推荐主导信息流的时代,我们...
手把手教你,购买云服务器并且安装宝塔面板

手把手教你,购买云服务器并且安装宝塔面板

手把手教你,购买云服务器并且安装宝塔面板 前言 大家好,我是星哥。星哥发现很多新手刚接触服务器时,都会被“选购...

免费图片视频管理工具让灵感库告别混乱

一言一句话
-「
手气不错
自己手撸一个AI智能体—跟创业大佬对话

自己手撸一个AI智能体—跟创业大佬对话

自己手撸一个 AI 智能体 — 跟创业大佬对话 前言 智能体(Agent)已经成为创业者和技术人绕...
开源MoneyPrinterTurbo 利用AI大模型,一键生成高清短视频!

开源MoneyPrinterTurbo 利用AI大模型,一键生成高清短视频!

  开源 MoneyPrinterTurbo 利用 AI 大模型,一键生成高清短视频! 在短视频内容...
颠覆 AI 开发效率!开源工具一站式管控 30+大模型ApiKey,秘钥付费+负载均衡全搞定

颠覆 AI 开发效率!开源工具一站式管控 30+大模型ApiKey,秘钥付费+负载均衡全搞定

  颠覆 AI 开发效率!开源工具一站式管控 30+ 大模型 ApiKey,秘钥付费 + 负载均衡全...
星哥带你玩飞牛NAS-16:飞牛云NAS换桌面,fndesk图标管理神器上线!

星哥带你玩飞牛NAS-16:飞牛云NAS换桌面,fndesk图标管理神器上线!

  星哥带你玩飞牛 NAS-16:飞牛云 NAS 换桌面,fndesk 图标管理神器上线! 引言 哈...
你的云服务器到底有多强?宝塔跑分告诉你

你的云服务器到底有多强?宝塔跑分告诉你

你的云服务器到底有多强?宝塔跑分告诉你 为什么要用宝塔跑分? 宝塔跑分其实就是对 CPU、内存、磁盘、IO 做...