JS-04-javaScript数据类型和变量

一、数据类型

计算机能处理的远不止数值，还可以处理文本、图形、音频、视频、网页等各种各样的数据，不同的数据，需要定义不同的数据类型。在JavaScript中定义了以下几种数据类型：

1-1、Number

JavaScript不区分整数和浮点数，统一用Number表示，以下都是合法的Number类型：

123; // 整数123
0.456; // 浮点数0.456
1.2345e3; // 科学计数法表示1.2345x1000，等同于1234.5
-99; // 负数
NaN; // NaN表示Not a Number，当无法计算结果时用NaN表示，比如：0/0
Infinity; // Infinity表示无限大，当数值超过了JavaScript的Number所能表示的最大值时，就表示为Infinity

计算机由于使用二进制，所以，有时候用十六进制表示整数比较方便，十六进制用0x前缀和0-9，a-f表示。

Number可以直接做四则运算，规则和数学一致：

2 / 0; // Infinity
0 / 0; // NaN

要注意：

1、JavaScript的Number不区分整数和浮点数，也就是说，12.00 === 12，整数和浮点数能直接比较。（在大多数其他语言中，整数和浮点数不能直接比较）

2、JavaScript的整数最大范围不是±，而是±，因此，超过的整数就可能无法精确表示：

console.log(Number.MAX_SAFE_INTEGER);
// 9007199254740991

1-2、字符串

字符串是以单引号' 或 双引号"括起来的任意文本。

1-3、布尔值

可以直接用true、false表示布尔值，也可以通过布尔运算计算出来：

true; // 这是一个true值
false; // 这是一个false值
2 > 1; // 这是一个true值
2 >= 3; // 这是一个false值

1-4、比较运算符

实际上，JavaScript允许对任意数据类型做比较：

2 > 5; // false
5 >= 2; // true
7 == 7; // true

false == 0; // true
false === 0; // false

1-4-1、相等运算符：==和===

JavaScript在设计时，有两种比较运算符：

第一种是==比较，它会自动转换数据类型再比较，很多时候，会得到非常诡异的结果；

第二种是===比较，它不会自动转换数据类型，如果数据类型不一致，返回false，如果一致，再比较。

由于JavaScript这个设计缺陷，不要使用==比较，始终坚持使用===比较！！！

1-4-2、浮点数的相等比较

1 / 3 === (1 - 2 / 3); // false

这不是JavaScript的设计缺陷。因为计算机无法精确表示无限循环小数，而浮点数在运算过程中会产生误差。

要比较两个浮点数是否相等，只能计算它们之差的绝对值，看是否小于某个阈值：

Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true

1-4-2、NaN的比较

NaN（not a number）这个特殊的Number与所有其他值都不相等，包括它自己：

NaN === NaN; // false

唯一能判断NaN的方法是通过isNaN()函数：

isNaN(NaN); // true

1-5、BigInt

要精确表示比还大的整数，可以使用内置的BigInt类型，它的表示方法是：

1、在整数后加一个n，例如9223372036854775808n；

2、也可以使用BigInt()把Number和字符串转换成BigInt：

var a = 0x7fffffffffffffff;
console.log(a);//9223372036854776000

var bi1 = 9223372036854775807n;
var bi2 = BigInt(12345);
var bi3 = BigInt("0x7fffffffffffffff");
        
console.log(bi1 === bi3); // true
console.log(bi1 === bi2); // false

console.log(bi1 + bi2); // 9223372036854788152n
console.log(bi3 - bi1); //0n

使用BigInt可以正常进行加减乘除等运算，结果仍然是一个BigInt；

但不能把一个BigInt和一个Number放在一起运算！！！

console.log(1234567n + 3456789n); // OK
console.log(1234567n / 789n); // 1564, 除法运算结果仍然是BigInt
console.log(1234567n % 789n); // 571, 求余

console.log(1234567n + 3456789); // Uncaught TypeError: Cannot mix BigInt and other types

1-6、null和undefined

null表示一个“空”的值；

undefined表示值未定义，是变量在创建之后但在分配值之前持有的值。

var b;
console.log(b);// undefined

1-7、数组

JavaScript的数组可以包括任意数据类型：

[1, 2, 3.14, 'Hello', null, true];

创建数组的方式：

1、直接使用[xxx, xxx, xx]；（出于代码的可读性考虑，强烈建议！！！）

var arr = [1, 2, 3.14, 'Hello', null, true];

2、通过Array()函数实现：

new Array(1, 2, 3); // 创建了数组[1, 2, 3]

数组元素的访问：通过索引来访问，索引的起始值为：0！

var arr = [1, 2, 3.14, 'Hello', null, true];
arr[0]; // 返回索引为0的元素，即1
arr[5]; // 返回索引为5的元素，即true
arr[6]; // 索引超出了范围，返回undefined

1-8、对象

JavaScript的对象是一组由键-值组成的无序集合：

var person = {
    name: 'Bob',
    age: 20,
    tags: ['js', 'web', 'mobile'],
    city: 'Beijing',
    hasCar: true,
    zipcode: null
};

JavaScript对象的键都是字符串类型，值可以是任意数据类型！！！

每个键又称为对象的属性，例如，person的name属性为'Bob'，zipcode属性为null。

要获取一个对象的属性，我们用：对象变量.属性名 的方式：

person.name; // 'Bob'
person.zipcode; // null

二、变量

在计算机中，变量可以存放任意数据类型。

2-1、变量名规则

变量名是大小写英文、数字、$和_的组合，且不能用数字开头。

