▲ 点击上方蓝字关注我▲文/景朝霞来源公号 /朝霞的光影笔记ID /zhaoxiajingjing图/自己画
目录JS数据类型的一些细节点0 / JS 中的数据类型的一些细节点(1)JS中的数据类型(2)number 的一些细节(3)字符串的一些细节点(4)symbol 唯一值(5)BigInt 大数2 / 栈内存 Stack & 堆内存 Heap(1)题很简单(2)第一题(3)第二题(4)第三题(5)堆栈内存作用3 / 作业
0 / JS 中的数据类型的一些细节点
(1)JS中的数据类型
基本数据类型
1、string，可以用双引号、单引号、反引号
2、number，比如：值有123/1.2/NaN/Infinity/-Infinity...
3、boolean，值为true/false
4、null，值为null
5、undefined，值为undefined
6、bigint
7、symbol，用于创建唯一值
引用数据类型
1、object例如：
①{}普通对象
②[]数组对象
③ 日期对
④ 正则，比如：/^\d+$/
⑤ ......
2、function
① 普通函数
② 构造函数
③ 箭头函数
④ 生成器函数
⑤……
(2)number 的一些细节
number类型的值有：
1、正数、负数、零、小数......
2、NaNnot a number 不是一个有效数字，但是它是number类型的
xxx，你不是一个人。不是一个人，那是什么都有可能了
①NaN和NaN本身不相等，和其他值也不相等
②isNaN(vlaue)检测当前值是否不是一个有效数字，不是有效数字返回true；反之，是有效数字返回false
③Object.is(NaN, NaN)结果是true，它的内部做了特殊处理
3、Infinity无限大-Infinity无限小
console.log(typeof NaN); //=> 'number' console.log(typeof Infinity); //=> 'number' console.log(NaN == NaN); //=> false console.log(NaN === NaN); //=> false console.log(Object.is(NaN, NaN)); //=> true
△ NaN
Object.is/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/is
把其它数据类型值转换为number类型：
1、显式转换：Number(vlaue)或者parseInt(value)/parseFloat(value)他们底层处理的规则不一样
2、隐式转换(逻辑用的是Number(value)的)
① 数学运算
② 基于==比较的时候
③isNaN(value)
④ ....
(3)字符串的一些细节点
string字符串：单引号、双引号、反引号，里面的内容都是字符串
其它值转换为字符串：
1、显式转换：String(value)或者(vlaue).toString()涉及到数据类型检测，后面再说
2、隐式转换：加号除了数学运算，还会产生字符串拼接
+ 加号是斜杠青年
let n = '10',m = 10; console.log(10 + n); console.log(+n); console.log(++n); let obj = {}; console.log(10 + obj); console.log(10 + new Number(10)); console.log(10 + {id:'zhaoxiajingjing'});
△ 结果是多少？
+作为斜杠青年，本职工作是数学运算符，还斜杠担任了字符串拼接的工作，那它什么时候切换角色呢？
+只有一边有内容时：比如+n，把值转换为数字；++n/n++也会把值转换为数字，然后再进行前置/后置自增的运算
+两边都有内容时：
1、"+" 有一边出现了字符串，就会变成字符串拼接
2、"+" 有一边是对象，则也可能会成为字符串拼接：
△ 图1.1_"+"作为一枚斜杠青年
其中：①③得到的是数字10，原因是：{...}没有参与运算，浏览器认为这是一个代码块，计算的是+10
而：console.log({}+10)有一个括号把{}+10包起来了，它会认为这是一个整体再进行运算
那么，对象在做数学运算时的底层机制：
(1)检测对象的Symbol.toPrimitive【primitive [ˈprɪmətɪv] n.原始的】 这个属性值，如果有则基于这个值进行运算，如果没有，走下一步
(2)检测对象的valueOf()这个值【原始值/基本类型值】，如果有则基于这个值进行运算，如果不是原始值，走下一步
(3)获取对象的toString()把其变为字符串 => 如果是"+"处理，则看到字符串了，变为字符串拼接
(4)如果最后就是想要得到的数字，则再把字符串转换为数字即可
let obj = {[Symbol.toPrimitive]:function (){return 10; } }; console.log(10 + obj); //=> 20
△ 对象获得的是数字
而，console.log(10 + new Number(10))的结果就是数字20，是因为new Number(10).valueOf()获得的原始值就是数字10
∴ 答案是：
let n = '10',m = 10; console.log(10 + n); //=> 字符串拼接：'1010' console.log(+n); //=> 把值转换为数字：10 console.log(++n); //=> 把值转换为数字，在前置自增：11 let obj = {}; console.log(10 + obj); //=> '10[object Object]' console.log(10 + new Number(10)); //=> 20 console.log(10 + {id:'zhaoxiajingjing'}); //=> '10[object Object]'
△ + 是一枚斜杠青年
那么，请问：i=i+1i+=1;++i/i++这三个一样吗？
其中：i=i+1和i+=1是一样的；++i/i++大部分情况是与前面的一样的。
如果i的值是字符串则不一样了：
i=i+1i+=1会处理为字符串拼接
++i/i++先把值转为数字，再进行前置/后置累加
(4)symbol 唯一值
API：/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol
Symbol()：创建唯一值
Symbol()函数会返回symbol类型的值
new Symbol()报错：Uncaught TypeError: Symbol is not a constructor
△ 图1.2_symbol类型
Symbol.toPrimitive
API /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive
Symbol.toPrimitive是一个内置的Symbol值，它是作为对象的函数值属性存在的，当一个对象转换为对应的原始值时，会调用次函数
let obj = {[Symbol.toPrimitive]:function (hint){console.log(hint); // hint 取值："number/string/default" return 10; } }; console.log(10 + obj); //=> 20hint输出 'default' Number(obj); //=> hint输出 'number' obj的原始值 10 String(obj); //=> hint输出 'string' obj的原始值 '10'
△ Symbol.toPrimitive
(5)BigInt 大数
API：/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/BigInt
△ 图1.3_bigint
2 / 栈内存 Stack & 堆内存 Heap
(1)题很简单
var a = 12; var b = a; b = 13; console.log(a); ----------------- var a = {n: 12}; var b = a; b['n'] = 13; console.log(a.n); ----------------- var a = {n: 12}; var b = a; b = {n: 13}; console.log(a.n);
△ 做题很简单，关键要了解里面的机制
(2)第一题
我们新建一个index.html文件，在里面引入1.js文件，然后打开浏览器访问index.html文件时，浏览器会渲染JS
那么JS可以执行的环境：
① 浏览器：浏览器的内核=>JS渲染引擎
② 移动端Hybrid混合APP => webview 基于 webkit内核
③ Node
④ ……
浏览器会专门开辟一块内存来执行JS代码 =>栈内存，执行环境栈ECStack(Execution Context Stack)
会有一个供全局代码执行的区域：全局执行上下文，EC(G)(Execution Context Global)
形成上下文的目的：区分不同区域的代码执行
比如：全局执行上下文、函数执行上下文……
执行上下文会进入到执行环境栈中运行，当浏览器关闭时全局执行上下文就会出栈销毁
△图1.4_第一题简图
var a = 12;
第一步：创建值
① 基本值直接存到栈内存中
② 引用值是单独开辟一块新的内存来存储
第二步：声明变量 declare
第三步：变量和值关联在一起，定义defined
∴var c;只进行变量声明declare，并未定义undefined，console.log(c);//=>undefined
(3)第二题
△图1.5_第二题简图
创建值：
1、 基本数据类型直接存储到栈里面
2、 引用数据类型：
(1)单独开辟一块内存heap 堆内存
(2)每一个堆内存都有一个16进制地址 JS中不能获取到这个地址，16进制以0x开头
(3)把键值对分别存储到堆中
(4)把16进制地址放到栈中存储：方便后期变量的关联
引用数据类型：变量操作的都是对 堆内存地址 的引用
b['n']=13;
① b 基于地址0x000001找到堆内存
② 把堆内存中属性名为n的属性值改为13
(4)第三题
△图1.6_第三题简图
(5)堆栈内存作用
栈内存or堆内存，都是浏览器从计算机中分配出来的内存，开辟的越多，电脑性能越慢 => 性能优化：内存优化
栈内存作用：代码执行和存储基本类型值
堆内存作用：存储引用数据类型
3 / 作业
var a = {n: 1}; var b = a; a.x = a = {n: 2}; console.log(a.x); console.log(b);
△ 第一题
一般情况下：a=b=xxx的运算顺序是：
①b=xxx
②a=xxx
但是，当a.x=b=xxx时，a.x中的"点"是成员访问，它的运算符优先级很高：
①a.x = xxx
②b = xxx
var x = [12, 23]; function fn(y) {y[0] = 100;y = [100];y[1] = 200;console.log(y); } fn(x); console.log(x);
△ 第二题
- end -
请问：//在JS里面是什么？
运算符优先级API：/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence
//这是单行注释
/\d+/这是正则
