JS的类认识 | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 7 天

前言

今天主要学习了JS中关于类与数组的初级知识，主要有：

• JS的包装类是什么
• JS原始类型如何转换
• 什么是数组？JS的数组与其他语言有什么区别
• 以及一些基本的数组操作

一. JS的数据类型

JavaScript 有 8 种数据类型，7 种原始类型+ 1 种复杂类型

• 1. String
• 2. Number
• 3. Bigint
• 4. Boolean
• 5. Undefined
• 5. Null
• 7. Symbol
• 8. Object （也是应用类型）

其中，内置对象 Function、Array、Date、RegExp、Error 等都是属于 Object 类型。
也就是说，除了七种原始数据类型外，其他的都称之为 Object 类型。

1. 包装类

除了 null 和 undefined，所有原始类型都有它们相应的对象包装类，来提供处理原始值的可用方法

一般而言，当调用一个原始类型的属性或者方法时，会进行如下操作：

• 根据原始值，创建一个原始类型对应的包装类型对象
• 调用对应的属性或者方法，返回新值
• 原来创建的包装类对象被销毁

var foo = "hi"    // String
var bar = new String("hi") // Object
foo === bar    // false

2. 数据类型转换

类型转换有两种：显式和隐式

（1）转换为String：

• toString() 方法
• String 函数
• 字符串拼接（实际是调用了 String() ）

对于toString方法，null 和 undefined 这两个值没有 toString() 方法，调用会报错
Number 类型的变量在调用 toString()时，可传递一个整数来指定进制

String函数，会将 null 直接转换为 "null"。将 undefined 直接转换为 "undefined"，反而不会报错

var foo = 123

var bar = foo.toString()
foo = foo.toString()

var a = 5
a = a.toString(2)  // "101"

foo = String(foo)

foo = foo + ""

(2) 转换Number

• Number() 函数
• 正负号（实际调用了 Number() ）
• parseInt()函数：字符串 -> 整数
• parseFloat()函数：字符串 --> 浮点数

var bar = "123";
bar = +bar; // 123
bar = -bar; // -123

bar = parseInt(bar); // 123

(3) 转换Boolean

• 逻辑运算
• 使用!!
• Boolean()函数

var bar = 123
bar = !!bar
bar = Boolean(bar)

二. 数组 Array

数组是一个内置对象，与普通对象不同的是，普通对象使用字符串作为key来查找value，而数组使用数字作为索引来操作数组中的元素

1. 与其他语言中的数组比较：

• JS中的数组采用"哈希映射"的方式来分配存储空间，通过索引来找到对应空间
• JS的数组能自动扩容，其它编程语言中数组的大小固定
• JS数组可以存储不同类型数据，其它编程语言中数组只能存储相同类型数据
• JS数组分配的存储空间不一定是连续，其它语言数组分配的存储空间是连续的
• 访问JS数组中不存在的索引时，不会报错，会返回undefined

2. 创建数组

• 字面量 []
• 构造函数

// 方式一：字面量
var arr1 = [11, 12, 13];

// 方式二：构造函数
var arr2 = new Array(); // 参数为空：创建空数组
var arr3 = new Array(4); // 一个参数，表示数组长度
var arr4 = new Array(15, 16, 17); // 多个参数，表示数组内容

3. 数组控制

push - 在末端添加元素
pop - 从末端取出一个元素

unshift - 在首端添加元素，且整个其他数组元素向后移动
shift - 取出首端的一个元素，且整个数组元素向前移动

splice() :
第一个参数 定义了开始处理元素的位置。
第二个参数 定义应删除多少元素，< 0则不删
其余参数定义要添加的新元素。

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");    // Banana,Orange,Lemon,Kiwi,Apple,Mango

4. 数组遍历

• 普通的for循环
• for..in
• for..of

var names = ["abc", "cba", "nba", "mba"]

for (var i = 0; i < names.length; i++) {
  console.log(names[i])
}

for (var index in names) {
  console.log(index, names[index])
}

for (var item of names) {
  console.log(item)
}