JavaScript学习之基础语法(二)

数据类型

在 JavaScript 中定义变量的时候使用的是 let/var，例如：

let num = 18
let str = '18'

这两种方式定义的变量有什么区别呢？这里定义的两个变量 num 和 str 的数据类型不同。例如：描述年龄和工资通过数字来描述，注册某个网站的时候使用的账号和昵称可以是英文字母的组合。不同的数据是由不同的类型来描述的。

下面我们就开始学习 JavaScript 中的数据类型。

JavaScript 中的数据类型可以分为两大类：基本数据类型、复杂数据类型。

  • 简单数据类型
    • Number
    • String
    • Boolean
    • null
    • undefined
    • BigInt - 新增
    • Symbol - 新增
  • 复杂数据类型
    • Object

简单数据类型

简单数据类型又叫基本数据类型、原始数据类型(MDN)。这里我们先来学习简单数据类型中的前5种。

Number 类型

在 JavaScript 中整数(5, 6, 10)和浮点数(11.5, 1.1)都属于 Number 类型，也就是所有的数值类型都是 Number 类型。

  • 数值字面量
    • 数值的固定值表示法
    • 通俗点说就是用字面的形式来代表这种类型的数据
    • 110、1024、60.5
  • 数值判断
    • NaN：not a number，JavaScript 中一个特殊的值，即非数字
    • isNaN：is not a number，JavaScript 中的一个方法用来判断一个值是否不是数字
  • 示例
    // 返回 NaN，不是一个数字
let n = 5 * 'a';
// 返回 false，即不管带不带引号都是一个数字
isNaN('5');
isNaN(5);
// 返回 true，不是一个数字
isNaN('a');

注意： 在控制台中打印的数值类型的值是有颜色的。

String 类型

  • 把多个字符组成一串，就是一个字符串。
  • 字符串字面量：字面形式来代表字符串数据
    '程序猿'，"程序媛"
  • 定义字符串的时候用单引号和双引号都可以
    let userName = 'laohong';
let nickName = "老洪";

    在定义字符串的时候我们推荐使用单引号，这是因为 HTML 中属性值使用双引号包裹，有的时候 HTML 和 JavaScript 可能会嵌套书写，为了区分 HTML 的属性和 JavaScript 中的字符串，所以这里始终推荐字符串使用单引号。

  • 转义符

    你尝试打印 '老洪'，注意打印的结果中要包含单引号。实现不了吧？这是因为引号在 JavaScript 中有特殊的含义，如果我们想要打印引号的话，可以取消引号在 JavaScript 中的特殊含义

    let userName = ''老洪'';
console.log(userName);

    \ 在这里的作用是取消后面修饰符号的特殊含义，类似的内容，见下表：

Boolean 类型

布尔类型是一种专门为了编程设置的一种语法，主要用来表示一个结果的成立与否，其值只有两个 true (真) 和 false (假)。

  • Boolean 字面量： true 和 false，区分大小写
  • 计算机内部存储：true 为1，false 为0

undefined 类型

undefined 类型只有一个值：undefined。代表变量定义了，但是没有赋值。

var a;
// 输出 undefined
console.log(a);
​
// or
let b;
// 输出 undefined
console.log(b);

null 类型

null 类型只有一个值：null。代表变量赋值了，但是值代表的是空。

var a = null;
let b = null;​
// 变量a和b都赋值了，值为 null
 

Symbol（符号）类型

Symbol（符号）类型是 ECMAScript 6 新增的原始数据类型，它具有唯一性和不变性，比如用作对象属性可以保证不会覆盖现有属性。

  • 基本用法

    Symbol 没有字面量语法，只能使用 Symbol() 函数来初始化一个 Symbol 值

    const sym = Symbol()
console.log(typeof sym)    // symbol
console.log(sym)    // Symbol()
    const fooSym = Symbol('foo')
console.log(fooSym)    // Symbol(foo)
    const bar1Sym = Symbol('bar'), bar2Sym = Symbol('bar')
console.log(bar1Sym === bar2Sym)    // false，证明不会覆盖现有任何属性
    // 作为对象属性
