later-zc notes

Appearance

一. 认识 JS 变量 ​

程序中变量的数据 ​

在我们平时开发中，使用最多的并不是固定的数据，而是会变换的数据：

如：购物车商品的数量、价格的计算...
如：微信聊天中消息条数、时间、语音的长度、头像、名称...

变化数据的记录 – 变量 ​

如果我们希望记录某一个之后会变化的数据，在 JS 中我们可以定义一个变量：

一个变量，就是一个用于存放数值的容器。

变量可以指在电脑存储器里存在值的被命名的存储空间。

在程序设计中，变量（Variable）是指一个包含部分已知或未知数值或信息（即一个值）的存储地址。

这个数值可能是一个用于计算的数字，或是一个句子中的字符串，或其他任意的数据。

变量的独特之处在于它存放的数值是可以改变的。

我们可以把变量想象成一个盒子，盒子里面装着我们的数据，我们需要给盒子进行一个特性的名称。

例如：变量 message 可以被想象成一个标有 “message” 的盒子，盒子里面的值为 “Hello!”。
并且这个盒子的值，我们想改变多少次，就可以改变多少次。

命名格式 ​

在 JS 中如何命名一个变量呢？包含两部分：

变量的声明：

在 JS 中声明一个变量使用 var 关键字（Variable 缩写）（后续 ES6 中还有 let、const 声明方式）

变量的赋值：

使用 = 给变量进行赋值

js
var name = 'later-zc'

这个过程也可以分开操作：

js
var name;
name = 'later-zc'

同时声明多个变量：

js
var name, age, height;
name = 'later-zc'
age = 18
height = 1.78

var 
  name = 'later-zc', 
  age = 18,
  height = 1.78

命名规范 ​

变量命名规则（必须遵守）：

首字符必须是一个字母、下划线 _ 或一个美元符号 $，其他字符可以是字母、下划线、美元符号或数字；

不能使用关键字和保留字命名；

变量严格区分大小写；

变量命名规范（建议遵守）：

多个单词使用驼峰标识；

赋值 = 两边都加上一个空格；

一条语句结束后加上 ; 分号，也有很多人的习惯是不加；

变量应该做到见名知意；

变量的练习 ​

定义变量，保存两个数字，并且对两个变量的数字进行交换

方式一：使用临时变量

方式二：不使用临时变量

js
var 
  num1 = 10,
  num2 = 20;
num1 = num1 + num2 // num1: 30  num2: 20
num2 = num1 - num2 // num1: 30  num2: 10
num1 = num1 - num2 // num1: 20  num2: 10

变量的使用注意 ​

⚠️ 注意

  • 注意一：如果一个变量未声明（declaration）就直接使用，那么会报变量未定义的错误：xxx is not defined。

  • 注意二：如果一个变量有声明，但是没有赋值，那么默认值是 undefined。

    js
    var info
console.log(info) // => undefined

  • 注意三：如果没有使用 var 声明变量也可以，但是不推荐（实际会被添加到 window 对象上）。

二. JS 的数据类型 ​

JS 中的值都具有特定的类型。

如：字符串、数字...

我们可以将值赋值给一个变量，那么这个变量就具备了特定的类型。

一个变量可以在前一刻是个字符串，下一刻就存储一个数字。

允许这种操作的编程语言，例如 JS，被称为“动态类型”（dynamically typed）的编程语言。

JS 有 8 种基本的数据类型（7 种原始类型 和 1 种复杂类型）。

Number、String、Boolean、Null、Undefined、Object、BigInt、Symbol

Number 类型 ​

Number 类型代表整数和浮点数。

js
var intNum = 18, floatNum = 18.8

数字可以有很多操作，比如，乘法 *、除法 /、加法 +、减法 - 等。

js
var num1 = 10 * 2, num2 = 10 / 4

除了常规的数字，还包括所谓的“特殊数值（“special numeric values”）”也属于 Number 类型。

  • Infinity：代表数学概念中的无穷大 ∞，也可以表示 -Infinity
  • 如：1/0 得到的就是无穷大

NaN：表示一个计算错误，它是一个错误的操作所得到的结果。

如：字符串和一个数字相乘

在之前我们学习过进制的概念，数字类型也有其他的进制表示方法：

十进制、十六进制、二进制、八进制