变量名不能是JavaScript的关键字，如if、while等。

2-1-1、_XXX变量

在 JavaScript 中， _XXX 命名的变量有多种用途和约定，但它们并没有统一的、固定的含义。以下是一些常见的使用场景和解释：

1、私有属性/方法

虽然 JavaScript 没有真正的私有属性或方法，但按照惯例，许多开发者使用单个下划线前缀来表示一个属性或方法是“私有的”或“受保护的”，意味着它应该只在类的内部使用，而不应该直接从外部访问。

class MyClass {  
  constructor() {  
    this._privateVar = 'This is private!';  
  }  
  
  getPrivateVar() {  
    return this._privateVar;  
  }  
}

这主要是一种编码风格和约定，JavaScript引擎本身不会强制执行这种“私有性”。 

2、忽略变量

在解构赋值中，下划线可以用来表示我们不想接收某个属性或元素。

const { a, b, _c, d } = { a: 1, b: 2, c: 3, d: 4 };  
console.log(a); // 1  
console.log(b); // 2  
console.log(d); // 4  
// _c is ignored and not assigned to a variable

 3、与库/架构的约定

某些库或框架可能会使用下划线前缀的变量来表示特殊的内部状态或功能。在这种情况下，你应该查阅该库或框架的文档以了解其具体含义。

总的来说，单个下划线前缀在JavaScript中并没有固定的语言级含义，它更多地是一种编码风格和约定的体现。如果你在某个项目中看到这种用法，最好查阅该项目的文档或询问团队成员以了解其具体的含义和用途。

2-2、var声明一个变量

申明一个变量用var语句：

var a; // 申明了变量a，此时a的值为undefined
var $b = 1; // 申明了变量$b，同时给$b赋值，此时$b的值为1
var s_007 = '007'; // s_007是一个字符串
var Answer = true; // Answer是一个布尔值true
var t = null; // t的值是null

2-3、给变量赋值=

在JavaScript中，使用等号=对变量进行赋值。

1、可以把任意数据类型赋值给变量；

2、同一个变量可以反复赋值；

3、同一个变量，反复赋值可以是不同类型的变量。（但是只能用var声明一次）

var a = 123; // a的值是整数123
a = 'ABC'; // a变为字符串

要显示变量的内容，可以用console.log(x)，打开Chrome的控制台就可以看到结果。 

2-4、动态语言、静态语言

变量本身类型不固定的语言称之为：动态语言；例如：javaScript。

在定义变量时必须指定变量类型的是：静态语言；如：java。静态语言在赋值的时候，如果类型不匹配，就会报错：

int a = 123; // a是整数类型变量，类型用int申明
a = "ABC"; // 错误：不能把字符串赋给整型变量

和静态语言相比，动态语言更灵活。

2-5、strict模式

javaScript设计之初，并不强制要求用var申明变量，不用var申明变量会被视为全局变量。

在同一个页面的不同的JavaScript文件中，如果都不用var申明，恰好都使用了变量i，将造成变量i互相影响，产生难以调试的错误结果。

使用var申明的变量则不是全局变量，它的范围被限制在该变量被申明的函数体内，同名变量在不同的函数体内互不冲突。

为了修补JavaScript这一严重设计缺陷，ECMA在后续规范中推出了strict模式。

在JavaScript中，"use strict" 是一种特殊的指令，用于启用严格模式。

严格模式是一种使JavaScript在更严格的条件下运行的方式，有助于捕捉常见的编码错误，使代码更安全、更易于调试。

2-5-1、strict模式的启用（强烈建议！）

在JavaScript代码的第一行写上：

'use strict';// 这是一个字符串

不支持strict模式的浏览器会把它当做一个字符串语句执行，支持strict模式的浏览器将开启strict模式运行JavaScript。

在strict模式下运行的JavaScript代码，强制通过var申明变量，未使用var申明变量就使用的，将导致运行错误：

如果浏览器支持strict模式，下面的代码将报ReferenceError错误:

2-5-2、不启用strict模式

浏览器若是不启用strict模式，则，并不强制要求用var申明变量。不用var申明变量会被视为全局变量，会有如下后果：

//"use strict";
c = "hello"; // 全局变量

function test1(){
    console.log(c);

    c = "ccccc";
    console.log(c);

    var d = "dddddd"; // 只在test1()函数体内有效。
}

function test2(){
    console.log(d); // 报错，无法访问
}

test1();
test2();

2-5-3、严格模式的一些主要特点

1、变量必须声明

在严格模式下，你不能使用未声明的变量。尝试这样做会导致错误。

"use strict";  
x = 3.14; // 这会抛出错误，因为x没有声明

2、删除变量、函数、函数参数或对象属性

严格模式禁止删除变量、函数、函数参数和对象的不可配置属性。

"use strict";  
var x = 3.14;  
delete x; // 这会抛出错误

3、重复的属性名

在严格模式下，对象字面量中不允许出现重复的属性名。

"use strict";  
var obj = {  
  p: 12,  
  p: 13 // 这会抛出错误  
};

4、八进制字面量

严格模式不允许使用八进制字面量。

"use strict";  
var x = 010; // 这会抛出错误

5、this的值

在严格模式下，全局作用域中的this是undefined，而不是全局对象。

在函数内部，如果this没有被显式指定（即没有被一个对象所拥有或调用），它的值也是undefined。

6、只读属性的复制

尝试给一个只读属性赋值会抛出错误。

7、eval和arguments的使用

严格模式对eval和arguments对象的使用也施加了一些限制。