深挖JavaScript语法二

JS一定要抠细节,逻辑性。我们这次探讨 内存 的问题、一个IE的BUG以及深拷贝和浅拷贝,和typeof运算符的小技巧

在第一集里面知道了7个基本的数据类型
number string boolean symbol null underdefined object
那么这七个数据类型如何转换呢

其他数据类型转string

  • String()函数
String(0)
"0"
String(true)
"true"
String(false)
"false"
String(null)
"null"
String(undefined)
"undefined"
String({})
"[object Object]"
String({name: 9})
"[object Object]"
  • toString()属性
    注意null和undefined只是两个值,没有toString()属性
null.toString()
VM371:1 Uncaught TypeError: Cannot read property 'toString' of null
    at <anonymous>:1:6
(anonymous) @ VM371:1
undefined.toString()
VM400:1 Uncaught TypeError: Cannot read property 'toString' of undefined
    at <anonymous>:1:11
(anonymous) @ VM400:1

还有一个要注意的

{}.toString()
VM91:1 Uncaught SyntaxError: Unexpected token .
({}).toString()
"[object Object]"

其他的都可以

var a = 8;
a.toString()
"8"
var a = true
a.toString()
"true"
var a = {}
a.toString()
"[object Object]"
  • 最常见的方法 ' '+
    无敌的方法
'' +1
"1"
''+ true
"true"
''+ null
"null"
''+ undefined
"undefined"

其它数据类型转number

  • Number()函数
Number('fff')
NaN
Number('30')
30
Number(null) //注意是0
0
Number(undefined) //注意是NaN
NaN
Number(true)
1
Number(false)
0
  • parseInt()和parseFloat()属性
    parseInt()有个大坑,是从左边第一个字符开始看,不是数字,就停下了,而不是我理解 的有几个数字就打印几个数字
parseInt('122') //默认是十进制
122
parseInt('011')
11
parseInt('011', 2) //规定是二进制
3
parseInt('123', 10)
123
parseInt('011', 8) //规定是八进制
9
parseInt('A09') //发现第一个字符就不是数字,不往后面判断了
NaN
parseInt('09A12')
9
parseFloat('11.4')
11.4
  • 没见过的操作 其他数据类型-0
null-0
0
undefined-0
NaN
'91' - 0
91
'91.09' - 0
91.09
'str' - 0
NaN
var a = {}
a-0
NaN
var a = '123'
a-0
123
  • 又是一个没见过的操作 + ''
+'124'
124
+'12.4'
12.4
+false
0
+true
1
+null
0
+undefined
NaN

其它数据类型转成boolean

注意5个特殊的falsey值,当然了false必然也是falsey值


0
NaN
' ' 这是空字符串,啥也没有,空格也没有
null
undefined


除了以上6个falsey值,其他的都是true

  • Boolean()函数
Boolean('')
false
Boolean(' ')
true
Boolean(0)
false
Boolean(NaN)
false
Boolean(null)
false
Boolean(undefined)
false
Boolean([])
true
Boolean({})
true
Boolean(9)
true
Boolean('pp')
true
  • !!的操作
    怎么理解呢,一个!是取反的操作,再加一个就是双重取反,就是我们想要的结果了
!0
true
!1
false
!!0
false
!!NaN
false
!!''
false
!!null
false
!!undefined
false
!!1
true
!!'pp'
true
!![]
true
!!{}
true

四个经典的内存题

  • 粗糙的内存图的引入
    var a = 1 和var a = new Number(1)分别发生了什么
    简单数据类型存在stack中,存储位置是连续的,像弹匣一样,与数据结构中的栈一样,先进后出(FILO),而复杂数据类型存储在heap中,存储位置不连续,与数据结构中的堆一样,是树状的发散结构,这一点超级重要啊。时时刻刻要记着数据结构啊。

  • 第一个题 简单数据类型的判断 a=?

var a = 1
b = a
b = 2

a
1

答案是a=1


第一题.png
  • 第二个题 复杂数据类型 的判断 a =?
var a = {name: 'wushao'}
b =a
b={name: 'shao'}

a
{name: "wushao"}

答案是a={name: 'wushao'},结果不变


第二题.png
  • 第三个题 复杂数据类型 的判断 a.name=?
var a = {name: 'wushao'}
b =a
b.name = 'qwert'

a.name
"qwert"

答案是a.name = 'qwert',已经被b.name改变了


第三题.png
  • 第四个题 复杂数据类型 的判断 a=?
var a = {name: 'a'}
var b = a
b = null

a
{name: "a"}

答案是 a = {name: "a"} 不受b的影响


第四题.png

一个很贱的面试题

var a = {n: 1}
var b = a
a.x = a = {n: 2}

alert(a.x) //是啥呢 undefined
alert(b.x) //是啥呢 [object Object]
面试题.png

IE6 的关于垃圾回收机制的一个BUG

有以下情形

var fn = function( ){ }
document.body.onclick = fn
fn = null
问你 function(){}是不是垃圾
  • 第一种情况,你没有关闭这个tab页
    那么function不是垃圾


    是否是一个垃圾.png
  • 第二种情况,我关闭了这个tab页,那么function就是垃圾了


    关闭网页后就是一个垃圾了.png

IE6的BUG在于,你关闭了网页,但是蓝色圆里面的他不认为是垃圾,除非你关闭浏览器。所以你要在网页关闭的时候手动加上一个

//onunload不加载,就是关闭了嘛
window.onunload = function(){
  document.body.onclick = null; //所有的都要有
}

由以上几个题引出深拷贝和浅拷贝 的问题

深拷贝是你改变了,原来的不受改变的影响,而浅拷贝会改变原来的属性。
对于简单类型的数据来说,赋值就是深拷贝。
对于复杂类型的数据(对象)来说,才要区分浅拷贝和深拷贝。


深拷贝.png

typeof运算符的坑

JavaScript有三种方法,可以确定一个值到底是什么类型。
typeof 运算符
instanceof 运算符
Object.prototype.toString方法

typeof运算符可以判断你要的值得数据类型,有如下结果
先看大坑

typeof null
"object"
typeof Function
"function"
function f(){}
typeof f
"function"

函数竟然是function类型的数据,坑爹啊。
null竟然是object,尼玛,吓坏了,一查原来是历史遗留问题。

1995年JavaScript语言的第一版,所有值都设计成32位,其中最低的3位用来表述数据类型,object对应的值是000。当时,只设计了五种数据类型(对象、整数、浮点数、字符串和布尔值),完全没考虑null,只把它当作object的一种特殊值,32位全部为0。这是typeof null返回object的根本原因。
为了兼容以前的代码,后来就没法修改了。这并不是说null就属于对象,本质上null是一个类似于undefined的特殊值。

你只需要记住,null不是对象 !null不是对象! null不是对象!就是一个值null。
其他的类型是符合预期的

typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof []
"object"
typeof {}
"object"

判断某变量是否存在的两个技巧

  • 下面演示的是第一种方法
typeof undefined
"undefined"
typeof a
"undefined"

上面的a未声明,直接使用会报错

a
VM412:1 Uncaught ReferenceError: a is not defined
    at <anonymous>:1:1

但是用了typeof就可以啦
可以用来判断某个变量是否声明了

if (typeof v === "undefined") {
  // ...
}

除了上述的方法,还有另外一个利用全局对象的属性的方法

if ('a' in window) {
  // 变量 a 声明过
} else {
  // 变量 a 未声明
}
  • 区分数组还是对象的技巧
    既然typeof对数组(array)和对象(object)的显示结果都是object,那么怎么区分它们呢?instanceof运算符可以做到。
var o = {};
var a = [];

o instanceof Array // false
a instanceof Array // true
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,847评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,208评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,587评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,942评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,332评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,587评论 1 218
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,853评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,568评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,273评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,373评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,031评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2 269

推荐阅读更多精彩内容

  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 10,504评论 6 13
  • 语句 JavaScript程序的执行单位为行(line),也就是一行一行地执行。一般情况下,每一行就是一个语句。 ...
    米塔塔阅读 426评论 1 10
  • 标签: 我的笔记 ---学习资料:http://javascript.ruanyifeng.com/ 1. 导论 ...
    暗夜的怒吼阅读 755评论 0 1
  • 妈妈出嫁后,在居委会的大姨为妈妈找到一处公租房。公租房在马山窖,门前有一条内河,以前河水清澈是附近居民的生活用水,...
    mimi播报阅读 316评论 2 6
  • 小美猴儿阅读 136评论 0 0