打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
一些冷门的JavaScript操作——你真的精通吗?

大家学习的时候,一开始小白,然后接触到进阶的东西的时候,发现一切得心应手,有的人可能开始说精通了。突然有一天,发现了一些基于很基础的东西的骚操作,就开始怀疑人生:wtf JavaScript?

如果没有遇到被某些东西打击到或者见识到新的世界,可能永远的,就感叹:jQuery真好用,我精通jQuery,精通js。要不就是,vue?angular?react?我都会,我精通。

然而,我现在只能说我只是熟悉,越学发现越多坑。


一.数组

类似一些遍历类型的api:forEach、map,可能有人就说了:不就是arr.map(x=>x+1),要是涉及到索引,那就再来个index,arr.map((x,index)=>x+index),多简单是不是

然后,先抛出一个问到烂的面试题:

['1','2','3'].map(parseInt)

找工作的人,看过面试题的,都知道结果是[1,NaN,NaN],那么为什么会这样呢?

首先,map里面可以传两个参数:map(对每一个元素都调用的函数,该函数的this值)

而那个每一个元素都调用的函数,他传入的参数是(current,index,arr)当前元素(必须)、索引、数组。

1.1对parseInt精通了吗

在这个例子,对parseInt传入的就是这三个参数。

而parseInt这个原生的函数,他传入的参数是(num,radix):

radix表示要解析的数字的基数。该值介于 2 ~ 36 之间。

如果省略该参数或其值为 0,则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头,将以 16 为基数。如果该参数小于 2 或者大于 36,则 parseInt() 将返回 NaN

那就很明显了,对于为什么是[1,NaN,NaN],其实就是:

另外,parseInt,遇到字符串的数字他会尽量解释,直到不能解释就停止。

1.2数组遍历的api第二个参数

第二个参数,表示前面那个函数内部的this,一般不填这个参数,this就是undefined。而在非严格模式下,undefined就是window:

[1,2,3].forEach(function(x){console.log(this)})//window

我们可以强行把他改成其他的看看:

[1,2,3].forEach(function(x){console.log(this)},Math)//Math

1.3让Array成精

我们知道,Array可以直接生成某一个长度元素全是空的数组:

Array(5)//注意了,5空和5个undefined是不同的

不妨apply一下:

相当于给新创建的array的属性直接进行改变

1.4你是不是用循环生成一个序列?

生成一个序号数组:

常规操作,没什么问题,但是精通jQuery的你会不会用到其他方法呢?

比如:

对于最后一个结果,点开第二个看看

map的那个函数,传入了三个参数,第一个参数是当前元素。可是对于加了call的,第一个参数就是call的this指向了。而map后面的那个参数,就是this,也就是后面那个this已经把current覆盖,起到主导作用的也是后面那个参数。而map的第一个参数fn,fn里面的第二个参数是index,也就是当前索引。而对于f.call,第一个参数是this指向,第二个参数以后全是f.call的函数f所使用的参数。最后,就相当于对每一个元素进行,Number(index),Boolean(index),String(index),Object(index)


2.位操作符

基本用法和概念就不说了,自行看文档。

2.1字符串转数字

有全世界都知道的parseInt,但是我们又可以用简单一点的方法:

2.2更多的操作

要是我们要随意得到一个很大的数,一般就是9999*9999这样子吧,而位移操作可以相当于乘上2的n次方:

1<30>

好像没什么用,先抛出一个需求:随机生成字符串(数字+字母)

我知道,很多人完全不需要思考,直接拿起键盘撸:比如生成一个6位随机字符串

对于位操作,就是短短的代码解决:

首先生成一个大数,再转进制。16进制就是0-9加上前面几个字母,36进制就是0-9加上26个字母,那么我们可以得到一个稳定的生成n位随机字符串版本:

另一种方法:(也是基于高进制)

我们可以从Math.random().toString(36)得到一个0.xxx后面有11位小数的字符串,所以我们只要取第2位以后的就可以了Math.random().toString(36).slice(2)

来一段小插曲

对于追求代码极其简短的强迫症,看见上面的if -else,突然想起来平时写了一大堆if-else实在是不顺眼,好的,除了无脑if和简短的三元表达式,我们还有短路表达式:

|| &&

a&&b:a为true,跑到b

a||b:a为false,跑b,a为true就取a

如果在实际应用上面,代码将会大大简洁,但是可能第一次让别人看难以理解

位操作交换俩整数

不用中间变量,加减法实现交换

a = a+b;b = a-b;a = a-b

用位操作:

a ^= b;

b ^= a;

a ^= b;

具体过程可以这样子证明:

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
解惑 [“1”, "2", "3"].map(parseInt) 为何返回[1,NaN,NaN]
JavaScript权威指南第6版
javascript之Number类型
js验证数字
一篇文章带你了解JavaScript 数值方法(下篇)
What the f**k JavaScript 中文版
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服