js
10    // 十进制
0x10  // 十六进制
0o10  // 八进制
0b10  // 二进制

数字表示的范围：

最小正数值：Number.MAX_VALUE，这个值为： 5e-324，小于这个的数字会被转化为 0。
最大正数值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308。

isNaN()：用于判断是否不是一个数字。不是数字返回 true，是数字返回 false。

String 类型 ​

在开发中我们经常会有一些文本需要表示，这个时候我们会使用字符串 String：

如：人的姓名：later，地址：广州市，简介：认真是一种可怕的力量...

JS 中的字符串必须被括在引号里，有三种包含字符串的方式。

双引号、单引号、反引号（ES6 新增语法）

js
var str1 = "双引号"
var str2 = '单引号'
var str3 = `反引号`

前后的引号类型必须一致。

如果在字符串里面本身包括单引号，可以使用双引号。

如果在字符串里面本身包括双引号，可以使用单引号。

js
var msg = '我是"later_先森"'

字符串中的转义字符

除了普通的可打印字符以外，一些有特殊功能的字符可以通过转义字符的形式放入字符串中：

转义字符表示符号
\'单引号
\''双引号
\\反斜杠
\n换行符
\r回车符
\t制表符
\b退格符

转义字符串开发中只有特殊场景才会用到

⚠️ 注意

要表示（反斜杠）\ 符号时，需要在前面再加一个 \，因为 \ 会被 JS 引擎当作转义符使用。

字符串的属性和方法

字符串还有很多细节和操作方法，在后续了解面向对象后，再详细学习，这里我们先掌握几个基本的字符串使用操作。

  • 操作一：字符串拼接，通过 + 运算符

    js
    var str1 = 'hello', str2 = 'world'
var str3 = str1 + str2

  • 操作二：获取字符串长度

    js
    var str = 'hello world'
str.length // 11

Boolean 类型 ​

Boolean（布尔）类型用于表示真假：

如：判断一个账号是否登录、是否是管理员、是否具备某个权限、是否拥有某个英雄、皮肤...

布尔（Boolean）是计算机科学中的逻辑数据类型，以发明布尔代数的数学家乔治·布尔为名。

Boolean 类型仅包含两个值：true 和 false。

js
var flag = true, oflag = false

Undefined 类型 ​

Undefined 类型只有一个值，就是特殊值：undefined。

如果我们声明一个变量，但是没有对其进行初始化时，它默认就是 undefined。

js
var msg // 等价于 => var msg = undefined
console.log(msg) // undefined

⚠️ 注意

最好在变量定义的时候进行初始化，而不只是声明一个变量。

不要显式的将一个变量赋值为 undefined，如果变量刚开始什么都没有，根据后续可能变化值的类型，初始化为 0、''、null 等值。

Object 类型 ​

Object 类型是一个特殊的类型，我们通常把它称为引用类型或复杂类型。

其他的数据类型我们通常称之为 “原始类型”，因为它们的值只包含一个单独的内容（字符串、数字或者其他）。

Object 往往可以表示一组数据，是其他数据的一个集合。

在 JS 中我们可以使用 花括号 {} 的方式来表示一个对象。

js
var obj = {
  name: 'later',
  age: '23'
}

Null 类型 ​

Null 类型同样只有一个值，即特殊值 null。

Null 类型通常用来表示一个对象为空，所以通常我们在给一个对象进行初始化时，会赋值为 null。

js
typeof null // object，早期设计上所遗留下来的问题

var obj = null

obj = {
  name: 'later',
  age: 18
}

null 和 undefined 的关系

undefined 通常只有在一个变量声明但未初始化时，它的默认值是 undefined 才会用到。 并且我们不推荐直接给一个变量赋值为 undefined，所以很少主动来使用。

null 值常用，当一个变量准备保存一个对象，但这个对象不确定时，可以先赋值为 null。

数据类型总结 ​

JS 中有 8 种数据类型，7种基本（原始）数据类型，1种引用（复杂）类型数据。

Number 用于任何类型的数字：整数或浮点数。

String 用于字符串：一个字符串可以包含0个或多个字符，所以没有单独的单字符类型。

Boolean 用于 true 和 false。

Undefined 用于未定义的值：只有一个 undefined 值的独立类型。

Object 用于更复杂的数据结构，是其他数据的集合。

