前端基础 JS篇01

389 阅读7分钟

这是我参与11月更文挑战的第20天,活动详情查看:2021最后一次更文挑战

前言

之前都是忙于业务开发,对前端的基本知识都是用到什么查什么,很少有时间沉下心来自己归纳,总结下基础,有时候,用到什么,觉得值得留意一下的东西,也都是自己笔记里记录下,也不怎么及时整理,然后随着时间的推移,陆陆续续记录的东西都是乱七八糟的,都没整理过,这次,写这个前端的基础系列,整理一下

打算以轻松,闲谈的调调来聊聊,文笔不好,大家将就的看

js的内置类型

说道 JS 的内置类型,大家耳闻熟知的是:

JS有七种内置类型,七种内置类型⼜分为两⼤类型:基本类型对象(Object)

先说基本类型

number

和其他编程语言不同,JavaScript中的所有数字均采用浮点数值表示。JavaScript采用IEEE-754标准定义的64位浮点格式表示数字。然而在实际过程中,JavaScript则是基于32位整数。此外还有一点需要注意,实数有无数个,但JavaScript通过浮点数的形式只能表示其中有限的个数,即当在JavaScript中使用实数的时候,常常只是真实值的一个近似表示。

string

字符串(string)是一组由16位值组成的不可变的有序序列,每个字符通常来自于Unicode字符集,JavaScript字符串的索引从零开始。在JavaScript程序中的字符串直接量,是由单引号或双引号包括起来的字符序列。在ECMAScript3中,字符串直接量必须写在一行中,而在ECMAScript5中,字符串直接量可以拆分成数行,但每行必须以反斜线()结束,反斜线和行结束符都不算是字符串直接量的内容。

null

null是JavaScript语言的关键字,他表示一个特殊值,常用来描述“空值”。对null执行typeof运算,结果返回字符串“object”,这个最初是JavaScript设计的一个缺陷,后来渐渐被大家接受,可以理解为object的占位符。表示尚未存在的对象,常用来表示函数企图返回一个不存在的对象,Null表示“没有对象”,即该处不应该有值。

undefined

当声明的变量还未被初始化时,变量的默认值为undefined,表示“缺少值”,就是此处应该有一个值,但是还没有定义。undefined是预定义的全局变量,他的值就是“未定义”。在ES3中,undefined是可读/写的变量,可以给它赋任意值。这个错误在ES5中做了修正,undefined在该版本中是只读的。如果使用typeof运算符得到undefined的类型,则返回“undefined”,表明这个值是该类型的唯一成员。

boolean

布尔值指代真或假、开或关、是或否。这个类型只有两个值,保留字true和false。任意JavaScript的值都可以转换为布尔值。以下的一些类型会被转换成false,undefined、null、0、-0、NaN、“” //空字符串,所有其他值,包括所有对象(数组)都会转换成true。布尔值常用的运算符有"&&"、"||"、"!"。

Symbol

Symbol是ES6新增的一种数据类型,表示独一无二的值,Symbol最大的用途是用来定义对象的唯一属性名。ES5的对象属性名都是字符串,容易造成属性名的冲突。如果使用了一个他人提供的对象,但又想为期添加新的方法,那么新方法的名字有可能与已有方法产生冲突。因此,需要保证每个属性的名字都是独一无二的,以防止属性名的冲突。这就是ES6引入Symbol的原因。

ps:nullundefinedbooleannumberstring ,早前只有这5个基本类型,后来自JS1997年标准化以后,多了一个Symbol

原始类型(基本类型)

但是如果有人问你,JS的原始类型有哪几种?

纳尼?什么时候又多了一个原始类型?一番百度下来:我们知道了原始类型就是上面说的那6个: nullundefinedbooleannumberstringsymbol

这特么不就是JS的基本类型那个嘛,好家伙,你特么的换了个马甲

这基本类型 6个,早期的时候,我也觉得 这6个没啥好说的,教科书里也是这么写的,难道还能玩出花来?

后来实际工作中,写代码,调试代码,打断点,老是会碰到红色的报错,而且大部分时候,也是我们熟悉的老朋友,比如以下2个家伙:

image.png

为啥会这样? 因为 原始类型存储的都是值,是没有函数可以调用的。

大家代码敲的多了,都知道 undefined 是一个特殊的值,表示未定义的值,你不可能定义一个变量,变量名就叫 undefined。同理,这6个基本类型(也叫原始类型)表示的都是值,就这6个特殊的家伙,是没有函数可以调用的。

所以,我实际开发中,出现以上的报错的时候,我就知道,我定义的某某某变量,还没给它赋值,它是未定义的,undefined的,所以,这个变量要去调用方法,肯定要报错的。

也常常看到举例,说,'1'.toString() 是可以使用的。

解释下:在这种情况下,'1' 已经不是原始类型了,而是被强制转换成了 String 类型也就是对象类型,所以可以调用 toString 函数。

再来个例子:

image.png

1 在js中,已经拥有 number值的身份了,你再把 1 当成变量,给它赋值个aaa(其他值),它要报错

这个时候,在对着js变量命名规则来看

image.png

是不是发现,里面的有些规则,有点知其然,知其所以然了

对象

JS中,内置对象就分为2类:基本类型和对象(Object)

在js中,对象类型也有一个马甲,叫引用类型,所以大家千万别被它换个马甲,就被骗过去了

基本类型之外,其他都是对象

Object

在JS中,除了原始类型,其它的都是对象类型了,对象类型和原始类型不同,原始类型存储的是值,对象类型存储的是地址(指针)。当你创建了一个对象类型的时候,计算机会在内存中帮我们开辟一个空间来存放值,但是我们需要找到这个空间,这个空间会拥有一个地址(指针)。

上文 的 '1' 表示的是 String对象,因此它可以使用 String对象的一系列内置方法(function)

说道 JS的对象,大家知道,有人要唱反调了,没错,就是 nullnull明明被列在了基本类型中,但是使用 typeof(null),得到的结果却是 object

大家查下百度,就知道,这是当初设计JS时的一个缺陷,但是具体是啥原因呢?

在 JS 的最初版本中使用的是 32 位系统,为了性能考虑使用低位存储变量的类型信息,000 开头代表是对象,然而 null 表示为全零,所以将它错误的判断为 object 。虽然现在的内部类型判断代码已经改变了,但是对于这个 Bug 却是一直流传下来。

对象为啥要叫引用类型,这个也很好理解

因为原始类型存储的是值,对象类型存储的是地址(指针)。当你创建了一个对象类型的时候,计算机会在内存中帮我们开辟一个空间来存放值,但是我们需要找到这个空间,这个空间会拥有一个地址(指针)。对象就是 引用了这个内存地址。

总结

  1. JS 中分为七种内置类型,七种内置类型⼜分为两⼤类型:基本类型和对象(Object)。
  2. 基本类型 也叫 原始类型。null , undefined , boolean , number , string , symbol
  3. 对象类型 也叫 引用类型。除了基本类型之外,其他都是对象