JavaScript变量和数据类型

Rsquo
158 阅读7分钟

1. 变量的理解

  • 一个变量，就是一个用于存放数值的容器，这个数值可能是一个用于计算的数字，或者是一个句子中的字符串，或者其他任意的数据，变量的独特之处在于它存放的数值是可以改变的

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

    • 例如，变量 message 可以被想象成一个标有 “message” 的盒子，盒子里面的值为 “Hello!”

    • 并且，这个盒子的值，我们想改变多少次，就可以改变多少次

    image.png

2. 变量的定义

  • 分成两个步骤

    • 变量声明
    • 变量赋值

  • 其他的定义方法

    • 先声明, 再赋值
    • 同时声明多个变量 
      // 定义一个变量
// 第一步： 变量的声明
// var关键字
// 第二步: 变量的赋值(使用=赋值即可)
// var currentTime = "16:00"

// 其他的写法一:
// var currentTime;
// currentTime = "16:02";
// currentTime = "17:00";

// 其他的写法二: 同时声明多个变量(不推荐, 阅读性比较差)
// var name, age, height
// name = "kobe"
// age = 18
// height = 1.88
var name = "kobe", age = 18, height = 1.88;

// 补充:
// 1.当打印变量时, 实际上是在打印变量中保存的值
// 2.console.log(参数1, 参数2, 参数3...........)
console.log(name, age, height);

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

    1. 第一个字符必须是一个字母、下划线（ _ ）或一个美元符号（ $ ）

    2. 其他字符可以是字母、下划线、美元符号或数字

    3. 不能使用关键字和保留字命名：

    4. 变量严格区分大小写

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

    • 使用驼峰标识(小驼峰)

      驼峰.png

    • 见名知意

3. 变量的注意事项

  • 如果一个变量未声明就使用的话（name除外，name默认有在window对象上）, 那么会报错

    image.png

  • 如果一个变量有声明, 但是没有赋值, 那么值undefined

    image.png

  • 不使用var也可以声明变量(不推荐)

    // 如果不使用var来声明一个变量, 也是可以声明成功的, 并且这个变量会被加入window对象
address = "北京市"
console.log(address)

4. 数据类型

4.1 动态类型

  • JavaScript 中的值都具有特定的类型

    • 可以将值赋值给一个变量，那么这个变量就具备了特定的类型
    • 一个变量可以在前一刻是个字符串，下一刻就存储一个数字
    • 允许这种操作的编程语言，例如 JavaScript，被称为“动态类型”（dynamically typed）的编程语言

4.2 常见的数据类型

在 JavaScript 中有 8 种基本的数据类型（ 7 种原始类型 和 1 种复杂类型(object)）

4.2.1 Number

  • number 类型代表整数和浮点数

    var age = 18 // 整数
var height = 1.88 // 浮点数

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

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

    • Infinity：代表数学概念中的 无穷大 ∞，也可以表示-Infinity
      • 比如 1/0 得到的就是无穷大
    • NaN：NaN 代表一个计算错误，它是一个错误的操作所得到的结果
      • 比如 字符串和一个数字相乘
    // Infinity
var num1 = Infinity
var num2 = 1 / 0
console.log(num1, num2)

  • 进制表示

    var num3 = 100 // 十进制
// 了解
var num4 = 0x100 // 十六进制
var num5 = 0o100 // 八进制
var num6 = 0b100 // 二进制
console.log(num4, num5, num6) // 256 64 4

  • 数字表示的范围：

    • 最小正数值：Number.MIN_VALUE，这个值为： 5e-324，小于这个的数字会被转化为0
    • 最大正数值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
    var max = Number.MAX_VALUE
var min = Number.MIN_VALUE
console.log(max, min) // 1.7976931348623157e+308 5e-324

  • isNaN

    • 用于判断是否不是一个数字。不是数字返回true，是数字返回false。
    // NaN: not a number(不是一个数字)
var result = 3 * "abc"
console.log(result) // NaN
console.log(isNaN(result)) // true

4.2.2 String

  • String基本使用

    var name = "coderwhy"
var address = "广州市"
var intro = "认真是一种可怕的力量!"

  • 别的引号的使用

    // 单引号
var message1 = 'Hello World'
// 双引号
var message2 = "Hello World"
// 反引号(ES6新增语法)
// ${变量/表达式}
var message3 = `Hello World, ${name}, ${2 + 3}`

  • 转义字符: 字符串本身中包含引号

    • 前后的引号类型必须一致：

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

    • 转义

    image.png

    var message4 = 'my name is "abc"'
console.log(message4) // my name is "abc"

var message5 = 'my name \\ \'\' is "abc"'
console.log(message5) // my name \ '' is "abc"

  • 字符串本身有的方法和属性

    var message = "Hello World"
console.log(message.length) // 11

  • 字符串操作

    var nickname = "kobe"
var info = "my name is "
var infoStr = `my name is ${nickname}` // my name is kobe
var infoStr2 = info + nickname
console.log(infoStr, infoStr2) // my name is kobe

4.2.3 Boolean

  • Boolean（布尔）类型用于表示真假：
    • Boolean 类型仅包含两个值：true 和 false。
    var isLogin = false
var isAdmin = true

4.2.4 Undefined

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

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

  • 下面的代码是一样的

    var message