Null 用于未知的对象类型值：只有一个 null 值的独立类型。

后续再了解的两种类型：

Symbol 用于唯一的标识符、Bigint 用于任意长度的整数。

三. typeof 操作符 ​

因为 ECMAScript 的类型系统是松散的，所以需要一种手段来确定任意变量的数据类型。

typeof 操作符就是为此而生的

对一个值使用 typeof 操作符，会返回下列字符串之一：

'undefined' 表示值未定义

js
typeof undefined  // 'undefined'

'boolean' 表示值为布尔值

js
typeof true // 'boolean'

'string' 表示值为字符串

js
typeof 'hello'  // 'string'

'number' 表示值为数值

js
typeof 123  // 'number'
typeof NaN  // 'number'

'object' 表示值为对象 或 null

js
typeof null           //  object
typeof {}             //  object
typeof []             //  object
typeof new Date()     //  object
typeof /\d+/          //  object

⚠️ 注意

null 一般是将一个对象赋值为 null，是 JS 发展历史所遗留下来的问题。

null 存在的意义就是为存储对象类型的变量进行初始化赋值的。

'function' 表示值为函数

js
typeof function () {} // 'function'

'symbol' 表示值为符号

js
typeof Symbol() //  symbol

'bigint' 表示值为大整数

js
typeof BigInt(123)  // 'bigint'

⚠️ 注意

还有另外一种语法：typeof(x)，它等价于 typeof x。

typeof 是一个操作符，并非是一个函数，typeof() 并不是函数调用，只是将后续的内容当做一个整体而已。

四. 数据类型转换 ​

在开发中，我们可能会在不同的数据类型之间进行某些操作：

如：一个 String 类型的数字和另外一个 Number 类型的数字进行运算；
如：一个 String 类型的文本和另外一个 Number 类型的数字进行相加；
如：一个 String 类型或 Number 类型的内容，当做一个 Boolean 类型来进行判断。

也就是在开发中，我们会经常需要对数据类型进行转换：

隐式转换：大多数情况下，运算符和函数会自动将赋予它们的值转换为正确的类型，这是一种隐式转换。

显式转换：我们也可以，对数据类型进行显式的转换。

接下来看一下数据类型之间的转换：

String、Number、Boolean 类型

字符串类型的转换 ​

其他类型经常需要转换成字符串类型，如：和字符串拼接在一起 或 使用字符串中的方法。

  • 转换方式一：隐式转换

    一个字符串和另一个字符串进行 + 操作： 如果 + 运算符左右两边有一个是字符串，那么另一边会自动转换成字符串类型进行拼接。

    某些函数的执行也会自动将参数转为字符串类型，比如 console.log 函数。

  • 转换方式二：显式转换

    调用 String() 函数
    调用 toString() 方法
    方法和函数的区别，后续在学习面向对象时会了解到

数值类型的转换 ​

其他类型也可能会转成数字类型。

  • 转换方式一：隐式转换

    在算数运算中，通常会将其他类型转换成数字类型来进行运算，如："6" / "2"；
    但是如果是 + 运算，并且其中一边有字符串，那么还是按照字符串来连接的；

  • 转换方式二：显式转换

    • 也可以使用 Number() 函数来进行显式的转换。

其他类型转换数字的规则：

值转换后的值
undefinedNaN
null0
true / false1 / 0
string去掉首尾空格后的纯数字字符中含有的数字。
如果剩余字符串为空，则转换结果为0。
否则，将会从剩余字符串中"读取"数字。当类型转换出现 error 时返回 NaN。

布尔类型的转换 ​

布尔类型转换是最简单的。

它发生在逻辑运算中，但是也可以通过调用 Boolean(value) 显式地进行转换。

也可以使用 !! 进行转化为 boolean，且同时不会改变其原来的布尔值。

转换规则如下：

直观上为“空”的值将变为 false，如：0、空字符串、null、undefined、NaN；

其他值变成 true。

空对象 {} 、空数组 [] 转成 Boolean 类型都是 true。

值转化后
0、null、undefined、NaN、""false
其他值true

⚠️ 注意

一些编程语言（如 php）视字符串0（"0"）为 false，但在 JS 中，非空字符串为 true，包括字符串0（"0"）。

如有转载或CV请标注本站原文地址

Copyright © 2024-present later-zc