const obj = {}
obj[bar1Sym] = 'test1'
obj[bar2Sym] = 'test2'
console.log(obj)    // {Symbol(bar): "test1", Symbol(bar): "test2"}

  • 全局符号注册表

    如果需要在多个地方共享和重用的某个符号实例，可以用一个字符串作为键，在全局符号注册表中通过 Symbol.for(strParam) 创建一个符号来使用。

    Symbol.for() 对每个字符串执行幂等操作。使用某个字符串调用 Symbol.for 时，会在全局注册表中检查是否已经存在对应的符号，如果不存在则创建一个新的符号实例并添加到全局注册表中，如果存在则返回已有符号的实例。这点和通过 Symbol 创建的符号不一样。

    Symbol.for 的参数必须是字符串，如果传递了非字符串类型，默认会调用 toString 方法转成字符串。

    使用 Symbol.keyFor() 方法来查询全局注册表中指定符号的字符串键，如果查询的不是全局符号，则返回 undefined。

    const fooGlobalSym = Symbol.for('foo')
const otherFooGlobalSym = Symbol.for('foo')
console.log(fooGlobalSym === otherFooGlobalSym)    // true，证明重用已有符号
    const fooSym = Symbol('foo')
console.log(fooSym === fooGlobalSym)    // false，即使采用相同的字符串，Symbol 和 Symbol.for 创建的符号也不相等
console.log(Symbol.keyFor(fooGlobalSym))    // foo
console.log(Symbol.keyFor(fooSym))    // undefined

  • 使用符号作为属性

    凡是可以使用字符串或数值作为属性的地方，都可以使用符号。使用符号作为对象属性是最好通过变量保存符号，否则在后面使用 obj[key] 索引时会很困难。

    • Object.getOwnPropertyNames() ，返回对象实例所有的常规属性数组
    • Object.getOwnPropertySymbols()，返回对象实例的所有符号属性数组
    • Object.getOwnPropertyDescriptors()，返回同时包含常规和符号属性的属性描述符对象
    • Reflect.ownKeys()，返回两种类型的键
    const obj = { t1: 't1' }
const t2Sym = Symbol('t2')
obj[t2Sym] = 't2Sym'
console.log(obj)    // {t1: "t1", Symbol(t2): "t2Sym"}
console.log(Object.getOwnPropertyNames(obj))    // ['t1']
console.log(Object.getOwnPropertySymbols(obj))    // [Symbol(t2)]
console.log(Object.getOwnPropertyDescriptors(obj))    // 同时包含常规和符号的属性描述符对象
console.log(Reflect.ownKeys(obj))    // ['t1', Symbol(t2)]

复杂数据类型

复杂数据类型：Object。因为比较复杂所以后面专门学习。

获取变量的类型

在 JavaScript 中定义变量的时候是通过 var/let 定义的变量，也就是在定义变量的时候没有确定数据的类型。

let a = 10;
a = 'abc';

甚至在代码执行的过程中可以对变量重新赋值不同的类型(这样是不推荐的，我们希望同一个变量中的数据是同一数据类型的)。

我们如果想要知道某个变量中存储的数据类型，可以通过关键字 typeof 来获取。

用法：

typeof 字面量/变量
typeof (字面量/变量)

注意： typeof 是关键字。

let a = 10;
console.log(typeof a); // number
console.log(typeof 'Hello'); // string
console.log(typeof true); // boolean
console.log(typeof undefined); // undefined
console.log(typeof null); // object

注意： typeof 返回的结果是字符串类型。

快速查看数据类型

如何使用谷歌浏览器，快速地查看数据类型？

在控制台通过 console.log() 打印数据，字符串的颜色是黑色的，数值类型是蓝色的，布尔类型也是紫色的，undefined 和 null 是灰色的(如果看到黑色的说明是字符串)

注释

其实学习任何一门语言之前，最应该先学习的语法就是注释语法，这样我们就可以在代码中写一些说明和笔记之类的 JavaScript 里面的注释有两种：单行注释、多行注释。

单行注释

  • 用来描述下面一个或多行代码的作用
  • VSCode 中的快捷键：Ctrl + /
    // 这是一个变量
let nickName = 'js';

多行注释

  • 用来注释多条代码
  • VSCode 中的快捷键：Shift+ Alt + A
    /*
  var age = 18;
  var name = 'zs';
  console.log(name, age);
*/

posted on 2022-11-01 16:59  梁飞宇  阅读(15)  评论(0)    收藏  举报