JavaScript基础-基本概念

JavaScript基础

Posted by EWL on October 28, 2019

开篇先进行一下对于这个系列的介绍,整个部分呢,是我个人对于基础的一些回顾和解读。顺序基本是按照红宝书的目录顺序捋了一遍,当初刚入门看这本书的时候,基本上是捡重点挑挑拣拣地看了一遍,那么这个系列的目标呢就是将不同的章节拆解开,再加上ES6中添加的新内容,进行一个整合。

废话不多说,直接开始吧~

第一章 基本概念

1. 语法

  1. 严格模式 严格模式由ES5引入,在文件的头部添加一行use strict;的代码这就使得整个脚本启动了严格模式,这实际上是一个编译指示(pragma),用于指示浏览器的JavaScript引擎切换至严格模式。在严格模式下,代码的表现会有很多的不同点,接下来会一次列出这些不同,

列举出严格模式下的不同

支持严格模式的浏览器:IE10+、FireFox4+、Safari5.1+、Opera12+、Chrome。

  1. 语句 JavaScript中语句都是以分号结尾的,实际上也可以不写分号,解析器会去确认语句的结尾,然而最为推荐的写法是尽量写上逗号。

2. 关键字和保留字

关键字的作用:用于控制语句的开始或者结束,或者用于特定执行操作等等。按照规定,关键字也是语言保留的,不能用作标识符,即我们不能在声明变量的时候使用关键字;另外一些保留字是预先备用给未来可能成为关键字的一些单词,这些保留字同样不推荐用作标识符。 上面这段话,是红宝书的原话,但是时代在改变,之前在红宝书上还是保留字的单词在es6中已经变成了关键字,以下这张图片就足以说明: image.png

我翻找了ECMA-262的文档后,发现了这么一幅图: image.png

这是ECMA-262文档上所有的关键字以及保留字。

3. 变量

ECMAScript的变量是松散类型的,所谓的松散类型就是可以用来保存任何类型的数据,每个变量都只是一个用于保存值的占位符而已。

// 从字符转为数字是允许的
let testVariable = '1';
testVariable = 2;

4. 数据类型

  1. 所有数据类型
    • Number
    • String
    • Boolean
    • Object(Function/Array)
    • null
    • undefined
    • Symbol(ES6新增对象类型)
  2. 详细了解各个类型 Number
    1. 浮点数值 所谓的浮点数,就是数值中带有一个小数点,并且小数点后面至少有一位数字,虽然小数点前可以没有整数,但是不推荐这样的做法。 浮点数在JavaScript中会有一些值得注意的表现:
      • 在我们声明了一个非常大或者小的数字时,往往会展示为科学计数法的格式,例如0.00000000003会展示3e-11
      • 当我们输入0.1 + 0.2 === 0.3的时候得到的布尔值会是什么呢?在喊出true之前一定要到控制台中打印一下,那么为什么结果会是false呢?答案参考
    2. 数值范围 在JavaScript中,数字的范围Number.MIN_VALUE到Number.MAX_VALUE,一般而言不会超出这个值。不过如果是为了监控,保证数据在一个安全可控的范围内,则会使用最大最小值进行检测。不过此前我们提及了对比0.1 + 0.2和0.3的结果相等的问题,实际上,如果使用最小值来对比差值,我们是可以让0.1 + 0.2等于0.3的。 废话不多说,上代码:
       const result = 0.1 + 0.2;
       const compareVal = 0.3;
       console.log(compareVal - result < Number.MIN_VALUE);
      

      以上代码的结果,会是true,借助二者差值是否小于JS中的可计量的最小值实际上就能验证二者是否相等,这也算是一个曲线救国的方法。

    3. NaN NaN 实际上就是Not a number的缩写,但是我们不能从字面意义上理解NaN不是个数字,它只是一个不能被JavaScript理解的数字。否则,如何解释下面的代码结果呢?
       console.log(typeof NaN);
      

      image.png 所以,首先我们应该转换的认知就是,NaN的确是个数字。其次,NaN是一个不被JavaScript理解的数字。在JavaScript中判断数字是否是NaN的方法是isNaN,该方法不仅适用于数字,还可以使用到对象上,基于对象使用的时候,一般会先调用它的valueOf在返回结果不能转为数字的时候,就再调用其toString方法。流程也只是ECMAScript中内置函数和操作符的一般执行流程。

    4. 数值转换 对于数值转换部分,实际上,这里是需要花大量篇幅去说明的,JavaScript本身是一个非常灵活的语言,正是这种灵活造就了一系列的不确定性,这种不确定性就体现在了数值转换中。 在我的学习过程中,类型转换一般来说可以分为显示显式类型转换和隐式类型转换。

    4.1 显式转换 所谓的显式转换,就是借助一些语言本身的方法去进行转换,最典型的比如Number/String/Boolean。 示例:

     // 基本类型转换
     // 数值:转换后还是原来的值
     Number(324) // 324
    
     // 字符串:如果可以被解析为数值,则转换为相应的数值
     Number('324') // 324
    
     // 字符串:如果不可以被解析为数值,返回 NaN
     Number('324abc') // NaN
    
     // 空字符串转为0
     Number('') // 0
    
     // 布尔值:true 转成 1,false 转成 0
     Number(true) // 1
     Number(false) // 0
    
     // undefined:转成 NaN
     Number(undefined) // NaN
    
     // null:转成0
     Number(null) // 0
    
     String(123) // "123"
     String('abc') // "abc"
     String(true) // "true"
     String(undefined) // "undefined"
     String(null) // "null"
    
     Boolean(undefined) // false
     Boolean(null) // false
     Boolean(0) // false
     Boolean(NaN) // false
     Boolean('') // false
    
     // 对象类型
     // 还是基于valueOf以及toString方法的先后调用,决定返回的值
     Number({a: 1}) // NaN
     Number([1, 2, 3]) // NaN
     Number([5]) // 5
    
     String({a: 1}) // "[object Object]"
     String([1, 2, 3]) // "1,2,3"
    
     Boolean({}) // true
     Boolean([]) // true
     Boolean(new Boolean(false)) // true
    

    4.2 隐式转换 所谓的隐式转换,就是转换过程不对外可见。 举例:

     // 不同类型相互运算
     123 + 'abc' // "123abc"
        
     // 对非布尔类型值进行布尔求值
     if ('abc') {
         console.log('hello')
     }  
        
     // 一元操作符的使用
     + {foo: 'bar'} // NaN
     - [1, 2, 3] // NaN
    

参考内容