JavaScript - JavaScript数据类型和数据类型区别

javascript作为客户端语言

按照JS的相关语法，去操作页面中的元素或者浏览器中的一些功能。

• ES（ECMAscript）：描述了该语言的语法和基本对象。
• DOM（Document Object Module）：文档对象模型，描述处理网页内容的方法和接口。
• BOM（Browser Object Module）：浏览器对象模型，描述与浏览器进行交互的方法和接口。

变量

• 定义方式：
  • ES3：var、function（创建函数）
  • ES6 ：let、 const（存储的值不能被修改，可以理解为常量）
    • 模块导入：import（导入模块）import A from "b.js"
    • 创建类： class class Fn {}
    • Symbol：创建唯一值 let a = Symbol(1)
• 严谨的命名规范：
  • 严格区分大小写
  • 使用数字、字母、下划线（_）、$ 命名，但是字不能作为开头
    • _box,一般公共变量都是 _ 开头
    • $box,一般JQ获取的以$开头
  • 驼峰命名：首字母小写，其余么一个有意义的单词的首字母都要大写（命名尽可能语义化，使用英文单词）
    • 常用缩写：add / insert / create / new(新增) 、 update （修改）delete/del / remove / rm （删除）、sel/select /query /get（查询）、info（信息）…
  • 不能用关键字(当下有特殊含义的是关键字)和保留字（未来可能称为关键字的词）

JavaScript数据类型

基本数据类型（原始值类型）

• 数字 number：正数、负数、小数、0、NaN、BigInt
• 字符串string：基于 单引号/双引号/反引号「模板字符串」 包起来的都是字符串
• 布尔 boolean：true/false
• 空对象指针： null
• 未定义： undefined
• Symble:唯一值
  • static Symbol
  • Symbol.prototype
• bigint：大范围的整数值

引用数据类型

• 标准普通对象（纯粹对象） object：
  • {} 普通对象：用花括号包裹的键值对
• 标准特殊对象：Array / RegExp / Date / Error / Math / ArrayBuffer / DataView / Set/Map …
  • [] 数组对象：用方括号包裹，数组项用逗号分割
  • /^$/ 正则对象
  • Math 数学函数对象
  • Date 日期对象
  • …
• 非标准特殊对象：基于构造函数「或者Object」创在出来的原始值对象类型的格式信息，类型属于对象类型

  • Object:特殊类型(EG：变量名)属性名需要中括号包裹,=> [{}]:111

  • Number：正数，负数，浮点数，NaN，+/-Infinity.

  • String

  • Boolean

  • Symbol

    • 唯一值
    • 把Symbol作为对象，提供的很多静态属性方法，是JavaScript很多知识的底层实现原理。
    • vuex和redux中我们需要派发很多行为标识，我们可以把这些行为标识统一管理，为了保证行为标识的唯一性，可以基于symbol处理。
    • …

  • BigInt:大数， 超过Number.MAX_SAFE_INTERGER（最大安全数字）的数字进行运算，运算结果不一定正确。
    

  • …

• 可调用对象「实现了call方法」 function
  • 普通函数 function fn(){}
  • 构造函数
  • 箭头函数
  • 生成器函数
  • …

添加特殊类型属性名：

• for-in: 迭代无法迭代symbol类型的私有属性。
• Object.keys(obj) : 获取当前对象所有非symbol类型的私有属性（返回包函属性名的数组）。
• Object.getOwnPropertySymbols(obj): 获取symbol类型的私有属性（返回包函属性名的数组）。
• a.concat(b):拼接数组。
• Refect.ownKeys(obj):获取所有属性，包含所有类型,私有原型上的（返回包函属性名的数组）。

Symbol作用2：把Symbol作为对象，提供的很多静态属性方法，是JavaScript很多知识的底层实现原理。
Symbol.toPrimitive/hasInstance/toStringTag/iterator/asyncIterator

数据类型区别（堆栈底层机制）

基本数据类型值 VS 引用数据类型值

• 基本类型值：按值操作，因为它结构简单，所以直接是存在栈内存的值存储空间当中，以后所有的操作直接操作值就可以。=> 直接操作值（直接操作的是值），所以叫做值类型
• 引用数据类型：必须先开辟一个堆内存，操作的都是堆内存16进制内存的引用地址，这样的话，就可能会到导致引用类型值会出现两个变量共用同一个堆内存地址，管控同一个堆，导致其中一个变量把堆内存中东西修改，另一个就会受影响。=> 操作堆内存的16进制引用地址（按引用地址操作的）

浏览器执行JS代码：

1. 从电脑中分配出一块内存，用来执行代码（栈内存 => Stack）
2. 浏览器分配一个主线程用来自上而下执行JS代码

基本数据类型值创建过程（let a = 12）：

1. 创建变量a，放到当前栈内存变量存储区域中
2. 创建一个值12、把它存储到当前栈内存值存储区域中
3. = 为赋值，赋值就是让变量和值相互关联的过程

引用类型值的存储：

1. 在当前栈内存中分配出一块新内存，用来存储引用类型值（堆内存 =》heap）内存有一个16进制地址
2. 把对象中的键值对（属性名：属性值）依次存储到堆内存中
3. 把堆内存地址和变量关联起来

EG1以及解题思路图：

EG:2

let n = [10,20];
let m = n;
let x = m;
m[0] = 100;
x = [30, 40];
x[0] = 200;
m = x;
m[1] = 300;
n[2] = 400;
console.log(n, m, x);

解题思路图：

EG3:

let a= {
    n： 1
}
let  b = a;
a.x = a = {
    n: 2
};
console.log(a.x);
console.log(b)

解题思路图：