var info = undefined // 不推荐

  • 两个注意事项：

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

    2. 不要显示的将一个变量赋值为undefined

  • 如果变量刚开始什么都没有，可以初始化为 0、空字符串、null等值

4.2.5 Null

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

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

  • null和undefined的关系：

    • undefined通常只有在一个变量声明但是未初始化时，它的默认值是undefined才会用到

    • 并且不推荐直接给一个变量赋值为undefined，所以很少主动来使用

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

    var age = 0
var num = 0
var message = "" // 空字符串
var isAdmin = false

// Null存在的意义就是对 对象进行初始化的, 并且在转成Boolean类型时, 会转成false
var book = null
console.log(typeof book) // object

4.2.6 Object

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

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

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

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

    var person = {
  name: "kobe",
  age: 18,
  height: 1.88
}
console.log(person)

// 对象类型中某一个属性
console.log(person.name)  // kobe

4.3 数据类型总结

JavaScript 中有八种基本的数据类型（object 为复杂数据类型，也称为引用类型，其他为基本数据类型，也称为原始类型）

  • number 用于任何类型的数字：整数或浮点数
  • string 用于字符串：一个字符串可以包含 0 个或多个字符，所以没有单独的单字符类型
  • boolean 用于 true 和 false
  • undefined 用于未定义的值 —— 只有一个 undefined 值的独立类型
  • null 用于未知的值 —— 只有一个 null 值的独立类型
  • object 用于更复杂的数据结构
  • symbol 用于唯一的标识符（后续补充）
  • bigint 用于任意长度的整数（后续补充）

4.4 数据类型的转换

在开发中，经常需要对数据类型进行转换，大多数情况下，运算符和函数会自动将赋予它们的值转换为正确的类型，这是一种隐式转换，我们也可以通过显式的方式来对数据类型进行转换

4.4.1 字符串类型String的转换

  • 隐式转换

    • 一个字符串和另一个字符串进行 + 操作

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

    • 某些函数的执行也会自动将参数转为字符串类型

      • 比如console.log函数

  • 显式转换

    • 调用String()函数

    • 调用toString()方法

    var num1 = 123
var age = 18
var isAdmin = true

// 1.转换方式一: 隐式转换(用的非常多)
var num1Str = num1 + ""
var ageStr = age + ""
var isAdminStr = isAdmin + ""
console.log(typeof num1Str, typeof ageStr, typeof isAdminStr)  // string string string

// 2.转换方式一: 显示转换
var num1Str2 = String(num1)
console.log(typeof num1Str2)  // string

4.4.2 数字类型Number的转换

  • 隐式转换

    • 在算数运算中，通常会将其他类型转换成数字类型来进行运算

      • 比如 "6" / "2"

      • 但是如果是 + 运算，并且其中一边有字符串，那么还是按照字符串来连接的

  • 显式转换

    • 使用Number()函数来进行显式的转换；

  • 其他类型转换数字的规则 转换数字的规则.png

    // 方式一: 隐式转换(用的很少)
var num1 = "8"
var num2 = "4"
var result1 = num1 + num2 // 84
console.log(typeof result1) // string

var result2 = num1 * num2
console.log(result2) // 32

// 方式二: 显示转换(Number())
var result3 = Number(num1)
console.log(typeof result3) // number

// 其他类型转成数字类型的规则:
console.log(Number(undefined)) // NaN
console.log(Number(true)) // 1
console.log(Number(false)) // 0
console.log(Number(null)) // 0
console.log(Number("abc123")) // NaN
console.log(Number("         123       ")) // 123
console.log(Number("")) // 0

4.4.3 布尔类型Boolean的转换

  • 布尔（boolean）类型转换发生在逻辑运算中，也可以通过调用 Boolean(value) 显式地进行转换

  • 转换规则如下：

    • 直观上为“空”的值（如 0、空字符串、null、undefined 和 NaN）将变为 false

    • 其他值变成 true

      boolean转换规则.png

  • 注意：包含 0 的字符串 "0" 是 true

    // 方式一: 隐式转换
// 分支语句
var isAdmin = true
var num1 = 123 // true

// 方式二: 显示转换
console.log(Boolean(num1), Boolean(undefined))

// 转换有如下的规则: 
// 直观上为空的值, 转成Boolean类型都是false
// 直观上为空的值: 0/""/undefined/null/NaN -> false

// 注意事项
console.log(Boolean("")) // false
console.log(Boolean("0")) // true

5. typeof操作符

  • 作用：确定任意变量的数据类型

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

    • "undefined"表示值未定义

    • "boolean"表示值为布尔值

    • "string"表示值为字符串

    • "number"表示值为数值

    • "object"表示值为对象(而不是函数)或 null

    • "function"表示值为函数

    • “symbol”表示值为符号

  • typeof是操作符, 不是一个函数

    • typeof(x)，它与 typeof x 相同

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

      // 1.typeof基本演练
var info = "why"
// info = 18
// info = {}
console.log( typeof info )  // string 

// 2.typeof的其他类型
var age
console.log(typeof age)  // undefined

// 3.null的操作
var address = null
console.log(typeof address)  // object


// 4.()的作用
// ()表示的是调用函数
// alert()

// ()将某一个表达式当做一个整体
var result = (2 + 3) * 4

console.log(typeof(info))
avatar
文章
阅读
粉丝