jsBasic

文章目录

1. 数据类型
   1. 基本数据类型
      1. 字符串类型
      2. Number 数值
      3. Null 类型
      4. Boolean 类型
      5. Undefined 类型
   2. 复杂数据类型
      1. 对象类型
      2. 数组类型
      3. 函数类型
   3. 类型转换方式
   4. 运算符
      1. 特殊情况
   5. 逻辑运算符
      1. 短路运算
      2. 非布尔值的运算
         1. 总结

数据类型

分为基本数据类型和复杂数据类型。

基本数据类型分为五种，

• 字符串类型
• 数字类型
• 布尔类型 Boolean 类型
• undefined 类型
• null 类型

ES6 中会新增一种基本数据类型，Symbol，表示独一无二的值，最大的用法是用来定义对象唯一的属性名。

基本数据类型

字符串类型

用引号来包裹的内容

双引号会搜索引号内的内容是不是有变量，有则输出其值，没有则输出原有内容。所以输出纯字符串的时候用单引号比双引号效率高，因为省去检索的过程。

一般情况下，建议优先使用单引号包含字符串，这样做有几个好处：

1. html中标签的属性是用双引号包裹，在js中如果要动态输出html内容，则用单引号将整体html代码包裹起来，而标签中的属性刚好用双引号，避免了转义
2. 编写代码时，双引号需要按shift才可以输入，无形之中降低了敲代码的速度

虽然在语法上，单引号和双引号没有区别，建议优先选用单引号，如何字符串内还有引号，再用双引号，必要的时候还需要用\进行转义

转义字符

Number 数值

在 JS 中所有数据都是 Number 类型，包括整数和浮点数（小数）。

Infinity 正无穷

-Infinity 负无穷

typeof Infinity 返回 number

NaN 是一个特殊的数字，表示 Not a Number，非数值。

比如 a = 'b' * 'c' 打印 a 的值就会出现 NaN 。

isNaN() 可以用来检测是不是 NaN，返回 true 或 false

Number 对象有 toFixed 方法，用于保留小数点，同时转为字符串

不能写成12.toFixed(2) // error，前面必须已经是 Number 包装对象包装过的内容

可以写成 Number(12).toFixed(2) // '12.00' 或 var a = 12; a.toFixed(2); // '12.00'

Null 类型

typeof 检测 null 是 object ，由于 typeof 检测不准确，所以一般用下面这个方法检测Object.prototype.toString.call()

Boolean 类型

只有两个值 true 或是 false 。

Undefined 类型

表示未定义，比如 var a ，之后打印 a，就会返回 undefined。

复杂数据类型

数组、函数、对象。

对象类型

用 key: value 来表示对象的属性

var user = {
    username: '张三',
    sex: '男',
    age: 24,
    child: {
        name: '小明',
        age: 2
    },
    say: function() {
        alert('hello')
    }
}

数组类型

存放数据 var a= []

函数类型

function a(){}

类型转换方式

1. + 如果两侧存在字符串，就拼接字符串，否则转换为数值（隐式转换，如 true 变成 1，false、null、都为0。

   NaN 参与的运算，结果都是NaN

2. - 转换成数值，'100'-1 // 99，所以可以用 -0、*1、/1 来转换成数值

   NaN 参与的运算，结果都是NaN

3. toString() , undefined 和 null 类型没有 toString() 这个方法，作用是把 number 类型转换成字符串

4. String() 转换成 字符串。隐式转换时调用 如c + '' = 'c'

5. Boolean() 转换成 布尔值。数字 0 和 NaN 、’’（空字符串）、null、undefined，只有这几个值转换后是 false，其他都是 true。隐式转换时调用

6. Number() 转换成 数值。隐式转换时调用

   1. 字符串转数字

      Number('2002') // 2002
      Number('2002年') // NaN 带非数字就 NaN
      Number('') // 0 空字符串
      Number('    ') //0

   2. null

      返回 0

   3. undefined

      返回 NaN

   4. boolean

      • true 返回 1
      • false 返回 0

7. parseInt() 和parseFloat()

   把字符串转换成数字类型

   • parseInt('2002年') // 2002
     parseInt('2002.01月') // 2002
     parseFloat('2002.01.12px') // 2002.01  只会返回第一个 . 前后的数字，后面处理 元素的大小（多少px），需要用到，因为获取的值里带 px，Number()不好处理
     parseInt('年2002') // NaN
     <!--2-->
     
     会先隐式转换成字符串，所以返回NaN
     
     `parseInt('1A',16) // 26 `以十六进制去解析这个字符串，返回十进制结果
     

运算符

算数运算符 +、-、\、*、=、++、–

比较运算符 <、>、==、===、!=、!==

<= 、 >= 这两个是有效的！如 console.log(1 >= true) // true

注意当两侧都是字符串时候，>、< 比较的是 Unicode 码。 如'56' > '123' // true 因为第一位 5 的 Unicode 码 大于 1，如果第一位相同，则继续比较第二位。

特殊情况

NaN == NaN // false
null == undefined // true
// 规范中提到， 要比较相等性之前，不能将 null 和 undefined 转换成其他任何值，并且规定null 和 undefined 是相等的。

逻辑运算符

• 与（且） &&

• 或 ||

• 非 !

短路运算

// 短路 与运算(&&)
true && alert('1') // 会 alert
false && alert('1') // 不会 alert

由于第一个条件就是 false，所以第二个条件将不会执行，直接输出 false

// 短路 或运算(||)
true || alert('1') // 不会alert
false || alert('1') // 会alert

由于第一个条件是 true，所以第二个条件将不会执行，直接输出true

非布尔值的运算

var result = 5 && 6 // 6

由于第一个条件 5 是 true，在且运算中，无法判断最终结果，所以接着进行下一个条件 6，也是 true，最终结果为 true，所以返回最后决定结果的条件 6.

var result = 5 || 6 // 5

由于第一个条件 5 是 true，在或运算中，已经可以决定最终结果为 true，所以返回最后决定结果的条件 5.

总结

如果通过前一个条件无法判断出最终结果的真假，就会继续执行下一个条件。

非布尔值的运算，谁决定最后的结果就返回谁。

题外：<script> 标签可以加上 type="module" ，表示模块化开发，每个 js 文件的变量互不影响

<script type="module"></script> 之后就能用 es6 的 import 和 export 来控制模块的导入导出了。