JavaScript变量与基本数据类型

╰半橙微兮° 2024-03-23 10:21 200阅读 0赞

![32603a12a18e4cbc839df112a3270f3c.gif][]

**目录**

一、声明变量

（1）let

（2）const

（3）var

二、基本类型

（1）undefined和null

（2）string

（3）number和bigin

（4）boolean

（5）symbol

--------------------

JavaScript（JS）是一种具有**函数优先**特性的轻量级、解释型或者说**即时编译型**的编程语言。虽然作为 Web 页面中的脚本语言被人所熟知，但是它也被用到了很多非浏览器环境中，例如 [Node.js][]、[Apache CouchDB][]、[Adobe Acrobat][] 等。进一步说，JavaScript 是一种**基于原型**、多范式、**单线程的动态语言**，并且支持面向对象、命令式和声明式（如函数式编程）风格。

## 一、声明变量 ##

### （1）let ###

let 变量名 = 值;

let声明的变量可以被多次赋值，例如：

let a = 100;  // 初始值是 100
    a = 200;	  // ok, 被重新赋值为 200

### （2）const ###

const修饰的叫常量，只能赋值一次

const b = 300; // 初始值是 300
    b = 400;	   // error, 不能再次赋值

const并不意味着它引用的内容不可修改，例如：

const c = [1,2,3];
    c[2] = 4; 	        // ok, 数组内容被修改成 [1,2,4]
    c = [5,6];			// error, 不能再次赋值

### （3）var ###

var声明的变量可以被多次赋值，例如：

var f = 100;
    f = 200;

## 二、基本类型 ##

### （1）undefined和null ###

>  *  执行表达式或函数，没有返回结果，出现 undefined
>  *  访问数组不存在的元素，访问对象不存在的属性，出现 undefined
>  *  定义变量，没有初始化，出现 undefined

例如：

console.log(1);  	// 函数没有返回值, 结果是  undefined
    let a = 10;		 	// 表达式没有返回值, 结果是 undefined
    let b = [1,2,3];
    console.log(b[10]); // 数组未定义元素是 undefined
    let c = {"name":"张三"};
    console.log(c.age); // 对象未定义属性是 undefined
    let d;
    console.log(d);		// 变量未初始化是 undefined

二者共同点

>  *  都没有属性、方法
>  *  二者合称 Nullish

二者区别

>  *  undefined 由 js 产生
>  *  null 由程序员提供

### （2）string ###

js字符串有三种写法：

let a = "hello";  // 双引号
    let b = "world";  // 单引号
    let c = `hello`;  // 反引号

HTML代码，用java和js中的表示对比：

java表示，比较繁琐：

String s2 = """
        <a href="1.html">超链接</a>""";

js比较灵活：

let s1 = '<a href="1.html">超链接</a>';
    
    let s2 = `<a href="1.html">超链接</a>`;

模板字符串（Template strings）

需求：拼接URL的请求参数，如：

> /test?name=zhang&age=18  
> /test?name=li&age=20

传统方法拼接：

let name = ; // zhang li ...
    let age = ; // 18 20 ...
    
    let uri = "/test?name=" + name + "&age=" + age;

模板字符串方式：

let name = ; // zhang li ...
    let age = ; // 18 20 ...
    
    let uri = `/test?name=${name}&age=${age}`;

### （3）number和bigin ###

number类型标识的是双精度浮点小数，例如：

10 / 3;   // 结果 3.3333333333333335

既然是浮点小数，那么可以除零：

10 / 0;	  // 结果 Infinity 正无穷大
    -10 / 0;  // 结果 -Infinity 负无穷大

浮点小数都有运算精度问题，例如：

2.0 - 1.1; // 结果 0.8999999999999999

字符串转数字

parseInt("10"); 	// 结果是数字 10 
    parseInt("10.5");	// 结果是数字 10, 去除了小数部分
    parseInt("10") / 3; // 结果仍视为 number 浮点数, 因此结果为 3.3333333333333335
    
    parseInt("abc");	// 转换失败，结果是特殊值 NaN (Not a Number)

要表示真正的整数，需要用bigint，数字的结尾用n表示它是一个bigint类型

10n / 3n;			// 结果 3n, 按整数除法处理

### （4）boolean ###

在js中，并不是boolean才能用于条件判断，可以在if语句中使用【数字】、【字符串】...作为判断

let b = 1;
    
    if(b) { // true
        console.log("进入了");
    }

这时就有一个规则，当需要条件判断时，这个值被当做true还是false，当做true的值归类为**truthy**，当做false的值归类为**falsy**

下面的值是falsy：

>  *  **`false`**
>  *  **`Nullish (null, undefined)`**
>  *  **`0, 0n, NaN`**
>  *  **```"" '' `` ``` 即长度为零的字符串**

剩余的值绝大部分都是truthy

有几个容易被当做falsy实际上是truthy的

>  *  **`"false", "0"` 即字符串的 false 和 字符串的零**
>  *  **`[]` 空数组**
>  *  **`{}` 空对象**

### **（5）symbol** ###

使用较少，需要的可以在下面网址查阅[JavaScript | MDN (mozilla.org)![icon-default.png_t_N2N8][]https://developer.mozilla.org/zh-CN/docs/Web/JavaScript][JavaScript _ MDN _mozilla.org_icon-default.png_t_N2N8_https_developer.mozilla.org_zh-CN_docs_Web_JavaScript]

[32603a12a18e4cbc839df112a3270f3c.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/a1541da5b290406c8b0a563725996e8f.png
[Node.js]: https://developer.mozilla.org/zh-CN/docs/Glossary/Node.js
[Apache CouchDB]: https://couchdb.apache.org/
[Adobe Acrobat]: https://opensource.adobe.com/dc-acrobat-sdk-docs/acrobatsdk/
[icon-default.png_t_N2N8]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/4d3b519a0bef4cb697dd07274e00020f.png
[JavaScript _ MDN _mozilla.org_icon-default.png_t_N2N8_https_developer.mozilla.org_zh-CN_docs_Web_JavaScript]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript