【前端】JavaScript 数据类型

最新推荐文章于 2022-11-17 21:42:43 发布

RogerQianpeng

最新推荐文章于 2022-11-17 21:42:43 发布

阅读量269

点赞数

分类专栏：前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/RogerQianpeng/article/details/122626326

版权

前端专栏收录该内容

29 篇文章 0 订阅

订阅专栏

前言

JavaScript基础部分，学习笔记
源网站：javascript.info

1 原始类型的方法

还记得在上一篇中的“对象-原始值转换”吗？
在js中，对象可以变为原始值，而原始类型也可以使用对象方法。
比如：

let str = "Hello";

alert( str.toUpperCase() ); // HELLO

that’s all
题外话，有一点挺有意思的，原始类型很轻，而封装了各种方法的对象会比较重。
所以，原始类型是必要的，但我们也常用其相应对象的各种方法，于是在访问原始类型的属性或方法时，会创建一个包含原始类型其值的特殊对象，然后使用方法，之后再将特殊对象销毁。

2 数字类型

没有什么复杂的内容，直接贴总结：
在这里插入图片描述

3 字符串

还是直接贴总结。
需要掌握3种引号，特别是``反引号及${}的使用，了解不同字符的编码方式，以及一些常用的字符串方法（详细信息可以查阅其他资料或者搜索）
在这里插入图片描述
MDN手册

4 数组

数组操作：

末端：push，pop
首段：shift，unshift
末端效率一般更高

遍历数组：

for (let i=0; i<arr.length; i++）
for (let item of arr)
for (let i in arr)【永远不要使用这个】

数组比较：

不要用==
要逐项循环比较

5 数组方法

即各种数组的方法，这里直接贴原文的总结。
在这里插入图片描述

原文链接
 MDN手册

6 Iterable object（可迭代对象）

什么是可迭代对象：可以用for..of的就是可迭代对象。它是一种数组的泛化。数组是可迭代的，字符串是可迭代的，一些对象也可以自定义实现可迭代。
下面是个例子：

let range = {
  from: 1,
  to: 5,

  [Symbol.iterator]() {
    this.current = this.from;
    return this;
  },

  next() {
    if (this.current <= this.to) {
      return { done: false, value: this.current++ };
    } else {
      return { done: true };
    }
  }
};

for (let num of range) {
  alert(num); // 1, 然后是 2, 3, 4, 5
}

它是如何实现可迭代的呢？可以直接阅读总结：
在这里插入图片描述
即，通过创建迭代器，实现next()方法，从而使得for..of可以成功使用
这一部分有一定的复杂性，但没有明显的困难性，主要是我到目前为止在实际中尚未使用，故而比较生疏。

7 Map and Set（映射和集合）

在这一章讲了map是什么，set是什么，以及他们的方法和属性。属于是对数据类型的介绍（其实本章学习笔记中的内容就是一些数据类型的概念、方法、属性，没什么特别好讲的），这里还是直接贴总结了：
在这里插入图片描述

8 WeakMap and WeakSet（弱映射和弱集合）

正如其名，就是与map和set所类似的，weak在哪里？weak在其内存特征，一般是用作“辅助”数据结构，会比较迅速地自动清除掉。
这一块我还没怎么使用过，所以感触不深，在此也贴一下总结，后续需要可以再作翻阅。
在这里插入图片描述

9 Object.keys, values, entries

map有，object也有，这些方法都是可用的
在这里插入图片描述
object不等同于数组，所以需要将对象转换为数组才能使用map和filter这样的方法
如果我们想应用它们，那么我们可以使用 Object.entries，然后使用 Object.fromEntries
下面是一个例子：

let prices = {
  banana: 1,
  orange: 2,
  meat: 4,
};

let doublePrices = Object.fromEntries(
  // 转换为数组，之后使用 map 方法，然后通过 fromEntries 再转回到对象
  Object.entries(prices).map(([key, value]) => [key, value * 2])
);

alert(doublePrices.meat); // 8

10 解构赋值

啥是结构？就是吧对象，或者数组给拆开来，映射到多个变量上。
简单来说，以前我们是把等号右边的数值赋值给左边的一个变量。
现在其实也是，我们把等号右边的复杂的数组或变量赋值给左边的不止一个的变量。
对于对象：
let {prop : varName = default, ...rest} = object
对于数组：
let [item1 = default, item2, ...rest] = array
正如代码所示，等号右边是一堆东西，等号左边是一堆东西，把等号右边的给拆了赋值给左边，即是解构赋值。
这里的...rest不是文字上的省略，而是代码上的写法。
比如对于数组，item1存储array中的第一项，rest是一个数组存储了array的剩余所有项（对象的话则rest是一个对象存储了object剩余的所有属性）。

11 日期和时间

这也没啥好介绍的，具体需要请直接查阅资料查看Date对象。
MDN Date

12 JSON方法，toJSON

JSON是一种数据格式，js提供了一些JSON方法，可以实现简单的JSON和对象的转换。
不过这一块更建议使用qs库等第三方库实现，js提供的只有一些最基础的对象类型，比较复杂的嵌套对象之类的需要不少修改。
当然多了解一下也是好的。

最后

在本篇，主要是对js数据类型的一些学习。
这一块概念和理论居多，记忆的点比较多但不适合死记硬背，需要理解的点倒是不多。
不过js的学习应该会暂时减缓一些步伐，要开始一些实战的开发，不能只学知识而不运用，那学了也是白学。
js会作为日常少量阅读学习的内容持续学下去，同时会学习ts的基础运用。然后再看看es6的相关内容，再学学ts的提高内容。
最后，再次感谢原文的作者，内容非常高质量。也非常感谢将其翻译成中文的前辈大佬们，翻译得非常棒，通俗易懂、简洁明了、很接地气，十分感谢。
源网站：javascript.info